Responsive Design refers to how a website reacts to the settings of the viewer. Generally if the viewer is on a phone sized screen a tablet sized screen a home monitor sized screen or a television screen.
If the website is built using responsive design the code will react to the size of the screen and depending on how the designer has set it up will provide a suitable viewing experience.
As it stands the phones and tablets shrink websites to appear as smaller versions of themselves which is fine for some sites but can be off putting for others.
The device is not the only hurdle in responsive design. Screen resolution is the key.
On our laptops and desktops we have the ability to set the screen resolution to make it easier to read stuff. The lower the resolution the bigger things appear. Problem is as things get bigger less stuff fits on the screen. A website which looks lovely on a high resolution setting looks cropped in a low setting. There are common screen resolutions but things are always changing as evidenced by the recent proliferation of retina displays on apple devices.
As of January 2012 the w3 schools average users shows
- 1% of visitors to the site have their viewer set to 800x 600 resolution
- 13% have the settings at 1024 x 768 and
- 85% using higher screen resolutions.
I am just guessing here but I’ll bet most folks leave the settings as they came with the computer and that those lower resolutions are signs of older computers.
This is an artists website at 1600×1200 pixels.
Here is the same page at 1280 x 1024
As you can see things get dicey at the lower resolutions of 1024 x 768 and 800 x 600
Here is the same site on iPhone and iPad, Notice it shrinks down fine in portrait mode but landscape cuts off the text.
Now here is a version of the page which uses responsive design
This is 1024 x 768, notice everything now fits.
And here at 800 x 600
Iphone and Ipad
notice the iPhone version uses a completely different layout including buttons and slide navigation thereby maximizing screen space.
Responsive Design is one solution to the multi screen direction the internet is headed toward and it is something that can be applied to existing sites without spending a lot of money to completely redesign.