Submitted by joe.price on
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.
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
- Stop frustrating your customers
- Facilitate task completion
- 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