Defining Mobile First
The concept should be a familiar one by now, its associated image almost archetypal. A smart phone gives way to a tablet and then to a desktop, preserving the content. We know this design strategy as progressive enhancement and it stands opposite graceful degradation as the trendsetter for digital design.
The basic strategy of progressive enhancement is to design for the lowest common denominator—to whit, smart phones—and then add additional optional features based on abilities. This is not a new concept. In 2003 at SXSW, Steven Champeon and Nick Finck first suggested the idea of “leave no [user] behind.” Desktop browsers, they argued, had become capable of providing “progressive, gradually enhanced [experiences]” for users by automatically adapting the content’s style to the user’s browser.
Jump forward over ten years and, instead of different browsers, we now need to consider how to design for different devices. Progressive enhancement is the popular recommendation for the best way to accomplish a universal design suitable for all screen resolutions.
Before we lift progressive enhancement onto our shoulders and claim it the victor though, we need to ask a few questions. The first is whether progressive enhancement is synonymous with mobile first. (It is not.) The second is whether progressive enhancement automatically solves every issue. (It does not.)
Let’s start with some vocabulary basics. Blog posts often use mobile first, progressive enhancement, and responsive design interchangeably, but they are not technically the same thing. Progressive enhancement is starting with the smallest screen, like smart phones, and building up to larger screens, like tablets and then desktop. Mobile first and responsive design are two different means of achieving progressive enhancement. Mobile first adapts content to the context of use. Responsive design keeps the same design but allows for flexibility in how that content appears on different devices.
Do they appear differently on the screen? If done well, not really. When creating a website with basic interaction, responsive design or adaptive design are both solid choices. The ultimate goal is to have a site that functions for the user regardless of how or where they access it.
When it comes to creating eLearning, however, we need to consider the problems that arise with progressive enhancement, and how best to solve them. The major weakness of progressive enhancement, of course, is that there is no such thing as a universal design. User experiences differ across devices. Starting with a more restrained design can often lead to a design that seems underdeveloped and inappropriate in contexts that are more robust. The result is a design that fails to take advantage of the full native capabilities of each device, and can come across to the user as empty or overly simplistic.
This is where the difference between adaptive design and responsive design matters. Responsive design allows for flexibility in terms of layout and appearance. Adaptive design is the powerhouse. It takes into consideration the other contexts users will access information. It adapts to utilize the strengths of each device to the best of their capabilities. This is the key point of mobile first design: mobile first design does not mean designing for mobile only. One might expect that the mobile experience should offer access to the full range of functionality that the desktop version offers. Yet it is much more important to tailor user experience and interface layout to the device. Unless your learners will solely engage with content via a smart phone, keeping in mind user experience and the capabilities of desktop is vital for producing an effective design.
Five Principals of Mobile First Design
If there is no truly universal design, how do we plan for an adaptable design? Here are five principles to keep in mind.
Prioritize high-use contexts.
Everyone has a smart phone nowadays but not every learning need can or should be answered by mobile. In a previous blog post, What Do You Consider before Designing for Mobile, Jill Stanton reviewed some important questions to ask before updating all your eLearning content to mobile. Mobile learning may not be the right fit for your organization or its audience. If the majority of your employees conduct their online training at the office on a desktop, it makes sense to design desktop first. This does not mean a mobile version should have its content gutted or to sacrifice functionality. However, if most of your learners will primarily use one device, then designing for that context will result in a better user experience than extrapolating from other, less used contexts.
Similarly, learners may be engaging with certain training only once or only after a large amount of time has passed between sessions. Learners might require other training to be available as needed, revisited repeatedly in different contexts. It can make sense for a lighter design to reflect lighter use. Simple and efficient can be the perfect combination for training which a learner only undergoes every three years. For heavier use applications, however, it may make more sense to focus on usability and visibility first, even if that means a more complicated design. Mobile first design is not synonymous with minimalism.
Consider designing genuinely separate experiences.
Training on a desktop does not need to look identical to training on a mobile device. In fact, it can benefit the learner to have training customized to their primary device. Content and core functionality should remain the same, but designs can adjust to take advantage of the native capabilities of each device. Consider the strengths of each device and adapt the design to fit accordingly.
Customize your universal design.
With rapid development tools, our ability to customize training increases. Even if you have decided to keep mobile, tablet, and desktop all similar, you can still tailor elements for specific contexts. What is a list on the mobile version could easily become a data table on the desktop version, for example. Take advantage of the capabilities each device offers, both in terms of physical screen space and in terms of interaction. The desktop version of your training should not just be a large and spread-out version of the mobile training.
Consider orientation and navigation.
Screen size is not the only difference between mobile, tablet, and desktop. Screen orientation—portrait or landscape—also plays a big role. A learner viewing training on their smart phone, for instance, likely holds their phone with one hand in portrait position and navigates with their thumb. On a desktop, a learner is viewing content in landscape, and likely using a mouse or a keyboard to navigate. Tablets fall in the middle, able to be viewed in either portrait or landscape with a touch screen. The goal is to create usable environment for learners in all of these very different contexts. The biggest question is navigation. Consider how the learner will navigate through the course, and with what tools—their fingers or a mouse.
For mobile, with learners engaging with the thumb of their dominant hand, the best ease-of-use is to keep navigation and functionality towards the bottom or side of the screen. Tablets work best with similar position of navigation features, but the orientation changes. The learner may well be browsing the course in landscape orientation. They are likely to use both hands to navigate, this time with one or both index fingers. Now consider a desktop or laptop. Users are most likely to expect key functionality to appear at the top of the screen or as a menu bar on the bottom rather than on the side.
Content does not need to change between devices, but interactivity can determine content. To avoid unnecessary content changes, consider the differences in how learners interact with devices.
Mobile devices and tablets mainly use the human finger for input. While some laptops come equipped with touch screens, most users still rely on a mouse or a trackpad to navigate. The following table indicates the differences when it comes to building interactions for mice and fingers.
|Comparison of Interactivity Between Desktop and Mobile|
|Precision of Movement||High||Low|
|Types of Control for Interactions||Click, Drag, Hover||Tap, Slide, Drag, Flip Orientation|
|View of Screen Obscured||No||Yes|
|Direct Interaction with Screen||No||Yes|
Both mice and fingers have their strong points, but they are very different forms of interaction. Any interactions built in eLearning such as navigation or learning activities should allow for these differences. For example, because the mouse has a hover state, tool tips and other rollover effects can often be used to good effect on desktop computers. Similarly, two-button activation controls more easily support contextual menus. Yet these design elements are less natural on touchscreens.
This does not mean that desktop and mobile require complete separate or individual designs. Select, drag, and slide can all be accomplished by both mouse and finger interaction. However, simple menus and increasing the size of buttons or hotspots may be wise when designing for touch screens over desktop.
Upcoming Mobile Learning Network event: “Mobile First Design”
If you are interested in mobile first design, Fredrickson Learning’s community, the Mobile Learning Network, has an event coming up! (This event was in 2016.)
 Homing time is the time required to move the hands from one input device, such as the keyboard, to another, such as the mouse.