Adobe Creative Cloud

December 3, 2015 /UX/UI Design /

Best Practices for Responsive UX

Responsive design is here to stay, with the huge diversity of devices and screen sizes only set to increase. Google favourably indexes mobile-friendly design, so there are more reasons than ever to take on this approach. In a 2014 study it was estimated that only 15% of sites were fully responsive. This means demand to design great, responsive user experiences will continue to grow.

As a workflow, designing responsive sites can seem daunting, especially if you are new to the process. Designing for multiple screen sizes, the constraints of small screens, and considering touch, all add complexity into the mix that takes us beyond creating fixed width sites. Responsive design workflows are still evolving, however there are some tried and tested approaches that have emerged since Ethan Marcotte’s seminal article.

Content First

Content forms the raw material of the web experience. The words, images, information and videos contained on the web will become the building blocks for user flows and exploration. It is crucial to design with the actual content, or as close to it as possible, rather than using dummy content such as lorem ipsum text.

Space constraints on smaller screens mean that one risk of not doing this is that inputting final content ‘breaks’ the design. This can lead to text wrapping and awkward layouts, which are a poor user experience. As a rule of thumb, line lengths for comfortable reading should be between 45 and 75 characters. Keep this in mind for larger screens. It can be tempting to use all that screen real estate, but the primary goal is a good reading experience. Working with the actual content will assist in creating great UX.

Data Informed Designs

Analytics are our friend when designing responsive sites. Freehaha tools such as Google Analytics  provide insight into a variety of relevant issues. Taking a look at the increase in mobile traffic over a time period by comparing a date range is an effective way to show the need for a responsive approach. Being able to show this specifically for the site you are working on gives a true picture of the situation, distinct from general web trends.

Redesigning a site to be responsive is a great opportunity to take a look at existing pages and content, and strategically remove what isn’t working. Analytics will provide data on time spent on a page, bounce rates and which pages are most visited. Search analytics can tell you the terms users are coming to your site with. A word of caution – as with all quantitative data, careful human analysis is needed to make the right calls. It is safe to say though, that if a page is not getting any traffic, it might be time to reconsider it.

Start Small

Targeting the most constrained screen size at the beginning of the design process assists in defining a clear information hierarchy and UX strategy. Limits can be frustrating but they can also drive ingenious problem solving. This approach is sometimes referred to as ‘mobile first.’ A risk of not taking this approach is finding out much further down the line that something isn’t working or won’t fit on small screens – and at that point the cost and effort of backtracking is much higher.

In the context of designing a responsive site, a better name for mobile first might be ‘tightest constraints as a starting point, in tandem with all screen sizes.’ Mobile first could be considered a bit of a mis-nomer. As Jeremy Keith puts it, “Progressive enhancement isn’t about designing for the lowest common denominator. It’s just about starting there.”  The key idea is that all screen sizes have to symbiotically work together and will all affect each other, however the smallest size is the most constrained.

Designing for Varying Inputs

Responsive websites will be used on a wide variety of devices – wherever a browser can go, so can the site! A knock-on effect of this is that people will interact with the site in a variety of ways – keyboard and mouse, stylus, touch, and with assistive technologies like screen readers.

Tactics for building these considerations in as you design include:

  • Design to scale – even when sketching, being constrained to the physical size is instructive.
  • Make use of touch target guidelines and templates – frequently check the design against these.
  • Further along in the process, try tabbing through the site using only the keyboard, making sure that menus are usable and focus states make sense.
  • When in doubt, be generous with touch target sizes! Remember, fingers are far less accurate than a mouse pointer.

Make it Your Own

In conclusion, there are lots of tried and true approaches to keep in mind when designing a responsive site. Clear data and content strategy will provide a framework for moving the project forward. Thinking about the constraints of smaller screens at the outset and bearing in mind the variety of ways users will interact with the site also play a role in creating great UX. Responsive design process is not one-size-fits-all, so adapt these workflows for your specific projects and purposes. Happy designing!

UX/UI Design

Meet Project Comet, Adobe’s Complete UX and Prototyping Solution!

Design and prototype websites and mobile apps faster than ever with Project Comet, the first all-in-one solution for UX designers. Coming in early 2016.

SIGN UP TO STAY INFORMED

Join the discussion

  • By rale - 9:59 AM on December 7, 2015  

    There are about 150 characters in one line here. Preaching water much, Adobe?
    http://i.imgur.com/VVx9tUo.png

    • By stretch - 7:42 AM on December 10, 2015  

      That jumped right out at me, too.

  • By richkaplan - 4:26 PM on December 16, 2015  

    Thanks Lynn. I love the focus on content first. One big obstacle to elegant responsive UX has got to be the sheer multitude of mobile devices your responsive design has to work on. I find it both amusing and sad that even big name brands, like Staples or Nike, can’t deliver a decent UX on tablets. So UX designers need to test, which is no easy feat. That’s why there’s the Open Device Lab movement, which aims to create free access testing labs in all major cities. But there’s also my company’s online mobile testing lab, Mobilizer, which can quickly reveal where your gorgeous design succeeds or fails on all leading devices.