Responsive design is the latest trend to take over the Internet, and some have asked whether or not it is just a passing fad. As a general rule, we believe that the difference between a passing trend and one that is here to stay is whether or not it provides a better user experience. Given that the purpose of responsive design is to do exactly that, we don’t think it’s going anywhere anytime soon.
That being said, because of all the hype surrounding it, many companies have jumped on the bandwagon too quickly and have created responsive layouts that fail to fulfill their singular purpose: provide easy navigation regardless of the device from which the site is being accessed. Lately we’ve seen a sudden surge in people who claim that responsive layouts are on their way out, but their lists of complaints are based entirely on cases in which the design has been done wrong. Like any tool, responsive design is only as useful as you make it. If you’re considering adopting an adjustable layout for your site, you should consult our list of the three most common pitfalls and solutions before you move forward.
DON’T : Hide content
The entire point of having a responsive layout is to make your content available to more people, more often. Hiding content is therefore completely counterintuitive and should never be seen as the solution to creating a clean layout.
Example:
In trying to keep up with the latest trend, the creators of this website seem to have forgotten the golden rule for a great user experience: intuitive navigation. In the mobile version of their site, the top navigation menu disappears, thwarting the user’s access to different information. There is no point of creating a responsive design if it limits the access that users have to the content you provide. Don’t fall prey to this common mistake. Instead, find a solution to provide the same great user experience on a smaller screen.
Do: Change the way you present the information.
To avoid becoming like the example provided above, you’ll need to find a different solution to provide both a clean layout and content accessibility. A great example of a simple solution to this problem can be taken from the site we created for Chantelle Lingerie, using Magento’s customizable platform. Our analysis phase had determined the top categories that users searched for when browsing through lingerie, which gave us our top navigation bar.
In the mobile version of the site, this navigation bar appeared cluttered and overwhelming, so we switched it for a dropdown menu instead.
It’s a simple solution, but it works. No one said you have to reinvent the wheel, all you have to do is find new ways to use it!
<h3DON’T: Use the same approach you used for non-responsive design.
Smashing Magazine made an interesting point in an article they published in May entitled Design Process in the Responsive Age. They write, “When we create a desktop-sized, fixed-width site layout in Photoshop and hand it to a developer to interpret into HTML/CSS, we are asking the developer to make a lot of design decisions—possibly without even realizing it.”
The truth is, if this was your approach prior to responsive design, you were behind before you even began. Whether your site is responsive or not, a strategic analysis should be performed to determine the hierarchy of content, the site structure and navigation. Design and strategy are two different things. The former applies to the creation of an aesthetically pleasing site while the latter makes sure that this site is optimized for functionality and user experience.
DO: Apply a strategic approach to the design.
If you weren’t doing this already, it’s time to start. At Le Site, our approach to new projects has always been to perform an in-depth analysis of the client’s current web presence, their brand identity, user expectations, target audience, competition and goals. This analysis is crucial to the creation of a site that will perform optimally and provide users with the information they seek in a streamlined and easy fashion. For e-Commerce sites, the Strategy Phase is essential to uncover opportunities for increased sales or the prevention of abandoned carts, among other things.
Strategy will determine the hierarchy of content, which will in turn determine site structure. In the same way that providing a developer with a psd is a mistake because it forces them to make many design decisions without even knowing it, skipping the wireframe phase is like asking a designer to make crucial strategic decisions that can often make or break the success of a site.
When designing a responsive site, this strategic approach needs to be extended to the creation of wireframes for how the site will display on smaller screens. These decisions should not be left up to designers, who might not understand the strategic importance of displaying certain elements at certain times.
DON’T: Rely on specific screen sizes to trigger layout changes.
There are a number of good reasons why you should never design your site based on the screen dimensions of popular devices. For one, it completely defeats the purpose of responsive design, which is to provide a beautiful layout on EVERY device. For two, we all know that technology is subject to frequent changes, so taking this approach is just setting yourself up for future headaches. Do yourself a favour and design a site in which the display is determined from a content perspective, not a device perspective.
DO: Use design breakpoints instead.
Using design breakpoints will help you to ensure a beautiful layout across a wide variety of browsers, screen sizes and devices. The site structure we created for Browns Shoes is a great example of how content display (rather than device), should determine when a breakpoint should occur. If you want to read more about it, we invite you to check out an article by The Internet Retailer that features our work for Browns.
By using this approach, you guarantee that your site will still look beautiful when the next new thing comes around. If you need more guidance to help determine when breakpoints should occur, we highly recommend that you read Implementing Responsive Design by Tim Kadlec.