Responsive Web Design (RWD) has been a hot topic in the web design industry over the last year. Essentially, RWD allows you to tailor your website for viewing across multiple devices such as smartphones, tablets, smaller laptops, etc. while still maintaining one set of HTML and CSS.
The problem that I find most people have with RWD is building a solid base. So, I want to share some tips on how to get started with a clean, responsive design and build.
It’s all about structure.
When designing responsively, it is important to remember your site structure plays a key role in how elements look on a smaller device.
To build for RWD, you have to create a flexible, fluid grid. I personally like to build a grid from scratch for each project and utilize the approach outlined by Chris Coyier, ‘Don’t Over-Think Grids’, but there are some pre-built grid systems out there, such as 960.gs.
I emphasize “fluid” because it is the most important aspect of RWD. You will have to start thinking outside of set pixels in terms of percentages. (Hint: you’ll probably want to find your old calculator because it involves math.)
The premise here is to use percentages rather than pixel fixed-widths. Any element or style that utilizes pixels, such as padding, margin, width, text-size, etc. can also be passed a percentage. The advantage is that percentages adhere and conform to container width. This is the basic principle of CSS Inheritance and segues nicely into my next point.
There should only be one fixed-width.
For instance, if you are designing a site that sits on a 960px grid your content container (the div immediately after the body element) should be 960px. Whether you center this container on the page, left-align or right-align, it should be the only fixed-width element within your HTML/CSS. All other elements and their accompanying styles can be created using percentages based off the fixed-width container. (Remember: children inherit their parents as explained in the above article).
As you can see, paddings, margins, and elements can be sized based on the total container width. Although this takes some math (and skillful CSS which I won’t get into today), it is really basic at the core.
You are probably thinking, “That fixed-width won’t look good on a phone, right? It is 960px wide, my iPhone is only 640px wide on the screen!” Excellent point!
This is where media queries come into play. If you are not familiar, take a look at this awesome showcase detailing some of the best active examples of sites using media queries.
For our example, a media query simply setting the container width to 100% when device screen size reaches 980px or below will allow for all the other percentages to maintain their size as the screen gets smaller. The only caveat here are our columns above, which we can set to be 100% – (2 * 2.083333%) or 95.833334%, and then also make sure we kill the float by adding float:none.
With a few lines of CSS, we have set a structure that is flexible, fluid and responds to various device screens. Creating new columns, such as a one-third/two-third column grid is easy to do with a little math.
Images need some love too.
There is another big topic in regards to RWD: fluid images. Images like the one above can be flexible within our container as well. Setting max-width: 100% on images will allow images to always be 100% of their parent, but never more. There is more info on this by Ethan Marcotte, the purveyor of RWD, here on A List Apart.
To summarize, building responsively can be broken down into four simple steps:
1. Analyze your content.
2. Build a grid to your design.
3. Utilize basic math to create the percentage-based structure for your content pieces.
4. Style specifically to a device window or screen size using media queries.
I did not get into the full documentation for creating the actual setup in our example above, but if you visit my personal site, you can see a version of it in action. Questions? Leave a line in the comments section and I’m happy to help.