When designing a website, what’s the difference between desktop and mobile UX? Is it just about screen size?
User experience (UX) consultant Steve Krug offers expert insights on optimizing websites for mobile devices, focusing on core functions and efficient navigation. His advice helps create mobile-friendly sites that are both functional and user-friendly.
Keep reading to discover essential tips for crafting a mobile website that users will love.
How to Design UX for Mobile
In Don’t Make Me Think, Revisited, Krug discusses how to design a website for mobile. UX principles are the same for both desktop and mobile, but the mobile format presents some unique considerations.
Difference #1: A Much Smaller Screen
Krug contends that one of the primary challenges of designing for mobile is the limited screen size: Designers must find a way to keep their website fully functional when far fewer elements can fit on the screen at any given time. To do this, identify your website’s core functions that users need frequently, and make them quickly accessible from your mobile home page.
Other helpful functions may need to be pushed further away from your home page than they normally are. With a mobile-size screen, this is unavoidable. This isn’t an issue, as long as the path to these functions is clear. Contrary to popular belief, Krug contends that users don’t mind spending a little time tapping (or clicking) through multiple pages—as long as each new page makes it clear that they’re getting closer to their goal.
For example, on a restaurant’s mobile website, the home page might prominently feature a button to “Order Takeout” and a search bar to find menu items, as these are likely the two most common tasks for mobile users. Other less essential functions like reservations or catering could be buried deeper in the site structure. However, a user making a reservation won’t be frustrated if they have to click “See More,” then “Dine In” and “Make a Reservation,” since each link is getting increasingly specific to their situation.
(Shortform note: The number of pages users are willing to navigate through in search of their goal depends on a wide variety of factors. For instance, if users are more familiar with your brand or the topic of your website, they’ll click through more pages because they’re more confident that they’ll quickly find what they’re looking for. By this logic, if your website’s content will be unfamiliar to many of your users—say, if your site breaks down the rules to a complex board game you invented—you may need to structure your site in a way that requires fewer clicks.)
| How to Create Mobile Websites Users Can Find Optimizing your website for mobile devices is more important than ever before. In 2023, Google finished transitioning to mobile-first indexing for almost all sites. This means that Google primarily judges the mobile version of websites to determine whether your site will appear after someone does a Google search. Google made this transition because mobile devices have become the most common way that people access the web. Because of this, creating the best possible mobile experience for users is necessary to drive traffic to your site. To ensure that your site works on smaller screen sizes, Krug recommends making its core functions quickly accessible from your mobile home page. But be careful: In following this advice, you might redesign your desktop site for mobile devices by removing some less important features from your home page. If doing so causes the mobile and desktop versions of your website to be significantly different, Google will penalize your site by making it less prominent in searches. Instead, Google recommends retaining all the same desktop content on your mobile site and hiding it with tools like accordions—headers you can click on to reveal more content—to retain a minimalist user experience. |
Difference #2: Slower Load Times
According to Krug, designers for mobile also have to contend with the fact that mobile devices generally have slower load times, as they typically download your site from a mobile network rather than Wi-Fi. If your website is too slow on mobile, users may get annoyed and leave. Be careful not to overload your mobile site with unnecessary code or oversized images that hamper users’ ability to quickly get what they want from your site.
(Shortform note: To minimize the downsides of slow mobile load times, strategically design your pages to load the most important content (such as headings, text, and important images) first. This way, users can digest content on your new page while waiting for large interactive or decorative elements to load, creating a more seamless navigation experience.)
