“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.
Building a media query
Suppose you’ve designed your content for a smartphone. To make the display change when the screen width is 768px (which is the width of an iPad Mini in portrait orientation), add a media query to your CSS. Here is what a simple media query might look like. Any styling inside of the “curly” brackets will run as soon as the screen size is 768px wide, but not when the screen size is less:
@media (min-width: 768px) {
//CSS goes here
}
To adjust the display again when the user has the iPad Mini in landscape orientation, simply add another media query in your CSS for 1024px wide (the width of an iPad Mini in landscape):
@media (min-width: 1024px) {
//CSS goes here
}
What goes in the media query where it says “//CSS goes here”? Only the code for the element that will change. You will already have written the CSS for everything that will display, and all of that will be in a regular CSS file. That CSS file will be what runs on a smartphone. When you want something to change or adjust for a bigger display, place it inside a media query.
An example
Suppose your display is going to contain a simple box, with a class of .box. First write some simple CSS that will draw that box on a mobile device.
.box{
height: 200px;
background-color: #5cd571;
}
This box on a mobile device will be 200px high, and it will be 100% of the screen width available. This is the basic CSS for this box for any display, and 100% is the default width for class .box in HTML. If the display is 750px wide (iPhone 6 or 7 in portrait orientation), the box will be 750px wide and 200px high. If the display is 1024px wide, the box will be 1024px wide and 200px high. If the display is 1920px wide, the box will be 1920px by 200px. This particular box will have a background color of #5cd571, a light shade of green (the # symbol indicates that this is a hex color value).
How will this box change when the screen is 768px wide? Making the change happen requires creating a media query (break point). Here is the media query again:
@media (min-width: 768px) {
//CSS goes here
}
Inside of that media query will be the CSS for the changes. There is no need to repeat anything that is not changing. Suppose the change is that the box will occupy only half the display width (50%) and the background color will become a light shade of blue, that is, #3ec4ee. (Remember that everything is optional—height, width, color, and any other property that .box can have.)
@media (min-width: 768px) {
width: 50%;
background-color: #3ec4ee;
}
Notice the box height will not change. The box will still be the same height when the screen size is 768px. If you want to change the height, you can, it just depends (like everything else) on how you want your content to change at a display width of 768px.
What about other screen sizes?
The nice thing about media queries is that if the screen width is less than 768px, the code inside the media query will be ignored. In that case, only the code for the smallest screen size (which is the phone size that you designed for) will run, keeping the code for mobile simple and short. This truly is designing for mobile first.
And that’s it! If you want another media query, just add on another and change the designs for the next sizes up. You are not limited to a certain number of break points—with CSS you can add on as many as you want.
There are ways to make this even simpler. One way is to use Bootstrap, a popular HTML, CSS, and JS framework for developing responsive, mobile-first projects for the web. Another, even simpler, way is to use a library like Skeleton CSS. Think of Skeleton as a lightweight Bootstrap. With it, you can create columns and rows for quick and easy layouts. I think doing simple HTML and CSS layouts with Skeleton is just as easy as learning where all the settings of any tool are, plus it gives you more flexibility.