Table of Contents
Why should you care about mobile first web design? First, the world is becoming more and more connected. The number of mobile users is on the rise. There are more people in the world with mobile phones than with desktop computers. Yet, we still focus and design primarily on desktops. In this article, I will give you thorough introduction to mobile first web design. You will learn how to use this approach in web design and development. You will also learn about why mobile first is better for your clients. Lastly, you will also learn about mobile first and progressive enhancement.
Why mobile first web design matters
Every year the number of mobile devices sold worldwide is growing. For many people, mobile phones are the first opportunity to taste the world of Internet. What’s more, for many of these people, mobile devices are the only chance to get online. In many places in the world, people can’t afford to buy neither desktop computer nor laptop. Devices such as tablets are also often not an option. For many people living in developed countries, tablet with price around $399 may not seem like a big expense.
However, there are also people living in developing countries we shouldn’t forget. For these people, $399 is often more money than they make. When you consider people in living in Africa, this is more money than they have ever seen in their whole life. These people are much more likely to buy some low-end smartphone for a few dollars. Then, they are going to use these more affordable devices to access the Internet. I should also mention that all these people will not usually use high-speed broadband.
Even if you go back to developed country such as the USA, you will see something similar. The number of mobile users is rising as well. This is no surprise. Take a look around yourself on the street and what will you see? You will see many people, especially younger ones, on their phones. In most cases, they are either on the Internet or playing Pokemon Go.
Why am I telling you all this? I want you to understand one thing. The number of people using mobile devices is significant. And, this trend is only going to speed up. The conclusion is that mobile users will be more and more important for us and our clients. We have to start thinking about them.
Introduction to mobile first approach
We talked quite a bit about the current state of Internet usage. We also discussed that the statistics are not the best predictor of the future. If you still don’t believe me, take a look at the weather forecast. How many times do you think it will rain just because it was raining yesterday? See? What happened yesterday will not tell you what will happen today or tomorrow. Anyway, I should get back to mobile first web design before it will be too late.
The theory of mobile first web design
What’s the general idea behind mobile first web design? Usually, when you start to work on new design, you start sketching and wireframing for the desktop. When you finish this version of design, you move to lower levels. Meaning, you prepare layout for tablets and, finally, mobile phones. This is desktop first web design – your first design layout is for desktop computers. Mobile first approach audaciously turns this concept inside out.
Let’s start with a short introduction to the history of mobile first approach. This term was originally coined by Luke Wroblewski. Luke also wrote a book about this approach and published it under A Book Apart. Since then, mobile first approach has been gaining more and more recognition within the community of web design and development. Luke noticed a trend of increasing numbers for mobile web usage. He saw that these numbers started to get closer to and soon overlap Web usage on desktops. This was the catalyst for creating mobile first approach.
In mobile first design, your first layout is dedicated for mobile devices. After you finish this layout, you move one level higher. At this level or stage, you are working on the layout dedicated for tablets. Then, you move the third level. This level is dedicated to desktop computers and other wide-screen devices. This can be the last level. However, it is not a rule. With the introduction of smart TV, it is quite likely that you will have to think about designing for really high resolutions.
One way to think about these wide-screen devices as the top of the proverbial design pyramid. You start at the bottom with mobile devices. Then, as the screen real-estate increases, you move higher and higher to the top.
Mobile first web development and HTML
Let’s now assume that you are also a web developer. Adopting mobile first approach will mean a couple of things. First, let’s say that your website is not optimized for mobile. Then, it can happen that some mobile browsers may set a larger browser viewport than necessary. If this is true for your website, make sure to include viewport meta tag in the head of HTML. This meta tag should include two things. First, it should set width to device-width. Second, it should set the initial-zoom to 1. Value for name attribute of this meta tag will be “viewport”.
Code:
<!-- Add this to head section of your HTML document --> <meta name="viewport" content="width=device-width, initial-scale=1" />
This was the first step toward mobile first website. Some web developers also like to add user-scalable and set it to no. What this setting does is that it prevents users from zooming on the page. You know when you double-tap pinch-to-zoom to zoom-in on some part of the page. This setting will disable this ability. Personally, I don’t use this. In many situations, I had to use zooming to be able to read so small content. Also, even websites build mobile first may contain something users may want to see in more details. For this reason, I don’t recommend using this setting.
Mobile first web development and CSS
The second step is about using different media queries. Until now, you’ve been probably using media queries targeting max-width and max-height properties. Mobile first web development uses the opposite. You write your default CSS styles for mobile devices, not desktops. Sure, nobody says that you can’t use the same media queries. However, it is a much better practice to target min-width and min-height properties and scale the design up. Let me give you two simple examples of CSS code. The first one will be desktop first.
Code:
/* Desktop first styles example – bad */
.thumbnail-img {
width: 50%;
float: left;
}
@media screen and (max-width: 768px) {
.thumbnail-img {
width: auto;
float: none;
}
}
Let me quickly describe what are we doing in the example above. We are styling image on hypothetical website. We want the image to take 50% of the whole width. Also, we want the content around the image to fill the remaining 50%. However, we want to apply these styles only on screens with width larger than 768 pixels. Below this resolution, the width of the image should be set to its default value. This also means that floating will not be necessary. Let’s now take a look at how we can “convert” these CSS styles into mobile first version.
Code:
/* Mobile first styles example – good */
@media screen and (min-width: 768px) {
.thumbnail-img {
width: 50%;
float: left;
}
}
As you can see in the code example, there are some additional benefits with adopting mobile first approach. Our code is much shorter than it was in the desktop first version. In desktop first example, we declared large screen rules first. Next, we overrode these rules with new ones dedicated for smaller screens. The mobile first approach is different. We define new CSS rules as we get real estate for the content. This will often mean that we may not need any CSS before hitting certain width or height.
The forgotten nature of the Web
In web design and development, there is one thing we should constantly remind ourselves. The web by default is a fluid thing. Create really simple website composed only of plain HTML and see what will happen. The content will smoothly adapt itself as you change the width and height of the browser. The layout is perfectly responsive. It will never break. What’s more, it works on every device. You could open this website on a calculator! Well, almost.
Anyway, the point I want to make is this. When we design and build website desktop first, we are going against this nature. This is also why so many websites have problems with fitting every screen and resolution. This is one of the reasons so many developers don’t like to work with CSS. Fortunately, mobile first can be solution for this problem. When you design and build websites mobile first, you work in harmony with this nature of web instead of against it.
Another important thing to mention is that, for a long time, not all mobile browsers supported media queries. Therefore, serving base styles by default worked better. It also reached broader range of devices and browsers. Sure, today this is not an issue anymore. Well, unless you are exceptionally kind developer who wants to support browsers such as IE8.
Mobile first web design across the Internet
Okay, we talked about the biggest issue related to mobile first approach. Well, it is more problem of laziness. Anyway, let’s take a quick look at the current use of mobile first approach. Let’s take the two biggest frameworks for web development. These are Bootstrap and Foundation. Take a look at the websites of these frameworks. Both mention mobile first as one of the features. Let’s also take a look at statistics on Google Trends. As you can see, the interest in mobile first approach is rather on the rise than on the decline.
You can also take a look at the websites of web design agencies. In the end, they have to pitch themselves appropriately. Otherwise, they will soon be out of business. Again, mobile first will be mentioned quite often. The conclusion is straightforward. Mobile first is very popular. Can this be just another fad? Well, yes it can. However, you can say this about almost everything. What’s more, do you remember the statistics we discussed in the beginning? How many people use or will use mobile phones to get online? This is the strongest argument for adopting this approach.
Mobile first approach and progressive enhancement
If you heard about mobile first approach, you may also hear about something called progressive enhancement. What does this stand for? The main goal of Progressive enhancement is to offer core functionality to everyone. This means that when you develop something, your first task is to make it work on every device. At this moment, you are free to forget about advanced and more demanding features. Just make your thing work.
When you are done with this layer of core functionality, you can move further. You can include some features that may require more resources to work. However, these additional features shouldn’t influence the core functionality. Let’s say that someone wants to use your app on cheap smartphone. Unfortunately, that smartphone can’t handle all the cool features and functionality you created. In many cases, the app would either crash or not run at all.
With progressive enhancement, it will fallback to its core functionality. In other words, if that smartphone can’t handle certain feature, the app will not require it. The cool thing is that the app will still work. Let me give you one quick example from web development.
Example of progressive enhancement in web design
Imagine you have a website with a simple form. The core functionality is that everyone can send it. There will be some inputs and PHP file for handling the back-end. To provide the user with feedback, you can redirect her to page with confirmation message. This is the first layer, or foundation, upon which we can build upon. Even if some hypothetical user will disable JavaScript, the form will still work. She will still be able to send the form. This is important.
In the second layer, we canadd someJavaScript. For example, we can use AJAX to send the form and custom validation for inputs. We can also use simple alert messages to provide the user with feedback. In the third layer, we can replace alert messages with custom-made modal dialogs. The fourth layer may include some features from the CSS3. These features can be animations and custom-made form elements. This can help us improve visual side of the form anduser experience.
The result will of this will be beautiful form for user with devices that support the latest technologies. The rest of users will get lighter version of the form. Sure, the form may not look as great. However, that’s not our goal. Our goal is to make it work everywhere and for everyone. From low-cost smartphone to the latest iPhone 7, our form will work on every device. I forgot to mention one thing about the layer with advanced CSS. Always make sure to create fallbacks for these advanced features.
Progressive enhancement with CSS
Let’s say that you decided to use some newer or experimental CSS feature. How could progressive enhancement look like? First, you should use some feature-testing library. One of the best libraries for this job is modernizr. This library will run before the page and DOM is loaded. If you created a custom build, it will test user’s browser on the features you’ve selected. Otherwise, it will test the browser for all supported features. This is usually not necessary.
Using the development build may seem like a better choice. You never know what feature will you decide to use. It is also faster than selecting individual features. Still, I would encourage to create your own custom build. Keep in mind that every feature in the package has some impact. Every feature requires additional lines of code. Therefore, the file for modernizr will be bigger. Next, modernizr needs some time to test every feature. This can affect performance on slower connections and cheaper mobile devices.
It is called development build for a reason. It should be used for development, not for production. If you want to use development build for development, do it. For production, create your own build covering only features you used in the project. The result of running modernizr are classes appended to html element. Use these classes to create CSS for browsers supporting and not supporting the feature. In other words, if this feature is available, use this style. Otherwise, ignore it and use this style instead.
Example of progressive enhancement with CSS
We talked a lot about using modernizr to detect CSS features available in the browser. We should also take a look at some simple example. Let’s say you want to design nice landing page for your newest client. Fortunately, your client is open to novel ideas and experimentation. She just wants the website to work on all modern browsers. In case of IE, this means version 11 and up. You decided to use some nice flexbox, animations, CSS filters, CSS gradients and rem units.
First, you did the research, sketched a number of ideas and created the design. Then, you switched to development. Since you know exactly which CSS features you want to use, you can create custom build of modernizr. After you created the HTML structure for the website, it is time to style it with some CSS. Thanks to modernizr library, we have a bunch of classes on the html element we can now use for our CSS.
Code:
/* Button with gradient background */
/* Styles for browsers not supporting CSS gradients */
.no-cssgradients .btn {
background: rgb(22, 135, 237);
}
/* Styles for browsers supporting CSS gradients */
.cssgradients .btn {
background: linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));
}
/* Centered navigation */
/* Styles for browsers not supporting flexbox */
.no-flexbox .nav-list {
width: 100%;
text-align: center;
}
.no-flexbox .nav-list li {
display: inline-block;
list-style-type: none;
}
/* Styles for browsers supporting flexbox */
.flexbox .nav-list {
display: flex;
justify-content: center;
flex-direction: row;
}
/* Thumbnail images with some effects made by CSS-filter */
/* Styles for browsers not supporting CSS filters */
.no-cssfilters .thumbnail-image {
width: 350px;
height: 250px;
background: url(/images/thumbnail-grey-sepia.jpg) no-repeat;
}
/* Styles for browsers supporting CSS filters */
.cssfilters .thumbnail-image {
width: 350px;
height: 250px;
background: url(/images/thumbnail.jpg) no-repeat;
filter: grayscale(0.5) sepia(1);
}
Progressive enhancement with CSS beyond modernizr
By now I hope you have some idea about mobile first design and progressive enhancement with CSS. However, this is not all. If your project doesn’t have to support IE 11 or lower, you may not need to use modernizr. CSS3 spec contains its own API for feature detection. This API is called supports and it’s support is already quite good. What this API does is that it allows you to check whether browser supports specific CSS feature or not.
If you know how syntax for media queries looks like, using supports will be easy for you. Syntax of these two is very similar. You will start with “@” sign just like in case of media query. Next, instead of “media” keyword you will use “supports”. This keyword is followed by parentheses containing specific CSS feature you want to test. The result is a Boolean value (true or false) indicating if the browser supports a given CSS feature. You can also use “not” and “and” keyword. Let me illustrate how to use supports on a couple of examples.
Code:
// Supports and test for flexbox
@supports (display: flex) {
.nav-list {
display: flex;
justify-content: center;
flex-direction: row;
}
}
// Supports using ‘not’
@supports not (display: flex) {
.nav-list {
width: 100%;
text-align: center;
}
.nav-list li {
display: inline-block;
list-style-type: none;
}
}
// Supports using ‘and’
@supports (display: flex) and (transition: .25s) {
.nav-list {
display: flex;
justify-content: center;
flex-direction: row;
}
.nav-list a {
transition: .25 color cubic-bezier(.17,.67,.83,.67);
}
}
Mobile first web design and myopic clients
We don’t have many users accessing our website from mobile phones. How many times did you hear something like this? Your answer will probably depend on where do you live. It will also depend on what type of clients do you accept. Based on my experience, the ratio is usually 7:3. In the past, 70% of my clients though that I am crazy. They were often looking at me in that way when I proposed starting design process with mobile.
This is not a surprise. They usually had some solid numbers to back this up. These statistics are showing that the majority of their users is coming from desktop devices or tablets. There is one problem with this. All these numbers are showing what happened. They will only show you the history. Unfortunately, these numbers will not show you the future. They may indicate some trends, but the probability that the trend will emerge is still 50:50. Now, try to convince your client that the future is different. Try to convince them to think about next five years.
The hard thing is that this is your job. As a web designer, you want to create the solution that will work for the next few years. The outcome of your work should be web design that will last longer than one month. The future is obviously inclined to be more and more mobile first. Therefore, the designs that will work longer are the mobile first. Consequently, we have to start educating our clients about this trend. Our clients need to stop living in the past because the future is coming. It doesn’t matter how many desktop users do they have today. They should think about all the potential users that are just browsing around. Build designs for future, not past.
The usual argument against mobile first web design
It doesn’t matter what the numbers say. Some web designers are still not willing to adopt mobile first approach. What’s the problem? Mobile first web design tackles the hardest type of layout in the beginning. Let’s be honest. Screens on mobile devices are much smaller than screens on desktop computers or tablets. You have to somehow provide the same level of experience on much smaller real estate. This makes many web designers uncomfortable.
I see this “downside” as an advantage. This is how I like to think about it. When you have to deal with the hardest problem in the beginning, the rest of your work is usually easier. I also believe that this kind of nonconformity is what can improve your design skills. You have to stretch your skills in order to learn something new. Staying in your comfort zone will teach you nothing. After a time, it is also boring. Regular supply of challenges is what will keep you excited and happy.
Imagine the last time you achieved something quite hard. How did feel? Pretty good right? Chances are that you felt unstoppable. You also liked your work. Maybe you hated it at the same time. Yet, the love was there. This is why I want to encourage you to give mobile first web design a try. Is it harder? Yes, it is. Will you sometimes want to tear your sketches and delete your wireframes? Yes, at least I wanted. Is it worth it? Hell yes!
There is another benefit. You are providing your clients with a better service. Mobile first design is usually more stable. You started with the lowest screen real estate. You don’t have to worry about the screens of the future. Your design will probably work. If not, you did a bad job.
Beyond mobile first design
There is one more thing we should discuss. Mobile first design is not the ultimate goal we should strive for. It is much better than desktop first. There is no doubt about it. Still, we can take this game one level higher. We can create truly flexible design. What am I talking about? I’m talking about content first design. Mobile first web design will help you create fluid layout that will be less prone to breaking. However, saying that it is the highest level of design is too far-fetched.
If you want to take your design practice to another level, you have to at least think about the content. What is real responsive design actually about? When website is responsive, you can view its content across many viewports. You are not limited to any resolution. This means that layout is no longer the dominant force. It has to submit to content. It is no longer the question about how to squeeze this amount of links into this shape of navigation.
Instead, you have to start asking what shape of navigation would fit this amount of links the best. The same principle applies to any other element in the layout. When you make the move from mobile first to content first design, the content becomes the most important. The problem is that many of us designers are using flawed process. What do I mean? We are trying to design layouts without real content. Usually, the content is added by someone just before the design goes live.
Design without real content is like building a house without specifying the number rooms you want. Design created without real content may look great. Still, it will never be as good or impressive than a design with actual content.
Closing thoughts on mobile first web design and development
This is it. Now you know everything you need to start designing mobile first. We tackled mobile first approach from many directions and discussed a lot today. It is quite hard to do our usual recap. What you should remember is that this. If you want to apply mobile first approach, start with the smaller amount of screen real-estate. Create layout for mobile devices first and then move up in the device chain. Desktops and wide-screen devices should come as last. I know that this approach to design may be different from what you heard or read about.
Significant number of web designers are still starting with desktops. I hope that this article convinced you that mobile first design a much better choice. I want to encourage you to give mobile first approach a shot. It may be hard at first. The truth is that almost everything is hard when you try it for the first time. You have to give it some time and be patient. Just don’t give up and keep designing and building!
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
