Tips to make your website mobile friendly

It is undeniable that mobile phones have literally changed the way we interact with the world and its information. Look around you – if you are surrounded by people, chances are someone is on their phone. Or perhaps, you are on your phone now, browsing through this article in hopes of understanding why mobile-friendly websites are crucial in staying ahead in the market, and how to achieve this.

You’ve come to the right place. Firstly, let’s look at why it is paramount that your website needs to be updated to a mobile friendly one.

Research over the years has clearly outlined a trend of consumers gravitating towards their smartphones rather than computers for information or making purchases. Consider a website on a desktop – images, font size and formatting are all displayed and fitted onto a wide desktop screen.

Now, imagine that the exact same webpage format is now condensed onto your smartphone screen. The issue? Everything is substantially smaller, small buttons become impossible to click with stubby thumbs, and you have to pinch and zoom to read any text information. It’s not a very pleasant experience – and most likely, consumers will exit your site before they have read more than a word.

Secondly, in response to the mobile phone trend, Google algorithms have actually updated to rank mobile sites higher than desktop-only websites. Even a high-quality site’s ranking will be jeopardized if it is not mobile-friendly. When you have a competitor, having a well-maintained mobile-friendly site hence becomes paramount for SEO and ranking higher on Google’s search results, and therefore getting a higher stream of visitors.

The thought that your website is losing streams of potential customers is alarming. Checking if your website is mobile friendly is easy – Google’s Webmaster Tool can easily help. Google will even list down reasons why your webpage isn’t mobile friendly, and suggest some solutions.

So with these facts in mind, how do you update your digital presence in order to stay ahead of the game? Responsive web design – using different Cascading Style Sheets (CSS) will allow a flexible display. Browsers on different devices will render the page differently according to different CSS, but still contain the same webpage information and basic design. This allows flexible layouts and images, so that the page can detect the visitor’s screen size and adjust the layout appropriately.

Here are some easy tips to help you optimize your website for mobile phones.

Don’t make a separate website for mobile phones

This might confuse you – however, when you consider the impracticality of creating a separate website, it makes logical sense. Creating a website for different devices is laborious – especially when you consider that there are many different sized devices (smartphones, tablets, iPads), which all require differently formatted websites.

In addition, every time you have to update information on your desktop website, your mobile website needs to be synced also to match. This is unnecessary labour that you are creating for yourself!

Besides, Google penalises websites with duplicate contents. Thus, having two websites with the same contents defeats the goal of achieving higher rankings in the search engine.

Use media queries

Media queries can detect the size of a device, so that the browser can be directed to display information following the set of CSS that you have set. Consider elements that need to be resized on a mobile phone: images need to be shrunk, whilst words should be kept as large as possible. Less important elements such as the navigation menu should be positioned on the side or bottom of screen – this is about prioritizing the information you think the visitor will want to read.

Configuration of the system is crucial for all devices currently in use – which encompasses more than just an iPhone. This is a technical part of adjusting a website which may require a professional’s assistance. Otherwise, there are many frameworks out there with pre-built systems to automatically scale your web page to a device, saving you the manual labour of coding.

An important difference to note between a desktop and a mobile is the orientation. On a wide desktop, content is displayed in a landscape manner, although users do scroll up and down. On a smartphone, however, the tall and narrow frame of the screen requires consideration into the width of your content. Drop-down menus, pictures and videos are hence greatly affected, so when you are changing the CSS of your webpage, do consider how people are viewing the content.

Optimize your image sizes

Having images on your website visually engages visitors much better than simple text. However, on a mobile device, you cannot have large image sizes that take too long to load – studies have found that people are even more impatient on their phones than they are on desktops. Especially due to the smaller bandwidth of mobile phones, loading times can become much longer.

To avoid your visitor clicking away, you need to have images optimized so that the small size does not compromise its clarity. This balance is crucial for the loading time of your website, and will contribute to the consumer’s overall impression.

Traditionally, we think of image sizes in terms of pixels. However, with the variety of resolutions available on different devices, having a one-size-fits-all mentality will be an issue. Configuring images to have a specific width on the page – typically 100% – will provide a consistent viewing experience for visitors and maximum impact of your images.

Simple website design

A major differentiating factor between mobile and desktop users is their preference of a simple website design. Simple designs are easier to navigate and simpler to understand, which engages a visitor far more effectively than a complex website layout. This allows their attention to remain on what matters – the information your website provides.

Practically speaking, a more complex website will also have a longer loading time, which will affect your user’s experience as well. Remember that mobile users have a wealth of web links at their fingertips (literally), so if your website is taking longer than average to load, it is most likely out of the competition.

Font sizes

Although it may be a good idea to impress and engage your visitor with sophisticated creative fonts on your desktop site, on a mobile phone such fonts can look clumsy and cumbersome. In some instances, your custom font may not even be recognised on a phone – and when visitors are prompted to download a new font on their phone, they are very likely to reject and navigate to a competitor’s site.

Using standard fonts can avoid this scenario. You can also check the readability of your font before updating your site. Furthermore, font size should also be legible enough to read on a screen without pinching and zooming. A suggested font size is 14px – which may seem big, but is easy to read on a small mobile phone screen.

Button sizes should also be readjusted to suit thumb and finger sizes. In general, the bigger the button, the easier it is for a visitor to use. A recommended button size is at least 44px by 44px. This also avoids the frustration of pressing the wrong button and being directed to an unintentional page, which diminishes user experience.

Allow your user to choose

Including a ‘view desktop version’ option at the bottom of your website may also enhance a user’s experience. No matter how well designed your mobile website is, some users do prefer to view the website as it is on a desktop. This is particularly useful if there is information or links accessible only via the desktop version, although it is recommended that you do keep both versions exactly the same in terms of information and content offered.

Avoid using Flash

Another differentiating factor between mobiles and desktops is their support of Flash. Most mobile phones do not operate with Flash, which means that if your website relies on Flash, the information will not be displayed properly on a mobile phone. There are other technologies that can replace Flash, such as HTML. Keep in mind the previous point about simplicity in a website – if you want a complex operation on the website, perhaps it is best to put the feature in an app.

Do not block Javascript, CSS, or image files

Your goal is to make your website universally compatible, so that it can be displayed to its full potential on any device. Java, CSS and image files are the crux of a response mobile-friendly website, so their operation is crucial for a user’s experience. Therefore, it is always safer to use software and coding that is widely accepted, instead of a specialized software that may not be compatible with some devices. Remember that simplicity is key when it comes to mobile friendly sites.

Use Youtube videos

Videos are an effective way to engage visitors, as they provide visuals and sound, and fully immerse the visitor in the content. However, the way videos are viewed on a mobile device can vary according to device, and may become a frustrating experience if it is unable to load or play properly. Youtube videos already have an embedded code that is responsive to change, which will save you manually inputting codes to ensure that your videos are mobile friendly.

Continuously test!

Lastly, once you have finished changing the responsiveness of your website, test it out on multiple devices. On Android smartphones, apple iPhones and other branded tablets. Experiment with the buttons, submission forms and trial every page and user action possible, to ensure that any miscellaneous visitor will be able to gain the maximum experience out of your website. Put yourself in the position of a foreign visitor, and try to empathise with their experience.

Although optimising your website can be a hassle, especially for those outside of the IT industry, it is paramount in today’s ever evolving digital landscape. Remember that your website is a crucial part of your business’ brand which reveals a lot to the visitor – the higher the quality of a website, the higher the quality of your business is likely to be. SEO must constantly be updated to stay ahead of competition, and in this current age, it means optimising your website to become mobile friendly. Remember that there are always professional companies and services ready to help your website succeed and appear on the first page of Google.

Read ➡ Marketing Strategies That Are Worth Investing In