Design Fundamentals for the Web – Session 9

Bootstrap, Mobile & Responsive Design

March 10, 2015

Review

Last week’s agenda

Devices

Internet Traffic by Device Type

2014 Internet traffic by device infographic from Walker-Sands

Device Viewport Sizes

Example list of device viewport sizes

Device Screen Resolutions

When viewing web pages using Retina Displays, images in your designs will appear smaller than what you expect because of their higher Pixel Per Inch (ppi) resolutions. As a result, you may choose to provide alternate, higher resolution images when the device accessing your content has a Retina Display. This can be accomplished using Javascript and the window.devicePixelRatio property, which we'll discuss next session.

For more in-depth coverage on dpi, ppi and retina displays, see Sebatien Gabriel's Designer's Guide to DPI.

Device Connection Bandwidth

Using Javascript, we can detect our device's connection speed and conditionally include appropriately-sized images, depending upon available bandwidth. This will ensure images download quickly, an important design consideration.

Responsive Web Design

Flexible Grids

Demo

Let's convert last week's layout example from fixed width to relative width.

CSSDeck

@media Queries

The @media rule allows us to apply style rules conditionally based upon media type or device capabilities. For example, you can set your small text to sans-serif type for screen-based media, and serif type for printing:

@media screen { * { font-family: Arial, Helvetica, Sans-Serif; } }
@media print { * { font-family: Times New Roman, Serif; } }

We can also use them to create CSS breakpoints based on the viewport size of the device accessing our pages. These breakpoints allow us to apply different styles for a range of device viewport sizes, i.e. different rules for phones, tablets, laptops and desktops.

Here's some more info on CSS @media rules on W3Schools.

Demo

Let's use @media queries to conditionalize our styles depending on device viewport size.

CSSDeck

Responsive Media

In order for our grids to be flexible, we also have to make sure our media, including images and video, are flexible. We need to make our media responsive for a few reasons:

For the sake of this week's discussion, today we'll address making images responsive to viewport size using the width and height HTML attributes. We'll discess some alternatives using Javascript that also address screen resolution and bandwidth considerations next session when we address Javascript & jQuery.

Demo

Let's demonstrate using the width and height HTML attributes to make images responsive.

CSSDeck

Mobile First

When creating Responsive Web Designs, we want to take a mobile-first approach – we want to assume our smallest device is our default, and layer additional @media rules on top of that. With this mobile-first philosophy, we need to include a special meta tag in our HTML <head> tag to tell the browser we want it to maximize it's viewing area to fit the device's viewport:

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

Exercise

Let's log into our TCNJ Web accounts and update our layouts & stylesheets to make them Mobile First.

  1. add the viewport meta tag to the headers in our project HTML files
  2. replace fixed widths (px) with relative widths (% or em) using the responsive design formula: target / context = result
  3. update your stylesheets with @media rules for each of the device viewport sizes discussed earlier in class
  4. make your images responsive by setting the width="100%" & height="100%" attributes

Twitter's Bootstrap CSS Framework

Twitter's Bootstrap CSS Framework is a mobile-first, Responsive Web Design framework. Bootstrap gives you a complete grid system with default @media rules for responsive styling, along with sensible default font settings, and a set of baked-in CSS icons with their Glyphicons componenet. Use Bootstrap as a starting point, and override it using your own stylesheet where you want more control.

Installing Bootstrap

Bootstrap requires a number of prerequisite libraries to be included in your project, including jQuery and, for IE 8 compatability, respond.js and html5shiv.js. We'll use a combination of the Content Delivery Network (CDN) version of Bootstrap and the basic template from Bootstrap's Getting Started page to get set up.

Using Bootstrap

Now that we have Bootstrap installed, let's hook it into our layout using Bootstrap's container, row and col-* classes:

Demo

Check out the example Bootstrap Layout and let's update our example layout to use Bootstrap.

Assignment 9

Reading

Design Notebook

Create a new page in your Design Notebook and title it "Responsive Web Design" and today's date. Surf the web looking for sites - using your cell phone. When you find a site that looks especially good on your phone, try it out on your laptop. How is it different? Collect three links for sites you feel are especially well designed for mobile use, and come to class next week ready to share them. How do they change depending on device screen size?

Design

Make your project Responsive using the Bootstrap CSS Framework

Open up a text editor and log into your TCNJ Web account. Using the Bootstrap Template and Bootstrap Grid Layout examples as your guide, update your project to use Bootstrap as your base stylesheet:

  1. link the Bootstrap CDN stylesheet into your HTML <head>: <link rel="stylesheet" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  2. link in the javascript libraries that make IE8 compatible:
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  3. link in the jQuery & Bootstrap javascript libraries at the bottom of your html right above the </body> tag
  4. replace your id="wrapper" with class="container" in your outer <div>
  5. use the row and col-* classes to recreate your responsive layout using Bootstrap