Responsive Web Design

If you’re a business owner, chances are you’ve wondered how to best optimize your website for tablets and mobile. There are differing techniques and schools of thought on this topic, including those from a development perspective as well as those from a design perspective. In this article we’ll go over the most time effective, cost effective and most recommended approach from the developer’s standpoint: “Responsive Web Design”.

The Basics

But wait, what exactly is Responsive Web Design? Simply put, Responsive Web Design is the practice of using fluid layouts, flexible images, and CSS3 Media Queries to render a website for different screen resolutions. This allows us to detect specific device-oriented screen resolutions for a better user experience, font sizes for better legibility, image proportions for aesthetic and more. Both fluid layouts and flexible images are techniques we’ve seen and have used for quite some time now. However, these techniques in conjunction with CSS3 Media Queries make for an especially good combination that we will focus on.

CSS3 Media Queries

In the early days, optimizing your website for tablets and mobile might’ve been accomplished by switching to mobile themes for CMS-based platforms such as Drupal or even creating an entirely new mobile-friendly version of your site which didn’t offer the same user experience or ease of development. W3C Candidate Recommendation media queries are a fairly new feature that CSS3 brings in addition to media types. A media query is basically a condition used to set rules based on width, height, color and/or resolution to render a display for a range of devices such as smartphones, iPhone, iPad and tablets as well as traditional laptop and desktop computers. You can find a list of media queries for standard devices here.

Even though media queries are not supported by older browsers such as Internet Explorer 5, 6, 7, and 8, Firefox 1 and 2, and Safari 2, Javascript-based solutions have been introduced to remedy the problem. Css3-mediaqueries-js is one of this author’s personal favorites for cross-browser compatibility. Additionally, media queries can be used with CSS3 transitions or jQuery wherein layout transitions can be animated to spice up a site.

Cross-Platform Development

In conclusion, Responsive Web Design is the most cutting-edge and user friendly way of presenting your website to all audiences taking into account the growing number of devices and platforms. In this day in age, we can no longer think about content delivery in terms of a single device. Fortunately, we now have the necessary tools to develop dynamic sites that will render uniformly across platforms.

As a trusted Drupal agency, we provide expert solutions for optimizing your website for tablets and mobile devices. Our approach ensures that your site offers the same user experience and ease of development, regardless of the device it’s accessed on

Want more? Bookmark us and look for the follow-up blog on this topic next week from the designer’s standpoint. For more information about DOOR3’s cross-platform development and design practice please Contact Us.