Printer Friendly

Flexible everything: getting responsive with web design.

Mobile phones, tablets, laptops, cinema displays: The size of displays has grown more and more diverse in the past decade. How can web designers and developers build sites to provide a positive user experience on any device? Responsive design is the latest in a line of technologies meant to address the growing ways of accessing content on the web. This approach calls for using flexible components and media queries to build a fluid design that adapts to different screen resolutions and positioning. Luckily, the nuts and bolts of responsive design are easy to learn, and a number of CSS frameworks make it even easier to get started.

How We Got to Multiple Displays

Many of us can remember the days when the large screens of desktops and laptops were the king of displays. From the beginning of the World Wide Web in 1994 through most of the 2000s, the majority of screen resolutions were either 800x600 or 1024x768, which made design planning and wireframing simpler when compared to the variety of sizes we see today. Generally, it was easier to predict the user experience since the playing field was fairly even.

In the early 2000s, mobile phones began offering access to the web, and designers responded by creating scaled-down sites that catered to the small screens of flip phones and BlackBerries. CSS2 introduced media types that were used to redirect browsers to a mobile subdomain or to load a mobile-specific style sheet. For most of the decade, the mobile web remained a negligible piece of web access, accounting for only 0.6% of total web access as of December 2008 (gs.statcounter.com/#mobile_vs_desktop-ww -monthly-200807-201211).

However, mobile internet access began to see a significant amount of growth after 2007 when Apple released the iPhone, establishing a new market for mobile smartphones. For the first time, large touchscreen phones achieved commercial success, and mobile users began to say goodbye to the small displays and often clunky web browsers on earlier phones. Other manufacturers using different operating systems soon appeared on the market, offering a wide variety of screen sizes for users to choose from. New practices called for a mobile-first approach to web design; designers began to focus on the mobile user experience first. In 2010, the launch of the tablet market introduced yet more screen sizes to consider when designing a website.

Responsive Web Design

Responsive web design arose out of the need to provide a positive, intuitive user experience, regardless of device, without requiring separate HTML and subdomains for mobile devices, tablets, and desktops/laptops. It achieves this by ensuring that all elements are able to resize themselves based on the display dimensions and by using media queries to apply CSS based on the size and orientation of the screen.

Flexible everything: For a site to be usable when viewed on a variety of screen sizes, a certain degree of flexibility must be incorporated into the design. Divs, fonts, buttons, and all other elements must be able to grow and shrink based on the screen size and layout. In responsive design, this is accomplished by abandoning pixels in favor of percentages or ems when notating sizes and widths in CSS.

Adapting old practices to this new method just involves simple mathematics. Let's take a fixed-width grid that is 960px wide and has 12 columns of 80px each. To transform this grid into a responsive one requires just a little bit of math.

We begin by defining the overall width of the grid. For the 960px container, the fixed-width CSS might traditionally look something like this: .container {width: 960px; margin: 0 auto;}. To be responsive, the grid needs to be able to be less wide than 960px for screens that aren't that wide. We do this by defining a max-width for the site and then setting the width to 100%: .container { width: 100%; max-width: 960px; margin: 0 auto;}. Now, if our screen goes below 960px, the container will shrink instead of hiding our content and forcing users to scroll horizontally.

For the previously 80px fixed-width columns, a little math is required to determine what percentage the width of a column should be compared to the overall width of the grid. The formula (goal size)/(base size) results in the amount of ems (or the percentage if you multiply the result by 100). Using this formula, we can determine that 80px (goal size) is 8.33333333% of 960px (base size), giving us our new width: .columns {width: 8.3333333%;}. When the grid shrinks, the columns will now shrink proportionally.

Being responsive also means defining font sizes without using pixels. The first step in doing this is to set the default font size to that of the browser: html {font-size: 100%}. Most desktop browsers use a default font size of 16px, which will be our base size when determining the CSS rules for other fonts. If your goal is to have h1 elements display at 24px on large screens, then dividing 24 by 16 gives you 1.5: h1 {font-size: 1.5em} or h1 {font-size: 150%}. Browsers that use a smaller default font size will still display h1's in the same proportion; on iOS's Safari, the default font size is 12px, so the h1 would display at 18px.

The tricky part comes with remembering the base sizes once divs begin to be nested. Base size always refers to the sizes defined in the parent element. Say you have a div with a default font size of 16px. Inside this, you place a second div with this class: .attention {font-size: 1.2em}. The default font size in this div will now be 19.2px (16*1.2). However, if you were to place an h1 with a font size of 1.5em in the attention div, the h1 display size will be 28.8px. This is because the h1's base size comes from the div it is placed in. If you still wanted h1's placed inside this div to be 24px, you need to redo the math (24/19.2 = 1.25) to determine the correct rule: .attention h1 {font-size: 1.25em}.

Images must also be able to expand and shrink as needed. There are two methods for achieving this, both of which require the image being wrapped in a responsive div. You may set the image's width equal to 100%. By doing this, its width will change according to the size of its div container. Optionally, you could set the image's width to a hard value and hide a portion of the image using overflow: hidden as the container div shrinks. I favor the first option because I find it easier and more intuitive to create. Regardless, always be certain that the image is as large or larger than it can ever be displayed to prevent pixelization.

With the grid, elements, and fonts now defined responsively, you're ready to begin using media queries to fine-tune the design for different resolutions.

Media queries: Media queries give developers the ability to create CSS rules that are applied based on a number of criteria, screen size and orientation being the most important to responsive design. The query syntax consists of a media type and some additional parameter, often min-width or max-width. (For a full list, see w3.org/TR/css3-mediaqueries/#media1.)

Here is an example of a media query that might be included in a CSS file:

@media screen and (max-width: 640px) { img {displaymone;}; p {font-size: 1.1em }; }

The browser and device must pass the query's test in order for its prescribed rules to be used. In our example above, the browser would hide all images and set the p font to 110% of the base font if the content is being displayed on a screen and the browser's viewable area is smaller than 640px width. This would cover devices such as the iPhone 5 in portrait view, all previous iPhones, smaller Android devices, and any desktop/laptop browsers that have been resized to less than 640px width, but it would have no effect on tablets.

To begin using queries, you must first determine suitable breakpoints for your design. These are the screen widths where the site design breaks or begins to complicate the user experience. Ethan Marcotte notes some example breakpoints in his book Responsive Web Design. Marcotte's list is rather exhaustive though and can be complicating for those just beginning to use responsive design techniques. These breakpoints are simply suggestions, and it's better to determine a design's breakpoints on an individual basis by testing at different screen sizes.

To get an idea of how to determine a breakpoint, visit CNN.com on a desktop or laptop. Then, scale down the browser's width by clicking and dragging the side of the window; eventually, the site's content will begin to be covered up, letting us know that CNN.com is not currently designed to be responsive. Using developer tools, you can determine that the content begins to be hidden when you scale below 1000px width. While a desktop-to-mobile design process isn't recommended, if I were looking to create a responsive layout without redesigning the current site, I would begin with how the design elements behave below 1000px; this would be the breakpoint. How do we use this measurement to define new rules for viewing the site below 1000px?

The first step is to insert a metatag into the HTML head that defines the viewport: <meta name="viewport" content= "initial-scale=1.0, width=device-width" />. This metatag helps in cross-device consistency. Safari on the iPhone, for example, actually displays sites as 980px on the 320px display, essentially zooming out in order to fit websites onscreen. It has become standard for smartphones to display content in this manner. Setting the viewport to the width of the device prevents this from happening, and the initial-scale parameter makes certain that the browser's zoom is set to 100% when content is loaded.

With that done, we are now ready to write our media queries. There are two different ways to implement them. Our previous example shows how queries can be defined within a CSS file. To create CSS rules that only apply to a screen less than 1000px, place this code within the site's CSS file:

@media screen and (max-width: 1000px) { }

Any CSS rules placed within the curly brackets will be applied to the site when displayed at 1000px or smaller in width.

A less-used option is to use the media query in a link tag to load a specific CSS file. This is similar to how style sheets are typically called in the HTML head; it requires just the addition of a media parameter:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1000px)" href="/css/small.css" />

Using this method, any CSS rules placed in the small.css file would affect sites matching the 1000px max-width criteria.

Flexible elements and media queries are all that is needed to begin making a responsive site. However, if all this seems like a lot of legwork (and math) to begin using responsive web design, have no fear. There are a number of frameworks that can save you time and frustration in getting a responsive site up and running.

CSS Frameworks

CSS frameworks are prewritten style sheets that aid in creating cross-browser, standards-compliant websites, and there are several responsive options to choose from. If you're not familiar with frameworks, they typically consist of few parts:

* Style resets: All HTML elements are defined in order to overcome browser-specific styling and to create a uniform appearance across all browsers.

* Typography: Font families, line heights, and the other typography elements are listed in one section to allow quick modification. Responsive frameworks will define all size-related CSS as percentages or ems in relation to the browser's default font size (typically 16px).

* Various ids and classes: When applied to your HTML markup, these bits do the bulk of the styling work, e.g., creating the grid, positioning divs within that grid, and styling menus. The offerings and specific stylings are what differentiates one framework from another. Some are fairly thorough while others leave a lot of styling up to the designer.

These parts may be combined into one CSS file, or there may be individual files for different sets of rules.

Implementing a framework is fairly simple. Just download the framework's files and call them in the head section of your HTML. Here are a few responsive frameworks and the pros and cons that each offers (this is by no means an exhaustive list):

Base (matthewhartman.github.com/base): If you're looking for little more than a responsive grid and uniformed HTML elements, Base is the framework for you. It features a 960px grid with three different breakpoints, arranging the grid differently for mobile devices, tablets, and large screens. Leaving components (buttons, lists, drop-downs, etc.) un-styled, Base gives you much more freedom in design without needing to override the framework's CSS. For those looking for a solution with all the bells and whistles, Base will be lacking, but it may be the most approachable for those who have never worked with frameworks.

Bootstrap (twitter.github.com/bootstrap): Bootstrap was created by the team at Twitter and, as expected, lives up to its claims of being a "sleek, intuitive, and powerful front-end framework." Of the four frameworks reviewed here, it is by far the most thorough in providing responsive CSS for grids, elements, and practically any component you can think of. Bootstrap provides exhaustive options for pagination, navigation, buttons, tables, and more than 10 other components. Given its power and thoroughness, there can be more of a learning curve compared to other frameworks, but if you've used any other frameworks, much of the terminology for classes and ids will be familiar to you. If you need a development kit that leaves nothing out, Bootstrap may be your answer.

Foundation (foundation.zurb.com): Foundation is an easy-to-use and powerful framework from the design team at ZURB, Inc. Like several of the options out there, it features a 12-column grid that has a max-width of 980 pixels. By default, the framework has one breakpoint below which content is grouped into four columns, and the style sheet stacks the divs for an instant mobile-friendly scrolling site; you can adjust this breakpoint and create additional ones as needed. What makes Foundation stand apart from the pack is its descriptive markup language. While many frameworks use a class such as .span-4 to create a four column width div, Foundation uses two classes: .four.columns. If you want to hide a particular piece of content on a mobile device, adding the class .hide-for-small to the div will do just that. The intuitive class names make learning the framework less of a challenge, keeping you from having to reference the documentation continuously and speeding up development. The framework contains a number of useful classes to create responsive buttons, forms, navigation, tabs, callout panels, alerts, and more, all using the easy-to-understand language. It also comes bundled with a few jQuery libraries that let you quickly create lightbox-style alerts, image sliders, and more with very simple markup.

Titan (bit.ly/HPKACU): Titan is still under development, but it is a solid solution for those looking for a simple framework with more grid options than Base but fewer than Bootstrap and Foundation. Like Base, the components are left unstyled, meaning more work on the designer's part in writing CSS for buttons, menus, and the like.

What About Drupal and WordPress?

Given the prevalence of these two systems, it's probably not surprising that developers have already built responsive themes for both of them. For WordPress, new installations typically come with the company's own Twenty Twelve theme installed, giving you a responsive theme to immediately put to use. If you're looking for more customization, Reverie is a powerful, extendable WordPress theme based on Foundation, and a quick search finds a few Bootstrap-based themes as well. Drupal also has numerous responsive themes. Adaptive Theme is widely used, and, just as with WordPress, you can also find themes built on the CSS frameworks mentioned earlier. A word of warning: Many of these themes are in the development phase as of January 2013 and should not to be used on production sites. However, if you're just beginning a project and are comfortable with some bugs, helping to test responsive themes for these CMSs is a great way to benefit the Drupal and WordPress communities.

Start Building Responsively

This article has covered the basic principles of responsive web design for those interested in creating their own responsive sites from scratch, as well as noting a few frameworks that can be used to speed up development time. In my own current work, I favor the Foundation CSS framework for responsive development because of its syntax, diverse selection of components, and handy jQuery plug-ins. Regardless of building it yourself or relying on a premade framework, the concepts presented here enable anyone to create responsively designed sites that provide a positive user experience, regardless of the method of access. Have fun building!

Resources

"Responsive Web Design Guidelines and Tutorials." Smashing Media. 02 July 2012. smashingmagazine.com/responsive-web-design-guidelines-tutorials.

Marcotte, Ethan. Responsive Web Design. New York: A Book Apart, 2011. Print.

Wroblewski, Luke. Mobile First. New York: A Book Apart, 2011. Print.

Jeremy Snell (jsnell@milibrary.org/Twitter: @jeremygsnell) is web librarian at the Mechanics' Institute Library and Chess Room in San Francisco.


320 pixels    For small screen devices, like phones, held in portrait
              mode.

480 pixels    For small screen devices, like phones, held in
              landscape mode.

600 pixels    Smaller tablets, like the Amazon Kindle (600x800) and
              Barnes & Noble Nook (600x1024), held in portrait mode.

768 pixels    Ten-inch tablets like the iPad (768x1024) held in
              portrait mode.

1024 pixels   Tablets like the iPad (1024x768) held in landscape mode,
              as well as certain laptop, netbook, and desktop displays.

1200 pixels   For widescreen displays, primarily laptop and desktop
              browsers.

Example breakpoints listed in Marcottes Responsive Web Design
COPYRIGHT 2013 Information Today, Inc.
No portion of this article can be reproduced without the express written permission from the copyright holder.
Copyright 2013 Gale, Cengage Learning. All rights reserved.

Article Details
Printer friendly Cite/link Email Feedback
Author:Snell, Jeremy
Publication:Computers in Libraries
Geographic Code:1USA
Date:Apr 1, 2013
Words:2998
Previous Article:Creating a responsive website PPLD Friends: a case study.
Next Article:Data discovery and data duration going hand in hand.
Topics:

Terms of use | Privacy policy | Copyright © 2020 Farlex, Inc. | Feedback | For webmasters