Responsive web design: a list of methods

Responsive web design was the biggest web design buzz-phrase of 2012, and I’ve spent much of my summer working on the best, and fastest, ways to make a site responsive.  What I found worked best was all based on three ideas:

  1. breakpoints in the stylesheet
  2. device-specific conditional PHP
  3. high resolution, or resolution independent graphics for retina screens

The breakpoints are the simplest. You can make a pretty good responsive site with just CSS breakpoints.  It is simply conditional CSS that says if your screen is such a size, use this alternate set of styles. For example, I have the following code at the bottom of my theme’s stylesheet:

@media screen and (max-width: 480px) {
.site-title { font-size: 155%; margin: 20px 0 5px 0; }
.site-description { font-size: 100%; }
hgroup { margin: 5px auto 0; min-height: 0; padding-bottom: 5px; width: 80%; }
}

This style overrides those selectors for screens 480px wide or smaller. The point is to write styles specifically for a smart phone which has a screen size of 480px on the long side.

On this theme there are two breakpoints: at 842px, for tablets, and 480px for phones, but of course you can have more if you want. Breakpoints are great for saying if you want a sidebar to float off on the side and then bump down the bottom of the page on a phone. It controls layout just like any stylesheet.

But breakpoints can’t help with making responsive PHP. If you want to write a theme that says IF this screen if more than 480px wide show the slider but if its 480px or smaller, than we don’t want to use the slider, then responsive CSS won’t help—you need responsive PHP.

I use a plugin for responsive PHP: the Mobile Client Detection Plugin (update, 2013. My original plugin now has a problem distinguishing Android phones from tablets. So, now I use WP Mobile Detect. This is a simple plugin that gives you some extra conditional PHP tags:

  • is_desktop()
  • is_mobile()
  • is_tablet()
  • is_chrome()
  • is_explorer()

The last thing to look at is the rendering of graphic elements. Notice how amazingly sharp type is on your phone and tablet, and how shabby are thumbnail images and other bitmap graphics? The issue is that retina screens are so sharp that they make all normal bitmap graphics look blurry.

When making a responsive theme use a minimum for theme graphics, and do as much as you can with CSS3.  On this theme, the small ornamental corners and decorations on the <hr> tags are resolution independent .svg (Scalable Vector Graphic) images.  These are very small images that display correctly in all browsers except IE8.. but you can just put gifs in an IE-only stylesheet to fix that.  I make the SVGs with illustrator and use the Save For Web command.

Thumbnail images also look soft on a tablet.  The solution for this is to make them twice the displayed size and use CSS to present them at 50% on your site.  I do this for thumbnails on this site.  It seems like a waste of bandwidth, and Yahoo’s Yslow tool will flag this as an error, but hey the web tends to change, right? For phones, which I assume are more bandwidth-sensitive, needing to use 3G networks much of the time, I load the normal size thumbnails.

One last thing, while you are on it: make an apple-touch-icon, 57×57 pixels, and add it to your theme:

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

Leave a Reply