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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Use Site Cacheing Tools
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.