Responsive Web Design

Responsive Web Design is more important now than before, as people are viewing Web pages on many different screen sizes including smart phones. Having a Web site that looks good in all screen sizes is somewhat challenging, but doable. You do not need to have multiple screens with varying sizes to test your design. How do you do this?

Ingredients

1. Responsive pages need a flexible grid layout.
2. Images should be flexible and able to resize if the screen is smaller than the image.
3. Media queries is needed so the CSS can change depending on the detected screensize.

Media Queries

Media queries is an extension of media dependent stylesheets created for different media types. The most commonly used media feature is width. How do you use it?

First you'll need this line of code in your header:

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

and this for Internet Explorer

<!--[if lt IE 9]>
   <a href="/js/css3-mediaqueries.js">/js/css3-mediaqueries.js</a>
<![endif]-->

Download the javascript here and upload it to your server. Change the path to the path for your css3-mediaqueries.js file.

Then in your stylesheet you will have several sections of this kind of code:

@media screen and (max-width: 1024px) {
   img {
       max-width: 100%;
    }
   iframe {
        max-width: 100% !important;
 }
        #wrapper {
                width: 90%;
        }
}

This can be added anywhere in your stylesheet. The first line has a max-width attribute that you can type whatever width you want to be the breakpoint. This means that all screens with the same width or smaller than the max-width will have those styles defined within it applied to it. You may make images have a max-width of 100% so they can re-size if your screen is smaller than the image itself. The image will only be as large as the originally stated size. Be careful to not add the height attribute to image sizes when you first define its dimensions though. Otherwise images will have a flexible width but the height will stay the same. Same goes for iframes.

How do you test different screen sizes? You may resize your browser window and test your design at different widths. keep making the window smaller and smaller until you see a point where your design breaks. That is the point where you need another @media screen and (max-width:   ) {…} declared. How do you know how big your screen is at the breakpoint? You can use an existing pixels grid such as the one on websitedimensions.com.

Why not set default breakpoints at known screen resolution sizes? Sometimes people will have obscure screen sizes or window sizes. People don't necessarily always use standard screen sizes.

What about screen sizes that are bigger than the screen you have? You can set a min-width property for @media screen and (min-width:   ) {…} instead of max-width and have a fixed width for those screen sizes. That way if your layout is normally fluid, if the screen is too big, text will stretch too far across the screen, lowering the readability of text on the screen.

Feel free to share any tips you may have below.

Flexible layout 

You should design your layout to be fluid up until a certain width and make it a fixed width layout for bigger screen sizes. That way the content fits within the window without having a hrizontal scrollbar. You can do this by making the width of the divs a percentage width rather than pixel width. My example previously shows #wrapper having a width of 90%.

Flexible images

Images, iframes, tables etc should also be fluid. This can be accomplished by the max-width attribute. That way the image will not be stretched beyond its original size.

One last note, you do not need to make your text change size depending on the screen resolution, as one size should be readable across different screens. That's it for now. Let me know if this was helpful. If you have any tips or tricks, you may share them as well. My site is using the media queries. My site uses responsive web design. You may change the window size or test it on different screens to see. Below are some screenshots of what it may look like in a smart phone with the screen resolution 320x480px;