Responsive design

Since I caught a little time between my exams, and after reading several posts on this topic, I decided to sit down and try out things I was reading about.
Result of “sitting down” is new theme to this blog, and as you can see it really is “responsive”. It is not masterpiece, and it’s not completely finished. It’s more like some kind of demo to show how simple can it be to create basic responsive web page.
There is no fancy css framework used, and there is no javascript (yet).

For those who might not have heard this term, responsive design basically means that you have one template that displays in different way on different screens (desktop, tablet, phone).
First of all, not everyone thinks responsive is a good idea. Here you can read an article that is against responsive.
I don’t think I’m competent enough to claim it is great or to say it isn’t.

Anyway to create responsive layout, you have to stop thinking in pixels, and start thinking in percents. That is first step.
Of course if this was the only step, result would be micro page nobody could read. Imagine page 1000px wide only scaled down to 240px. Especially if your layout has 4 columns. There is no way you could scale that down to 240px.

So aside from scaling page down, you have to decide what parts of page you would “sacrifice” (remove or reposition) for better readability.
This is what CSS media queries  give you possibility to do. Using media queries you can apply different CSS properties on different resolutions for same HTML element.

Now you can write some CSS rules, and than you can “run them over” using media queries.

This piece of CSS means we have two columns. First is 2/3 of screen wide, and second is 1/3. But if your screen has resolution of 600px in width or less, first column will be 95% of screen, and second column won’t be displayed.

Fluid images in responsive design

To make images act like the rest of design, or in another words to make them stay in their containers you need to make few changes.

First thing you need to do is to set maximum width of image. It will (almost always) be 100%, unless you have something else planned.
This doesn’t mean image will take up to 100% of the screen. It means image will take up to 100% of parent element. So you can put your image inside of container that is 20% wide, and your image will take up 100% of that 20%. To make image height change proportionally, you need to set height property to “auto”.

Now your img selector can be something like this:

Now this is basic (enough to get you going). Next thing to do is get your calculator and calculate percentages you will be using.
On theme this blog uses, almost every measure is percentual, except for some text and box shadow properties.

There are few errors you might run into (and miss them. At least I did):

  • Not defining <body> tag “max-width” property. This will make your design look ok on normal resolutions, but what happens if someone has screen resolution of 1900px in width. Your design gets too wide, and loses it’s form.
  • Be carefull when defining “min-width” property. You could forget you used this property, and just setting “width” property for the same element won’t override “min-width”, and you could get horizontal scroll on some resolutions.
  • Rounding element dimensions to 2 decimals. Instead of writting 33.33%, it doesn’t take too much to write 33.33333%. Sometimes this small errors can get you over 100% and make you a problem.

In this post I didn’t write about optimizing this kind of design for internet explorer 6, 7 and 8. Internet Explorer 9 is rendering this kind of design just fine, and even IE 8 is doing it “almost” good.

In the end, for those of you who want to find out more on this topic, you can read some of theese great tutorials on responsive desing:

Beginner’s Guide to Responsive Web Design

Responsive Design in 3 Steps

Responsive Web Design: What It Is and How To Use It

Leave a Reply

Your email address will not be published. Required fields are marked *