Responsive web design, or RWD for short, is a relatively new approach in web development wherein a website is designed to be capable of making dynamic changes to its appearance depending on the screen size and orientation of the device used to view the site/page.
RWD was conceived as a solution to designing for the growing number of devices capable of connecting to the web, which range from small smartphones, tablet devices, to traditional, large desktop monitors.
Designers use breakpoints in RWD to determine a site/page layout’s appearance, with one design above the breakpoint, and another used below it. These breakpoints usually depend on the browser’s width.
The same HTML code is used across all kinds of devices, with CSS used to change the layout and appearance of the page depending on the device used. Instead of creating a completely separate website and code for each device and screen size out there, RWD offers a single code base to support differently sized view ports.
This results in a design wherein page elements reshuffle depending on the view port’s size. For instance, a 3-column design for a desktop will shift to a 2-column design when viewed on a tablet, or into a 1-column design on a smartphone. Responsive design is hinged on proportion-based grids to reshuffle web content and design elements.
While responsive web design can be an effective solution to provide equal access to users on different devices, it can also lead to hiding some design elements out of necessity. This is common with background images, which have to be omitted when moving to smaller screens. When faced with the problem of hiding content and page functions, as well as altering the appearance of pages for device types, it’s important to base your decisions on information about your users and their needs.
Figure a. – 3-column Design
Figure b. – 2-column and 1-column Design
An example of responsive design. Figure a. shows a 3-column design for desktop screens, while Figure b. shows a 2-column and 1-column design for tablets and smartphones respectively.
Performance can be a problem with RWD. Because it offers the same code regardless of device type, meaning a 5-inch phone gets the same code as 24-inch desktop display, it’s possible to run into performance problems, what with smartphones relying on a slower data connection.
It’s important to remember that changes in design occur on the client-side, so don’t test your designs in a controlled environment. Test your RWD in real environments, like outside where connectivity can be spotty and several factors come into play.
Usable Responsive Web Design
Since responsive design involves shuffling elements on a website, both design and development teams need to work together in order to create a usable web experience across all devices. RWD can be akin to solving a puzzle—figuring out how to shuffle around elements on larger screens to fit into smaller, longer displays, and vice versa.
However, it’s not just about making sure things fit. More importantly, it should be about making the design usable across different screen sizes and resolutions. With various site elements moving around the page, the user experience can be fragmented between devices, hence the importance of design and development teams coming together to evaluate the result of an RWD.
Another important aspect in RWD is content prioritization. This usually isn’t a problem with desktops, since more content is visible without scrolling on a large display. On smartphones however, the limited real estate eliminates the choice users have of looking around the page to find the content they want; designers and developers must now serve the content they deem most important to users, and place in an area of premium visibility.
The last thing mobile users want is to scroll endlessly down a page to find information of interest.
It’s important to remember that responsive design is only a tool, not the final cure to device fragmentation. Many webmasters make the mistake of believing RWD to be perfect, it’s a solution and it doesn’t always ensure a usable experience. The techniques for common user experience are there, but designers and developers must hone them to support users across multiple devices.