Responsive Design

In my New Media Interactive class, we didn’t really learn web “design” as much as we did the coding aspect and through all that html and css code and javascript nonsense I think a very important thing we learned in that class was how to create a responsive website and the importance of it. A responsive website basically means the website in a whole resizes to fit whatever screen or window it’s in.

This means that the designer or coder would have different stylesheets for a desktop, tablet, and mobile version. Check out these sites for examples of a responsive site:

http://dustoftheground.com

http://interactions.webflow.com (this also just so happens to be a really cool site and have to do with design without coding)

 

Just resize your screen on your computer from as big as it can go width-wise to as small and see how the site changes and responds to the screen size. Now take a look at Facebook, youtube, or even the apple website, all sites you’d think would utilize the benefits of responsive web design but don’t. See how parts of their sites get cut off the smaller you get? How you have to scroll from left to right to be able to see or even read a single part of the site, how annoying is that? Responsive design was created due to the development of tablets and smart phones and due to how annoying parts of the website being cut off on smaller screen sizes was to the viewer. Responsive design was a result of “user experience” coined by Ethan Marcotte in 2010. It’s a web design approach aimed at creating sites to provide an optimal viewing experience–– easy reading and navigation with a minimum of resizing, panning, and scrolling–– across a wide range of devices.

 

I’ve learned the easiest way to do this is to use percentages or “auto” instead of pixels for the widths of divs in your stylesheets. Now you’re probably wondering, what do you mean percentages instead of pixels? What’s a div? What exactly is a style sheet? This is a stylesheet, it defines all the aspects of your site, the colors, fonts, sizes, etc of the elements of the website through css.

 

Screen Shot 2014-05-17 at 7.00.02 PM

(click to enlarge)

The elements of your website are mostly divs, along with different type of fonts like paragraphs (<p>), headers (<h1>, <h2>, <h3>, etc), and lists (<ul> and <li>). Divs are basically the containers making up different sections of your site, they define a division or a section in an html document.  As you can see I used percentages for the width of the info, picture, and main divs. I did this so that between the desktop and tablet version of this site the divs would resize and fit to the screen size. If I do this for all the divs in my website it will, slowly but surely, become responsive.

 

To learn more check out this sweet site: http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

 

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