Coding Responsive Design in Easy Steps

We’re 10 years into the mobilerevolution, and while smartphones have become ubiquitous, screen sizes andpixel depths have continued to vary greatly. Today, modern phone resolutionstarts at a modest 360 by 640 pixels on the bottom end, while at the high end,our content is displayed on 4K or even 5K television screens with a pixel depthin the millions.

Many of the eLearning authoringtools that are used regularly in the industry are capable of some level ofresponsive design. In fact, one of the major additions to the latest Adobe Captivaterelease is fluid boxes, which allow for responsive design features. However, ifyou’re working with a code-based learning project, or even a website,responsive features often are more difficult to implement.

Having moved many web-baseddigital products into the responsive realm, I’ve had the opportunity to breakthe responsive design conversion process into a few easy steps.

What does responsive design look like?

At its most simple, responsivedesign technology allows you to optimize the look and feel of digital contentfor the screen size on which it’s displayed. In the image below, the desktopdesign appears on the left and the mobile design on the right.

Figure 1: Note the designchanges between the desktop and mobile version of this website

In this design, elements likenavigation, layout, and typography are optimized for viewing on mobile devices.

Step one: Add responsive head elements

The first step when convertingcontent to responsive is to add content to the head element of the HTML thatwill identify the content as responsive. For optimal experience, for example,you don’t want your user to have to side-scroll to view all the content, nor doyou want them to have to magnify the content in order to see it.

Essentially, you want the browseron a mobile device to act more like a mobile app, and less like a browser. Withinyour HTML head section you should add the following code:

This tag sets up the screen to beas wide as the device, and with an initial scale of 1 so text appears at anoptimized size for reading.

Here is the full set of optionsavailable for the viewport meta tag:

• width—Sets the width of the layout viewport.In our case, we set this to the “device-width,” which overrides Apple’s default960px.
• initial-scale—Sets the initial zoom of the page and the width of the layout viewport. Weset this to 1, which is the default view, but you can easily increase thisnumber (not recommended).
• minimum-scale—Sets the minimum zoom level (i.e., howmuch the user can zoom out). This takes the control away from the user and issomething we never recommend.
• maximum-scale—Sets the maximum zoom level (i.e., howmuch the user can zoom in). Again, this is not recommended because it takesaway control from the user.
• height—Is supposed to set the height of thelayout viewport. It is not supported anywhere, so not sure it’s included.
• user-scalable—When set to “no,” prevents the userfrom zooming. This is an abomination that mustnot be used. Even if you think you know what’s best for the user, you don’t.Leave it alone.

Step two: Collapse any floating divs

For a long time, it was common tolay out digital content similar to a newspaper—in a grid system. It’s stillcommon to design content to appear in columns. Aesthetically, a column-baseddesign can be appealing and highly usable. The problem comes when trying todisplay a column-based design on mobile (see Figure 2). There simply isn’tenough screen real estate.

Figure 2: A 16-column grid,such as the one used by the Sacramento International Airport site, is stillcommon

When making a site or digitalcontent responsive, it is best to use a strictly vertical design. This is donein the CSS portion of the code. You must create a section of the CSS that givesinstructions on how to change the design when a minimum or maximum screen widthis reached. This section of code is known as a media query. Below is a typicalmedia query:

@media only screen and (max-width: 640px){	#col1 {		float: none;		width: 100%;	}	#col2 {		float: none;		width: 100%;	}}

This media query would take twocolumns, identified as col1 and col2, and make two changes when a screen isless than 640 pixels wide. First, the “float” that allows columns to appearnext to each other instead of vertically would be defeated. Second, the columnswould be stretched across the width of the screen.

The code above presents thesimplest possible case for a media query. Adjustments are often made toelements like images, typography, and size of elements as well.

Step three: Stretch clickable items and zones

I have fat thumbs. Even thelargest of mobile devices is difficult for me to type on.

I’m not alone.

That’s why it’s important to makeyour clickable elements large, visible, and clickable on a mobile screen. Buttonsshould stretch across the width of the screen and be of sufficient height thatthey are difficult to miss (Figure 3).

Figure 3: Large clickablebuttons make navigating digital content on mobile easier for those of us withfat thumbs

One popular library is jQuery Mobile, which automatically “skins”HTML elements for easy mobile usage.

Step four: Rethink your navigation

Drop-downs, mouse-overs, and otherinteractions that may be common on the web simply don’t work on mobile. Youhave to completely rethink your navigation for a mobile device. Here, simple isbetter than fancy. A menu with big, usable navigation buttons works every time.

One common icon to use is the hamburger icon (or “piano key”) navigation button, which allows users to access all ofthe main navigation with a single touch (Figure 4).

Figure 4: The hamburger iconbutton is visible in the top right corner of this design. This is rendered byBootstrap, a common library for responsive design.

Step five: Test!

The last step is the same as withany digital content—test. Test onevery device you can find to ensure that your users have an optimal mobileexperience.