Table of Contents
Mobile first approach is a very interesting movement in responsive web design and web design at all. Crafting website to suit perfectly the mobile devices instead of desktop is smart thing and you should include it into your everyday workflow. For the first time you might face couple of issues steaming often from your old habit to think in big resolutions where you have more space than on mobile screen. Let’s discuss this subject a bit more …
Mobile first VS Desktop first
The biggest difference between designing for desktop and mobile is the base resolution. When you create a website with desktop first approach you have many options to choose. You can use some well-known recommendations and systems like 960 and pick this as a value for the width (max-width) of the page, or you can choose some random width. One of the best ways to deal with this decision is to think about the content you will fill it with.
If you are working on content-rich site, you might be considering wider width like 1200px. On the other hand, for cases when you work with small amount of content, such a wide width can create a lot of unnecessary and unappealing white space. Always make sure to check what the line length is. For better readability, keep in the range of 55-60 characters per line.
Mobile first approach definitely does not have to deal with problems like this. You are more likely to think about where to squeeze that one last paragraph or image or how to display that multi-level navigation on 320px display. Constraints like these can be very difficult to solve. When designing for mobile devices your canvas is much smaller than on desktop. Your starting width is about 320px or 480px to include bigger mobile devices.
On mobile display you have to carefully consider every available pixel. Sometimes, you will decide to change the overall layout. That is nothing bad or to avoid. Pivoting and changing or modifying layout or grid system when you feel it that way is often good thing to do. It might not make your client happy, but important is if it works. This thinking about layout and form of the content is one of the biggest benefits I see in mobile first approach.
It often literally forces you to think twice about the content and available forms it can have before making next move. This is great way you should use to create your designs – to suit layout the content and not otherwise.
Setting things up
After some theory let’s look at one example of how to use mobile first approach in your work. We will take a look at designing a navigation with four links. Normally you (me too) would think how to distribute links proportionally across the page on desktop. Not in this situation. Today, we are working with 320px-480px (width-height) as base resolution for our design. Let’s setup the HTML.
HTML:
<div class="wrapper">
<header role=”banner”>
<nav role='navigation'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
</div>
Let’s start by setting a font size, weight and family for the document. To do that select the body element in your CSS. Now you have two options. First, use three lines for all the properties – size, weight and family. Second, use only one property with shorthand as value. The later is better and faster to go with. So use font property with value of “300” for weight, “1em” for size and “sans-serif” for family. All divided by spaces. Now to the nav.
One thing you can do is to hide navigation “behind” some icon. When user hover over or click on that icon the links will appear stacked vertically. This is very easy to do. So, set the font-size of body element to 1em and then position of list to relative (for later use in :before class) and then jump right into styling through :before pseudo-class. Here, set position to absolute. Content will be set to code of bar icon that can be found on font awesome.
To make a bit more space around the icon bigger let’s set the top and bottom padding to .15em and left and right padding to .25em (padding: top-&-bottom left-&-right). For background I chose light shade of orange – #ea764b and to create a bit of harmony, color of text is very light orange – #f8d4c6. Font-family is set to fontAwesome which is linked through link in head of the page. The last is to set text-align to center to position the icon into the center. This will create small orange box with white bars icon.
CSS:
body {font: 300 1em sans-serif;}
ul {
position: relative;
z-index: 99;
}
ul:before {
position: absolute;
content: "\f0c9";
padding: .15em .25em;
font: 2.5em fontAwesome;
text-align: center;
background: #ea764b;
color: #fff;
}
To get rid of our icon on hover so user can see the links, you will create new rule for hover state of unordered list. Well, its :before pseudo-class. Here, just set the content to “” (blank). Now when you hover (mouse over) over the icon, it will disappear. Also define rule for list item when you hover over icon and let’s set display property to “block”. This will reveal your list when user hover over it (you will style list items in next step).
There is one more thing to do. Since we previously used background and padding for icon, you now have to reset these two properties. Otherwise, you will see small orange square in top left corner of the list. To do the reset use :before pseudo-class on :hover state of unordered list and set its padding to “0” and background to “none”.
CSS:
ul:hover:before {
content: "";
padding: 0;
background: none;
}
ul:hover > li {display: block;}
Now we will define styles for the list items and anchor tags. First, for list items, let’s set the width to “100%” (unordered list has not set width so the 100% is equal to 100% of whole page) and prepare display with value of none.
CSS:
li {
display: none;
width: 100%;
}
For anchor tags … The display will be set to “block” so the links will be clickable over the entire width of list and not just on the position of text. To create some space above and below the text, and also to enlarge the individual links, set the top and bottom padding to “.5em”. Background will be our light shade of orange – #ea764b – and color of text is also very light orange – #f8d4c6.
To divide individual links let’s set the bottom border to “.1em” solid and color to #ed8762 (5% lighter shade of our orange – consistency). To play a bit with contrast and visibility of text we will set the font-weight to “bold”, text-align to “center”, text-decoration to “none” (who likes that underline anyway) and text-transform to “uppercase” (yes, size matters). To keep it simple, for hover state, only change the background to darker shade of the orange you used previously – #e76534.
CSS:
li a {
display: block;
padding: .5em 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
background: #ea764b;
color: #f8d4c6;
border-bottom: 0.1em solid #ed8762;
}
li a:hover {background: #e76534;}
So, we have nice stacked navigation for mobile display. To change it into one-line panel with links positioned next to each other you will create new media query for width larger than 481px (resolution of mobile screen ends above 480px) via min-width property. In this query we will use the best and fastest solution available – flexbox. Just set the display property to “flex” (I included also prefixes for browsers with partial support).
CSS:
@media screen and (min-width: 481px) {
ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
If you want to get rid of the icon and display only list items (you probably should), inside the media query set the content property of :before of unordered list to “” (blank), padding to “0” and then display property of list items to “block”.
CSS:
@media screen and (min-width: 481px) {
…
ul:before {
content: "";
padding: 0;
}
li {display: block;}
}
Now you have simple and clean fully responsive navigation with mobile first approach. If you want to add a smooth animation for hover states, you can use transition property on anchor tags (normal state) with value of “background .25s”. First is for CSS property you want to animate and second for timing (length of effect). You can also use various effect style to change the behavior of transition.
CSS:
li a {
…
transition: background .25s;
}
Summary
Designing with mobile first approach can be a bit tricky for the first time. Maybe, you will need to modify or completely switch you workflow and that is never easy to do. However, when you focus first on mobile version and use mobile first approach, it will naturally force you to think more about the content and form in which is delivered and that always benefit. What is your experience and opinion on mobile first design?
Live demo on Codepen.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
