Blog

My First Responsive Web Design

Posted September 26th, 2011 in web design, web development

If you’re involved in the web design world, you’ve probably come across the term responsive web design. The concept was first established from this article by Ethan Marcotte on A List Apart. It gained popularity and then Marcotte wrote a book on the subject.

So what is responsive web design?

Responsive web design allows you to create a device agnostic website meaning the website will adapt to any device (like an iPad or smartphone) or browser size without having to use multiple designs/stylesheets. It “responds” and flows to match the size of the device without compromising or breaking the design. There are three steps to create your responsive design:

1. Flexible Grid

In order to have a flexible layout, it needs to be built on percentages rather than a fixed layout that is built on pixels. This also applies to typography and any margins and padding. It’s also built around the 960 grid system. So for instance, you have a container of 900px, you would divide 900 by 960 which equals 0.9375. Move your decimal place over to the right two places and you get your percentage 93.75%!

.container {
width: 93.75%; /* 900px / 960px */
}

2. Flexible Images

But what about images? They are static and can’t be fluid. However, there is a small piece of code that allows your images to be flexible.

img {
max-width: 100%;
}

This will ensure that the image matches the width of it’s container. This can apply to other media objects like video. However, this is not supported in IE6 and below. If you need to support IE6, then you can put the following code in an IE6 specific stylesheet.

img {
width: 100%;
}

3. Media Queries

Now that your layout, typography and images are all flexible, you might think “That’s it! I’m done.” This will give you a flexible site, no doubt, but when you view your site in a mobile browser, your site is shrunk so small, you may not be able to view the text or the menu is all cluttered. Media queries allow you to change various elements of your design based on the size of the device or their browser. So now the sidebar has been moved to below the main content of your blog or the logo that was shrunken in the corner is now centered and relative to the size of the device.

So after I read Ethan Marcotte’s book “Responsive Web Design” I decided to take a site I had already designed and make it responsive. You can see the site here. Try changing the size of your browser window and see how the design adapts. If you’re a web designer and want to try this out, I highly recommend getting Marcotte’s book.

ateneo responsive My First Responsive Web Design

For more resources and examples go here:

Bexxie Avatar

About the author

Bexxie has been designing for the web for over 5 years specializing in pixel perfect designs, clean, semantic code and custom WordPress themes. She also enjoys producing music, doing yoga, eating noodles and playing with her dog Jack.

Comments

6 Responses so far

  1. Nice article and nice design – works perfectly

  2. Bexxie says:

    Thanks for stopping by and glad you like the design!

  3. It’s good to see this website is finally getting the attention that it really deserves! Keep up the excellent work.

  4. Having read this I thought it was rather enlightening. I appreciate you finding
    the time and effort to put this short article together.
    I once again find myself spending a lot of time both reading and leaving comments.
    But so what, it was still worthwhile!

  5. Attractive component to content. I simply stumbled upon
    your site and in accession capital to claim that I get in fact
    enjoyed account your blog posts. Any way I’ll be subscribing
    for your feeds and even I achievement you get admission to persistently fast.

  6. Fast Bad Credit Loans – An Excellent Alternative
    For Awful Credit Owners electric razor comparison the interest is fixed beforehand;
    the borrowers pay a fixed amount for the fixed duration which range
    from 15 to thirty years.

Leave a Reply