When you see a responsive website, you are looking at a website that appears differently depending on the size of the device you use to access it.This allows the content to be formatted differently to take advantage of different sized and proportioned screens. So if you are using a very large monitor and have the browser window as large as it will go, then a responsive website displays the content in a way that takes advantage of this larger window. This video on fixed, fluid, adaptive, and responsive web design covers a bit more than necessary to understand responsive web design, but the visuals help clarify how responsive web design changes the appearance of a website depending on the size of the browser. It's less than a minute and half long (and fairly cheesy :)), but seeing it could explain the basic idea of responsive web design if I have failed.
While responsive web design primarily focuses on the size of the screen used to access a website, anyone with a smartphone is very familiar with another issue: data allowance. The amount of data that must be downloaded to see a responsive website on a desktop computer with unlimited high-speed access is the same as the amount of data that a smartphone with a smaller data allowance must download. Why force mobile users to choose between seeing the data-intensive responsive version of a site and not seeing the site at all? The answer may be that one shouldn't: make a mobile site as well.
You don't have to create a whole new version of your website to create a separate mobile site. Content Management Systems have plugins to create simple mobile sites to get mobile users your content quickly and economically. This site uses a simple mobile site I made from searching the WordPress plugins for “mobile site.” I chose a plugin and made a few adjustments: I changed the colors and one font to match the larger site, and I made the twitter feed into a link. While not the most beautiful sight in the world (yes, bad pun), the mobile site has the same content as the larger version, and it is more quickly and economically accessible from a smartphone.
In an article focusing on creating web sites for the best user-experience, Derek Olson discusses the pros and cons of responsive web design and separate mobile sites. Google offers an authoritative, though more technical, discussion here on issues in building separate mobile sites. Note that data pricing models for mobile devices could change significantly over the next several years making this issue dated. But for now, fast, economical access via one’s smartphone to web content may require a separate mobile site in addition to good responsive web design.
HT to Sabrina A. Davis and Erin O’Leary.
Last Updated: July 23, 2013
Tag: web design