ScotStyle

web services by artists for artists

The Case for Responsive Design

by scotstyle on July 27, 2012

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.
This is an artists website at 1600x1200 pixels.

 

Here is the same page at 1280 x 1024

 

1280x1024.jpg

As you can see things get dicey at the lower resolutions of 1024 x 768 and 800 x 600

800x600.jpg

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.

1024 x 768 responsive.jpg

And here at 800 x 600
800 x 600 responsive.jpg

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.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>