Putting “Mobile First Design” First

Putting “Mobile First Design” First


It’s a fact that more people view websites on mobile devices than on desktop computers. It would make sense, then, to begin designing a website with the optimal mobile display, and then allow the desktop display to be driven by the already-determined mobile display. This is called “mobile first design.” Unfortunately, this is not how most traditional website designers think. But shouldn’t you design your website with its largest audience in mind?

Take a look at our new website for long-time clients Thomas Custom Builders (ThomasCustomBuilders.com). The screen shot below is the desktop presentation of their website (on a relatively small desktop computer screen).  While the mobile display looks significantly different – and rather difficult to illustrate in a single image without the ability to scroll – this website was specifically designed for optimal display on mobile devices.  Go ahead – click on the link above and view on your smart phone to see how the display re-organizes!

example of mobile first website design

Tips to Achieve a Better Mobile-First Design:

  • Determine what mobile users will want to do or use most on your website, and plan your mobile design around these tasks or actions. This could include logging into a member site, getting your location/address/phone number, purchasing a most popular item, or getting to the most recent blog posts. Use research analysis to support this if you have it, or determine it by what you want their actions to be.
  • Remember that people don’t mind scrolling, and they do so intuitively. This is contrary to an old rule of website design, which has since been proven wrong (and has been outdated since the scrolling mouse was invented!).
  • You can frequently tell if a site has a “mobile-first design” when its desktop display is primarily a series of content blocks stacked on top of each other to make a home page that requires scrolling with very large content areas.
  • Font sizes should scale with screen size and resolution. Start with a font design and size that is easiest to read on mobile screens.
  • “Hover actions” won’t work on mobile, so be sure they are left out of the mobile display and don’t make the user experience confusing. If you don’t really need them on your desktop display, leave hover actions out altogether. (Note: We do realize that hover actions on image links offer the same usability and accessibility benefits as standard links states for text links on desktops. Again, any decisions about such design factors should be made with your main target audience in mind.)
  • Images and full pages should load quickly on all mobile devices. If this means your desktop display has a little less impact by using smaller images, keep in mind that the desktop user is your smallest audience now. The mobile user experience suffered for a decade while companies designed websites almost exclusively for desktop computers!

If you’d like a brief professional analysis of your current website’s mobile display, please contact us and be sure to include your website address.


Partnerships and Associations

gawtopMGR 2014analytics