Illustration by Bettina Reinemann
The way people browse the web today has changed drastically due to more and more people conducting searches on their phones. In fact, there are an estimated 3.8 billion smartphone users worldwide, which means optimizing your website for mobile usage is all the more important. But the question is, how do you optimize properly?
If you want to offer excellent mobile design to your visitors, this guide is for you. Learn about the concept of mobile web design tools and check out our list of tools and practical tips to help optimize your website for your users.
What is mobile web design?
Mobile web design is the process of optimizing web experience for mobile users. This process includes creating:
- Mobile-first design. Traditionally, websites have been optimized for desktop users, but as browsing habits have evolved, designers tend to follow a mobile-first approach in design. This means that the team starts with a mobile platform and optimizes content for the smallest possible screen, then switches to a larger screen size like a tablet or desktop.
- Responsive design. Responsive layout is a type of layout that changes based on the size of the user’s device. Generally, the more screen space the user has, the more content they see in each given moment.
- Search engine-friendly design. Even the most compelling content or features on your website are useless if visitors cannot find your website in search results. Google offers a tool called Mobile-Friendly Test that allows you to check if your website is optimized for mobile and thus more user friendly.
How to create a mobile website?
Typically, the process of creating a mobile website starts with user and market research. The product team collects information about the target audience (their needs and wants), analyzes it, and uses it to create a solution.
The process of creating a mobile UI starts with prototyping, which typically involves creating low-fidelity and high-fidelity prototypes. First, a product team creates a low-fidelity prototype to show the organization of information on individual pages. After that, they turn low-fidelity prototypes into high-fidelity ones by adding real content and imagery to validate the design with real users. As soon as a team has a validated high-fidelity prototype, they can turn it into a fully-fledged website using web frameworks like Bootstrap, Angular, React, or site builders like Squarespace, Wix, or Elementor.
What makes a good mobile site: 7 key principles
Good user experience is an integral part of product design, and websites are no exception. In this section, you will learn the top 7 principles to help you craft an excellent mobile design:
1. Create a solid hierarchy of information
Mobile users are very goal oriented. When they visit a website, they expect to find what they need as quickly as possible. People rarely read web pages word by word, but instead, they scan the page. That’s why good scannability is an essential property of mobile website design. It should be easy for visitors to find the information they’re looking for on your site, quickly.
Here are a few things to remember when designing your website:
- Be selective about the information you want to display. Provide only information that users need to complete their task.
- Keep important information and key call-to-action buttons front and center. Ideally, users should find what they are looking for right when they land on your homepage.
- Visually separate navigation from content. Website navigation design should help users spot the menu. Use whitespace to visually separate content and navigation options.
Let’s take the CNN mobile website as an example. When you arrive at CNN’s mobile website, the first thing you’ll notice is a section with featured news. This information is displayed “above the fold” (the part of the webpage that you can see without scrolling down) so that the users don’t need to scroll down to find the latest updates.
CNN website homepage with featured stories. Image credit CNN.But if you’re interested in a particular category (say, Sports), you can click the menu icon in the top right-hand corner of the page and see the list of categories. Note that the menu is relatively short but provides all the necessary information.
Top-level news categories on the CNN website. Image credit CNN.2. Use simple page layouts
User attention is a precious resource and should be allocated accordingly. When you design mobile layouts, you need to prioritize simplicity because simple layouts work better on small screens. Here is how to achieve this goal:
- Stick to one-column layouts. When you optimize web design for desktops, you usually rely on a multicolumn web design grid to structure the information. But when it comes to mobile, it’s much better to stick with a one-column layout because multiple columns can introduce more noise and make it harder for users to comprehend information.
- Don’t use a horizontal scroll. Horizontal scrolls not only create poor UX (because it’s just not intuitive to scroll horizontally), but it also fails the Google Mobile-Friendly Test.
- Declutter the layout. Mobile users should not be overwhelmed with a lot of information at once as it can be confusing and make it difficult to find what they need. Follow the minimalist approach to create clean layouts—use succinct copy and get rid of purely decorative elements so that your users can enjoy a clean and highly-focused mobile experience. Remember that every text or image you use should bring value to your visitors. Check out this collection of UI kits to find a proper layout for your next web project.
3. Make text readable and use large touch targets
Readability, or the ease with which a reader can understand a written text, is an essential property of web page design because so much of the information being communicated is via text, or copy. Here are properties to consider when designing with good readability in mind:
Small touch targets are another problem for mobile users. On mobile devices, users tap items on the screen with their fingers, yet smaller touch targets can increase the chances of users hitting the wrong objects. Large finger-friendly buttons will make the interaction with your website more comfortable for end users. The recommended target size for touchscreen objects is 7-10mm.
4. Minimize user effort for data input
Filling out forms is not the most exciting part of the web experience, but it’s crucial to design efficient forms so that your visitors don’t have to spend so much time inputting data. Here are a few things to consider when designing forms:
- Ask for the bare minimum information. By asking only for essential information, you minimize user effort when filling out forms.
- Offer autofill for fields like shipping or billing addresses. You can autofill users’ addresses based on their GEO location.
- Use inline validation to validate user input in real time. The users will see that they incorrectly added information as soon as they type it, not when they tap the “Submit” button.
5. Design for optimized page speed
Users care about speed in interaction design. The longer it takes the site to load content, the higher the chance that users will abandon it. Thus, it’s recommended to measure performance and remove any objects that increase load time. High-resolution images, videos, and fancy animations can all affect page load time. For practical tips on optimizing your web performance, read the Front-End Performance Checklist 2021.
6. Visual and functional consistency between mobile and desktop
Many digital products are available as both mobile apps and websites. If your product operates on both, you need to make the mobile user interface of the app and the website consistent. Ideally, the mobile web experience should be indistinguishable from your mobile app because it will allow users to switch between the app and the website freely.
One good example of such a product is Google Maps. Below are screenshots of the Google Maps website and mobile app. You’ll notice that they look exactly the same.
The Google Maps website (top) and mobile app (bottom) look almost identical. Image credit Google.7. Allow users to finish their journey on another device
It’s very common for visitors to start a task on mobile but finish it on desktop. One example is purchasing a product from an eCommerce store. Visitors like browsing on mobile, but when it comes to filling out forms, they want to switch to desktop because it’s more convenient. Offer “Share” features so that visitors can email themselves links.
Always validate your design with your users
The principles mentioned above will help you create a great mobile web design, but it’s important to validate your design with real users. Even the most well-researched design ultimately contains some unforeseen flaws when you put it out into the real world. Testing will help you find the flaws early on in your design process, fix them, and end up with a stellar user experience.