Responsive design and 4 steps to consider

                   rick1.png

 

Guest post by: Rick Barron, program manager, user experience

Mobile Social and Analytics Product Unit

 

 

What is responsive design for mobile?

Responsive design is a technique that enables one page to satisfy user’s needs regardless of the page width of their browsing device. Responsive pages morph themselves on the fly to scale and reposition content. They also use refactor interface behavior in an effort to deliver a satisfying user experience for all view-ports— including phones, tablets, and desktops. Responsive design is like having several page designs in one—with the user getting the one that’s best for them. The version of the experience delivered to the user is based upon the width of their browser.

How can you tell if a site has been structured in responsive design? Select any of the sites below on a desktop browser and slowly move the browser widow from right to left. You should see the layout adjust itself to fit the new width of the browser, even if you make the page as skinny as the resolution of a mobile phone.

The reason why responsive design is so effective is because there are so many different screen sizes and devices that your website will be viewed on. It doesn’t do you any good to have only one version of your website. It is time to face reality, mobile and tablets are increasing in usage over desktop usage. Not addressing this market will only result in the user having difficulty viewing your site via mobile-based browsing and then they may not view it at all.

 

A few techniques to consider in responsive design

 

1-Think of mobile first

Starting with a mobile first approach and designing with progressive enhancement covers all the bases. Taking this approach helps you focus on and prioritize the constraints of mobile design. This means the default presentation and base content is mobile, thus optimizing for the simplest devices first.

Designing for the mobile experience should be the starting point, not the end. It forces you to focus on the essential content, and to build optimized, fast-loading mobile experiences that are progressively enhanced, with the user at the forefront.

Mobile first design is an approach that lends itself to a responsive world. It simply means that you create first and foremost for mobile, making the desktop your secondary focus. In many cases your mobile traffic volume has not yet over taken your desktop volume, so you may think that mobile first is not a wise move. When you consider a few of the practical design realities, mobile first makes a lot of sense:

• Mobile screens are smaller, but higher resolution images can be ‘wider’ in mobile than in desktop

• Mobile contexts often have shorter attention spans because users have less time and patience

• Since mobile pages are often single column, they require specific and prudent hierarchy of information

• Smartphones will have the least content of all your break points, if your message works for smartphones, it will only work better for tablets and desktops; this is called progressive enhancement

These four factors alone illustrate why mobile first design is smart. It forces the tough decisions and this helps create more concise content, more communicative imagery and more thoughtful choices around what’s most and least important.

 

2-Content strategy

The aim of responsive design is to present the best user experience possible in any context. Building a responsive website is the perfect time to re-evaluate your content to make it more readable and accessible, regardless of what device it's being viewed on.  

 

Developing an information architecture and content strategy means putting the content first by creating a framework and structure based on research about your users and their needs via surveys or usability studies.

 

Taking the approach to start with the minimum amount of content needed to make the design useful is a solid foundation, to which you can thoughtfully add larger screens and resolutions. Another element to keep in mind is question how each content type fits into the goals of the site and establishing what the content is intended to accomplish.

 

3-Sketch and Prototype

Rick3.png

 

Alright, you have gathered your content inventory and your strategy is in place. Now what? Grab pencil and paper and start sketching.Sketching out ideas helps you organize your layout and ensure that it scales up smoothly.

With so many variations in screen sizes, resolutions and device capabilities in the marketplace today, you need to plan for more layouts. By using sketching as part of your  responsive design planning, you can take your rough ideas, expose them to discussion and critique, refine and reformulate them, and ultimately lay the foundations on which to wireframe and prototype later in the project.

There are plenty of sketching resources available. See ‘Sketching Resources’ at the end of this article for a few recommendations.  As you build your set of sketches your next step is to begin prototyping. This can be a simple HTML layout (or a working wireframe), with the goal of determining if content structure, navigation, markup and breakpoints all make sense together and work within the specified context. I read a great article that discusses the finer points of prototyping by Jonathan Smiley, that I think will help you.

 

4-Breakpoints

Rick3.png

 

A common idea is that breakpoints should be based on common screen sizes (mobile, tablet and desktop). However, if you develop just for specific device resolutions, you’re not embracing the potential of responsive design, which is focused around fluidity, flexibility and adaptability.

For the web, content is king. The same principle should apply for mobile. In other words, you should set break-points according to content instead of devices. Review your design and determine natural break points and adjust. You’re fighting a losing battle if you try to cater for each new resolution with a specified breakpoint, especially because new devices are introduced constantly.

So what does a "content out" approach to breakpoints mean?

 

"It means defining your underpinning design structure from your content, and then focusing on what happens in between 'layouts,'" says designer Mark Boulton.

 

Tim Kadlec, author of Implementing Responsive Design, suggests one way to approach breakpoints is to resize your browser and see where there is room for improvement, allowing the content to guide you. The author recommends that you “Start with a mobile view (around 300px) and size up the browser window until things start to look like they need adjustment. That's your first breakpoint and set a media query for that and address the issues. Repeat this until you have accounted for an acceptable range. Setting your breakpoints in EmsandRemsrather  than pixels also ensures a high degree of flexibility.”

 

Here’s a pretty nice tool to help test your responsive design, either by ‘width only, or ‘device types’. Just enter your website's URL into the address bar inside the form field where it says ‘Test your own site…type in the url and hit enter. 

 

                                       Rick4.jpg

 

For additional information regarding responsive design and mobile usage, check out the following list:


 Responsive design

Breakpoints & Media Queries

Mobile Usage

Sketching Resources

 

 

Rick_photo.jpeg

Rick Barron is a Program Manager for various aspects of the PM team and pan-HPSW UX/UI team and working on UX projects associated with HP.com. He has worked in high tech for 20+ years working in roles involving web design, usability studies, and mobile marketing. Rick has held roles at Motorola Mobility, Symantec and Sun Microsystems 

Leave a Comment

We encourage you to share your comments on this post. Comments are moderated and will be reviewed
and posted as promptly as possible during regular business hours

To ensure your comment is published, be sure to follow the Community Guidelines.

Be sure to enter a unique name. You can't reuse a name that's already in use.
Be sure to enter a unique email address. You can't reuse an email address that's already in use.
Type the characters you see in the picture above.Type the words you hear.
Search
Showing results for 
Search instead for 
Do you mean 
About the Author
Kobi Eisenberg is a Product Manager for HP Anywhere, a new mobile platform allowing to develop, manage and consume mobile apps. Kobi has a...
Featured


Follow Us
The opinions expressed above are the personal opinions of the authors, not of HP. By using this site, you accept the Terms of Use and Rules of Participation.