“We shoulddesign for mobile first.” I am sure by now we have all heard this phrase. Butwhat does it mean? Does this mean we actually design our mobile solutions firstand then design separate solutions for everything else, or does it mean weshould 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 samecontent into a mobile view. eLearning content should not be the same fordesktop displays and for mobile devices. There are a couple of problems that youwill encounter when you take the approach of “just porting things over” fromdesktop to mobile. First, people ordinarily consume content for shorter amountsof time on a phone than they do on a desktop device. Second, mobile devices aresmaller and typically have less processing power, so what worked on a desktopdevice doesn’t always work on a mobile device.
Mobile first
So, thinking “mobilefirst” means to create your content first on the smallest devices that theusers 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 inthe same code and same project, not a new project for every screen size. So whenbuilding a custom HTML5 interaction, first design it to play perfectly on aphone, then adjust it to run on a tablet, and then for a desktop device.
There are twobig benefits that this approach gives you:
Benefit #1—Since mobile devices aresmaller, you will tend to think about what is really necessary to convey. Ilike to think of it as cutting out the fluff and getting to the useful corecontent that someone needs to know. As the designer, this helps you get to thecore of what needs to be taught.
Benefit #2—If you design your contentto be mobile first, then your code will be simpler and you won’t have to do alot up front to get it looking good on a phone. Since phones have smallerprocessors, this means the device does not have to sift through a lot of codeand then adjust to a mobile device, removing the CSS that does not need to bethere.
Using media queries to adapt content to changesin display size
When asmartphone reads the code, it only reads the mobile code. To adjust your code sothat it adapts and looks better on larger devices, use media queries (or, assome applications call them, “break points”). Media queries are additionalstyles or changes to existing styles once the screen size reaches a certainpoint. Here’s how they work.
Building a media query
Suppose you’vedesigned your content for a smartphone. To make the display change when thescreen width is 768px (which is the width of an iPad Mini in portraitorientation), add a media query to your CSS. Here is what a simple media querymight look like. Any styling inside of the “curly” brackets will run as soon asthe screen size is 768px wide, but not when the screen size is less:
@media (min-width: 768px) {
//CSS goes here
}
To adjust thedisplay again when the user has the iPad Mini in landscape orientation, simplyadd another media query in your CSS for 1024px wide (the width of an iPad Mini inlandscape):
@media (min-width: 1024px) {
//CSS goes here
}
What goes inthe media query where it says “//CSS goes here”? Only the code for the elementthat will change. You will already have written the CSS for everything thatwill display, and all of that will be in a regular CSS file. That CSS file willbe what runs on a smartphone. When you want something to change or adjust for abigger display, place it inside a media query.
An example
Suppose yourdisplay is going to contain a simple box, with a class of .box. First write some simple CSS that will draw that box on amobile device.
.box{
height: 200px;
background-color: #5cd571;
}
This box on amobile device will be 200px high, and it will be 100% of the screen widthavailable. This is the basic CSS for this box for any display, and 100% is thedefault width for class .box in HTML.If the display is 750px wide (iPhone 6 or 7 in portrait orientation), the boxwill be 750px wide and 200px high. If the display is 1024px wide, the box willbe 1024px wide and 200px high. If the display is 1920px wide, the box will be1920px by 200px. This particular box will have a background color of #5cd571, a light shade of green (the # symbolindicates that this is a hex color value).
How will this box change when thescreen 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 thatmedia query will be the CSS for the changes. There is no need to repeatanything that is not changing. Suppose the change is that the box will occupyonly half the display width (50%) and the background color will become a lightshade of blue, that is, #3ec4ee.(Remember that everything is optional—height, width, color, and any otherproperty that .box can have.)
@media (min-width: 768px) {
width: 50%;
background-color: #3ec4ee;
}
Notice the box heightwill not change. The box will still be the same height when the screen size is768px. If you want to change the height, you can, it just depends (likeeverything else) on how you want your content to change at a display width of 768px.
What about other screen sizes?
The nice thingabout media queries is that if the screen width is less than 768px, the codeinside the media query will be ignored. In that case, only the code for thesmallest 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 formobile first.
And that’s it!If you want another media query, just add on another and change the designs forthe next sizes up. You are not limited to a certain number of break points—withCSS you can add on as many as you want.
There are waysto make this even simpler. One way is to use Bootstrap,a popular HTML, CSS, and JS framework for developing responsive, mobile-firstprojects for the web. Another, even simpler, way is to use a library like Skeleton CSS. Think of Skeleton as a lightweightBootstrap. 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 aslearning where all the settings of any tool are, plus it gives you moreflexibility.
