“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.
Responsive 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:
- 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).
- Should the design alter in respect to bandwidth constraints?
- Should font and image sizes change for smaller screens?
- How should the remaining elements of the page be displayed as a result of these changes?
- 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 JavaScript, HTML5 and server-side languages such as PHP 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 endeavours.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
