Connect with us

Hi, what are you looking for?

The American GeniusThe American Genius

Tech News

Brief overview of responsive web design, how to test any site

Responsive web design emphasizes the use of mobile browsers, disintermediating the idea that consumers must download third party apps to use a site in a mobile environment.

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.

Advertisement. Scroll to continue reading.

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):

Written By

Marti Trewe reports on business and technology news, chasing his passion for helping entrepreneurs and small businesses to stay well informed in the fast paced 140-character world. Marti rarely sleeps and thrives on reader news tips, especially about startups and big moves in leadership.

2 Comments

2 Comments

  1. 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)

  2. Pingback: Take a page from MTV: reevaluate your web design - AGBeat

Leave a Reply

Your email address will not be published. Required fields are marked *

Advertisement

The
American Genius
news neatly in your inbox

Subscribe to our mailing list for news sent straight to your email inbox.

Advertisement

KEEP READING!

Business Marketing

(MARKETING) Web design is deceptively complicated. Here are some crucial steps to take before you publish (or republish) your website.

Business Marketing

(BUSINESS MARKETING) Good design is more than just slapping some fonts and colors together. Ask a Designer promises free design advice on their new...

Business Marketing

(MARKETING) Typography is an important component of any design. Type Genius helps ensure everything coordinates beautifully.

Real Estate Marketing

(MARKETING) Your fancy, self-animating website might be making people violently ill, even if it is insanely beautiful. Sorry...

The American Genius is a strong news voice in the entrepreneur and tech world, offering meaningful, concise insight into emerging technologies, the digital economy, best practices, and a shifting business culture. We refuse to publish fluff, and our readers rely on us for inspiring action. Copyright © 2005-2022, The American Genius, LLC.