Mobile Web Design – 10 Essential Tips

Mobile Web Design

Mobile web design is now the number one priority when it comes to the construction of your website. Why? Google adopt a mobile first approach to indexing websites. This means that when Google scans your website, it looks at your mobile website first. A website that doesn’t meet Google’s mobile site standards will be penalised, and their ranking in Google search will suffer.

Is your Website Mobile Friendly?

Before discussing how you can improve your mobile web design for portable devices, lets look a some tools you can use to see if your current website is mobile friendly:

• Googles’s very own Mobile Friendly Test is the easiest way to check whether your site is suitable for mobile devices
• To see how well your mobile website performs you can also use Google’s compare your mobile site speed tool

Responsive Web Design

If your website isn’t mobile friendly, you need to consider getting your website re-designed to be responsive when viewed on different devices. A website featuring a responsive design will change depending on the device it is viewed on, enabling it to provide an improved user experience across all mobile, tablet and desktop devices.

Secondary Mobile Web Design

If Google does consider your website to be mobile friendly, there are still things you must do to improve your mobile web design for portable devices. Even if your current website is responsive, it is likely it has been designed using a desktop computer. Therefore, the website is predominantly designed for the desktop screen, making the mobile website experience secondary. In most instances your website is mobile friendly, not mobile first.

Improving Your Mobile Web Design

There are a number of really simple things you can do to improve your mobile web design and boost the overall website experience

1. Take Inspiration
   When approaching the design of your mobile website, focus on how you would navigate it using a mobile device. Take design inspiration from other mobile website experiences you have enjoyed.
2. Use Eye Catching Images
   Where possible use images and buttons instead of text. These will stand out more on smaller screens, and help draw visitors to the the most valuable information.
3. Use a Maximum of Two Columns
   Avoid using more than two columns for your mobile website design, any more will complicate the overall website design, and is likely to make your content look messy.
4. Reduce Page Sizes for Mobile Devices
   When planning your mobile web design, don’t force website visitors to endlessly scroll your website. Your desktop website may fit the screen perfectly, but the mobile version may be more scroll intensive to accommodate all of your content. Where possible make non-essential elements of your page not visible on mobile devices to reduce scrolling.
5. Remove Footers
   Footers look smart on you desktop website, but can make your mobile site look overly bloated. Removing footers for the mobile web design can enhance the user experience and enquiries by showing them what is important.
6. Utilise the Benefits of your Responsive Website
   If you are building your website using a responsive WordPress theme, it is often possible to switch between the mobile and desktop view. Use this functionality to test how your website looks and works on mobile devices.
7. Testing Your Mobile Website
   Testing and checking the mobile website is essential if you want to offer the best user experience. It’s common for words to overlap onto the next line, making your website less user friendly. Make changes so the text flows and is easy to read.
8. Optimise Images
   Reduce load times by scaling down the file size of your images, using photoshop or optimisation tool such as imagify. Changing the size of your images for mobile devices is also essential. A 500px image may be suitable for a desktop device, but is likely to take up most of the screen on mobile devices. Scale the image so it fits better on the mobile device.
9. Place Important Content at the Top
   Don’t force your site visitors to endlessly search for contact details and company information. Place phones numbers, menu and contact buttons in the header to provide a better mobile experience. Include the most valuable information for the specific page at the top of the body section of each page.
10. Use Call to Actions
    Clear “learn more”, “make an enquiry” or “request a quote” buttons can help to encourage visitors to take action on your page. Use them to increase visitor interaction on your mobile website.
11. Use Site Cacheing Tools
    Website cacheing tools can be extremely helpful in boosting the performance of your desktop and mobile web design. Tools such as WP Fastest Cache can be used to reduce the size of code and javascript on your site, to reduce the loading times of your site.

Make your Website Mobile Ready

As we have learnt business’ must do more than simply design websites for desktop computer users. Google is adopting a mobile first approach to its search engine indexing, and business’ must do the same when it comes to mobile web design. Take steps now to optimise your existing website for mobile devices, or build a new website with the mobile user in mind.

If you need support with your mobile web design, speak to us today about our website design and build solutions for your business.