My notes on Responsive Web Design so far
Created 2011 April 14. Updated 2011 July 28.
Responsive Web Design is designing web sites for all screen sizes.
"... It's what some of us were going for with "liquid" web design back in the 1990s, only it doesn't suck."
Jeffrey Zeldman
Those who have been sensitive to, designed and coded websites to handle a variety of screen and text sizes have been doing a form of Responsive Web Design.
But now more than ever it is important to consider all screens sizes from the smallest to the largest, design and code with the latest tools in a sane and intelligent way.
For the most part, changing a page's layout based on the width of a screen viewing it is what is desired. Enter CSS Media Queries.
Media Queries inform a browser when to use a particular block of CSS. And which particular block of CSS is used can be determined by screen width, so Media Queries work.
There are four to get started with: min-width, max-width, min-device-width and max-device-width.
The two types are width and device-width. The difference is simple but hard to explain beyond that.
device-width is a fixed pixel width of a device. width changes according to zoom. Although device-width first appears clearer, it is width that is your friend as pixels used in width are the same as the ones familiar to you in regular CSS.
The min or max part determine an underlying approach (doesn't have to but tends to). That is either large screen (desktop) first and use max-width to handle smaller screens. Or small screen (mobile) first and use min-width to handle larger screens.
Small-screen up, big screen down or something else like middle screen up and down. What is the sensible default here?
Small screen up would be my fave option and is the approach used in 320 and up (stuffandnonsense.co.uk).
Progressive Enhancement: Screens with no media query support get a linearised design. Screens with media query support get appropriate design to the screen.
Giving a desktop browser a linearised small screen experience because media queries are not supported is hard to justify. There are ways around this by using a Polyfill (remysharp.com)/Regressive Enhancement/Bootstrap like respond.js (github.com).
Firefox 3.5 was the first Firefox to support Media Queries. What about Firefox 2 and friends? It's an ever decreasing group but I know one or two people who have yet to upgrade their Mac OS and Firefox 2 is all they have apart from an old version of Safari and Internet Explorer 5.2. And then there is Internet Explorer.
WURFL is a device descriptive repository. My understanding is that it is a database of browser and device capabilities that can be tapped into by detecting what device is viewing a site and adapting delivery that way. It's a cool idea.
But what if there was a lighter touch where information was collected on all desktop browsers that did not support Media Queries? That information could be used to deliver a default desktop view where otherwise it would default to a linear view. It would be a historical list and would rarely need updating for new releases of browsers.
Could work like this:
A CSS file processed by PHP
<?php
// Mobile Friendliness PHP Technique - Proof of Concept, Dave Smith.
// Created: 2011 March 30. Updated: 2011 March 30.
// Do as little as possible to disguise the PHP file as a CSS file.
// Caching deliberately ommitted to avoid making assumptions.
header("Content-type: text/css");
$gmLastModified = gmdate("D, d M Y H:i:s", filemtime(__FILE__))." GMT";
header("Last-Modified: ".$gmLastModified);
$ifModifiedSince = isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ? $_SERVER['HTTP_IF_MODIFIED_SINCE'] : false;
if ($ifModifiedSince == $gmLastModified) {
header("HTTP/1.1 304 Not Modified");
exit;
}
// Browser sniff for browsers that do not support media queries.
// But make $is_fab true if a browser supports media queries.
$is_fab = !(((strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6.') !== FALSE)) || ((strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7.') !== FALSE)) || ((strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 8.') !== FALSE)));
?>
/*<style>/* For the benefit of Dreamweaver users to get CSS syntax highlighting. */
/* Base styles for all screens here */
@media all <?php if ($is_fab): ?>and (min-width:481px)<?php endif; ?> {
/* Styles for screens greater than or equal to 481px */
}
@media all <?php if ($is_fab): ?>and (min-width:769px)<?php endif; ?> {
/* Styles for screens greater than or equal to 769px */
}
Messy perhaps but an option maybe.