Illustration by Avalon Hu
Mobile-first design is a key ingredient to successful product design. Designing for the smallest screens first, and then working your way up empowers designers to focus on the core functions of their product. When you focus on the core of your product and strip away the rest, you are able to pinpoint the most important UX components of the product. Then, as you begin designing for larger screens, you can add additional elements to compliment the core functions of the product or service.
Today, two billion people access the internet from their smartphone only. By 2025, that number is expected to jump to 72.5%. Therefore, if you are not designing for mobile, your users are more likely to have a less than amazing experience.
What is mobile first design?
Mobile-first design is a design philosophy that aims to create better user experiences by beginning the design process with mobile devices in mind first, often prioritizing the smallest of screens. This mobile-first strategy stems from the concept of progressive advancement, which means that when a designer sits down to prototype or sketch a website layout, they begin with how it will look on a mobile device screen and then move to bigger screens later. With such limited real estate on a small mobile screen, UX designers must prioritize the most important aspects of their product. This approach allows designers to deliver the right user experience to the right device.
Once the mobile design question is understood, designing for other devices becomes easier. The smallest designs will only have essential features, so right away, you will have designed the core of your UX.
Starting your design with smaller screens enforces restrictions like bandwidth, screen size, and limited or no multitasking capabilities, forcing designers to focus creating a lean product with essential features being prioritized. When the platform is expanded to a tablet or PC, designers are able to take advantage of the unique features. As you gain more screen real estate on larger devices, you can expand the functionality with supplemental elements and features.
Progressive advancement is the opposite of graceful degradation, which begins with designing for a larger screen and working backwards to the smallest. In this way of thinking, a designer incorporates all of a product’s complexities from the start and then strips them away later for the smaller devices.
The issue with this method is that when you build the all-inclusive design from the beginning, the core and supplementary elements merge and become harder to distinguish and separate as you cut down the experience from desktop to mobile. This makes mobile design an “afterthought” and has proven time and again to diminish the mobile user experience.
Illustration of three pillars showing first, second, and third place. The first place is mobile, second is tablet, and third is desktop. Image credit Adobe Stock Photo.Why mobile first?
As mentioned, mobile internet use has outgrown desktop internet use. If 72.5% of people will access the internet solely with their phones in 2025, this shows the importance of having an optimal mobile user experience. Additionally, consumers are more likely to shop and return to businesses who have a mobile friendly site.
Graph showing the increase in the number of smartphone users worldwide from 2016 to 2021. The increase is from 2.5 billion to 3.8 billion over the 6-year span. Image credit Statista.Another benefit of focusing on mobile-first design stems from Google’s algorithm favoring mobile-friendly websites. While organic traffic via search engines is a key ingredient for the success of the majority of companies, paying attention to the preferences of Google’s algorithm is in the best interest of discoverability of your product. For this reason, companies have found value in designing for mobile first.
Additionally, smartphone sales outnumbered personal computer sales beginning in 2012. Consumers are purchasing more smartphones than desktop computers and users are spending more time on the internet from mobile devices, increasing the demand for streamlined mobile user experiences.
Finally, another reason for mobile-first design lies in the fact that companies now spend more on advertising their products via smartphone than they do on TV. By the end of 2019, it was projected that companies would prefer to advertise products on smartphones instead of TV commercials. Social media sponsored ads with delightful animations have become the most popular way to reach consumers. It is clear that there is a significant need for mobile-friendly websites, and it is the job of designers to deliver those to users.
Mobile first is content first
When designing for mobile first, you must remember that content is key. Using a content-first approach, designers should give their users the content they absolutely need with nothing extra. Anything additional might clutter and distract away from the mobile experience.
Mobile-first design has restrictions like screen size and bandwidth, which can cause designers to prioritize poorly. These stringent limitations force designers to strip away any extraneous elements in order to focus on the essentials. Just because an element is extraneous doesn’t mean it’s not necessary at all; it means that those elements are not necessary for mobile design. There are often plenty of elements removed from mobile designs that are kept in the desktop design. This is because content is dependent on the context of use. A mobile user will typically have different needs than a desktop user.
For example, you are more likely to see collapsible menus and widgets on mobile sites while desktop sites tend to have more whitespace and higher fidelity visual elements, like more high-definition photos. Desktop sites tend to utilize full-size imagery including advertisements and promotional material, which is stripped, or in some cases completely removed, on mobile websites.
Additionally, a user may be looking for more in-depth information or additional features on a desktop that might not make sense when it comes to mobile-first design. For example, elaborate and granular spreadsheets are typically accessed via desktop while mobile designs tend to be less in-depth with their database display.
Illustration showing a mobile screen with content elements highlighted outside the mobile frame. Image credit Adobe Stock Photo.5 mobile-first design principles
When designing for mobile first, it is important to keep these design principles in mind:
- Users are at the forefront of design: Your design must help users solve a problem or complete a task quickly and effectively. Your design must be convenient for them, so keep this in mind as you design your user flows. Consider the possible interactions between a user and your app as you identify their pain points. Look at the mobile websites of your competition and find out what mobile-friendly options they do not offer and include those in your design.
- Visual hierarchy of content: Your content should be concise and to the point. It is important to focus on delivering only what the user is looking for while cutting out fluff that may distract them. Your content’s visual hierarchy should explain to the user the order of importance and be easy to discern which elements are most important and which are secondary.
Consider keeping your titles on the top with a content preview above the fold. This helps users understand and see the content right away. Dividing long copy into numerous, one-sentence paragraphs also helps with scannability of your page.
Image of a mobile wireframe with larger elements showing the concept of visual hierarchy. Image credit Adobe Stock Photo.- Keep it simple: A simple mobile design is a great way to improve content clarity while helping users focus on content that matters most. Therefore, only keep elements that you really need on your mobile site in order to avoid superfluous content that may distract the user.
Some methods of keeping it simple include:
- Reducing the number of links in your navigation menu (as information architecture becomes extremely important).
- Using as few pages as possible.
- Two columns of content at most.
- Use typography that is not too small for mobile.
- Keep your borders wide and lines clean.
- Utilize white space to make the layout less cluttered and more readable.
Diagram of a straight line from point A to B compared with a curvy line from point A to B. Image credit Adobe Stock Photo.- Bold and consistent CTAs: Having a bright, bold, and consistent CTA helps ensure users are able to locate them with ease. Not doing so can lead to loss of valuable leads and decreased conversions. Therefore, make sure your CTAs are striking and impossible to miss.
- Consider your site’s loading speed: If users experience poor website performance, 79% of shoppers are less likely to buy from that website again. Therefore, the speed of your mobile site, including your splash screen, is extremely important. It should not take more than three seconds to fully load as users tend to leave if it does not load in that time. This is why stripping mobile-first elements of anything unnecessary works in your favor.
Methods to increase load speed include compressing your images so they lose weight while maintaining clarity. Utilizing “lazy loading” helps as website elements load separately and in sequence, opposed to all at once. Finally, switch to safe HTTPS protocol, which is faster, more secure, and can contribute to better SEO.
Image of a mobile phone with a page loaded titled “Page Speed Optimization.” Image credit Adobe Stock Photo.Mobile-first design process
Now that you understand the principles to keep in mind while designing, let’s dive into the mobile-first design process.
- Take inventory of your content: To begin with, get organized by creating a spreadsheet with all of the elements you wish to include in your design. Is it a booking page? Privacy page? A history of your company?
- Prioritize hierarchy of content: Here is where the visual hierarchy of content becomes important. Now that you have your content inventory list, prioritize the elements and determine how to display the most important elements predominantly. Make sure elements like CTAs and other touch points are larger than on desktop. Since fingers are much wider than a mouse cursor, larger touch targets are needed on mobile. Apple recommends at least a 44-pixel square for touch targets.
- Smallest breakpoints first: Design the mobile wireframe first, then use this as a base for larger breakpoints.
- Remove hovers: There is no hover control on mobile yet, so make sure to not rely on this type of interaction in your design.
- Remove large graphics: Large graphics such as landscape photos do not display well when viewed on mobile. There is not enough real estate to give large graphics justice, and it ends up hindering the user experience
- Test on a real device: It is best to step away from the desktop computer and actually try your product on a real mobile phone. As you tap through the pages, you will discover if it is easy to navigate and if it loads quickly, while remaining easy to read for the user. This will shed light into the usability of your design. You are also able to test with users in order to collect in-depth user feedback.
Wrapping up mobile first
Designing mobile-first is a great way to help in the success of your product and brand. Stripping away the elements to the core essentials is a great way to understand and focus on the fundamental user experience for your visitors. When designing mobile first, it makes it easier to progress your design to larger screens as you move onto tablet and desktop and it is no surprise that the majority of industry leaders focus on this design ideology.