Mobile Responsive Web Design

Mobile responsive web design was unheard of ten years ago.  As recently as the early 2000s, websites were designed to be viewed on computers.  Very few people owned smartphones, and those who did rarely used them to access the internet because of the expensive data costs.  However, as smartphones, tablets, and other devices became more and more affordable and popular, businesses realized they had to make their websites accessible to those using these devices or risk losing business to their competitors.

Creating Multiple Sites

The first idea web designers had was to create a website aimed at those on computers and one aimed at those on mobile devices.  The mobile site would be optimized for viewing on the smaller screens and would contain a simplified navigation system.  The website was programmed to detect the type of platform the user was using and automatically load either the standard site or the mobile one. 

The problem with this idea is that both websites had to be updated with the newest content.  This effectively doubled the amount of work it took to add new text, images, or other content to a website.  It was ineffective, especially for large websites that updated frequently.

The Creation of Mobile Responsive Web Design

The idea of creating a website that could adapt to different platforms was suggested as early as 2004, but it wasn’t implemented until much later.  The idea is that instead of being designed for a single type of device, a website could be coded in such a way that it dynamically changed depending on what device was being used.  The same website could then be used for computers, smartphones, tablets, and any other device.  Content only had to be created and uploaded to one website.  This simplified the entire process—content, SEO, and development only had to be done once.

Relative Sizing Versus Static Sizing

A mobile responsive website has a number of elements that are slightly different from traditional websites.  Everyone with a responsive website is set up on a fluid grid.  The size of every element on the page is set relative to other items on the page.  For example, images are often designed to be a percentage of an area instead of being a specific number of pixels.  This means that if the overall page is reduced in size to fit on a mobile platform, the elements are resized along with it but remain proportionate to each other.