Responsive Web Design

I recently read the book Responsive Web Design by Ethan Marcotte.  The idea behind a responsive web site is to make the site viewable on any size device.  That may be a desktop, a laptop, an iPad or an iPhone, to name a few possibilities!  I think this is a fantastic idea.  Why wouldn’t you want your website to be viewable as many ways as possible?

I was given a project idea and was asked to make it a responsive website.  First, I made a wireframe using the 960 grid layout.  This gave me a base for figuring out the percentages of various components of the website.  I designed the page which would be for a normal-size computer screen first.  To make the layout flexible, I converted pixels (fixed width) into percentages (flexible width).  This is done with a very easy formula ….target / context = result.  The target is the size you want to have, the context is the size of the containing element, and the result is the number you will use to make your layout flexible.  I  converted font, elements, images and media sizes from fixed to flexible sizes.  Once the main page was designed, I added media queries for the various view-port widths (also called break points) of devices.

It is pretty cool to see how this works with your own site.  I know I’ve run into many sites that are not responsive.  You end up having to scroll to see the whole page, or maybe you can’t even make the page operate.  This can be very frustrating for the user.  I can see how important it is for a website to be responsive in order to deliver a good experience to all users.  I would recommend this book to other web developers.   Check out the screen shots below of my page at various widths, or give it a try yourself using my site.

http://inetstudent1.francistuttle.edu/jh0916369/discography/index.html

Desktop

iPad

iPhone

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: