Responsive Web Design

    written by Nikola Lazarevic

    Unlike the painter who draws on a canvas and the architect who designs for a specific space, before starting a new design the web designer has to take into account the different properties of the devices available on the market. This article aims to show how to create a responsive design of a web page adaptable to different screen resolutions, and providing a concrete example.

    To build our example we started from a free pixel layout you can download here.

    Step 1: Make Your Web Page Adaptable to Different Screen Resolutions

    Let’s start with the fonts.
    Unlike pixels or points which are absolute units of measure, the EM is a relative unit of measure (An em is a unit of measurement in the field of typography, equal to the currently specified point size).
    So in order to make a CSS versatile and adaptable to various medias, just set all the font-size using “em” and leaving only the body set at 100% which is the default size of the browser (16px in most cases).
    In order to ensure the right proportions we just divided the content by the container.

    Original Size:

    body {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 16px;
       color: #FFFFFF;
    }
    
    h1 {
       font-size: 22px;
    }
    
    h1 a {
       font-size: 18px;
    }
    

    Size adapted for liquid layout:

    body {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 100%;
       color: #FFFFFF;
    }
    
    h1 {
       font-size: 1.375em /* 22px / 16px */
    }
    
    h1 a {
       font-size: 0.81818182em /* 18px / 22px */
    }
    

    In the lines of code above we applied the formula “content / container”, leaving a comment at the end of each line in order to keep the original values in px.

    For example the tag “a” (18px) is contained in the title “h1″ (22px), then we calculated

    content(a) / container(h1) = 0.81818182

    The element “h1″ (22px) is contained, in turn, in the body (16px), so

    content(h1) / container(body) = 1375

    Once we finished converting of all the fonts we switched to examinate the other elements of the page (wrapper, header, content, etc.)
    Usually a web page consists of a wrapper, header, menu, content and footer. Our goal is to make these sections dynamic, and the most important thing is to keep on applying the rule “content / container.”

    Here is a small example:

    .wrapper {
       margin: 0 auto;
       width: 960px;
       background-color: #000000;
    }
    
    .wrapper .header {
       width: 400px;
    }
    
    .wrapper .header img {
       width: 180px;
       height: 80px;
    }
    

    In the lines of code below we assumed a div “wrapper” containing the div “header” with an image inside.

    .wrapper {
       margin: 0 auto;
       width: 93.75%; /* 960px / 1024px */
       background-color: #000000;
    }
    
    .wrapper .header {
       width: 41.6666667% /* 400px / 960px */
    }
    
    .wrapper .header img {
        max-width: 100%;
    }
    

    Using the “max-width” css property we made the image liquid, so that the maximum width is 100% or 180px. We can make this step general by writing

    img {
       max-width: 100%;
    }
    

    Tip: by using “max-width” and “overflow” properties together you can get interesting results.

    Step 2: Make Your Web Page Responsive

    Ok, now our layout adapts to the screen size of most devices, and we might even feel satisfied, but let’s go forward! What it lacks is something that takes advantage of the unique features of each device. For example we might provide a menu that takes advantage of the horizontal space to a desktop PC with a wide screen size, a vertical menu to a smartphone. Free rein to imagination, tools are on our side!

    Let’s make our design responsive using media queries. The W3C definition of media query is the following: “A media query consists of a media type and zero or more expressions that check for the conditions of particular media features”.

    Let’s look at a practical example:

    @ media screen and (max-device-width: 480px) {
        .wrapper {
           background: #FFFFFF;
        }
    }
    

    In the lines of code above we defined that if the screen size does not exceed 480px then the wrapper class has a white background.

    Thanks to media queries you can change any css class according to conditions on the screen size, the type of media (screen, printer, projector, etc …), the density of pixels, and the device orientation (portrait or landscape). This tool is limited only by your creativity, so we suggest you to investigate this interesting subject and push the boundaries of design.

    Try It Yourself

    Responsive Web Design Test

    Now we have a simple responsive web page, let’s try it:

    http://www.danilogiagnoli.com/responsive/example.html

    Just resize the browser window to quickly test the responsiveness of the web page, but we suggest accessing from different types of devices (PCs, tablets, smartphones) so that you better understand what we’re talking about.

    And here are some tools you can use to design and develop your responsive web site:

    Conclusion

    We discussed Responsive Web Design by showing a technique to make a responsive web page from a web page with fixed layout. In the next articles we will go through on how to fully take advantage of technology to design and build web interfaces with the best user experience for each device.

    written by two awesome young people:

    Francesco Iovine
    Francesco Iovine is a software engineer with a long standing interest in web design, standards and technologies. He’s based in Rome (Italy) and works in a leading company in mobile application development for which designed the best mobile banking solutions for the major italian banks. After receiving his MSc degree in Software Engineering in 2008, he worked in the telecommunication industry gaining valuable knowledge on mobile devices and wireless networks. He also works as freelance web developer and holds lectures about internet security. For more information, visit www.francesco.iovine.name

    and

    Danilo Giagnoli
    Danilo Giagnoli is a web designer from Rome, Italy. He started designing websites 9 years ago as freelance. His knowledge comes from passion and love for web design, his personal site has already received several awards and qualifications like a review on a Web Design Italian Magazine and some CSS DESIGN AWARDS.
    Currently Danilo works as a web designer at Opentech Eng, a major company operating in the mobile industry. When he’s developing websites he takes care of every aspect:  information architecture, prototyping, concepting, interaction design and implementation (html / css).To inspire his work, he usually looks up to css showcase galleries (like CSS Remix), magazines, advertising, product packaging and architecture books.
    Danilo strongly believes in web standards and in semantic markup, and he is convinced that we are living a really exciting and creative time: HTML5, CSS3, Responsive Web Design, Mobile and Web Fonts give us the opportunity to create solutions that a few years ago were impossible!
     
    Authored by

    Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

5 Comments
ADD COMMENT
  • Blake says:

    March 19, 2012

    Nice tut for beginners.

    One thing to add to make using em’s easier. If you add a font-size: 62.5% on the body, em’s become simpler like so:

    1em = 10px, 1.5em = 15px, 3.1em = 31px etc etc

    Happy em’ing :D

  • Michael says:

    March 19, 2012

    So much more flexible than using a static layout. Very cool!

  • Mirko says:

    March 23, 2012

    Regarding the em’s, why not use rem’s with pixel fallback.

    html {font-size: 10px;}
    body{font-size: 24px;font-size: 2.4rem;}

    After this, it is 1rem=10px,2rem=20px and so on.
    Then change the font size on html with media queries.
    For example:
    @media (max-width: 1040px) {
    html {
    font-size: 8px;
    }
    }

    @media (max-width: 920px) {
    html {
    font-size: 7px;
    }
    …. provide these for all ranges, from 320 and up.

    • Danilo says:

      March 23, 2012

      Hello Mirko,
      i think that it’s a good way, we could probably write the same style by using rem and reducing parent-child dependencies that are created using em.

      For many info about the rem – em units take a look here ;)
      http://snook.ca/archives/html_and_css/font-size-with-rem

      • Mirko says:

        April 4, 2012

        Hi Danilo,

        Thanks for the link, but i already saw it. There are not many articles when googling “font sizing with rem”:)

        I personally think using rem’s is the best solution for responsive web design, the only problem is correctly setting the breakpoints(changing pixel value on html).