demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Introduction to Responsive Design

mobile / responsive design

Estimated reading time: 2 minutes, 24 seconds

“Responsive Design” as a buzzword has reached peak popularity: we now have books and entire seminars devoted to the subject. Before starting into the topic, it would be wise to define it.

Calgary Transit Web Site Redesign on iPhoneResponsive design is perhaps contrasted with what came before it: in the past, sites designed for mobile devices were entirely separate works, often maintained under a .mobi domain name. Due to bandwidth issues and the limitations of devices then in service, mobile sites were often pale shadows of their fully-fledged desktop cousins.

As the capability, speed and resolution of mobile devices improved, it became obvious that the browsers that came with them were constrained only by size, interaction mode, and bandwidth; otherwise, they were just as capable as their desktop brethren. Smartphone users began to expect the same experience of a site on their mobile device as when they were at home on their desktop computer, if not an enhanced experience of the site on their smartphones.

In the bad old days of web development, the major sin was “this site only works in x browser”;. Now, the sin is “this site is only usable at y resolution”;.

Responsive design attempts to eliminate the distinction between screens, devices, and resolution: every visitor sees just one site, in different forms that are optimized for their device and experience. This means developers create just one codebase for a site, eliminating duplication and redundancy… and potentially, weeks of extra work.

Developing a responsive design can be tricky, as it is akin to designing three or more pages in one: for every page of your site, you have to make a series of decisions, based on window size, bandwidth, and interaction mode:

  1. What page features are needed for this configuration? How should they be changed? (for example, a long list of options changing into a drop-down menu as the screen narrows, or using geolocation services on a mobile device to suggest a nearby retail location rather than asking for a postal code).

  2. Should the design alter in respect to bandwidth constraints?

  3. Should font and image sizes change for smaller screens?

  4. How should the remaining elements of the page be displayed as a result of these changes?

  5. Given all these decisions, what is the optimum layout for the page?

Responsive design is not one suite of technologies or techniques. Media queries play a part, but have limitations as they are currently written. In a fully responsive site @media queries are usually joined by , HTML5 and server-side languages such as to create a complete solution.

Unless you attend one of my classes, I can"t tell you how a web page should be designed for all devices, orientations and uses. What I will provide here is a series of technical approaches for making any site responsive; it will be up to you to determine how to use the techniques in your endeavors.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.