Not so long ago it was relatively easy to give your online course content a consistent look and feel. With some knowledge of HTML and CSS you could create a sophisticated page with carefully determined layout, colors, images, and dimensions. Sure, there were some browser issues, most notably with Internet Explorer, but by and large you could create tightly controlled web pages with the comfortable assurance that your viewers would access your content on a screen with predictable orientation and pixel dimensions.

Those days are long gone. With the ubiquity of smartphones and tablets comes the need to design web content that will display properly on a wide variety of screen sizes. That means your inner artist will need to give up some control and learn to embrace responsive web design.

What’s responsive web design? There’s some debate on the precise meaning, but the most common trait among differing definitions is fluidity: the ability for content to dynamically respond to and fit the width of the viewport of a given device. According to Wikipedia, this is accomplished by using proportion-based grids, flexible images, and CSS3 media queries. I’ll leave media queries for a later post, but today I’ll show how much can be accomplished with flexible images and by switching from a fixed-width layout to a fluid one.

Here’s an example of a course page using a fixed-width layout as it appears in D2L (Figure 1). The content page width is set at 600 pixels by an external CSS file to ensure that the content and D2L’s structure will fit a default 800×600 pixel display.

Figure 1

The dimensions of other items in the fixed-width example are also pixel-based. For instance, here’s a class used to format the 3 column table shown in Figure 1:

table.gridTable {
table-layout: automatic;
border: 1px dotted #999;
width: 560px;
}

The fixed width of 560 pixels ensures that the table will exactly fit the width of the content page (which has left and right padding of 20 pixels), and along with other classes in the CSS provides great control over the layout of the page–provided the viewport width falls within an acceptable range. When our CSS was originally written we could assume viewers would be using a desktop or laptop with a landscape orientation and a minimum screen resolution of 800×600 pixels–an assumption we can no longer make.

We see in Figure 1 that on a screen with adequate pixel width the fixed-width layout displays the content without any horizontal scrolling or cropping. We also see that this approach can leave a great deal of screen real estate unused, though smaller screens and/or lower resolutions mitigate this issue.

It’s with narrower screens that the limitations of fixed-width layouts are really problematic, as in the following example (Figure 2):

Figure 2

Here the viewport is narrow and long, similar to that of a smartphone. The tables, paragraphs, images, and other elements won’t fit on the available screen space because they have fixed-widths determined by the CSS, and are unable to respond to the width of the viewport. Viewers have to scroll horizontally to see all the content. This makes for a lousy user experience.

However, with just a little tweaking of our CSS, our content page becomes responsive to the viewport size (Figure 3):

Figure 3

Here pixel-based horizontal values (and many of the vertical ones) in the CSS have been replaced with proportional ones based on percentages and em values. Content is responsive and dynamically fills the available display width. With some simple changes to the CSS the table expands to fit the width of the page:

table.gridTable {
table-layout: automatic;
border: 1px dotted #999;
width: 96%;
}

The width is set at 96% because the table is a child element to the parent element page. The page contains left and right padding of 2%, so to make the table fit the available width we specify the difference of page width minus the sum of padding, or 100 – (2 x2) = 96.

The image also uses a parent/child relationship where a <div class=”imageBox”> container displays at 48% of its parent page width. In turn, the image displays at 100% of its parent imageBox.

This responsiveness really makes a difference when the viewport has a narrow, portrait orientation like that of a smartphone (Figure 4):

Figure 4

The content page has dynamically responded to the available width of the viewport. While the D2L navigation frame still requires a horizontal scroll bar, note that our content page does not. One caveat: it’s more difficult to get embedded content like videos to scale effectively and consistently, especially if you have to use iframes to embed. Thierry Koblentz’s oft-cited CSS solution Creating Intrinsic Ratios for Video at A List Apart is extremely helpful, and Stephanie Walter has some helpful tips at Smashing Magazine.

My examples illustrate basic, first-step approaches to responsive web design. There are lots of resources on the web to guide you. I like Zomigi’s article on scalable images, and Smashing Magazine has an extensive overview by Kayla Knight of responsive web design theory and methods. There are adaptive web design techniques that are more powerful and adaptive but require client-side scripting using JavaScript or JQuery. For example, there’s an effective jQuery fluid video width solution at CSS-Tricks.com that I’ve found useful, though it has problems with YouTube’s latest embed code protocol. However, you don’t have to be a coder to get good results. You can easily expand the range of devices on which your content will display properly just by using the methods I’ve outlined here.