The Ultimate Guide To Creating A Website That is Optimised For A Mobile Browser

Almost everyone around you owns a smartphone and might spend at least 90 minutes on their phone per day as an average amount. That is a significant amount of time staring at the screen of your telephone without counting in the extra time you spend staring at the computer or the tv. However, that sounds like a good things for digital marketers because according to a study by Movable Ink, more than half of all emails – a full 65 percent – are accessed via mobile devices. This just means that a lot of people use their phones for emails and everything else in between. More and more people are choosing their mobile devices as their primary means for communication and web browsing.

If you’re thinking that this won’t affect you or your business, you need to remember that most consumers who are potential customers will be clicking on your links through emails and social media posts are usually using mobile phones. Hence you need to start working on just how efficient your website is on a mobile browser. Some entrepreneurs forget to ensure the mobile sites work just as well as the web browser versions.

So, the team here at ThunderQuote have compiled a list of ways for you to ensure or to create a website that is mobile browser friendly to ensure that the bulk of your customers or potential customers don’t have troubles trying to browse your website.

First things first, how many customers or potential customers are actually using the mobile web to browse your website?

You might not know how to determine the amount of people using their mobile phones to check your website out but there is a way to do so. If you want to take your mobile readers seriously, then the best thing to do is to figure out the percentage of visitors by using Google Analytics. You can click “Add Segment” and ensure that “Mobile and Tablet Traffic” and “Mobile Traffic” boxes are checked. This way you can compile the amount of readers that come to your website and have a definite number. If you have a high percentage of mobile readers, it is time to take them seriously and create a mobile friendly version of your website before you scare them all away.

So, how do we change things up? It does take some work to transform your current website to one that flows elegantly on a mobile phone. However, it can be done and we are here to help you.


Step One : Use A Responsive Design / A Mobile-Friendly Theme

This is probably the first thing you need to get done before even thinking of doing anything else. Making sure that you have a design or a theme that is either responsive or mobile-friendly is crucial.

A responsive website allows website developers to design a site that can be used on different sizes of devices. It is a website design that can change its flow and arrangements according to the different sizes of your devices. Hence, the name responsive. By choosing to create a responsive design website, you are significantly reducing the amount of work that needs to be done by yourself and your website developers. It is a one size fits all kind of design.

A mobile friendly theme is also something you can choose to do, however that would mean that you would have to choose from a select few choices of mobile-friendly themes. It is an easy way out when you need it done fast but you will be slightly limited to the ready-made themes. Either way, getting a theme or a design that is made for mobile readers is the best thing to do right away.

An extra tip to note from HootSuite, they advised their readers to not make a separate mobile-friendly website. This is because there is only one Google and if Google detects that you have a duplicate website (one for desktop browsers, and one for mobile browsers), it would cancel each other out causing your website to get lost in the millions of other websites. Therefore, it should be better off if you decide not to create a separate website just for mobile readers.


Step Two : Start Replacing Text Links With Buttons and Menus

No matter how big developers want to make the screens of the latest phones, they will never be as big as a desktop monitor or a laptop screen. This just means that there will be people out there that can’t seem to click the proper links because the space allotted is just a simple string of texts.

This will make the entire mobile web browsing experience so much more frustrating. Imagine trying your best to click a link but you keep missing or clicking the wrong link because of the mobile-unfriendly design.

So how do you go about changing these elements up in your own website design?


  1. Apple’s iPhone Human Interface Guidelines recommend that the minimum target size for clickable buttons and menus to be 44 pixels wide and 44 pixels tall.
  2. Android’s Developers Metrics and Grids says that elements should be at least 48dp high and wide.
  3. Nokia’s Developer Guides suggests that the target size shouldn’t be smaller than 0.7cm x 0.7cm square or 48 x 48 pixels.
  4. Microsoft’s Window’s Phone UI Design and Interaction Guide also suggests a touch target size of 34 pixels with a minimum touch target size of 26 pixels.


At this point, you can clearly see that each phone and each brand has a different approach to the target size. But you can easily solve it by ensuring that they all meet the minimum target size. If the buttons aren’t large enough or if you include too many text links, this will definitely infuriate any visitor to your website.

Step Three : Always Include A Viewport Meta Tag

You might think that I’m speaking gibberish, but any developer would know just exactly what I’m saying. Let us break it down for you, the viewport is basically a virtual area that is used by the browser rendering engine that then determines how your content will be scaled and sized. This makes it an extremely important piece of code to use when you are planning to serve multiple devices with your content.

The code below would be the best version of the code to use at the head of your document and you would only need to declare it that one time.

Failing to do so might result in a very incompatible website across multiple devices. The more people visiting your website the better it is for your brand.


Step Four : Use High Resolution Pictures

This might seem like an obvious tip but we can’t even begin to tell you how many people don’t use HD photos for their website. It is annoying when you visit a website and you click on a picture to zoom in only to have it explode into pixels and blurring everything out? Imagine those annoyed people are your customers? You are basically driving them away from your own business. Do yourself a favour and go ahead and use high resolution pictures all the time.

A lot of the phones nowadays have high-definition screens and those screens can point out your blurry and pixelated photos faster than you can say “Cheese!”.

Step Five : Never Stop Testing

To ensure that your customers are getting the best user experience all the time you need to be diligent in always testing your site. Don’t just stop once you’ve created a website for all platforms. Test it out! You need to test every page, every drop down menu, every button and links. This ensures that if there is a bug, you latch onto it quick before anyone notices it. Your credibility will get thrown out the window if someone catches a glitch in your website. So always have a dedicated team of testers and developers that will ensure your website stays bug free!

The team here at ThunderQuote always wants what’s best for your company and we feel if you follow these guidelines, you will get more mobile readers to your website which will elevate your brand even further. Optimisation is the key to ensuring pleasant user experience.
ThunderQuote is the most comprehensive business services portal in Singapore, Australia and ASEAN , where hundreds of thousands of dollars of procurement contracts are sourced every month by major companies like Singapore Press Holdings, National Trade Union Congress and more.

Share this article !

Leave a Reply

Your email address will not be published. Required fields are marked *