3 Techniques to Serve Up Context Specific Images for Responsive Web Designs

For responsive web designers —

Chris Coyier lays out three currently experimental methods for serving specific images to a website user, depending on the user’s device: mobile, tablet, desktop.

The three he names include:

  1. CSS3 Image Replacement
  2. Javascript URL Rewrite
  3. PHP Cookie

Chris provides helpful links to more extensive discussions of these methods. It seems that each offers benefits and drawbacks. It will be interesting to watch this develop.

Techniques for Context Specific Images | CSS-Tricks

Using CSS Transitions to Smooth Media Queries

From Elliott Jay Stocks:

The basic premise is this: you use media queries to design responsive websites that adapt their layout according to browser width, and you constantly resize your browser to see how the site performs, but each time a query kicks in, there’s a harsh jump between the old styles and the new ones. Why not use some simple CSS transitions to smooth that jump by animating the resize?

via CSS transitions & media queries » Blog » Elliot Jay Stocks.

Ethan Marcotte clarifies his definition of “Responsive Web Design”

In a recent post, Ethan Marcotte clarifies his definition of “Responsive Web Design”:

A responsive design is composed of three distinct parts:

  1. A flexible grid.
  2. Flexible images. Or more specifically, images that work in a flexible context (whether fluid themselves, or perhaps controlled via overflow).
  3. Media queries. The final layer of a responsive design, media queries optimize the design for different viewing contexts, and spot-fix bugs that occur at different resolution ranges.

See Ethan’s post, On being “responsive” — Unstoppable Robot Ninja.

Mobile Phone Browsers will Outnumber Computer Browsers by 2013

From Gartner’s 2010 report:

By 2013, mobile phones will overtake PCs as the most common Web access device worldwide. According to Gartner’s PC installed base forecast, the total number of PCs in use will reach 1.78 billion units in 2013. By 2013, the combined installed base of smartphones and browser-equipped enhanced phones will exceed 1.82 billion units and will be greater than the installed base for PCs thereafter.

Mobile Web users are typically prepared to make fewer clicks on a website than users accessing sites from a PC. Although a growing number of websites and Web-based applications offer support for small-form-factor mobile devices, many still do not. Websites not optimized for the smaller-screen formats will become a market barrier for their owners — much content and many sites will need to be reformatted/rebuilt.

via Gartner Highlights Key Predictions for IT Organizations and Users in 2010 and Beyond.

Responsive Web Design vs. Mobile Site: Which is better, when?

Responsive Web Design vs. Mobile Site: Which is better, when?


Over the next few weeks we at A Little Code will be experimenting with best ways to optimize sites for multiple devices. Here are a few initial thoughts.

Hitting the Limits of Responsive Web Design

Initially, we’ve found that for a site with a number of interactive elements, such as drop-down navigation, slideshows, javascript overlays, etc., the approach to Responsive Web Design recommended by Ethan Marcotte — adding media queries for mobile devices at the end of things — isn’t up to the task.
Continue reading “Responsive Web Design vs. Mobile Site: Which is better, when?”