I’m about to tell you something you already know: almost everyone has access to a mobile device these days. But let’s talk about how it relates to something we, as mobile device users, don’t frequently think about: web design. Later, we’ll talk about something that’s rather new: responsive web design.
It all began…
We’ll start from (nearly) the beginning. When cell phones started doing MORE than just calling (about 1997), users didn’t expect a full-blown web browsing experience. In fact, just sending a text message from one mobile phone to another was pretty exciting.
Around 1999, phones like the Nokia 7110 could browse a very stripped-down, text-only version of the web. As years progressed, other phones (notably the Blackberry models) began to enhance the mobile web experience.
However, browsing the Web from a mobile device was still not yet considered practical. That all changed in 2007.
A New Era
Apple’s iPhone really pushed the mobile web experience into a new era. As other mobile phone makers began to compete with the iPhone, browsing the Internet using a chunk of metal and plastic that fit into your pocket wasn’t all that uncommon.
This change put the spotlight on website design. Sites that played well with the new family of smartphones – sites that looked the same as they did on desktop computers and that loaded quickly – worked pretty well on mobile devices.
However, web designers began to wonder, “Is there a better way to show content to mobile users?”
This question sparked different solutions:
- Mobile Apps
Pros: Great fit for Apple, Android. Readily available inuser’s dashboard.
Cons: Costly to develop, launch, and maintain. Have to create a different app for every different mobile device operating system and account for updates in software. - A separate version of the site, designed for mobile devices
Pros: Lightweight, cross-device experience. No app to download.
Cons: Different devices had different screen sizes, so the mobile site didn’t always look ideal on some phones.
It was (and still is) an experimental time in mobile web design. However, developers worked hard to cover their bases, designing apps for all the mobile phones out there (even when it didn’t make sense).
Then, all of a sudden…
Another New Era
Time to talk about tablets.
They’re mobile devices, right? With mobile browsers. Could they load websites the way they were meant to be viewed on desktops? Maybe.
As the tablet was introduced into the market, the range of different browser screen resolutions has become ridiculous. How can web designers and marketers be expected to keep up with it all?
Solution: Responsive Design
In the past couple years, a new term has been coined for a technique which attempts to solve our mobile website woes: responsive web design.
In a nutshell, responsive web design is a technique which changes the elements on a web page based on the size of the browser’s viewport alone. It’s done in a number of ways, most commonly using CSS3 Media Queries.
Instead of talking about it, why don’t you check it out for yourself. Smashing Magazine’s website is built using responsive web design. Visit their website, and begin to resize your browser window.
As the window gets smaller, elements on the website get smaller (or disappear altogether). When you load this site on your mobile device, it shows up to fit the size of your mobile viewport. However, you’re still on the same exact page, looking at the same exact HTML – only on a mobile browser.
Why is this so neat? I’ll tell you:
- Free to use.
No cost of building and maintaining an Apple/Android/Windows mobile app. - No separate websites to maintain.
Keep all of your content in one place and use CSS styles to cater to different browser sizes.
Are there downsides? Of course. It’s tougher to design and develop for responsive
However, I think the positives outweigh the negatives. As mobile device use continues to skyrocket, so does the need to change the way we think about designing for the Web.