Responsive Web Design Close Up

By HTMLGoodies Staff  |   Email     Print  Post a comment

By Katrien De Graeve

It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today’s needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

 

Core Concepts

Three key technical features are the heart of responsive Web design:

· Media queries and media query listeners

· A flexible grid-based layout that uses relative sizing

· Flexible images and media, through dynamic resizing or CSS

Truly responsive Web design requires all three features to be implemented.

The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive Web design.

While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.

Media Queries

Starting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" />

That was it! Luckily, the W3C improved media queries in CSS3, moving them a big step forward.

Today, you can use media queries to scope styles to specific capabilities, applying different styles based on the capabilities that match your query. You can even combine queries that test for several features by using semantic operators such as AND and NOT). Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.

There are three ways to implement media queries:

  • Media queries and media query listeners
  • A flexible grid-based layout that uses relative sizing
  • Flexible images and media, through dynamic resizing or CSS

 

Figure 1 Implementing Media Queries Directly in a Style Sheet

#nav

    {

        float: right;

    }

        #nav ul

        {

            list-style: none;

        }

    @media screen and (min-width: 400px) and (orientation: portrait)

        {

                #nav li

                {

                    float: right;

                    margin: 0 0 0 .5em;

                    border:1px solid #000000;

                }

        }

    @media screen and (min-width: 800px)

        {

            #nav

            {

                width: 200px;

            }

               #nav li

                {

                    float: left;

                    margin: 0 0 0 .5em;

                    border: none;              

                }

        }

<![if !supportLists]>3.       <![endif]>Include a query in a linked style sheet’s media attribute:

<![if !supportLists]>1.  <![endif]><link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />

Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten.

The following images present an example of a responsive Web design approach that uses media queries. Figure 2 and Figure 3 both show a desktop using Internet Explorer 9 in two different resolutions. Figure 4 shows the same responsive site on a Windows Phone, also with Internet Explorer 9.


Figure 2 Navigation Appears on the Left


Figure 3 In an 800x600 Resized Window, Navigation Switches to the Top