It’s no secret that Mobile and Responsive design has become the standard that separates the good developers from the great. It’s an entirely new way of thinking given that we tend to build Websites and Applications on Desktops rather than punch in code on our mobile device. With that in mind, how do we properly setup our workspace to adapt to this new environment? The answer is actually simpler than you might think now that modern browsers do most of the heavy lifting for us.
Why mobile first?
There are several benefits to adapting to a mobile first design for a website. We are able to meet the mobile user’s requirements on the most baseline level because of the constraints on mobile platforms in both performance and screen landscape. The device is not only smaller but is also frequently on a lower connection speed or even a limited data plan. Essentially, we are forced to be focussed and direct with our content, including above-the-fold content call to actions, which will provide a concise and relevant mobile experience that is easily ported over to the tablet and desktop.
In order to preserve some semblance of flow, I’m going to break this post up into the categories:
- Tools for the Job
- Proper Use of Media Queries
- Min-Width VS Max-Width
- Utilizing SCSS for Clean Code
- Work Flow
Tools for the Job
Often times you’ll hear people say that you need to have all of the devices in order to test for all of the possibilities. Honestly, it couldn’t be further from the truth. I won’t say that having them is not useful, however it is absolutely overkill until you’ve hit the testing phase, and even then only one iOS and one Android device should suffice.
So, what do you recommend then?
I use the Chrome Developer Tools, though if that doesn’t float your boat the Firefox Developer Edition is just as good. To access the Chrome Developer tools simply right click anywhere on a webpage and click Inspect Element. Then with the Inspect Frame open, click on the Mobile Phone icon next to the search Icon in the frame. This toggles mobile views. Now on the top of the window you can select your device and model you want to emulate your website on and with a quick page refresh.
Proper Use of Media Queries
Considering that CSS reads downward, there are two ways to properly include media queries for your Mobile First approach.
Let’s say we have a header on our page with the this code:
HTML
<header>
This is the header
</header>
CSS
header{
width: 100%;
padding: 10px;
text-align: center;
color: #fff;
background-color: steelblue;
}
That’s an amazing descriptive header, isn’t it? Now, let’s say that we want the header to have a more vibrant background color on tablets. We’d make our CSS look like this.
CSS
header{
width: 100%;
padding: 10px;
text-align: center;
color: #fff;
background-color: steelblue;
}
/* Tablets */
@media screen and (min-width: 900px){
header{
background-color: tomato;
}
}
Awesome! Now what if we wanted to have a nice mysterious color for the Header background when we are on Desktops?
CSS
header{
width: 100%;
padding: 10px;
text-align: center;
color: #fff;
background-color: steelblue;
}
/* Tablets */
@media screen and (min-width: 900px){
header{
background-color: tomato;
}
}
/* Desktops */
@media screen and (min-width: 1200px){
header{
background-color: darkmagenta;
}
}
This is the recommended approach for Media Queries, and it will help you keep your code clean and organized if you include them all at the end of your CSS file. Now on Mobile Devices, the Header will be blue, on Tablets the Header will be orange-red and on Desktops the Header will be purple. It seems just like a normal media query, however there is one massive difference.
Min-Width VS Max-Width
I’ve already mentioned that CSS reads downward, however I omitted a very important piece of how it reads media queries. When CSS encounters a media query, it checks if it is true, then applies the styles in the query. Essentially what we just wrote above has the CSS think that the Header is blue by default. It then reads further down to see that in Tablets the actual color is orange-red and it overwrites the blue color. This happens once more for the Desktop Media Query. However, if the screen size is not over 1200px, the browser sees that Media Query and moves on, without reading what is inside. Essentially, what we’ve done is made it so that all of the Mobile Styles are the default configurations, and we then overwrite those styles as our screen realty increases.
Essentially, when we’re on a mobile device it loads less CSS than when we’re on a Tablet or Desktop. This helps our Mobile Device load times immensely by only loading what is absolutely necessary.
Now, if we had written our code using max-width instead, no matter the device or browser size, all of the code is loaded. This bloats our code and slows down loading speeds on Mobile and Tablet users. That is the Desktop first approach, and overall leads to writing more code as you need to overwrite more as you scale your site down to smaller devices.
Utilizing Preprocessors for Cleaner Code
At Old Town Media, we use both LESS and SCSS to handle our CSS preprocessing. The code examples below will be written in SCSS.
Let’s rework our code from before using some SCSS principles.
HTML
<header>
This is the header
</header>
The HTML is unchanged, though I included it to clear up confusion.
SCSS
header{
//Mobile
width: 100%;
padding: 10px;
text-align: center;
color: #fff;
background-color: steelblue;
//Tablet
@media screen and(min-width: 900px){
background-color: tomato;
}
//Desktop
@media screen and(min-width: 1200px){
background-color: darkmagenta;
}
}
Using SCSS nesting, we can better display our code in a more readable manner, but I think we can do better. At the moment our code isn’t very DRY (Don’t repeat yourself). Let’s remedy that by utilizing SCSS variables as well.
SCSS
//Variables
$tablet: 900px;
$desktop: 1200px;
//Header Styles
header{
//Mobile
width: 100%;
padding: 10px;
text-align: center;
color: #fff;
background-color: steelblue;
//Tablet
@media screen and(min-width: $tablet){
background-color: tomato;
}
//Desktop
@media screen and(min-width: $desktop){
background-color: darkmagenta;
}
}
Now we can just manipulate our variables $tablet & $desktop and those media query breakpoints will automatically adjust. However, we can still take this one step further to make our code even better using SCSS mixins.
SCSS
//Variables
$tablet: 900px;
$desktop: 1200px;
//Mixins
@mixin media-query($device){
@media screen and (min-width: $device){
@content;
}
}
//Header Styles
header{
//Mobile
width: 100%;
padding: 10px;
text-align: center;
color: #fff;
background-color: steelblue;
//Tablet
@include media-query($tablet){
background-color: tomato;
}
//Desktop
@include media-query($desktop){
background-color: darkmagenta;
}
}
Now that we’ve properly setup our code, let’s add some text to our body, and we can show off our new SCSS in action.
HTML
<header>
This is the header
</header>
<h1>Lorem Ipsum</h1>
SCSS
//Variables
$tablet: 900px;
$desktop: 1200px;
//Mixins
@mixin media-query($device){
@media screen and (min-width: $device){
@content;
}
}
//Styles
header{
width: 100%;
padding: 10px;
text-align: center;
color: #fff;
background-color: steelblue;
@include media-query($tablet){
background-color: tomato;
}
@include media-query($desktop){
background-color: darkmagenta;
}
}
h1{
text-align:center;
color: blue;
@include media-query($tablet){
color: red;
}
@include media-query($desktop){
color: black;
}
}
Now that we’ve set our code up properly, we can easily maintain a mobile first approach to any elements that we add to our site.
Here’s the code from above in a working example:
Work Flow
Generally speaking, this section is very opinionated and each Developer’s workflow will likely differ from one another. When I design Mobile First, I tend to set up my SCSS first and do most of my coding while the Mobile Inspector is open in Google Chrome. That way I can see what it looks like with default styling before scaling up my work. I have however found that the Live Reload tool to be very useful when working on multiple screens. Code on one screen, web browser on the other.
I’ve also found that on large projects it helps immensely to section off your SCSS into separate files and load them in the order in which they are needed.
For example, I’d usually have my load order go like this.
SCSS
//Imports
@import 'variables';
@import 'mixins';
@import 'layouts';
//etc...
That way it’s easier to maintain a lot of open files and code at one time. I also highly recommend the use of Bourbon.io for their extensive list of Mixins and other useful SCSS includes.
Wrapping it all up
A Mobile first approach is incredibly useful when developing, however you must always remember to fit the needs of the project. There will be times where it’s not necessary to create a responsive website (although, I highly encourage it). When you do, remember to use min-width media queries to help minimize load times for your more constrained users. Preprocessors while scary to the untrained eye can greatly improve work flow and can greatly increase a developers quality of life when working on large projects.
Responsive design isn’t going away anytime soon so I encourage you to consider taking your next project Mobile First.