Responsive web design
If you’ve been considering overhauling your company’s website, or if you’ve been to a tech conference in the last year, you’ve heard the phrase “responsive web design,” and if you’ve read other blogs, many have claimed they are “responsive” which does not mean it talks to the user, has a chat function, or allows for better communication.
No, responsive web design (RWD) implies that a web site is written with a particular coding language that (in layman’s terms) allows for a site to adapt to the device on which the site is being viewed, resizing automatically and altering navigation to suit the device rather than develop a third party app that users have to waste time downloading and forgetting to use.
The coding language lives by the theory that mobile devices come first and since mobile browsers are so limited in what they can do, design should center around that idea first, given the rise of mobile devices. When sites are not developed with W3C CSS3 (RWD), mobile browsers degrade the experience, can be slow to load, and users have to pinch the screen and pan around to zoom in and out to use the site which is not ideal, so RWD reshuffles the site automatically, knowing the size of that browser screen and making for a better browsing experience and not requiring users to download an app.
How to test any site for responsiveness
You’ve heard recently that so and so site is “responsive” and you go view it on your iPhone and get annoyed that you still have to zoom in and out, scroll all over the place, and your mobile experience is still heavy and slow.
Enter “The Responsinator” wherein you enter any URL and it will show you exactly how any website will present itself on the most common devices (iPhones, Androids, Kindle, iPad). If each size has a different layout (as pictured above), it is automatic because it is responsive, but if you see the corner of a website, it is not responsive (as pictured below). Responsinator can also help site owners and developers to see on which devices a site does not look or function properly.
Responsive web design is not yet common, and is not a coding language understood by all developers, so as a business professional, it is unrealistic to expect your designer to whip up a responsive site overnight. The biggest implication of RWD is the doing away with requiring people to download apps for a smooth experience, when they could simply experience a mobile site in their regular browser. Responsinator helps you test any site for responsiveness, especially your own, and while some industries will struggle with responsiveness because of the complex nature of what must be displayed on a site (calculators, retail search, real estate IDX), consumers will ultimately demand a more seamless mobile experience, and responsive web design is the beginning of answering that demand.
Here are some sites to test on The Responsinator to give you a feel for the difference responsiveness makes to the mobile experience (special note: RWD is very, very new, so just because a site is not yet responsive is not a reflection of the quality of the site or the company running it):
- Responsive: AGBeat.com
- Responsive: SimpleBits.com
- Responsive: TrentWalton.com
- Not Responsive: CNN.com
- Not Responsive: Candy.com
- Not Responsive: Gap.com
Justin Avery
March 24, 2012 at 7:00 pm
A nice overview of the responsinator.
There are a few other tools which achieve similar functions, some a with less options but others with customisable options.
Regardless of these knd of tools available I you are going to go down the responsive path you need to test on the devices themselves. There is no substitute for the real thing when it comes to the interactive tests (is this button big enough, is the target click link large enough for a thumb, does my colors/images look good on the device etc)
Pingback: Take a page from MTV: reevaluate your web design - AGBeat