We recently launched our latest project, Silicato Development, on the killer Drupal 7 platform. Among some of the great tools available for them to manage their website now, we also employed a responsive design so anyone could view their website on a desktop or mobile device.

What is responsive design? The aim of responsive design is to thoughtfully create one design for multiple devices (i.e. iPhone, iPad, etc.) and screen sizes. Instead of building a mobile site, a site specifically for tablets, and a standard desktop site, you provide one design that "responds" to the user's device and displays the content accordingly.

In the early stages of the design process for Silicato Development's web presence, we set out determined to build a responsive site that maintained complete usability and remained aesthetically pleasing. We leveraged a few awesome technologies to help us with this project. Drupal would supply the robust backend that the site's content driven pages would need. Omega, a responsive HTML5 base theme was utilized in order to achieve the "responsive" front end of the site. These two technologies combined allow for the site to display the same content on multiple different devices, screen sizes, & browsers without having to build multiple sites.

When the site is viewed on a desktop browser the users are presented with a grid of projects that they can browse through. This grid is carried throughout the entire design and will display on tablets as well as mobile phones. In the screen shots below you can see the minor differences in the way the content is displayed when viewed from a desktop browser, a tablet, and a mobile phone.

The content is not altered in any way. The styling & sizes may vary a bit between the presentation but the content, which is the most important part of the site is untouched. Utilizing the responsive design technique allows users to essentially have the same experience on the mobile site as the desktop site.

We look forward to launching more sites using these techniques as well as the powerful flexibility Drupal 7 allows us to have with responsive design.