Responsive Web Design with Drupal

There are many trends and fads that come and go in the web development market just as there are elsewhere in business. At Ten Ten Studios we field all sorts of questions from clients that are often times driven by fads.

  • Can I improve my search engine rankings and SEO?
  • Will my new site be Web 2.0?
  • How will a website improve my social networking status? Can I link it to my Facebook fan page?
  • How about one of those cool Flash splash landing pages? I love those!
  • Will this new site work well on mobile devices?

With the exception of the last one, all of those are definitely fad-related questions. Oh, and Web 2.0? I still don't know what that means. But the question about mobile devices is, at least in my opinion, definitely not a fad. Mobile web browsing is here to stay so it's important that your site be able to be usable and mobile-friendly and there are a few ways to tackle that issue.

The Old Way

Before web developers started seriously valuing their mobile traffic, the method for rendering a page in a mobile browser was targeted to what are now known as dumbphones; i.e., phones that use WAP browsers to display a limited subset of the code we know as HTML. WAP browsers are found on older flip phones and, while they would in fact display a website to you, they weren't capable of rendering a web page comparable to what a desktop browser could do even several generations removed. But if you wanted your site visible at all, you had to make it WAP-accessible.

Despite the fact that no one develops sites for WAP browsers anymore, many of the techniques used to do so are still used for modern smartphones. The concept is simple: use JavaScript to detect what type of browser the visitor is using (Internet Explorer, Firefox, Safari, or some form of WAP,) and then if you identify a WAP client you serve a different version of the site. That would typically include a simpler menu, far fewer graphics, and also less content. In Drupal-speak, this meant displaying the site in a different theme. So you're building your main, desktop-friendly theme and a completely different one for your mobile traffic. While not especially efficient, it gets the job done.

So What's Wrong with the Old Way?

There are several reasons why this method is declining in popularity. First and foremost is the additional development and design time that's lost in effectively duplicating the site in a mobile theme. Second, it relies on JavaScript to handle the browser detection. If a user has this disabled then, depending on how the site is set up, there may be serious problems as Drupal doesn't know which theme to serve to the visitor. And third, even if you identify the user's browser you still have to create multiple versions of the page based on screen width (I'm looking at you, Apple Retina Display.) So you could be building not one alternate theme but several if you are serious about displaying your site in good light on various screen resolutions. Because that's what this all boils down to, doesn't it? We aren't concerned what browser a visitor is using -- we care about how big their screen size is.

CSS Media Queries - the New Hotness

Rather than depend on JavaScript to perform a vague browser detection and then serve one of several different layouts to your visitor, what if you could develop a single theme or layout and have the CSS respond accordingly? Enter responsive web design. Using a feature in the CSS3 spec called Media Queries, your visitor can see a version of your website that is tailored to fit not their browser but rather the resolution at which they're browsing. There are several parts to a good responsive web design but just like the older style, you still have to begin with the design itself.

Design Once and Adapt

At Ten Ten Studios, we have developed a responsive web design framework for use in the majority of our new website designs which was initially based on the 1140 pixel grid found here. We took that concept and changed the dimensions to fit an 1100 pixel grid which has the advantage of evenly sized columns -- a small point of difference but one that can become important during the design phase. After the design is complete we can proceed with slicing the layout up and building our CSS to match just as we would with any other site design. But rather than needing to go back and build another mobile-friendly Drupal theme or layout we can simply apply CSS3 Media Queries to change the look of the site depending on the visitor's viewport size:

@media handheld, only screen and (max-width: 767px) {
	.region-headerleft, .region-headerright {
		display:none;
	}
}

This code turns of two regions if the visitor is browsing with a device smaller than 768 pixels wide. These regions might be extraneous photos or content that is not needed in a slimmer mobile view of the site. The best part of this concept is that there is no need for complicated JavaScript -- all of the logic is handled in easy-to-write CSS and is widely supported by all browsers*.

What's with the Asterisk?

Ahh. Well, if the heady days of Internet Explorer dominance have taught us anything, it's that, well, you always have to correct for Internet Explorer and Media Queries are no exception as they're unsupported in IE8 or below. However, there's a very easy solution to that problem and it does bring back a bit of JavaScript into the mix. First, download css3-mediaqueries.js from Google's code repository and save it to your site. Then include it as follows: <script type="text/javascript" src="/PATH-TO-SCRIPTS/css3-mediaqueries.js"><script>

Problem solved. Now we need to add a meta tag to tell devices to provide their proper width so that the Media Queries can take over:

<meta name="viewport" content="width=device-width" />

Done! Again, the great part about this new method is that it allows for a great deal of flexibility after the layout process is done. Experiment with CSS3 Media Queries in your layouts the next time you're tasked with coming up with a mobile design -- and quite frankly, that should be every time.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Questions?

Do you have a question about something you saw here in our blog? Are you interested in a custom website for your business? If so, please contact us here.