7 Surefire Ways to Design a Website That Looks Great on Mobile


Do you know that more than half of all internet traffic comes from mobile devices? If your website is not optimized to work on these smaller screens -- especially if you are still having an old website that was designed without mobile device users in mind, you are missing out. Your audience is on the go and they want to be able to read your content, look at pictures and watch videos on their mobile devices. If you haven’t made sure that everything works well on a mobile device, or if it looks horrible on it -- you are losing customers. When your visitors have difficulty navigating through your website on their mobile devices, they will not be willing to go out of their way to find what is it that they are looking for. Instead, they will just go to another website – your competitor’s.

In this blog post, we will go over 7 surefire ways to design your website so that it looks great on mobile!

[1] Use a simple layout that is easy to grasp on smaller screens

Mobile devices such as smartphones and tablets are becoming increasingly popular. However, many websites do not look great on mobile screens because they have a complicated layout that is difficult to navigate or take up too much scrolling space. Instead of cluttering your website with too much information and images, employing a simple user interface for your site will ensure it looks good on a mobile device, and make it easy on the eyes of your visitors. For instance, if your website features a sidebar column, or two, make sure that on mobile devices the sidebars are gone or repositioned so that you have only one column of display. Less is more.

[2] Make sure your buttons are big enough to press on mobile

To ensure your website looks great on mobile, use big enough buttons. Ensure the size is right by testing them in different resolutions to see which works best for you! Make sure they are not too small so people can easily click through and become engaged with your site or business. Smaller buttons don't grab attention as much as larger ones do, and on mobile websites smaller buttons can get annoying and cause frustration as they are harder to tap on mobile websites. So, larger buttons are better for your site!

[3] Use suitable fonts for your website

Use a font that is easy to read and looks good on the mobile screen size. Sans-serif fonts are usually the most suitable, but that depends on your design. However, make sure to use large text. On a computer, users can adjust their settings to increase font size and make it easier for them to read. However, this setting will not be available when they use their smartphones or tablet devices! Large fonts help ensure that all users have an easy time reading what’s on your site. Also remember, normal fonts are easier to read on computers as computer screens are larger than mobile screens. So, test out your text size on a mobile device to ensure they are large enough for your visitors to read.

[4] Avoid fancy animations and effects

Avoid using flash animations. Okay, nobody uses flash animations anymore these days. However, avoid using fancy animations and effects (especially those using Javascript and CSS). Fancy animations may look cool, but they are usually heavy on resource usage. Hence, they can interfere with the loading of your website and cause frustration for users trying to access your content. You don’t need those fancy animations to make your website look great. Be creative, and keep your website as lightweight as possible for mobile devices.

[5] Make sure there are no popups

Don't use popups or anything else that interrupts the reading experience. Popups and interstitials annoy people who are trying to access your site from their phones! This is because most of the time, mobile users will have difficulties closing the popups on mobile devices. Also, users have a higher chance of clicking on ads (if the popups contain clickable or tappable ads) even when they don’t want to – bringing them to another website which can be super annoying. Only have these types of ads appear when someone goes back to desktop mode after visiting the site on mobile.

[6] Optimize the use of images

Optimize your images – make sure the image sizes are as compressed as you can. You will have to design to accommodate for higher resolutions screens and at the same time also for mobile device screens. So, compress the size of your images (while keeping the resolution high) and do not use too many images per page in your website. Also, if you need text overlaying your images, try using CSS instead of virtually writing the text onto your image using image editing applications. This is because you can easily adjust the text size when using CSS so that you can ensure the text is readable on mobile devices.

[7] Design your forms accordingly

Design an email signup form – or any form for that matter – tailored specifically towards mobile devices. You want your visitors signing up right away – not having to go onto their computer first before they can sign up or fill up whatever it is that’s the purpose of your website. Make sure the input fields are big enough for them to tap and select. Also, wherever possible, use dropdowns and checkboxes instead or text fields – make it easy for your visitors, make it so that your forms require less typing and more tapping.

So, these are the 7 surefire ways to design a website that looks great on mobile devices. There are of course many more principles to follow and ways to design a website so that it looks great on mobile devices, but even if you apply only the things listed in this blog post your site will surely already look great and functional on a mobile device.

-----

Naim Zulkipli
WhatsApp: +6011-20884110

Previous
Next Post »