Use a Mobile First Design Strategy to Create Focus

illustration of linearized mobile content

When we recently redesigned the new extension.org homepage one of the issues we ran into was trying to come to a consensus in prioritizing content on the main landing page. We were merging the content from two different sites (the now-defunct about.extension.org and the previous incarnation of extension.org) as well as introducing brand new requirements. In conducting the content inventory for the new homepage, it was at times difficult to reach a consensus about how pieces of information should be prioritized.

One tool that helped us to achieve focus was adopting the “mobile first” design strategy. The idea behind mobile first is that you design your site to function well within the constraints of a small screen and progressively embellish the design as screen real estate increases with larger screen sizes (i.e. phablets, tablets, netbooks, desktops.)

In small screen design, the content is linearized by necessity — the width of the view port is generally only able to accommodate one item. That is to say, a two, three or four column layout on a desktop will collapse into a single column on a small screen. This layout shift (known as responsive design) offers the valuable constraint and benefit of only being able to show one piece of content at a time. Whereas previously there might have been four important pieces of content each heading a four-column, they must now be ordered hierarchically as one, two, three and four. The numerical listing forces the hard discussions about which piece of content or action is truly the highest priority for a page. Once those tough decisions are made, the layout and design can flow more easily.

If you are in the process of redesigning a page, before you start on any visual design, create a simple inventory of the different items on the page and numerically prioritize them. Creating a list might not sound hard, but it can be challenging to get a consensus. However, once that process is complete, you’ll have the benefit of designed a page with a focused goal.

image: https://creativecommons.org/licenses/by/2.0/

Leave a Reply

Your email address will not be published.