Michael-Li.com

Michael Li Picture
See my vision and experience my life as a young entrepreneur wtih ambition to learn and experience this wonderful world.
M.Li

Pure Adapt Site – Responsive Design

Filed in: CSS3,Design,Web Design,Web Development

Responsive design is picking up steam and it makes a lot of sense to me. Responsive design is designing a website to be flexible and adjust to the many, many devices and screen resolutions that are out there nowadays. From a pure efficiency point of view you don’t have to design a mobile site or app on top of your normal site now. Instead you have a site designed to respond to the size of your screen with a user friendly experience, which is done with some new CSS3 techniques. Now think about going to your website from a 1080p monitor to your iPhone with a continued user friendly experience without the problems a static website may pose with the change in resolution.

Check out the two Pure Adapt website screen shots below for examples of the same site in two different resolutions:

1440×900

Pure Adapt Responsive Design 1440x900

960×640

Pure Adapt Responsive Design 960x640

You can also just visit PureAdapt.com and see it in action by simply visiting the site and resizing your browser to see the site change on the fly.

How is this done? I’ll go through some of the key components to designing a responsive website below:

  • Percentages – Using percentages is the key to making a responsive design, because it keeps elements flexible. For example setting the width of a div to 90%, the actual width is different when your window is 1440px wide compared to 960px. The same div would be 1296px on the 1440px window and 864px on the 960px window. As the window size decreases this div will also decrease in size.
  • Images – To make an image fluid all you have to do is set the max-width to 100%. This works in most modern browsers where it recognizes the original size of the image and it won’t oversize it and distort it. Older versions of Internet Explorer unfortunately do not support max-width. The style to make all html images fluid is pretty straight forward:

    img{
    max-width: 100%;
    }

    For more information on fluid images see Unstoppable Robot Ninja’s Fluid Images post

  • Float – Floats are important in a responsive design because as the screen size goes down you’ll need to stack your elements on top of one another to keep a user friendly flow. If you had a set of elements floated left it should stack in order of your html, but you’ll probably have to use CSS Media Queries (more info below) to adjust margins and padding.
  • Media Queries – This new CSS3 technique is extremely helpful in keeping a user friendly interface as you decrease in screen size. It offers the ability to make specific adjustments based on your screen size which makes it a very powerful technique. It’s like using if statements on your style sheet for screen sizes, like if less than 800px div id=”nav” is 150px instead of 200px. Here are a couple examples of media queries:

    @media screen and (max-width: 800px){ /* Screen sizes less than 800px */

    #nav{
    width:150px;
    }

    }

    @media screen and (max-width: 1024px) and (min-width: 800px){ /* Screen sizes 801px – 1023px */

    #nav{
    width:200px;
    }

    }

Those are some of keys to creating a responsive design. To see responsive designs in action check out PureAdapt.com, SmashingMagazine.com, UnstoppableRobotNinja.com and Alistapart.com example site.

Now for more information on responsive design visit Smashing Magazine’s Responsive Web Design Guidelines and Tutorials and A list apart’s Responsive Web Design article.

03/20/2012 Comments (4)

4 Comments »

  1. […] Pure Adapt Site – Responsive Design […]

    Pingback by New Pure Adapt Site Design – HTML5 - Michael Li — March 20, 2012 @ 11:57 pm

  2. Hey Michael,

    Responsive design was one of the things I was really excited to add to my new site (rosterbrain.com). To make something friendly across all devices is the ultimate concept for web design so I’m glad to see the industry trending that way. Coding using device sniffers was frustrating at best and devices are released too often for that method to keep up over time.

    The easiest thing for me to do was grab one of the boilerplate templates and modify it to fit my design. I used skeleton of getskeleton.com and it saved me a ton of development time.

    Good work on Pure Adapt. Works well as far as I can tell.

    -Brad

    Comment by Brad — March 28, 2012 @ 5:39 pm

  3. I couldn’t agree more Brad. That was our first try with responsive design and we’ve learned a lot since then too. There are a few things I want to update at some point.

    Adam actually shared it with me this morning and I got to play around with it a couple of times. It is definitely a fun way to learn and I can find it very addicting. Nice job with the site!

    Thanks for sharing the getskeleton.com, I will surely take a look at it for our next project.

    I appreciate the comment and I’ll shoot a tweet out about rosterbrain.com.

    M.Li

    Comment by Michael Li — March 28, 2012 @ 7:49 pm

  4. […] through everything in in depth details. For more information you can also check out my post about HTML5 and responsive design when we redesigned the Pure Adapt […]

    Pingback by LockerPulse is Bigger, Faster, Stronger - Michael Li — July 20, 2012 @ 12:05 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

    Flickr Image Link

    X