Responsive Web Design

As the web evolves, so do the devices used to view content. When smartphones began to grow in popularity, many higher education institutions created new, complementary websites specifically for those devices. These sites generally had less content than the parent site and only a few core functions appropriate for the assumed need of a mobile user. But this meant extra work maintaining not one website but two, and furthermore, making sure the information on one site was consistent with information on the other. This may have been a worthwhile investment at first, until smartphone displays began to multiply into a variety of sizes and dimensions. Add the surging popularity of tablets, and you have a web design problem on your hands. Is it necessary to create separate websites for every screen size and resolution that exists? Or is there a better way?

Responsive web design refers to the ability of a web page to respond and adapt to whatever device on which the page is being viewed. Web page design sprang from print design, which is a fixed medium: it’s always viewed on the piece of paper on which it’s printed. But web content needs to be fluid and able to shift its layout based on the screen size and resolution of the device displaying the content.

Responsive Design Desktop Layout

Responsive Design TabletLayout

Responsive Design Smartphone Layout

There are three principal ways a programmer can begin to achieve responsive design when building a website:

1. Media queries. Media queries are bits of CSS in a web page that can inspect the physical characteristics of the device requesting it (i.e., the width and height of the screen in pixels). This information is then used to make decisions on how the page content should be displayed.

2. Fluid grids. Generally, web pages are made up of columns and rows. Traditionally, this is done with the use of fixed widths, which are then filled with content. Responsive design tells the page to make the size of these containers relative to the screen size, rather than a fixed width. Instead of a block of content being a specific number of pixels wide, the block is instructed to take up, for example, 25% percent of the width of the screen. If the screen size changes, the block will change, too. When the width shrinks too much to be practical, the CSS then instructs the page to drop from a three-column to two-column page, then down to a one-column page, and so forth.

3. Flexible images. If a grid scales in size, then logically the images and text inside it need to scale, too. Just like with fluid grids, images (or any content in a grid) are instructed to take up a certain percentage of pixel space relative to the container they are in. When the container scales, the images scale, too.

As developers have applied these techniques and principles over the past few years, a number of books and blogs with excellent and practical advice have sprung up; a few are referenced below. These resources can help guide any institution as it embarks on a new website redesign.

But We Already Have a Website

Unfortunately, many institutions already have a website built. For those that don’t have the resources required to rebuild their output markup, images, and CSS from scratch, it’s necessary to tweak their existing sites as much as possible until the day comes when they can redo the entire site. Until then, there are a few important steps you can take today to satisfy the needs of smartphone, tablet, and other mobile users.

A common first step is to find the containing div in the source code and change the fixed width to 100%. This helps create a long page that can be scrolled through vertically. This takes a step in the right direction by doing away with horizontal scrolling.

Decisions need to be made about where to put existing content so it doesn’t make the experience cumbersome. In some cases, this means deciding whether to include the content at all. How should a horizontal navigation bar be viewed on a small screen? What is
the best way to place and size images based on the text they accompany? These kinds of questions can be vexing when adapting sites, but the silver lining is that they help developers pinpoint what content is essential and what may be fluff. This information can be very valuable when the day comes to overhaul the site.

Let the Experts Help

Sometimes it’s best to bring in outside help, at least until a more comprehensive solution can be implemented. OmniUpdate has a turnkey mobile solution that takes your existing most-visited pages and adapts them for the mobile web at lightning speed, ready for students, parents, and alumni to access immediately from their handheld devices. Additionally, pages already managed by OmniUpdate’s web content management system, OU Campus™, are tied to the new mobile pages. So when content is updated on the parent site, content on the mobile site is automatically updated as well.

Responsive Design on Tablet and Phone

Additional Resources

  1. Responsive Web Design (article by Ethan Marcotte from May 2010)
  2. Responsive Web Design (book by Ethan Marcotte)
  3. Understanding Progressive Enhancement (article by Aaron Gustafson from October 2008)
  4. Adaptive Web Design (book by Aaron Gustafson)
div#container
{
  position:relative;
  width: 1019px;
  width: 100%;
}