Abstract:
How to scale down your website for mobile devices.

Created by Peter Kankowski
Last changed
Filed under Web programming

Share on social sitesReddit Digg Delicious Buzz Facebook Twitter

Responsive web design with CSS3

This website now scales down to a smartphone screen. You can shrink the browser window to see how it looks under Android or iOS.

On the main page, the columns are replaced with a vertical layout. On other pages, the left sidebar is moved below the article text, except for the logo line, which is widened. There are other small tweaks; for example, comments are not indented in the mobile version of the site. The details are explained below.

This website on iPhone screen    This website in a shrinked browser window

CSS3 media queries

With media queries, you can apply CSS rules only when some condition is met. The condition is usually related to browser window width (max-width or min-width):

.sidebar {width: 30%; float: left}
.article {width: 70%; float: right}

@media(max-width:35em) {
    .sidebar, .article {width: 100%; float: none}
}

When window width is greater than 35em, the rules in @media are not applied, so we have a two-column layout. When the window width is 35em or less, a vertical layout is used. The block element that is the first in the HTML code is placed above the second element. In this case, it makes sense to place <div class="article"> above <div class="sidebar">, so that user can start reading the article on her smartphone without scrolling down.

Note that I use classes (.sidebar and .article) instead of HTML5 tags <aside> and <article> for compatibility with Internet Explorer 8.

Many developers measure window width in pixels, e.g., max-width:600px. However, when user increases font size, two-column layout may look non-proportional even at 600 pixels. To remedy this problem, use ems, which scale with the font.

You may need to hide some elements in the mobile version. For example, let's hide navigation in a footer, which would clutter the mobile version:

@media(max-width:35em) {
    .footer .sitemap {display: none}
}

Instead of hiding optional elements inside the footer, it's often easier to design two versions of the element: a rich, multi-column footer for desktop users and a simple one-liner for mobile users. Don't try to use both min-width and max-width for this purpose:

/* There is a bug here. Please don't use this code. */
@media(max-width:35em) {
    .desktop-footer {display: none}
}

@media(min-width:35em) {
    .mobile-footer {display: none}
}

The first condition is (width <= 35em), while the second one is (width >= 35em). When the window width is equal to 35 ems (exactly), both elements will be hidden. Here is how to avoid this problem:

.mobile-footer {display: none}

@media(max-width:35em) {
    .desktop-footer {display: none}
    .mobile-footer {display: block}
}

Besides, an old browser that does not support CSS will display both footers, but the layout will probably be broken without CSS anyway.

Viewport tag

By default, a mobile browser such as Chrome or Safari renders the page at a large window width (which is typically 980 px), then scales it down to smartphone screen width. In this way, the browser can display desktop sites without breaking their layout. To render the page at native resolution, insert the following tag into <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

You can also turn off zooming, but it will be inappropriate if you scale down the images (see below):

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >

It's better to allow zooming for the cases when your user wants to see a detail of the scaled-down image.

Scaling images

After setting the viewport width, you may notice that wide images don't fit into smartphone screen. Some pictures must be corrected individually. For example, if you have two side-by-side portrait-orientation images in one PNG file, you need to break them into two files:

Place two side-by-side portrait-orientation images into separate files

For other images, you can employ this quick fix:

img {max-width:100%; height:auto}

You need height:auto to scale the image down proportionally if you specify image size in pixels in <img> tag (the width and height attributes). It makes sense to specify it, because when your browser knows the image size, it can lay out the page before downloading the image file.

Fluid (liquid) layout

I also use a liquid layout on this website. Column sizes are specified in percentages, so they scale with the window width. Margins and paddings are specified in ems, so they scale with the font size. Liquid layout is harder to design when you have a lot of graphics, but it's still possible on most sites.

Conclusion

It's possible to design a single version of your site that will scale to smartphones, tablets, and desktop PCs. Use media queries in your CSS, add the viewport tag, and scale your images to fit them into a narrow screen.

Peter Kankowski
Peter Kankowski

About the author

Peter is the developer of Aba Search and Replace, a tool for replacing text in multiple files. He likes to program in C with a bit of C++, also in x86 assembly language, Python, and PHP. He can be reached at kankowski@gmail.com.

Created by Peter Kankowski
Last changed

Leave your comment

Your name:


Comment:


Please ignore this field: