Supporting A Mobile-First Strategy

joe.price's picture

According to Google data, smartphones have reached mature adoption rates (above 50%) in 19 countries in 2013. This is up from 6 countries in 2012. From 2012 to 2013, smartphone penetration increased by an astounding 17.75 percentage points on average.

Responsive Web Design (RWD) is here to stay. Right now around 11 or 12% of the top 100,000 sites are responsive, and no doubt that number is slated to rise over the next few years. Global Mobile vs. Desktop Internet User Projection

RWD Key Ingredients:

A flexible, grid-based layout

  • Typography & Layout:
  • target ÷ context = results

Flexible images and media

  • max-width: 100%

Media queries

  • @media only screen and (min-width:321px) and (max-width:480px) { }

Drupal Responsive/Adaptive Themes

There are a number of excellent responsive/adaptive frameworks + themes available with Sass support baked in:

  • Adaptive Theme
  • Bootstrap
  • Omega
  • Radix
  • Zen
  • Zurb Foundation

More Than Just Themes

Google’s Checklist for mobile website improvement

  1. Stop frustrating your customers
  2. Facilitate task completion
  3. Convert customers into fans

Usability/UX

Mobile First, Desktop Second

Design with the constraints of a mobile user in mind

  • Size of screen
  • Speed of networks
  • Modes of use

Overarching Tips

  • Reduce the amount of content
  • Provide big tap targets for touch screen users
  • Eliminate horizontal scrolling
  • Optimize navigation –less is more
  • Minimize the click path to achieve a desired action
  • Mobile friendly forms

If a site is worth design hours and development hours, its also worth usability hours –a successful RWD implementation depends on it. Paid feedback:

  • usertesting.com
  • userlytics.com

Free/cheap feedback:

  • feedbackarmy.com
  • usabilityhub.com

Tags: