5 Overlooked Mobile-first Design Best Practices
Codesquad’s web development experts list 5 mobile-first website design best practices that get commonly overlooked. These practices will help you enhance user experience and ranking in SERPs.
Best Practices for Mobile-first Websites
1. Optimise Images
An optimised image can reduce the load time, improving both user experience and SERP ranking. The two main properties that impact file size are resolution and quality. Resolution or size of the image should be adjusted according to the column you are using to place it. Ensure that the image resolution is neither too large nor too small. If the quality setting is turned down, it will reduce the sharpness of your images. Ensure that you optimise the image size before uploading.
2. Optimise Forms
Nobody likes to fill in endless forms, especially on a mobile screen. You can try a few options to make filling forms a lesser burden on your site.
- Reduce the number of fields
Try to keep as fewer fields as possible. While that may not be possible always, you can use certain shortcuts. Use one field for full name instead of first name and last name. The zip code gives the location, so you don’t need to ask the state.
- Use Auto-suggest
This is helpful for selecting areas, products and more. For example, let’s say the customer needs to select Belmont. There should be an auto-suggest happening when Bel is typed into the field.
3. Link Addresses and Phone Numbers
4. Remove Navbar
With limited viewing space on mobile, the navbar ends up consuming a lot of valuable space. A hamburger menu is a great way to use the menu and save some space for text, images, or other content. You need to ensure that the hamburger menu has good visibility and easily clickable.
5. Use Accordions for Long Content
Long columns of content can be confusing on a desktop. On a mobile screen, it makes it much worse. The best way to solve this by using collapsible sections called accordions. Using accordions can help to organise content more easily on a mobile-first site. It makes navigating on a mobile screen much easier. The user can easily scan the content and go straight to the section they want.
NavBar – An area on a webpage that includes navigation components like links, buttons, etc. for getting to other pages of the website.
Optimising – Any process that modifies how a campaign is delivering, enhancing its performance. This includes improving any metric such as CTR, CPC, Page Load Speed, Conversion Rate etc.
Hamburger menu – A button with 3 lines, shaped like a hamburger. Clicking on it shows the expanded menu.