Let’s face it: we’re getting lazy. We’d rather grab our smartphones out of our pockets than turn on our computers, sit down, and actually use a mouse. It requires too much effort and takes up way too much time – and that is one thing we don’t have these days. That’s right, mobile phone usage is going up. And with that, so is Internet traffic coming from mobile devices, not to mention the recent “mobile-first indexing” revolution by Google, making it more necessary than ever to design for mobile. That’s why web designers (or anyone looking to create a website, for that matter) need to up their game. Even if your website is responsive, there are certain aspects that are still crucial to look out for. Here’s a guide of best practices to ensure a mobile-friendly website across all devices, from alternative navigation options to creating a hierarchy and unique ways of using mobile features to your benefit:
1. Minimize text and images
This is just like downsizing from a mansion to a cute little bungalow. As heartbreaking as it may feel, when designing for mobile, you simply can’t include all of the content you included on a desktop. How you can provide your user with everything they need, using minimal clutter? Consider rewording phrases to make them shorter, re-curating your images, and only exposing certain elements at the click of a button. Even go as far as removing large pieces of text. The same goes for forms – separate sections into bite-sized chunks to make them lighter and more appealing. If you’re not sure which elements to keep, try analyzing your users’ behavior with tools like Google Analytics and HubSpot, then adapt accordingly. Although we’re not asking you to become a full-out minimalist, we do recommend this lifestyle when it comes to designing the mobile version of your website. See how design studio, Studio Fables, have adapted the desktop version of their site to mobile, by eliminating certain elements and having the ‘info’ text only pop up when the button is clicked:
Studio Fables‘ website on mobile and desktop
2. Say goodbye to your navigation bar
We’re feeling pretty cut-throat, so we’re going to use the same attitude here: drop your navigation bar. Just drop it. It takes up too much space and there are much better options on mobile. The most popular is the beloved “hamburger” menu, that takes up just a tiny bit of real estate on the top corner of the screen. When clicked, it can either pop up on the whole screen or just on one side, offering big, easy-to-ready, and easy-to-click menu options. Of course, the icon doesn’t necessarily have to be the usual three-line symbol – you can go for the word “menu” or anything else that clearly indicates “click me”. Designer Sebastian Haslauer has done just that. By removing the menu for the mobile version, and leaving just a button in its place, site visitors can focus on the visuals:
Sebastian Haslauer‘s website on mobile and desktop
3. Utilize accordions
Or in other words, collapsible headers (just to clarify that we’re not about to take you on a virtual tour to a Folk music gig). This technique is great for pages that are rich in text. Accordions show up as headers that only reveal the most important details of a piece of text, and expose the full paragraph below when clicked. You can make it extra clear that interaction is required, by indicating expansion with an icon of an arrow or a plus sign, for example. This not only prevents the page from being too long, it also enables users to easily skim the text, without being bombarded with information. With everyone having less and less time on their hands these days, this method is especially useful.
4. Prioritize your content
Something else to take into account in mobile web design is short attention spans. As much as your users may enjoy aimless scrolling, they usually come to your website with specific intent. That’s why, once you’ve decided which bits of content are the most important, prioritize them. Save your users some finger stretching and leave the most crucial elements at the top. Make everything as easy and accessible for them as possible. For example, if your website has an option to search, place the search bar at the top of the page. If you’re selling products online, consider displaying the ones that are on sale at the top. When creating a hierarchy and reordering your content, think about the aesthetics, as well as what makes logical sense. Put yourself in your users’ shoes: what content are they looking for?
5. Bring attention to the most important elements
At this point, you’ll probably know what the most important parts of your website are. But clearly, you can’t put everything at the top of the page. So, how can you use composition and other design aspects to bring attention to these crucial elements? Firstly, make use of white space, placing whatever you want to bring attention to in the least busy areas. This will also allow your layout to breathe and will help distinguish between elements. If everything is too close together, the user interface will be confusing and will lack hierarchy. Secondly, just like in any form of web design, stick to a cohesive color palette. This is especially important when it comes to designing for such small screens. You can choose a specific shade to function as your accent color, using it for CTAs, arrows and other small, but crucial elements. Lastly, highlight important text in bold, or in a separate color that stands out from the rest.
6. Keep important elements within reach
Luckily for us, we all use our smartphones so often that we’re definitely familiar with the hand movements involved, and what the comfortable range of motion is. When designing for mobile, be nice to your user and give them the possibility of easily reaching the most important elements of the screen with their thumb. After all, the humble thumb is the star of the show when it comes to smartphone use. Take a look at how different people hold and use their devices. The most accessible area is the center of the screen. It’s the area that we can tap with the highest level of accuracy, whereas the outer edges are the least accessible. Place your content accordingly, by having the primary functions in the center.
7. Make buttons and CTAs easily clickable
Making your website mobile-friendly actually means making it user-friendly. This means that when designing buttons, you want to be as nice as possible to your users to ensure they don’t get frustrated. Your buttons and CTAs should stand out, as well as being easy to click accurately. Generally, any clickable area should be a minimum of 30 to 40 pixels in height and 40 to 80 pixels wide. You can of course break the rules, but take note that having to zoom in to click a button is not an ideal scenario. Try placing your button in a clean area without too much clutter around it, so that it can be spotted quickly. The same goes if you have multiple buttons next to each other. Make sure to leave enough space in between them (white space never did anyone any harm). Go for colors that clearly distinguish the button from the background to grab users’ attention. Keep text on the buttons short, minimal and explanatory. The buttons on the mobile version of Heartbeat Agency’s website are big and clear, placed in strategic places that grab the viewers’ attention:
Heartbeat Agency‘s website on mobile and desktop
8. Give feedback when buttons are clicked
Just like in any healthy relationship, it’s important to give your loved ones (or your users) feedback. You want them to know that if they’ve pushed your buttons, you’re processing it and will respond shortly, even if the loading time takes a while. Or in other words, when a button is clicked, make it obvious. You can add a little “loading” animation, or change the appearance of the button slightly, by inverting the colors, making it bold, or anything else that will signify that it’s been clicked. After all, you don’t want your users to get frustrated with the waiting time, and risk losing their attention completely.
9. Use mobile-friendly typography
Just like any other aspect of your design, you can’t simply transfer the text from desktop to mobile, without making any changes. The fonts you use on desktop might not work well on the tiny screens of smartphones, so make sure you go for one that is legible and still on-brand. Also consider the size of the text. It depends on the specific content, but generally a body of text should have maximum 75 characters per line, and if you don’t want your users to get a headache, shouldn’t be smaller than 16 pixels. The leading (the space between the lines) will also be different than on desktop – you may want to reduce the spacing on mobile to save space, without making it too crowded.
10. Optimize file sizes
Like a few other aspects in mobile design, this technicality also comes down to your site visitors’ patience levels. These days, nobody has time to spare, waiting around for a website to load. This is especially true when it comes to mobile. People want things to happen instantly. That’s why you should optimize your images by using SVG files. Not only are they smaller, so will speed up your users’ browsing experience, but they’ll also look sharp at any size. If you slightly reduce the resolution and quality of your images (but be careful, please), you’ll be able to minimize your file sizes just a little more. If you’re hesitant about doing this, you can try the Wix Pro Gallery, as it automatically renders images in the optimal version for the web, reaching the fine balance between quality and performance. For a smooth user experience, you may even want to remove videos, as they can be very heavy and waiting for them to upload can be frustrating.
11. Take advantage of mobile features
One of the beauties of designing for mobile is that smartphones offer certain features that desktops do not. So use them. For example, any contact details (email, phone number or address) can be made clickable, taking your user straight to a navigation app or phone call. You can also add clickable social media icons that connect straight to their apps. Place these elements strategically, with the aim of enabling your site visitors to get done whatever they want with as little clicks as possible. If the phone number is important, make it stand out near the top of the screen. Another benefit of mobiles is that thanks to their size and portability, they can be moved around and tilted. Industrial design office, Visibility, have used this to their advantage, as the tilting of the screen moves the visuals accordingly, enabling you to navigate the homepage in a unique way.
Visibility‘s website on mobile and desktop
12. Remove pop-ups
Apart from the fact that they can be frustrating and get in the way of allowing your users to reach their desired content, Google has recently started penalizing pages with pop-ups. So, if you don’t want to live in fear of Google reducing your search ranking (and want a smooth mobile user experience), what’s the solution? Remove pop-ups. That’s right, it’s as simple as that.
