What is Responsive Web Design?

Anyone who has ever used a mobile device can tell you that some websites just don’t work properly on their phones and tablets.   Sometimes the media content and at other times the layout is ineffective on a smaller screen.  As mobile technology continues its ascent, developers have struggled to identify a solution that will help them create websites that can compete in markets where desktop computers and mobile devices live side by side and are being used at almost equal levels.

The approach taken so far is to treat mobile devices as separate entities and develop separate websites just for them or to create apps strictly for individual mobile platforms.  When a designer creates a mobile only site, they are putting together a very simple website, with no pictures and greatly simplified navigation.  In addition, they may have to cut website features that customers find valuable.  Not to mention the fact that you have the cost of hiring someone to develop that pared down site and modify your servers to recognize which device customers are accessing the program with.  App development is a possibility that helps some companies maintain their unique features but it is cost prohibitive for some businesses, and in many cases simply overkill.

To address the shortcomings of these two options developers have come up with a web design philosophy know as Responsive Web Design.  Responsive web design is a programming paradigm in which websites are designed to fit to whatever device they are being accessed on without requiring a separate site.  This is done via HTML5 protocols that enable the code behind a website to be more flexible with how content is delivered.  In most current web design styles the screen of a desktop computer is considered to be a canvas of a fixed size.  The web designer places objects on it of a particular size.  When you type in a URL and hit enter you are asking to see that canvas and the items at the size the designer used.  If your screen isn’t the same size as the screen that the web designer used to build the site, then you may find images distorted, test running off page requiring selections, and media that won’t load because your device isn’t capable of processing that information.  At best you can expect delayed loading times on your mobile devices.

Responsive web design addresses this issue by designing with the adjustable screen size in mind.  In other words instead of a fixed size canvas that you might or might not be able to see all of on your screen, the web design space is considered flexible.  One way that they do this is by using relative sizing.  What that means is that images, columns, etc. are defined as a percentage of the available screen space as opposed to fixed number of pixels.  In addition, they user conditional statements to serve only information to a device that the device can handle.  An example of this would be that if a website had a flash element, the programmer would put a conditional statement in the code that said if the device that I am sending this to is an iPad, do not try to send the flash element.

But, how do they do that.  When you type in a URL your computer sends a request to the website’s server to send you the information that comprises that website.  As part of that request your computer delivers information about what kind of device you have and the specifications of your machine so that it can send content in the best way for your device.  Responsive web design takes that information and serves a customized view of the screen based on the percentages and conditional scripts written by the developer.

No technology is 100% error proof and not all websites will benefit from Responsive Web Design.  For instance, websites with lots of interactive content may not benefit from this approach because the tools we use to interact with the data (think mouse and keyboard vs. touch screen) are very different.  To learn more about responsive web design and see if your website is a good candidate for this type of technology you can contact Nourtek Solutions today.  Our experienced developers are at the leading edge of new technologies and can help you create an approach to your technology needs that is innovative, but still uses time tested strategies.

One thought on “What is Responsive Web Design?

  1. Pingback: Responsive Web Design and SEO: The Pros and Cons | NourTek

Leave a Reply

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

© 2017 NourTek Solutions. Privacy Statement | Website Terms | Sitemap