In this information age, mobile first design is becoming increasingly important. But what is it and how can you implement it into your work?
Mobile first design has been becoming a major focus in the web design industry. It began around mid to late naughties, when it became popular to browse the internet on a mobile phone. The invention of the iPhone and other smart devices cemented it’s place in the online world, to the point where not being mobile-friendly will hurt your Google ranking. Approximately half of all online traffic is now mobile, so you’ll probably find that you need to apply these rules to your sites and projects too.
Mobile First is the name given to sites that are designed for mobile platforms. They prioritise the usability on small screens during the design process. This doesn’t mean forgetting about larger scales, there are users who will visit a site from a smart TV, but rather they are completely functional on palm held devices. Mobile phones can vary greatly in size. From the tiniest of screens to a tablet-hybrid (known as a phablet), mobile first design should encompass all of these scales.
Adaptive vs Responsive
There are two ways to achieve mobile first design. And you’ve probably used both of them. Adaptive and responsive are the way we describe how a website renders at different screen sizes.
When it first became a necessity, websites used to serve up a totally separate site to mobile users. You might have seen these, they were often located at m.sitename.com. This is adaptive design, so called because the website was forced to adapt to the screen it was being displayed on.
Adaptive design is often not very adaptive. It’s most noticeable on larger mobile devices like flagship phones or tablets. The website determines that you are mobile traffic and serves up a site designed for far smaller screens. Often they have limited functionality, or the features are hidden behind tiny buttons designed for smaller displays.
Responsive sites are the designs given priority by Google’s indexing. Instead of different version of a site for different screen sizes, responsive websites contain all the variations in one page. You can even test this functionality in your browser by changing the window size. Try it now. When I rebuilt shelleybassett.com one of my priorities was mobile first design. As you change the window size, you’ll see elements change position and width, and the top menu hide behind a hamburger. It truly responds to the screen size.
True Mobile First Design
To be a truly mobile first website there are a few key points to check. The most important is that the site uses a responsive method. This is given priority by Google, and also helps to give users a more consistent experience. You wouldn’t change your brand for one screen, so why change your website?
The next step is to design for small screens first. Every step of the design process should take into account those who are using mobile devices. This includes wire-frames, mock-ups and prototypes. I recommend including a transition screen of tablet/phablet size to ensure that there is a smooth transition for the intermediate screen sizes.
Finally, build the mobile version along side the desktop size. Don’t build one then try to break it up for the other size. To ensure things move between sizes correctly, you often need extra containers or divs. Building a site then adapting it can break the size you built first and create extra work. Rather, as you construct each piece, include the media queries that will change it over the different sizes and screens. This way you won’t need to revisit something that is already “finished”. Don’t stress about building the small or large scale first, that’s not as imporant as making sure they both exist and transition smoothly. This is the true mobile first design.
Mobile first design is not difficult or complicated. You probably see it every day. Nothing special is needed, just a little bit of consideration for how mobile visitors will see your site. Be consistent and considerate. Follow the usability guidelines and good design principles. Soon, you’ll be able to show your site on any screen and still have it looking good.