'Responsive Design' has become extremely popular in the last six months and will continue to do so with the growing popularity of tablets and smartphones.
There are arguments both for and against the use of responsive design; this post will cover the way in which we choose to integrate responsive design in the websites we create at ResIM (see http://res.im and http://www.centralhuron.com for examples).
Fixed Width
Like many frameworks and sites, we've stuck to the 960px model because it keeps the page within a 1024px viewport, which is still one of the more popular screen resolutions.
When I'm slicing a site I usually set up my container width at 960px and then start laying out columns with widths based on the approved composite.
Once I have the rough layout of columns and structure built for the site I then move into making the site responsive.
Making It Responsive
Using a fixed width at 960px we start with a basic step and change the width of the container from its current width: 960px; to max-width: 960px;.
This is now the perfect starting point for bringing this design down to the device's width. Instead of being locked at 960px it can now get smaller than 960px without going any larger.
Next, I start changing all of the column widths that are pixel values in the composite to percent values. I like to use a quick and easy formula for this:
Take the width of the element, for example a news widget that is sitting next to an introduction text widget (in our example the width of the widget is 225px), and divide it by the max-width of your container (in our example 225/960 = 0.234375). Convert this number to a percent (23.4%) and now use this value in your css as the width instead of the pixel value.
(Width of Element) / (Width of container) * 100 = Percentage width
Once the main columns are set up with percent widths you’ll need to ensure all of the elements inside of those are set up with 100% widths. Now when adjustments are made to the column container widths the elements within the columns will scale down in reaction.
Media Queries
Now that we have the structure set up it's time to start tweaking the design for the smaller screen sizes.
With how the page is currently set up, each element will scale down proportionally in response to the resizing of the browser window. The problem that will now occur is that it will look odd when the elements start getting too small.
This is where media queries come in.
Here’s what we use:
@media only screen and (max-width: 480px) { } and then inside of the brackets you put your css that you want to change when the browser window gets smaller than 480px (in this example).
Next, I set-up multiple instances of this for different widths i.e. 768px for vertical iPad orientation.
Usually I'll have some basic ones for tablets and smartphones but I also include instances for when the browser window gets to a funny spot where something on the pages breaks and I want to change how it looks (for example the logo and nav running into each other or a column that gets just a bit too small).
In this case I use a handy tool called http://resizemybrowser.com/. The nice part about this is that it gives you the current inner size of your browser window which you can then use to resize your window on your site until something breaks and then make another media query instance.
Once you've set up your 'break points' it's time to start rearranging your columns and graphics. For this I'll run you through a quick and easy example.
Let's say you have a 2 column layout where one column, let's call it colA, is set at a width of 65% and a 2nd column named colB set at a width of 35%.
#container { max-width: 960px; }
#colA { width: 65%; float: left; }
#colB { width: 35%; float: right; }
Now as we start resizing our browser window down, we discover that these columns start to look funny at around 700px wide. Here's where we'll make our first media query instance:
@media only screen and (max-width: 700px) {
}
Now we're going to move the smaller #colB underneath #colA. Let's do that by changing the width of these columns to 100%;
@media only screen and (max-width: 700px) {
#colA, #colB {
width: 100%;
float: left;
margin: 10px 0;
}
}
I've added a margin to push the columns away from each other so they don't run right into each other now that they’re stacked.
This is a simple example and not as complex as what you’ll come across, but use this as a first step. Continue restructuring as you go down in size while setting up new media query instances for each size in which the content breaks.
For more information on responsive design and some actual real world code examples check out a few of these sites:
Resource
- http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
- http://www.alistapart.com/articles/responsive-web-design/
Inspiration