Over the last two years, the rise of mobile/smartphones and tablet devices offering 3G and WiFi internet browsing has changed the way that we use the internet on a daily basis. New televisions and gaming consoles also offer web browsing, pushing the web away from a previous “desktop only” experience, to one that is with us now at home, the office, or on the move.
With mobile browsing expected to outpace desktop-based access within three years, web designers & developers are now faced with a question – how do we build a website for so many devices with varying screen sizes and browsers?
A year or two ago, it may have been viable to build your initial website for desktop browsers, followed by a second version users only see if they access the site on a specific mobile device. The problem with this method now however, is the sheer amount of devices available. Building a site tailored to each device – Android, iPad, iPhone, Blackberry, etc could potentially double – or even triple the project’s timescale and budget .
So, what do we do?
Responsive web design, that’s what! A term coined and advocated by designer Ethan Marcotte, Responsive Web Design takes the approach of building one website that adapts to the device screen size.
How does it work?
By building a website on the foundations of a flexible grid layout, working in percentages rather than a fixed size, we allow our layout to adapt to the width of the web browser, but keep the proportions of our grid intact. From here, we can use CSS media queries to target specific styling depending on the size of the viewport. This allows us to take better control over page elements, and re-align them to work better for the specific viewport. Inline images can be scaled to fit by using some simple
max-width: 100%; width: 100%; styling.
What about existing websites?
Rebuilding a large website into a responsive layout may be outside of a potential budget scope, so for existing websites the previous method mentioned of building a device-specific website may infact be a more cost-effective option. Looking at analytics you may find out your website has a high level of traffic through iPhone devices, and as such you may want to build a mobile version of your site to cater for this. Moving forward on new projects however, I believe Responsive Web Design is the way forward.
- A List Apart: Articles: Responsive Web Design
- Media Queries – a collection of responsive web designs
Building one site to adapt to a variety of devices goes deeper than just the website’s layout. Subscribe to our RSS feed or visit our blog again soon to read another article discussing building responsive websites for multiple device inputs – catering for mouse, keyboard and touch interfaces.