“We should design for mobile first.” I am sure by now we have all heard this phrase. But what does it mean? Does this mean we actually design our mobile solutions first and then design separate solutions for everything else, or does it mean we should just have in our plans that we should also publish to mobile? Actually, neither of those possibilities is correct.
Historically, we have always developed first for desktop and then tried to fit the same content into a mobile view. eLearning content should not be the same for desktop displays and for mobile devices. There are a couple of problems that you will encounter when you take the approach of “just porting things over” from desktop to mobile. First, people ordinarily consume content for shorter amounts of time on a phone than they do on a desktop device. Second, mobile devices are smaller and typically have less processing power, so what worked on a desktop device doesn’t always work on a mobile device.
Mobile first
So, thinking “mobile first” means to create your content first on the smallest devices that the users are likely to have, such as phones or (if you are not targeting phones) tablets. Work on the device that is the smallest, and then build up from there, all in the same code and same project, not a new project for every screen size. So when building a custom HTML5 interaction, first design it to play perfectly on a phone, then adjust it to run on a tablet, and then for a desktop device.
There are two big benefits that this approach gives you:
Benefit #1—Since mobile devices are smaller, you will tend to think about what is really necessary to convey. I like to think of it as cutting out the fluff and getting to the useful core content that someone needs to know. As the designer, this helps you get to the core of what needs to be taught.
Benefit #2—If you design your content to be mobile first, then your code will be simpler and you won’t have to do a lot up front to get it looking good on a phone. Since phones have smaller processors, this means the device does not have to sift through a lot of code and then adjust to a mobile device, removing the CSS that does not need to be there.
Using media queries to adapt content to changes in display size
When a smartphone reads the code, it only reads the mobile code. To adjust your code so that it adapts and looks better on larger devices, use media queries (or, as some applications call them, “break points”). Media queries are additional styles or changes to existing styles once the screen size reaches a certain point. Here’s how they work.