So, What is “Responsive” Web Design and Why Should I Care?

These days you don’t just need a website, you need a responsive website. So what is “responsive” web design?

According to Wikipedia:

[fac_icon icon=”quote-left”]Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).[fac_icon icon=”quote-right”]

StreetFight has a more nerdy explanation of responsive:

Recently, the term “responsive” has become almost a catch-all term when describing mobile-friendly websites, but there are some distinct differences between a truly responsive website versus, for example, a dynamically served site or mobile specific site that can appear to be “responsive” by the untrained eye.

According to Bob Visser’s Article “A Website Needs to Adapt or Die” from CoffeeCup help articles

[fac_icon icon=”quote-left”]For the first 16 years of the World Wide Web, the Internet was largely accessed from desktop or laptop computers with only a small variation in monitor sizes. The standard viewing size allowed people to keep thinking and working in static, pixel-perfect designs and make fixed-width layouts. Businesses and individuals were transferring their print literature (product information, brochures, etc.) to the web with ‘print design rules’ in mind. Designers were for example paying a lot of attention on ‘the fold’. The most important content, the reason and purpose of the site, had to be visible above the fold. Just as with a newspaper, it had to attract and keep the attention of the visitor, without forcing him or her to scroll down.

Fixed width thinking was only natural

The focus on the fold was not the only design principle borrowed from the print world. In general websites tended to be designed with pixel perfection in mind. They were treated as static fixed width brochures that you could browse through with your mouse.

Very much in line with the print design philosophy, the width of the website was decided and fixed from the start. In the early days of the Internet, an 800-pixel-wide design was standard; when technology improved, many sites began displaying disclaimers that a design would be best viewed at a width of 1024 pixels. The wider the design, the more content would fit above the fold![fac_icon icon=”quote-right”]

According to StreetFight, in the last year “…U.S. mobile internet usage has increased by 73% …. As this trend continues, it’s clear that the mobile web is becoming a more and more important avenue for marketers of all kinds.

[fac_icon icon=”quote-left”]In the multi-screen world we now live in, it’s critical for businesses to have a beautiful site that doesn’t just scale down to low resolutions, but also looks great on all devices — from a 27” desktop display to a “smart” refrigerator, and every tablet, phablet, and phone in between. While there are a number of acceptable strategies for mobile-friendly web design, I believe that for the majority of local businesses responsive design is the best mobile strategy.

. . . .

RWD at its heart is a site that’s built on one domain, that uses one single HTML codebase which is fluidly resized by the CSS to optimally adjust to the screen size of the device that viewing the site. Compared to a dynamically served site (which can refer to both adaptive web design or RESS-responsive design with server side components), the key difference is the amount of HTML whereas those sites have multiple HTML code bases that a server chooses between to present depending on the size of the device that is detected.[fac_icon icon=”quote-right”]

So Why Should You Care?

Because responsive sites are more efficient for web-crawling bots, Google has decided that responsive sites will be more favored. While this is a good reason, the best reason is that you would be efficiently serving up the best content and best user experience for your viewers. With a responsive website, you will be able to show your company or organization in its best light

According to StreetFight, “Outside of Google’s preferences, RWD offers a number of additional benefits that increase the user experience and aid business:”

[fac_icon icon=”quote-left”]
– Flexible rendering: responsive design allows for fluid and optimal viewing experience across all device and browser sizes and orientations. No pinching, zooming, and panning required.
— Easy maintenance: One codeset of HTML means cost and time efficiencies when maintaining and making changes to the site.
— Consistent and streamline user experience: Users can access your site across devices and expect a similar feel, navigation, and experience regardless.
— Easy sharing and linking: One URL makes it easy to link to and share your site and ensures a device optimized experience when those links are then opened.[fac_icon icon=”quote-right”]

These days you need a true responsive website to give a positive experience for anyone interested in your company/organization’s content or product. RWD means it’s necessary to serve the exact same content from the same URL to every viewer, regardless of the device they happen to be using at that moment. So, in case you haven’t considered it, the bottom line is: old sites need to be made responsive (and a design face-lift is probably overdue) and new sites don’t really count if they are not responsive


Posted

in

by

Tags: