Mobile First design is becoming the standard for web design. Adapting a design to be responsive after it's designed for a fixed-width screen is not an easy task.
Proposing a 'mobile first design' philosophy to clients isn't an easy sell. Your client probably expects you to design for standard-sized monitors and adapt the design for smaller devices afterwards. Designing for standard monitors first is a sure way to cost additional time and money vs. mobile first design.
Here are some tips to get you started designing responsively:
- Say No to Tables. Use fluid grid systems instead.
- Do not use absolutes. Responsive design requires flexibility above all.
- Make sure your horizontal menus are flexible. Consider vertical menus.
- Mind your line-height, image floats, and wraps.
- Avoid elements with a fixed height or width. Use min and max heights instead.
The best approach to mobile first design with Drupal is considering how to make your Drupal 7 theme responsive as you're designing and developing.
But first steps first.
Responsive design is so new and there are so many great ideas and some that are not so great. So take some time to look at sites that are using responsive design. Notice the similarities and differences. Take a look at some of the responsive themes available for Drupal listed below. Find the one that best suits your websites needs and your users needs for the final product.
And now you are ready to start to consider the layout and design. But remember Mobile First which is also Content First !
Drupal 7 offers a variety of responsive starter themes. And Drupal 8 (due out late 2013) plans to take RWD to the next level.
Drupal 7 Responsive Themes
Adaptivetheme is a powerful theme framework designed from the ground up to power modern, cross browser/cross device websites using responsive design techniques.
Adaptivetheme allows you to set up specific layouts for different device groups - such as desktop, tablet and smartphone - all with zero coding. Its all easy point-and-click configuration.
The Bootstrap base-theme bridges the gap between Drupal and the Bootstrap Framework. It is a sleek, intuitive, and powerful front-end framework used for faster and easier web development.
Radix is a base theme for Panopoly. It has Sass and Compass support, and makes it easy to build responsive themes with Panels.
Drupal 960 Grid System Themes
NineSixty is a base theme with all the files provided by the 960 Grid System. From the sketch sheets to all the styles from the framework are included.
The Omega Drupal 7 Base Theme is a highly configurable HTML5/960 grid base theme that is 100% configurable. Each zone (group of regions) can be configured for content first layouts (push/pull classes), hidden at any time and each region can be disabled, resized, and placed easily any way you see fit.
960 Robots is a theme created by Lullabot. This theme, based on the 960 grid system, features two columns on the right side of the page, a two-column footer, and calendar-page dates for posts. The theme also uses Twitter's search API to display a random message based on a configurable search string as the site's slogan (PHP5 required).