Responsive Design
In 2009, half a billion people worldwide have accessed the internet through their mobile devices (phones, tablets etc.), but this number is expected to triple by 2013. A significant increase in mobile traffic has been registered on the UBC homepage in the past two years as well.
Responsive Web Design (RWD) is a new technique of designing websites to ensure that a user has the best possible experience on a website, regardless of the device they use or its viewport.
RWD takes advantage of CSS3 media queries, fluid grids and flexible images so that the layout of a website adapts to the viewport. If you check this page on a smartphone, its layout, size, text size and images will adapt to the screen size of that particular device, without having to zoom in/out. The same goes for a tablet, desktop computer or bigger display (e.g. TV, projector). The layout is fluid and adapts, taking advantage of the screen space available to present the information consistently regardless of the screen size.
What the Responsive CLF Looks Like
| Resolution |
|---|
| Desktop |
| Tablet |
| Mobile (landscape) |
| Mobile (portrait) |