Mobile First Design with Drupal 7

Drupal 7 logo

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.
  • Use caution with javascript.

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

Adaptive Theme

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.

Bootstrap

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

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 (960 Grid System)

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.

Omega Drupal 7 Base Theme

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

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).

What our clients are saying

Thanks so much for everything!
...dedicated, competent and driven to get the job done and done well.
...we just want you to know that we are appreciative!
...continued to monitor it closely and is still always available to help me if I have any questions
...able to translate technical information in an accessible way...
...creative, independent, responsive...
...a pleasure to work with, combining patience (for my busy schedule and at times overwhelmed brain) with her strong motivation and energy to keep me going
I love directing our customers to our new site knowing that they are going to be able to find exactly what they are looking for...
...provided us with excellent, expert service in a professional and personable manner.
A great experience and a much improved website.
I'm so happy we chose to work with PEERLESS Design.
...your punctuality, your casual and open personalities, and both your hard copy and online portfolios speak very highly of you and your business as well
I had a very tight deadline and budget, and they met it, seemingly with ease.
...took my less than mediocre site and completely revamped it into a beautiful, professional, and easy-to-navigate site
I would highly recommend her for any position requiring IT design and development
...I have no doubt we will have the best site in the 2010 election of any PA candidate
I would highly recommend her for any position requiring IT design and development
...very responsive to our questions and needs
I realized that I had picked the right company to work with soon after beginning a project with Peerless Design, Inc.
I have seen the first layouts and they are awesome...
... incredibly impressed with what you brought to the table
...can do anything any other designer can do and generally quicker, cheaper and better.
...able to take my abstract ideas and add their expertise to bring them to life in a way that was better than I could have imagined!
... they also made suggestions which showed me that they fully understood what I wanted to accomplish.
" PDI provides us prompt, effective and efficient service in maintaining our Drupal based website."