One Size Fits All – Why You Need A Responsive Website

Written by: Drew Lyon   Austin, Texas

Posted on: June 4, 2012

Share

“Does this iPhone make me look fat?” asked the self-conscious website.

 

“No, no, of course not, it’s actually quite slimming,” said the website being looked at on a *gasp* desktop monitor.

 

Try not to think of “responsive design” as squeezing into your elastic gym shorts or drawing tight the string on those old, baggy sweatpants. Think of it instead as a futuristic body suit with the ability to rearrange itself—and its contents—on the fly, depending on who’s looking, or more accurately, what they are looking with.

 

In modern web design, beauty is no longer in the eye of the beholder, it’s in the eye of the beholder’s device — the beheld…

 

What Is Responsive Web Design?

A responsive website features a layout that seamlessly reshapes itself to best fit the screen on which it is presently being viewed. Meaning, if you pull up a responsive website on your iPhone, iPad, and laptop, you may see three different presentations of the same content, each featuring text and images that are legible and pleasing to the eye. No squinting necessary.

 

A basic example would be a website that shows three columns of content when you are looking at it on a full size window that shifts to two columns on a midsize tablet display before consolidating into one on a smartphone screen.

 

 

It is important to note that the content on a responsive website is NOT scaled arbitrarily or shrunken; instead, it is logically re-positioned for maximum readability on the user’s display. This distinction matters because, even though scaled websites are sometimes usable on a smaller display, often the text and images are too tiny to be comfortably read without an excessive amount of pinching and zooming.

 

Here’s what it looks like on an actual site:

 

 

How Is This Different Than Having A “Mobile Version” Of My Website?

A mobile website is a completely separate version of your website. This requires development for two separate websites as opposed to one. Except in rare cases in which it makes sense to have a mobile site that is drastically different from your website, an app—responsive design may render mobile-specific website versions near obsolete.

 

What Caused The Shift?

Responsive web design is a reaction to two dramatic changes in internet browsing activity:

 

1. A rapid increase in time spent browsing the web on mobile and tablet devices

 

 

2. A rapid growth in the number of mobile and tablet devices available to consumers (all with varying screen sizes and resolutions)

 

 

The first point suggests how it has become impossible for website owners to ignore mobile browsing, while the second shows how unrealistic it would be to try and build separate sites for every new device that gets released. Responsive design is the answer to both of these trends.

 

More Reasons To Choose Responsive Design

Save money and time – It’s faster and cheaper to build one website versus two, or three, or four. The same goes for website updates; responsive design allows you to make one change and have it uniformly show on every device.

 

Consistent user experience – Know that your website visitors are getting the same great experience, and access to the same content, whether they visit your site on their phone, tablet, laptop, or desktop computer.

 

Instant compatibility with all operating systems – Not only are there a growing number of devices and platforms, the OS market is becoming more scattered as well. It’s not enough to have an iOS only app, now you need Android app and perhaps an app developed specifically for Amazon’s custom OS (a modified version of Android) used on the Kindle Fire. But there’s one thing all of these devices have in common: a web browser. A responsive website is compatible with anything that has a web browser, even those big grey boxes with a detached keyboard, mouse and monitor.

 

Back to the future – How will your website look on the iPhone 8, or the iPad mini, or Google’s Face Shield? What about the Facebook phone? Until a device comes out with a circular screen, responsive websites will adapt themselves to virtually anything with a web browser.

 

How Much Time Do I Have?

It depends…what kind of shape is your site in now? If your website is overdue for a new look—and improved functionality, this is probably the right time to develop a responsive site and unify your web presence across on all old, new and emerging platforms. If not, if say, you just got a new website developed or have an old site you just love, there is an easy test you can perform to gauge your website’s performance across platforms and devices.

 

Have people who are NOT regular users of your website pull it up on as many different devices as possible. Watch them navigate it. Have them to go to certain areas the site, and ask them what stands out, if they can read it, and so on. Afterward, have them describe their overall experience. If they say it was unpleasant, or if they were unable to perform some of the basic functions of your website, you may want to consider shifting to a responsive design sooner rather than later.

 

How Big of a Project is Development for Responsive Design?

We don’t want to minimize responsive design to sound as if it is merely a switch that can be flipped on. In fact, regardless of what platform your website is currently on, redeveloping your site to utilize responsive design would be considered a complete redesign by most industry standards. All pages of a website must be completely redone and thoroughly tested on different platforms. It is, however a project that will be immensely beneficial to your business in the long run.

HEADQUARTERS

Austin, Texas 78704 | 611 S. Congress #310

Fax: 1 (713) 589-7993