Responsive Web design has vexed people who build prototypes since the techniques came into use several years ago. While responsive design is an extremely elegant way to handle coding for multiple device types when executed with HTML and CSS, the prototyping tools available to UX professionals have not delivered testable or demonstrable experiences of the same quality. That changed recently with the adaptive views feature that is part of the new Axure RP 7.
Creating responsive prototypes without writing code is now possible with Axure RP 7’s new adaptive views feature. The feature enables you to create one page in Axure RP with several “views.” The view displayed on a given device is determined by the width of the device’s screen.
Read more...
The off-canvas flyout menu has taken over as the primary navigation pattern for mobile layouts — even some desktop layouts have jumped on board. And for good reason: An off-canvas menu is a great way to maintain context while giving the user a lot of additional information.
In this article, we’ll talk about why off-canvas has become so successful as a navigation pattern and show its potential to be so much more. From filters on product list pages to shopping carts to lists of recently viewed articles, the potential of this pattern is bound only by our drive to pioneer. It’s time that we explore just how far off canvas we can go.
Read more...
2013 was a busy year for me for conferences and travel. It was also the year I attended my first (and second) WordCamp. The first was WordCamp UK in July, where I met Mike Little, one of the two co-founders of WordPress.
Three months later, I was honored to meet the other co-founder, Matt Mullenweg, twice in three weeks: at WordCamp Europe in Leiden, and at The Summit. I was lucky enough to have both Matt and Mike participate in interviews for this post about WordPress, including its history, community and future.
Read more...
Whenever you start a project, you have to repeat certain tasks and set up certain structures: create new folders, choose a framework, set up your development tasks. But configuring settings once and reusing them would be simpler.
An easy way to achieve this is by using some kind of generator — for example, Yeoman Generator — or tools such as INIT, which can perfectly coexist with and even be used through a generator.
Read more...
Responsive design is about building a website with a grid-based layout, images that resize and media queries, as described by Ethan Marcotte. After Marcotte defined the technique, responsive design frameworks began to emerge that incorporated these principles.
Mostly based on CSS and JavaScript, many of these frameworks are open-source, free to download and quickly customizable. Some of the most popular today are Bootstrap and Foundation, which we’ll focus on in this article. As responsive design frameworks became popular, a big debate emerged: Why would a professional designer use a responsive design framework?
Read more...
Type design is equal parts suffering and euphoria. It is a walk along a winding road that goes on for many weeks and months before it’s done. A type design brief is like a charter path: It asks you questions, and the answers will guide you to where you want to be.
It will not make the walk much shorter, but the chances of getting lost will be much lower. Below are six questions that will shape the typeface through its first moments of creation and serve as guiding principles through the various stages of the design.
Read more...
I started with style guides like any other obsessive-compulsive designer: with the desire to make it simple to maintain and grow a design. Plus, knowing which component to use in a given situation is nice, too, right? Since making this a regular practice, I’ve found it’s been like having a nice combination of a CSS class and a pattern library all in one.
One of the first questions, understandably, is why use Fireworks for a style guide? Well, for me, it’s mostly because of symbols and styles. Sure, you could use similar things in Photoshop, but I find Fireworks’ implementation to be smarter.
Read more...
Fortunately, learning is not limited to only a small minority of people anymore; it is not even limited to visiting a school or a university. The Internet makes it possible for us to distribute knowledge at a small price, and is full of resources to expand everyone's knowledge on an enormous variety of topics.
Since learning is a lifelong task that doesn't stop after pursuing a certain academic certificate, this round-up is not only dedicated to beginners. It's for everyone who wants to become an expert in a certain field or is simply curious about the Web and the latest tools and techniques around them.
Read more...
Session storage is a new feature introduced by the W3C’s “Web Storage” specification. It’s supported in Internet Explorer 8+, Firefox, Chrome, Safari and Opera Desktop (for a complete list, please consult “Can I Use”).
var total = parseInt( sessionStorage.getItem( "total" ) );
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem( "total", updatedTotal ); // '240', a string
In this series of articles, we’ll cover in depth a practical implementation of session storage by creating a complete e-commerce shopping cart with the sessionStorage object and jQuery.
Read more...
Smashing Newsletter
