October 9, 2014
2014 Internet traffic by device infographic from Walker-Sands
Example list of device viewport sizes
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.
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.
Let's convert last week's layout example from fixed width to relative width.
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.
Let's use @media queries to conditionalize our styles depending on device viewport size.
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.
Let's demonstrate using the width
and height
HTML attributes to make images responsive.
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">
Let's log into our TCNJ Web accounts and update our layouts & stylesheets to make them Mobile First.
width="100%"
& height="100%"
attributesTwitter'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.
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.
Now that we have Bootstrap installed, let's hook it into our layout using Bootstrap's container, row and col-* classes:
container
class replaces our wrapper
id, and functions as the root container for our site's content – Bootstrap .container classrow
class acts as a container for elements you want to "float", but should "respond" by wrapping under when the screen size is reduced – the Bootstrap Gridcol-*
classes give you flexible columns including gutters and padding – the Bootstrap GridCheck out the example Bootstrap Template and let's update our example layout to use Bootstrap.
Open up a text editor and log into your TCNJ Web account. Using the Bootstrap basic template as your guide, update your project to use Bootstrap as your base stylesheet:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
id="wrapper"
with class="container"
in your outer <div>
row
and col-*
classes to recreate your responsive layout using Bootstrap