11 Responsive Design

In the early 2000’s, many web sites had two versions – a mobile version and a desktop version. When a user arrived at their site, they would run a JavaScript program to determine whether the user was viewing on a mobile or desktop browser, then automatically route them to the appropriate version of their site.

But maintaining two separate web sites was costly. In 2010, Ethan Marcotte, a web designer responsible for The Boston Globe’s web site, proposed a new way. The idea was to use the newly-released CSS Media Queries (which are essentially if statements) to create web sites that reconfigured themselves to fit any screen size. He called this new idea Responsive Design, and it caught on fast. Today almost every web site incorporates responsive design elements.

What is a Responsive Web Site?

Responsive web sites change their CSS rules to fit the user’s browser. For example, a responsive web site might have 3 columns on a desktop or laptop browser, but only 1 column on a phone or tablet browser.

Two Pillars of Responsive Web Design

Responsive Web Design involves 2 CSS technologies.

1. Flexible Elements and Images.
2. CSS Media Queries.

Flexible Elements and Images

You already know this. Use max-width, margin:auto, display: flex, and % values for widths instead of px values. Then your elements and images will grow and shrink to fit the browser.

CSS Media Queries

Being flexible is good, but three or more elements placed side by side are unlikely to look good on a narrow phone display. CSS Media Queries let you write different CSS rules for different sized screens. You can write CSS Media Queries to:

• display a single column for phones but more columns for wider devices;
• change font sizes, colors, and other properties depending on browser width;
• hide some content on smaller browsers and show it on larger browsers.

In a responsive design, the HTML of the page is the same on every client, but the style rules are tailored to the device or browser on which the page is viewed.

• Media = The device you’re displaying on.
• Query = The question you ask before deciding which CSS rules to use.

How It Works

To create a media query, put an @media tag in your style sheet to specify CSS rules that apply on some browsers but not on others. For example, you might want your h1 headings to be bigger on wide browsers and smaller on narrow browsers.

In your style sheet you could have the following rules:

h1 {
    font-size: 40px;
    color: red;
}

@media (max-width:480px) {       
    h1 {
        font-size:20px;
    }
}                              

In the example above, the first CSS rule sets a font size and a color for all h1 elements. The second rule also applies to h1 elements, but it’s inside a media query (in blue). 

• The first blue line says that the rules in this Media Query are only for screens up to 480 pixels wide. The syntax (brackets, colon, spacing, px, @, etc.) is all important!
• Then there are braces { } with another CSS rule nested inside. This rule also applies to h1 elements, but because it comes later in the file, its property-value pairs will override the earlier rule on smaller screens.

The result is that on this page, h1 elements will always be red, but will use a larger or smaller font depending on the browser width.

The first example has only one rule inside the media query, but you can put as many rules as you like in there:

@media (max-width:480px) {
    h1 {
        font-size:20px;
    }

    p {
       font-family: sans-serif;
       color: blue;
    }
}

You can also have different media queries for different sized browsers.

Adjusting the Number of Columns

Mobile layouts usually have one column. Desktop layouts often have 2 or more columns.

Default is multiple columns

• Use display: flex for the div container
• Set a width (%) for the elements inside the flexbox that make sense for the number of columns you want
• Set other flexbox properties as appropriate (justify-content, etc.)
• Adjust padding, margin, font-size and other properties as appropriate

Media query for a single column

• Create a media query with max-width set to the point where you want to transition from one column to multi-columns.
• Set display: block for the div container (that’s the default setting for the display property)
• Use width: 100% or width: auto for the elements inside the container (auto is the default setting)
• Adjust padding, margin, font-size and other properties as appropriate

Another Option

• In the media query, leave the container as display: flex
• Set flex-direction: column to make it a single column
• Set flex-direction: row (the default setting) to make it multiple columns
• Adjust padding, margin, font-size and other properties as appropriate

Hiding and Showing Elements

Sometimes, “less is more” for mobile users. You can set display: none to completely hide an element on mobile screens.

For larger screens, set it to flex, block, or inline depending on what kind of element it is:

• Flex is for flexbox containers.
• Block is for elements like p, h1, div that separate from other elements vertically.
• Inline is for elements that get embedded in the text of other elements, like a, img, span, b, etc. (Usually, you wouldn’t hide an inline element, though.)

More Advanced Media Queries

You can replace max-width with min-width to specify rules that apply only on wide browsers.

@media (min-width:481px) {
    /* rules go here */
}

You can use the logical operator and to write a rule for medium-sized browsers.

@media (min-width:500px) and (max-width:700px) {
    /* rules go here */
}

You can write media queries for CSS rules that only apply when the user is printing the page (recipe sites use this a lot).

@media print {
    /* rules go here */
}

You can put media queries in a link tag so that an entire style sheet is activated only for certain browsers

<link rel="stylesheet" media="(max-width :400px)" href="phone.css">

For a complete list of everything a media query can do, go to: https://developer.mozilla.org/en/CSS/Media_queries.