The importance of website design for mobile applications
Today, almost 50% of users access the web from mobile devices. What does this mean for you as a business and web designers? It means that we must consider mobile website design issues and have a mobile strategy for every website we design.
Here are some key guidelines to follow as it’s essential to optimise your website for the various mobile screen sizes and resolutions.
- Aim for a single-column layout. A single-column layout usually works best on mobile screens because it scales well between different device resolutions and between “portrait” and “landscape” mode.
- Use the “Priority+” pattern to prioritize navigation across breakpoints. Priority+ describes navigation that exposes the most important elements and hides away less important items behind a “more” button. This type of navigation uses the available screen space; as space increases, the number of exposed navigation options increases as well, which leads to better visibility and more engagement.
This pattern is especially good for content-heavy websites with a lot of different sections and pages, such as a news website or a large retailer’s e-commerce store.
Size images appropriately for displays and platforms.
- To simplify this task, you can use tools like the Responsive Image Breakpoints Generator to generate breakpoints for images interactively.
- A website must adapt to look perfect on all of the different devices and in all of the various resolutions. Creating great-looking images on the web is one of the main challenges web designers face when building responsive websites. See the image on the right for example of responsive image breakpoints
From clickable to finger taps
On the mobile devices web, finger taps (not mouse clicks) create interactions. This means that different rules apply when you’re designing touch targets and interactions.
- Properly sized touch targets. All interactive elements (such as buttons, links and menus) should be suitable for tapping and slightly larger. Refer to the iPhone Human Interface Guidelines to choose a proper size for your buttons. The study found that 44×44 pixels is a good minimum touch target size. This rule works for both designing websites and apps.
- Stronger visual signifiers of interactivity. On mobile, there is no hover state to provide additional visual feedback to your user. Therefore, use visual design decisions that allow users to correctly predict how an interface element will behave just by looking at it. With buttons, for example, consider using a square shape with a subtle shadow.
Another essential website design guideline is accessibility. Regardless of a person’s abilities, the information on a website must be accessible to everyone. Therefore an integral part of product design should be designing websites for users with impairments .
Users with poor eyesight
A lot of websites use low contrast for text copy. While grey text on a white background or white text on a pastel may look cool, it is also virtually illegible and inaccessible. For users with low vision and those who struggle with contrast sensitivity, low contrast is especially problematic
On a desktop low-contrast text is hard to read, but it becomes even more difficult on mobile. If you have perfect eye sight you may have experienced the difficulty trying to read low-contrast text on a mobile device while walking in bright sunlight. Imagine the difficulties if you have poor eyesight.
Sufficient contrast between the text and the background is the most important characteristic for website readability. To ensure that text is readable by people with visual impairments, the W3C’s Web Content Accessibility Guidelines (WCAG) includes a contrast-ratio recommendation. The following contrast ratios for body text and image text are recommended by W3C:
- Small text should have a contrast ratio of at least 4.5:1 against its background. A ratio of 7:1 is preferable.
- Large text (at 14-point bold and 18-point regular and up) should have a contrast ratio of at least 3:1 against its background.
- A great tool to quickly find out whether you’re within the optimal range is WebAIM’s Colour Contrast Checker
Colour blind and low-vision users
Colour blindness definition
The following information is provided by the Colour Blind Awareness Organisation. Colour blindness (Colour Vision Deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. In Britain this means that there are approximately 3 million colour blind people (about 4.5% of the entire population), most of whom are male.
Worldwide, there are approximately 300 million people with colour blindness, almost the same number of people as the entire population of the USA!
To make design accessible for these users, avoid using colour alone to convey meaning. As the W3C states, colour shouldn’t be used “as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
A common example of using colour to convey meaning is in forms. Green and red, respectively are often used to illustrate success and error messages. For people with colour-vision deficiency red and green are the two most difficult colours to distinguish. To see an example of colour vision deficiency look at these examples.
On forms you have possibly seen error messages that have explanatory text e.g. “The fields marked in red are required.” This error message can be extremely frustrating for people with a colour-vision deficiency. Designers as an alternative should use other colours to highlight or complement what is already visible.
A significant part of the web experience for both people who can see and for blind users are images and illustrations.
To interpret websites, blind people use assistive technologies, such as screen readers. Screen readers “read” images using the alternative text attributed to the image. So if that text is not present or is not descriptive enough, they won’t be able to get the information as intended. For example if you have an image labelled “img1234” as opposed to “couple on beach enjoying the sunshine” they wont get the experience of a sighted person.
Follow these guidelines, when creating text alternatives for images,
- All “meaningful” images require descriptive alternative text. (A “meaningful” photo adds context to the information on the page.)
- A text alternative isn’t needed if an image is purely decorative and provides no useful information to the user.
- Outside of visibility issues adding alt text to images will act as an aid to search engine optimisation
Rather than a mouse, certain users, such as those with motor impairments, navigate the internet using their keyboard. To cater to this group, it’s important to enable keyboard-based navigation.
When an item is tabbed to, it has keyboard “focus” and can be activated or manipulated with the keyboard. A sighted keyboard user must be provided with a visual indicator of the element that currently has keyboard focus. Focus indicators are provided automatically by web browsers.
For keyboard navigation here are some basic rules:
- Check that keyboard focus is visible and obvious. Some web designers remove the keyboard focus indicator because they think it’s an eyesore. This decision hinders keyboard users from properly interacting with the website.
- All interactive elements should be accessible. Keyboard users must be able to access all interactive elements, not just the main navigation options or primary calls to action.
Testing – Test Early & Test Often
“Test early and test often” is a good rule of thumb to establish that it will work for your users. Gather feedback early on in the design process and iterate throughout.
Test page loading time
Visitors to websites hate slow-loading web pages. Website response time is a critical factor for modern websites. In summary there are three response-time limits: according to Nielsen Norman Group (NN/g).
- 0.1 second. This feels instant for users.
- 1 second. The user will sense a slight delay.
- 10 seconds. Users may leave the website immediately.
Even a few seconds of delay can make accessing a website an experience unpleasant.
Issues that can cause slow website loading time
- Elements such as embedded video and slideshow widgets that are considered heavy content objects
- Unoptimized website technical back-end code – covered in this article
- Slow broadband or hardware-related issues (infrastructure that doesn’t allow for fast operations).
Tools like GT metrix will help you find any issues that are causing slow website speed times.
Mobile Website Design Issues
If you would like to know more about Mobile Website Design Issues contact Andrew Goode MBA, MSc, FCIM Click here to arrange a call
Other articles linked with marketing metrics that may provide additional insight. Marketing metrics and analytics, marketing ROI Planning , marketing revenue analytics and Marketing Measurement Metrics