We’re 10 years into the mobile revolution, and while smartphones have become ubiquitous, screen sizes and pixel depths have continued to vary greatly. Today, modern phone resolution starts 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 depth in the millions.
Many of the eLearning authoring tools that are used regularly in the industry are capable of some level of responsive design. In fact, one of the major additions to the latest Adobe Captivate release is fluid boxes, which allow for responsive design features. However, if you’re working with a code-based learning project, or even a website, responsive features often are more difficult to implement.
Having moved many web-based digital products into the responsive realm, I’ve had the opportunity to break the responsive design conversion process into a few easy steps.
What does responsive design look like?
At its most simple, responsive design technology allows you to optimize the look and feel of digital content for the screen size on which it’s displayed. In the image below, the desktop design appears on the left and the mobile design on the right.
Figure 1: Note the design changes between the desktop and mobile version of this website
In this design, elements like navigation, layout, and typography are optimized for viewing on mobile devices.
Step one: Add responsive head elements
The first step when converting content to responsive is to add content to the head element of the HTML that will 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 do you want them to have to magnify the content in order to see it.
Essentially, you want the browser on a mobile device to act more like a mobile app, and less like a browser. Within your HTML head section you should add the following code:
This tag sets up the screen to be as wide as the device, and with an initial scale of 1 so text appears at an optimized size for reading.
Here is the full set of options available 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 default 960px.
- initial-scale—Sets the initial zoom of the page and the width of the layout viewport. We set this to 1, which is the default view, but you can easily increase this number (not recommended).
- minimum-scale—Sets the minimum zoom level (i.e., how much the user can zoom out). This takes the control away from the user and is something we never recommend.
- maximum-scale—Sets the maximum zoom level (i.e., how much the user can zoom in). Again, this is not recommended because it takes away control from the user.
- height—Is supposed to set the height of the layout viewport. It is not supported anywhere, so not sure it’s included.
- user-scalable—When set to “no,” prevents the user from zooming. This is an abomination that must not 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 to lay out digital content similar to a newspaper—in a grid system. It’s still common to design content to appear in columns. Aesthetically, a column-based design can be appealing and highly usable. The problem comes when trying to display a column-based design on mobile (see Figure 2). There simply isn’t enough screen real estate.
Figure 2: A 16-column grid, such as the one used by the Sacramento International Airport site, is still common
When making a site or digital content responsive, it is best to use a strictly vertical design. This is done in the CSS portion of the code. You must create a section of the CSS that gives instructions on how to change the design when a minimum or maximum screen width is reached. This section of code is known as a media query. Below is a typical media query:
@media only screen and (max-width: 640px){
#col1 {
float: none;
width: 100%;
}
#col2 {
float: none;
width: 100%;
}
}
This media query would take two columns, identified as col1 and col2, and make two changes when a screen is less than 640 pixels wide. First, the “float” that allows columns to appear next to each other instead of vertically would be defeated. Second, the columns would be stretched across the width of the screen.
The code above presents the simplest possible case for a media query. Adjustments are often made to elements like images, typography, and size of elements as well.
Step three: Stretch clickable items and zones
I have fat thumbs. Even the largest of mobile devices is difficult for me to type on.
I’m not alone.
That’s why it’s important to make your clickable elements large, visible, and clickable on a mobile screen. Buttons should stretch across the width of the screen and be of sufficient height that they are difficult to miss (Figure 3).
Figure 3: Large clickable buttons make navigating digital content on mobile easier for those of us with fat 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 other interactions that may be common on the web simply don’t work on mobile. You have to completely rethink your navigation for a mobile device. Here, simple is better 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 of the main navigation with a single touch (Figure 4).
Figure 4: The hamburger icon button is visible in the top right corner of this design. This is rendered by Bootstrap, a common library for responsive design.
Step five: Test!
The last step is the same as with any digital content—test. Test on every device you can find to ensure that your users have an optimal mobile experience.