Five years ago, web designers could be pretty sure what their website was going to look like, no matter what device people were using to view it. Even the smallest screens were at least in the 10“ range, plenty of room to make a relatively traditional looking website. Then, on January 9th 2007, Steve Jobs unveiled the iPhone and suddenly web designers had to worry about what their website looked like on 3.5” screen. Cue panic!
Putting aside all jokes about web designers rioting in the streets, the mobile web is a real phenomenon. Look at this graph from Morgan Stanley showing the number of people browsing the web from an iPhone and iPod touch during it’s first 10 quarters. It’s staggering how quickly the mobile web has grown. Web designers have no choice but to take into account various screen sizes when laying out their websites.
When the iPhone first came out, the solution to it’s small screen was to create a mobile version of your website. Now there was a regular version for computers and a small mobile friendly version for phones. The problem was, after phones came netbooks (itty bitty laptops) and then tablets and then BIG HIGH-RESOLUTION DISPLAYS and who even knows what’s next… It’s unreasonable to make a new version of the site for every possible device and even worse, it’s expensive. We’ve had clients ask us to do this and it means that they’re paying multiple times to have us build the same website. This is no good and web designer Ethan Marcotte agrees. In May 2010 he wrote a groundbreaking article that introduced a new website design technique called responsive web design.
The concept behind responsive web design is that, because it’s hard to know at any given time what kind of screen your website will be viewed on, your website needs to be able to respond (responsive, see?) to any sized device. This is done through a series of techniques that let your website shrink, grow and rearrange based on screen size. Instead of multiple versions of your website, you have one version that is adaptable to anything. Don’t underestimate how cool this can be. To see responsive web design in action, navigate to the website CSS-Tricks and make sure your browser window is big but not fullscreen. Now take the corner of the browser and slowly shrink the window and watch how the website elements rearrange to match the width of the browser. Cool, right?
Mobile web browsing is not only here to stay, it’s taking over. Your site must cater to your users, no matter how they access it. The web is becoming a more fluid, flexible place and responsive design is how it’s happening. We’re adopting this so our clients no longer have to pay for multiple websites to fit different devices.
So strap in, things are going to get awesome.
