What Is Responsive Web Design?

Responsive Web Design

In the 1990's and into the beginning of the 21st century, the average web development agency would construct a website to fit monitors with screen resolutions of 640 pixels wide by 480 pixels high, or possibly 800 pixels wide by 600 pixels high. Everything from the layout to the images, to the font size would be selected to match this "desktop experience" of the end user... because, well... everyone was sitting at desktops with identically sized monitors reading webpages (on Netscape Navigator, nonetheless).

Let's take the following website for example...



(Note: We redesigned the above website at frjacquesphilippe.com for Scepter Publishers)


Then, in walks the iPhone, the Droid, and the [insert name of smartphone here]. All of a sudden, your beautiful website looks like this:

A Bad Mobile Experience

Presently, we are experiencing a revolution of resolutions... screen-size resolutions, that is. Millions and millions of consumers/visitors are accessing the web from a multitude of mobile devices from every nook and cranny of human civilization. Whether it's in the passenger seat of a minivan, a window seat in an airliner, on the porcelain throne, or from the couch, our visitors are reading our websites from little screens. We still have visitors utilizing large 21, 23, 24, and 27 inch monitors. Oh, and let's not forget tablets (e.g., the iPad).

All Different Types of Screen Sizes

One of several responses in the web development industry is responsive web design. This is a method wherein the website automagically adjusts to fit the screen size of the viewing device, whether that be a large desktop monitor or a handheld iPhone.

Check out this short video we created below, to demonstrate responsive web design in action:



At On Fire Media, we're passionate about responsive web design for 4 good reasons:

Google's Mobile Friendly Test

Reason #1 - Mobilegeddon

On April 21, 2015, Google began penalizing non-mobile-friendly websites in its search results on mobile devices.  Responsive web design boosts your search engine results.  This alone should be reason enough for your company or organization to embrace responsive web design.

Reason #2 - User Retention

Studies show that when your content is easily readable, your users will remain on your website and will actually consume its content.  Otherwise, they will keep clicking on... and off of your website.  This especially holds true with paragraph width, font size, and line height.

Reason #3 - Usability

Good Usability means that your users can easily use your website.  It's easy for them to find menu items.  They don't have to pinch in and out of the screen to see pieces of content.  They can easily flip their thumb on their iPhone to scroll through images in your photo carousel.  They can scroll up and down on your website, as if it were an app.  Good usability provides a positive user experience, which vastly increases the value of your website or web application.

Reason #4 - Less Overhead

An alternative to responsive web design is to develop a separate mobile website.  This alterative method increases staff time in creating and placing content.  It also unnecessarily increases your costs.  Responsive web design means that you only have one website and one set of content... which automagically adjusts visually according to the screen size of the website visitor.



Do you need an overhaul of your website, so that it is mobile friendly?  Get in touch with us today!