Responsive Web Design (RWD) has recently become a popular way of referring to web design for different screens. Unfortunately, many of the people who use the term don’t really understand the concept. To clear up the biggest misinterpretation, let’s go back a bit in time.
The need for responsive web design
As mobile devices—first cell phones, then tablets and smartphones—became more prevalent, it soon became apparent that sites designed to be displayed on a PC, using Internet Explorer, Chrome, Firefox, or some other browser , were almost unreadable on those mobile devices.
Some site owners have tried to make their sites look acceptably on smaller handheld devices, usually with little or no success.
Eventually, as the need to display correctly on these devices was obviously becoming more important, some went so far as to create additional pages, sometimes even duplicating their entire site, in order to capture that growing share of the market.
I think so other problems of course. The point that many were missing is that they were approaching the issue from the wrong direction.
Ditching the notion of a separate mobile site altogether… that’s a poor solution, at best. The real problem is created by creating a complex site, meant to be displayed on PC, and then trying to “dumb it down” for mobile screens.
the right approach
Doesn’t it make more sense to build a basic site and then find a logical way to make it fit? everyone show?
That is exactly what responsive web design achieves. Using HTML5+CSS3, augmented with media queries, a basic website design can be made to display correctly on any size and style of device, from a PC (2560px) to an iPhone (320px).
Media queries, along with a fluid grid based on aspect ratio, allow the site to query for display type and maximum width, which then allows CSS3 to adapt the display based on the device. Changes from 3-column to 2-column are implemented seamlessly and transparently, with screens optimized for each device’s characteristics.
What do you gain with responsive web design?
Essentially, you achieve responsive layout by having your CSS override your standard layout structure, based on the viewport in the user’s hand.
This may seem like an oversimplified explanation of what responsive web design does, but it’s actually that simple. And the steps to take advantage of this ability are not that complicated either. They include:
Put your header, content, widgets, and footer in a wrapper container; this way the CSS3 can modify the width of that container to accommodate different viewport widths. This gives your CSS3 a nice clean bundle that you can resize as needed;
- Reset HTML5 elements to block: This sets the block of elements to be handled;
- Construction of the main CSS structure: this sets the width and float of the various elements within the block;
- Media Query Settings – determine which set of CSS3 to follow, based on the characteristics of the target device;
- Fluid Layout Settings – This allows you to set the percentage width of individual elements in the main CSS structure to be applied to specific screens.
- Width of embedded images and videos: Here you can set the percentage of the maximum width of the screen that an embedded image or video can occupy.
The end result is a fluid display that will adequately fill the allowable area on virtually any mobile device, while the basic layout still displays as expected on a PC.
This is what responsive web design does… it allows you to design once and display correctly on a multitude of different devices, while respecting established usability and accessibility standards.
