What is responsive design?
Let’s just get right into it: Believe it or not, the Treehouse blog that
you’re reading this article on is actually a responsive design! To see
it in action, open this article on a desktop browser and slowly make the
browser thinner and wider. You should see the layout magically adjust
itself to more comfortably fit the new width of the browser, even if you
make the page as skinny as the resolution of a mobile phone. Here are
some screenshots of what the Think Vitamin design looks like at various
screen resolutions:
The first key idea behind responsive design is the usage of what’s
known as a fluid grid. In recent memory, creating a ‘liquid layout’ that
expands with the page hasn’t been quite as popular as creating fixed
width layouts; page designs that are a fixed number of pixels across,
and then centered on the page. However, when one considers the huge
number of screen resolutions present in today’s market, the benefit of
liquid layouts is too great to ignore.
Fluid grids go a few steps beyond the traditional liquid layout.
Instead of designing a layout based on rigid pixels or arbitrary
percentage values, a fluid grid is more carefully designed in terms of
proportions. This way, when a layout is squeezed onto a tiny mobile
device or stretched across a huge screen, all of the elements in the
layout will resize their widths in relation to one another.
In order to calculate the proportions for each page element, you must
divide the target element by its context. Currently, the best way to do
this is to first create a high fidelity mockup in a pixel based imaged
editor, like Photoshop. With your high fidelity mockup in hand, you can
measure a page element and divide it by the full width of the page. For
example, if your layout is a typical size like 960 pixels across, then
this would be your “container” value. Then, let’s say that our target
element is some arbitrary value, like 300 pixels wide. If we multiply
the result by 100, we get the percentage value of 31.25% which we can
apply to the target element. Here’s the math:
Fluid Grids
If your values don’t work out so neatly, and you get some floating
point value with many numbers after the decimal, don’t round the value!
We humans may enjoy nice neat numbers and making our code look pretty,
but your computer (and the final look of your design) will benefit from
the seemingly excessive mathematical precision.
Fluid grids are a very important part of creating a responsive
design, but they can only take us so far. When the width of the browser
becomes too narrow, the design can start to severely break down. For
example, a complex three-column layout isn’t going to work very well on a
small mobile phone. Fortunately, responsive design has taken care of
this problem by using media queries.
Media Queries
The second part of responsive design is CSS3 media queries, which
currently enjoy decent support across many modern browsers. If you’re
not familiar with CSS3 media queries, they basically allow you to gather
data about the site visitor and use it to conditionally apply CSS
styles. For our purposes, we’re primarily interested in the min-width
media feature, which allows us to apply specific CSS styles if the
browser window drops below a particular width that we can specify. If we
wanted to apply some styling to mobile phones, our media query might
look something like the following.
@media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on... }
Using a series of media queries like this, we can work our way up
towards larger resolutions. The set of pixel widths I recommend
targeting are as follows:
- 320px
- 480px
- 600px
- 768px
- 900px
- 1200px
Again, these are just recommended, and should serve as a starting
point. In an ideal world, you would adjust your layout to perfectly
match every device width, but often times you have to pick and choose
where you spend your efforts. From a more practical perspective, the
resolutions that a design targets will be based on the resolutions of
the people using that design, time and budget constraints, highly
contextual situations, and so on. In summary, when deciding what
resolutions to target, you should use your judgement. Targeting more
resolutions is going to take more time, and assuming you’re not an
immortal being with unlimited time, that effort should be spent
carefully.
Again, to see a responsive design in action, simply open this article
up on a desktop browser and slowly resize the browser to make it
thinner. You should see all the page elements adjusting themselves
automagically to fit the new width, going all the way down to the size
of a mobile browser.
No comments:
Post a Comment