After building numerous mobile-friendly and responsive websites I’ve accumulated the following set of design guidelines that produce better usability for mobile users. By the end of this article, you should be better equipped to create or judge mobile web designs and help build a more usable web.
Prioritize Content Elements
This is one of the most important concepts for better mobile designs. On mobile you’re working with a small screen size that has a limited viewing space, where an interface can easily get cluttered and the most important elements lost. Prioritizing the content elements and utilizing effective design principles makes a website design usable on small screen devices. This helps users stay focused on the content and increases the likelihood that they will engage with your business.
Finger Sized Clickable Objects
Anything a user can click on shouldn’t be difficult to tap with your finger. If you can’t quickly tap the target on the first try, then it needs to be bigger. For buttons and form fields, a good minimum width and height is at least 40 pixels. As far as text links, the key to ease of use for users is to have a large enough font size and line-height that keeps them from misclicking on other elements.
Font Size Relative Layouts
A website’s interface and layout should be relative to the font size. That way when a browser forces a certain font size the interface doesn’t break and become unusable. Having your site built this way is particularly necessary in regards to mobile browsers, because they enforce different minimum font sizes.
Touch Devices Can’t Do Hover
Many sites use hover functionality for dropdown menus. This functionality doesn’t work for touch devices and completely breaks the usability of your site. Anything on your site that requires the ability to hover should be replaced or an alternative user experiences created for touch users. This quickly becomes a complex issue with many solutions, and no perfect answers. It’s up to the client and web designer to collaborate and find a way to proceed.
Keep Fixed Elements Small or Remove Them
Parts of the page that appear to stick to the side of the browser window can be an effective way to keep important navigation or content always visible. However, on mobile with the window size being so small, you have to be cautious about further reducing the users’ viewing space. There’s no exact rule here, but my suggestion is to examine the need for this functionality and whether that sticky element is too large. If so, ask could it be reduced in size.
Scroll One Direction
This one applies to websites in general, not just mobile and it doesn’t always apply to every situation. Sometimes a web application or website has advanced functionality where it requires scrolling sideways and up-down. However, most the of time, this isn’t necessary and only makes your website frustrating for users to navigate. So as a rule of thumb, don’t have a site that scrolls in both directions.
Long Pages Need Content Navigation
If the website takes more than a second or two to scroll through to the bottom, consider adding content navigation and/or a back-to-top link that makes the content easier to navigate. These allow the user to move through the page without manually scrolling and scanning for what they are looking for.
Multi-Device Favicons
To create a completely branded website you can’t forget to create a favicon. That’s the small, square image in the browser tab, to left of the page title. There’s also the Apple Touch icon if you want to support Apple devices. Optimally these would be a redesigned version of your logo for a smaller viewing size. Or it could be another element of your brand that’s recognizable at small sizes.
Mobile Supported Links
Most phones like the iPhone and Android devices, support having telephone and SMS links in a webpage. So instead making your phone number plain text, make sure you make it a link with the correct formatting, which will allow people to give you a call or send you a message with a single tap of their finger.
By Jacob Williams