Chapter 5 – Media queries and responsive web designing

What is responsive web design?

Web designer used to ask: What screen resolution is dominant one?

• 15” 1024 x 768
• 19” 1280 x 960
• 23” 1920 x 1080

In reality, this is not the question: What screen resolution is dominant one?

Photo taken by Jeremy Keith.

Introducing media queries

@media <media type> {

}

@media <media type> and <conditions> {

}

Nowadays, the common media types we use are screen and print. Other options are handheld, projection, tv. The media type all means it apply to all media types where the web page is displayed.

For example, in the simple grid system I introdcued in chapter 3, it defines a media query that change the columns into 100% when the screen size is smaller than or equely to 400px;

@media screen and (max-width: 400px) {
  .col {
    width: 100%;
  }
}

CSS styles that’s defined inside media query scope apply only when the media query matches the conditions.

Media Queries for Standard Devices by CSS-tricks.

Foundation’s media queries

 // Small screens
 @media only screen { } /* Define mobile styles */
 
 @media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
 
 // Medium screens
 @media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
 
 @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */

Note: Another way to apply the media queries.

<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 649px)" >

Media is not limited to screen. We can also define rules that applies only when printing.

@media print {
}

Note: we also need to set a viewport meta for mobile device to work. It forces the mobile device to use device width. Otherwise, mobile phone may set the initial viewport to desktop width, resulting your website in very small scale.

<meta name="viewport" content="width=device-width">

Foundation grid system

Foundation’s grid system

<div class="row">
  <div class="small-6 medium-4 large-2 columns">...</div>
  <div class="small-6 medium-4 large-4 columns">...</div>
  <div class="small-6 medium-4 large-6 columns">...</div>
</div>

Here is the guide from the Foundation documentation:

Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.

Why mobile first?

We design website for mobile first because:

• We can focus on the most important thing.
• We must carefully choose what to show in such a small screen.
• If eventually we do not have time for the desktop layout, the mobile one works everywhere.

Drawing mobile sketch

Optimizing font-size

If you resize this web page, you may notice that the font size changes. Here is the exactly source code snippet for the font size.

 /* Scss */
 $font-break-point-wide: 900px;
 $font-break-point-medium: 800px;
 $font-break-point-narrow: 700px;
 $break-point: 560px;
 
 body {
   font-size: 21px;
   font-family: Georgia, serif;
  line-height: 150%;

  @media (max-width: $font-break-point-wide) {
    font-size: 21px;
  }
  @media (max-width: $font-break-point-medium) {
    font-size: 19px;
  }
  @media (max-width: $font-break-point-narrow) {
    font-size: 18px;
  }
  @media (max-width: $break-point) {
    font-size: 16px;
  }

  /* iPhone Retina */
  @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (max-width: $break-point), only screen and (min-device-pixel-ratio : 1.5) and (max-width: $break-point) {
    font-size: 16px;
  }
}

Please note that the code above is Scss. In Scss, we can put @media condition directily inside another scope. This is much straightforward when we adjust the same property of one selector across different screen sizes.

Further reading: Responsive Typography: The Basics by iA.

Responsive copywriting

It's not only about layout. We should also take care of our copywritings.

An example on Basecamp homepage.

Take a closer look on the top navigation. When the screen has more space, the copywriting of sign-up button is See prices & start a free trial”, detail enough so I know what information to expect after the link, right? When the screen has less space, this link changes to a simply “Sign up” text. Short and precise enough.

Another example from the same company. Take a look at the top sentense.

With Foundation, we can archive the same result by using the visibility utility classes.

Foundation’s visibility on various screens

<p class="panel">
  <strong class="show-for-small-only">This text is shown only on a small screen.</strong>
  <strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
  <strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
  <strong class="show-for-large-up">This text is shown on large screens and up.</strong>
  <strong class="show-for-large-only">This text is shown only on a large screen.</strong>
</p>

Interchange responsize content

Responsive design comes with a downside: It wastes (mobile data) bandwidth if a lot of information is hidden in small screen. And it slows down the page loading.

An optimal way to archive the same effect is by using interchange. We use javascript to load the image at the size that fits the reader's screen. Smaller image for small screen. Higher resolution image for larger screen. The readers only need to load what they are going to read. They should never load something that they don't see and use.

The reason we need to interchange content is because of the loading bandwidth. In the visibility section, we show and hide content based on the screen size. But the reader have to download all the content. Assuming the reader is reading on mobile but we load a large image for large screen reader. Then the mobile reader needs to download a high resolution image with the cecular data but never see this image.

Foundation’s interchange content

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">
<noscript><img src="/path/to/default.jpg"></noscript>

If the page is generated by server logic, we can put this interchange code snippet into a server-side rendering funciton. For example, if it’s ruby, we may have the following code:

def interchange_photo(default_path, large_path)
  "<img data-interchange='[#{default_path}, (default)], [#{large_path}, (large)]'>
  <noscript><img src='#{default_path}'></noscript>".html_safe
end

Or we can further simlify the the function by using convention. Assuming the large screen name is always <name>-large and the function is for jpg only.

def interchange_photo(default_path)
  "<img data-interchange='[#{default_path}.jpg, (default)], [#{default_path}-large.jpg, (large)]'>
  <noscript><img src='#{default_path}.jpg'></noscript>".html_safe
end

Navigation strategy

There are different approaches to display navigation in small screen.

Using block grid

<ul class='medium-block-grid-4 small-block-grid-2'>
  <li><a href='#'>Home</a></li>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Works</a></li>
  <li><a href='#'>Contact</a></li>
</ul>

Footer navigation

 <header id='top'>
   <h1>Demo on footer navigation strategy</h1>
 </header>
 <nav>
   <ul class='small-block-grid-4 hide-for-small-only'>
     <li><a href='#'>Home</a></li>
     <li><a href='#'>About</a></li>
     <li><a href='#'>Works</a></li>
     <li><a href='#'>Contact</a></li>
  </ul>
  <p class='show-for-small-only'><a href='#footer-nav'>Menu</a></p>
</nav>
<article>
  <p>A long text here.</p>
</article>
<footer>
  <nav id='footer-nav'>
    <ul>
      <li><a href='#top'>Top</a></li>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Works</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </nav>
</footer>

Hamburger link

 <nav class="top-bar" data-topbar="">
   <ul class="title-area">
     <li class="name">
       <h1><a href="/">Website Title</a></h1>
     </li>
     <li class="toggle-topbar menu-icon">
       <a href="#"><span>Menu</span></a>
     </li>
   </ul>
  <section class="top-bar-section">
    <ul class="left">
    </ul>
    <ul class="right">
      <li><a href="/users/sign_up">Sign Up</a></li>
      <li><a href="/users/sign_in">Login</a></li>
    </ul>
  </section>
</nav>

Further reading: Foundation provides another navigation approach that slides in the menu when the hamburger button is clicked. They call it Offcanvas.

Further reading 2: Disprite the popularity of the hamburger button, more and more designer considering it as harmful to user interaction: Kill The Hamburger Button. Think twice before you really need to use the hamburger.

Testing various screens in Firefox

Firefox comes with a tool to test the website in various screen sizes. You may find it in Tools | Web Developer | Responsive Design View.

Using simulator to test websites

Foundation and jsFiddle template

Note: If you want to experiement Foundation in jsFiddle, you’ll need to include the CSS and JavaScript. The fiddle should also selected to use jQuery where Foundation depends on it.

http://www.cdn.jsdelivr.net/foundation/5.2.3/css/foundation.min.css
http://www.cdn.jsdelivr.net/foundation/5.2.3/js/foundation.min.js

Or you may start in the following fiddle where I have included the Foundation resources.

Foundation-jsFiddle Template

Conclusion: Foundation’s responsive rule of thumb

1. Always put .columns inside .row
2. Sum of columns equals to 12 inside one row
3. large-N for defining columns in large screen
4. small-N to specify small screen columns
5. by default a column is large-12/small-12 (full width)
6. display-for-small / hide-for-large for screen size sensitive components.