Responsive design theory – mindset to implementation, where to start

Posted on

Earlier in the week my blog post about the recent Google mobile-friendly algorithm change resulted in a question around the challenge posed by the sheer number of different mobile devices on the market. How does one design for all these variations including new models hitting the market in the future? My reply ended up worthy as a blog post, I felt.

How to design for all mobile devices?

One approach is to figure out what combinations cover the majority of your visitors and spending a greater amount of time optimising for those cases. By combinations I’m referring to browser versions, operating systems, device types and screen sizes.

iStock_000044735166_Large.jpg

If you have analytics data, use this to work out what applies to the website in question. If you don’t have any analytics – if it’s a new website for example – guesstimate using target audience persona profile information and researching on the internet.

Then design how various aspects of the User Interface (UI) fit into particular common/average screen widths. At what screen width does a horizontal navigation not work for example. Based on these criteria and particular screen sizes, you would adjust the design to be most effective - in a User eXperience (UX) sense.

Focusing on beautiful UI too much, as opposed to UX, is probably a common mistake. A good UX doesn’t always equal graphical-UI! It’s about readability and interaction (such as clicking on links) - how it works functionally.

So maybe there’s a better approach which will result in a more future-proof user experience. Progressive enhancement – could this be it?

If you’ve heard of graceful degradation this is the opposite mindset. At face value it may seem like two approaches to achieve the same result, but the difference in mindset could make all the difference.

In a nutshell, progressive enhancement is where one designs for readability and interaction first based on low-fidelity devices. By low-fidelity we mean basic, a device with low resolution and no CSS or JavaScript support. Then you make the design increasingly shinier and functionally richer for devices with more capabilities. The variables of these capabilities are probably less than the number of different screen variations. Note that I’m intentionally not referring to device or browser makes, models or versions; instead I’m talking about support for functionality such as JavaScript and CSS.

I believe readability theory is the foundation to progressive enhancement and, given we are in the content marketing space, this gets a double vote from me.

Need help with your mobile strategy