Responsive Web Design

For the first twenty or so years of web design the internet and our monitors remained relatively standard. Then the smart phone came out, tablets were created and larger monitors resolutions were standardized- even TV’s and refrigerators now use the internet. Change was required; thus, Responsive Web Design emerged.

What exactly is Responsive Web Design, in brief

multiple computing devicesResponsive web design utilizes a technology called CSS3 (cascading style sheets) which controls the layout of the entire website, what’s unique in responsive web design is that this CSS3 technology checks the viewing devices width and/or height and also can identify specific types of devices and alters your experience with the website accordingly. This is accomplished using what is called a ‘media query’.

Why use responsive web, why not use a mobile site?

We use responsive web sites to improve our customer or client’s experience with our website or service. As mobile usage continues to increase more and more people are visiting your site from their tablet, or their phone but they may want to come back to your site later- so they email the link themselves. These mobile pages look awful on a desktop computer. In addition many sites utilize redirects that will incorrectly send the viewer form the site they intended to visit to the homepage- for your customer/client this is an awful experience that perhaps you’ve experience yourself. It is for this reason primarily that people are encouraged to embrace responsive web design practices.

If improved user experience alone isn’t enough, Google’s best practices for SEO (search engine optimization) is to embrace responsive design. Google states this creates an improved user experience in addition to avoiding the huge problem of duplicate content on your website (a factor which can hurt rankings in search engine result pages).

There are still a few very specific instances where a mobile site should still be considered over a responsive site, but most of them time it is not the case.

 How does responsive web design affect the production of a website?

responsive mockupsIn the past, a web site would start as an idea, then some pencil sketches and finally a mockup would be created using software such as Adobe Photoshop to create an idea of what the live site will look like. From there the designer hands the site off to a developer who creates the HTML version of the site and then the site goes live.

Do designers still use mockups?

Today the mockups in Photoshop are still requested; however, it’s far from ideal for the developers and designers. This is because the sites are more easily created like a statue than like a painting- the site is built and design simultaneously with the idea in mind, direction outlined as opposed to a sketched out diagram.

Do responsive web designers still use mockups? Yes, to accomodate those who are accustomed to this approach. However, you now will have a desktop mockup set by a series of different device mockups attempting to cover the gambit devices. It’s very time consuming, which is why many places have left this practice behind in favor of working HTML mockups which are basic contentless sites that help establish a look.

What time constraints are we looking at?

Every website’s demand and size will affect the time required to build the site. As a general rule of thumb, expect the inclusion of responsive web design practices to double the static web development time frame. This may set you off at first; however, you’re not building a mobile site so this may not affect your business model much at all. The time constraints on the developers is increased significantly as they are required to design, develop and test for all aspect ratios as they build the site. To maintain quality, the developers need time to do their work.

What is Progressive Enhancement vs Graceful Degradation?

Progressive enhancement and graceful degradation are the two general schools of thought when approaching responsive web design. Neither is better than the other; however, they both have their advantages and disadvantages. Progressive enhancement is the method taken when a developer builds a website from the smallest possible size (mobile phone) out to desktop or television sized viewing and implies the site becomes ‘enhanced’ as the screen size gets greater. Graceful degradation is the exact opposite. With graceful degradation the desktop site is first created and then altered as the size of the display gets smaller. For sites that simply want responsive added to an existing site graceful degradation is the most logical solution.


This has been a very brief overview on the subject of Responsive Web Design with non-tech persons in mind. For a technical background and more history on the subject, please read the book Responsive Web Design by Ethan Marcotte, the individual credited for coining the term.