Mobile Web Design Best Practices for a Mobile First World
Over the last decade, mobile phones have become an essential part of our lives. It is very uncommon to find someone who doesn’t own a mobile phone or even smartphone at that. This increase in the use of smartphones means that there is an increase in website traffic from mobile phones as the internet has evolved away from just desktop, in 2018 alone 52.2% of all global web traffic was via mobile phones. This increase in traffic from mobile devices makes it important to implement a mobile first design. Due to this design being highly requested it is beneficial to implement this design, as Google’s ranking now looks at the mobile version of a website in order to rank it before a desktop version.
Web Page Size
Page weight otherwise known as page size or page bloat refers to the overall size of a web page, including all files that are used to create that page. These can include HTML documents, images, videos, scripts, style sheets and other forms of media. When reducing the weight of your page we recommend to:
Keep your site lean – Less is more. If you’re no longer using a plugin, theme, webfont, script or other resources on your site, remove it. If you think you might need to later, you should still remove it – you can always add it back later. Make sure to regularly monitor and review the resources on your website so you’re only using what you absolutely need and nothing more.
Optimize images – Images are files that take the longest to load on a web page however they are the simplest to optimize. Before deciding if you need to optimize your images you should begin by taking time to review your images and remove any that you aren’t using or don’t need. Then compress the images you wish to keep with an image optimization tool which will remove unnecessary file information and help your image to load faster.
Reduce unnecessary web fonts – When deciding on a web font attempt to use only two at a maximum one for a heading and one for paragraph text. Along with using a limited number of fonts using typography is a good modern web design. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. However, it comes at a performance cost as each font you use is an additional resource the visitor must download when visiting your site, sometimes increasing the web page size.
Leverage browser cache – To leverage your browsers caching generally means that you can specify how long web browsers should keep images, CSS and JavaScript stored locally. By leveraging the browser cache you are ensuring that the user’s browser will download less data while navigating through your pages, improving the loading speed of your website. If the user’s browser can cache static files, they won’t necessarily need to download them again the next time they visit your site.
Use a content delivery network – By using a content delivery network (CDN) you can speed up how quickly your pages load for a user who are located a longer distance away from where your server is situated. Every time a website aims to reach a wide international audience, their distance from the origin server is one of the critical factors of web performance. So, if your server is in Edinburgh, but your readers are from Canada, Germany, or Italy, you can decrease the distance and allow all of them to benefit from your content at a similar speed through a CDN.
Scalable and Responsive Design Elements
With the increase of mobile phone usage there are more and more people relying on mobile browsing opposed to sitting down at their desktop or laptop computer. This means that mobile users can no longer be ignored and having a responsive design to your website can go a long way in helping you get more traffic to your website. To improve on your responsive design, we recommend trying out some of the following:
Minimise and Mobilise – When working with a mobile it doesn’t always offer the most space to work with when it comes down to the content you are looking to display. Due to this lack of space you are going need to remove some items from your website that may be existing on your desktop version. The best way to counter this would be to think of your mobile website as a new standalone site. This can mean entirely rewording or deleting chunks of the pages content for the mobile version catering for the mobile experience.
Standardise Clickable Areas/Buttons – On mobile device you use your finger to interact with the website whether that is by pressing a button or clicking on a link. Due to this you must take into consideration that buttons and links need to be large interactive areas to accommodate for the lack of a precise mouse clicks that you would have on a desktop. By enlarging a clickable on a mobile device by at least 45 pixels you will help ensure that there are fewer errors in navigation throughout your website, keeping the viewer engaged and less frustrated.
Responsive Imagery – Due to different device being different resolutions you need to accommodate these resolutions by using two different versions of the same image for mobile and desktop. For example, and image for a desktop may be 1200px however the image on the mobile may only be 400px. Due to this you need to imagine how the image will look on mobile devices ensuring that no key parts of the image is missing.
Typography
When designing a website do you feel overwhelmed by the 100,000 different styles of fonts or the 16.8 million different kinds of colours that are present on the web. By learning the best practices for Typography, you will then have a website that has clear communication along with it being a comfortable reading experience as your site will be readable and appealing when displayed.
Select a font – Every sentence that you read on your screen will use a font defining the visual appearance of your website. Here is a list of the 20 Best Google Web Fonts.
https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html
Modify the font size – When using a tiny font, the reader will almost certainly give up reading the information that is detailed on your site. By increasing the font size, you ensure that it is readable, making the reader engaged and ensuring that the reader will finish reading the text that is displayed on your website. We recommend a font size between 15-25px as larger fonts evoke stronger feelings and convey meaning.
Scale headings – Headings serve as signposts for readers so that they can quickly digest the overall structure of your articles and the kind of information that is going to be in the article itself. Having the primary heading a larger size than the paragraph allows for a distinction between the two. We recommend having the heading 180-200% of the body text and any secondary headings being 130-150% of the body text.
Set line spacing – Line spacing is the space between each line in a paragraph. Applying the correct line spacing is important because it gives multiple lines of text optimum legibility. Some people may need more space between lines to be able to read text meaning getting the correct line spacing is important.
Add tracking and kerning to make text look roomy –
Kerning is the adjustment of space between pairs of letters allowing you to add or subtract spaces between letters to create visually appealing and readable text. Headlines usually benefit from kerning, and text in all caps usually always required kerning for best appearance.
Tracking differs from kerning in that tracking is the adjustment of space for groups of letters and entire blocks of text. Tracking is used to change the entire overall appearance and readability of the text, making it more open and airier or denser.
Add white space between headers and body text – As white space removes potential distractions and helps the reader concentrate on the text in front of them, it also helps them remember and get a better understanding of the content. One study found that people who read text with margins found it easier to read and understand what they were reading.
Use a line length of 45-90 characters – Finally another good practice is to reduce the width of a text block. The optimal length of a line for a single column page is 45-90 characters. By using more than 90 characters per line your readers may feel overwhelmed by the amount of characters making them abandon the text. At the beginning of a new line your attention is focused with you slowly losing interest as you read down the lines.
Navigation
Navigation is very important in a website as the more understandable and convenient your navigation is on your website then the more likely people are going to use your website. Navigation on a website can range from the websites menu to scrolls, lists and drop down menus. For website navigation best practices here are some tips and ideas that we recommend.
Be descriptive – Descriptive labels in your navigation are good for visitors as your navigation bar is visually prominent meaning that it is the first thing seen on your website. If your menu lists the main products or services, it makes it obvious to the visitor that they are on the correct website.
Limit number of menu items – Having fewer items in your navigation are good for search engines with your homepage having the most authority with search engines more sites link to your homepage than to your interior pages. The more concise your navigation, the more authority will flow to each interior page, making your interior pages more likely to rank.
Limit drop down menus – Usability studies show that the drop down menus are annoying since a user’s eyes move faster than their mouse. This mean that upon seeing the navigation bar the user may have already chosen to select a menu option. However, when the go to click the menu option a drop-down bar appears, and they may miss the other options that the drop down menu presents.
UI elements (Buttons, Forms and CTA’s)
Your company only benefits from websites when the user is successful in using them and that success comes from a design that is intuitive and anticipates the user’s needs. Investing in a good UX can bring a greater return as a well-designed website can bring previous visitors along with new visitors who will find your website user friendly and easy to navigate. Once you know about your user, make sure to consider the following when designing your interface:
Keep interface simple – The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging.
Strategically use colour and texture – You can direct attention toward or redirect attention away from items using colour, light, contrast, and texture to your advantage.
Be purposeful in page layout – Consider the structural relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability.
Responsive Imagery
When planning on creating a website for a mobile you need to take into consideration about how an image on a desktop will look on a mobile device. Now if the image is not re-scalable then the image may be extremely large and cover the whole page of the website. To counter this you can either user more than one image for both the desktop and the mobile or you can use Scalable Vector Graphics (SVG’s).
Using Scalable Vector Graphics (SVGs) – Scalable Vector Graphics are a must for any responsive design that is utilising illustrations like icons. SVG’s allow you to rest easy knowing that any icon or graphic will remain ultra-sharp across all experiences without having to worry about your resolution again. This results in a constantly polished look no matter how the site is being viewed.
Examples of great mobile web design
Kiltpin
Kiltpin makes sure that any images of their products are as large as possible on smaller screens so you can see exactly how each kilt looks. Their body font is easy to read along with them keeping their paragraphs short to ensure that they are not overwhelming you with too much text.
Kingdom Firewood
Kingdom Firewood does an excellent job listing their products without excessive, cluttering details allowing you to browse with ease, but still allowing you to click on a product to see more details. Their mobile menu isn’t on display until the user clicks on the expand icon in the top left. This keeps the website minimal and clean when it comes to navigating the site allowing you to see more products.
