9 Tips For Designing Mobile-Friendly Websites

Postado em - Última vez Modificado em

A survey by a reputable marketing firm says that 80% of the internet population owns a smartphone. This translates to a significant number of people who browse the internet on the go, with the purpose of getting information on a wide array of subjects. We live in a digital era, and many people do everything online, either through a desktop or, more popularly, a mobile device.

Google changed their modus operandi in April 2015, and stated that they would start using mobile-friendly sites as a criterion for ranking. This means that if your site does not have the traits of a mobile-friendly website, it will automatically decrease visibility in search engine rankings. Mobile internet usage has surpassed desktop internet usage significantly. With all the changes and regulations Google is introducing, having a mobile-friendly site is not just a measure of good practice, it is a highly recommended prerequisite.  

Take note that just because your website can be accessed on a mobile device. does not mean it’s mobile-friendly. Mobile users expect to have an experience that is both customized and optimized for their smart devices. Another survey states that a large percentage of consumers will not return to a website if it loads slowly, or even completely fails to load on their smart phones. They would rather opt for desktop versions that are usually not as convenient as mobile phones.

Here are some tips that will guide you to designing mobile-friendly sites:

1. Size matters

When browsing on your mobile phone, there is nothing as frustrating as trying to select a button that is too small for your fingers to easily click. In many scenarios, you will end up pressing the wrong button and have to go back until you get it right. Having to zoom in to read the contents of said page is even more annoying.

When it gets down to designing a mobile-friendly site, you need to strongly consider both the size of the font and the buttons as well. The font should be no less than 14px to ensure your audience can read without having to zoom in. Fonts should only be smaller than 14px on forms and labels. Even in this case, it should not be lower than 12px.

The buttons should embody the words of the acronym BBAB to the fullest: bigger buttons are better! By having big buttons on your mobile design, chances of the user missing or hitting the wrong button are eliminated. Experts in the industry recommend the size of the button should be 44px by 44px. This will significantly help to optimize the user's experience, and thereby give you more conversions.

2. Divide the page into small sections

Trying to force the content from your desktop site to fit on a smaller screen is always a bad move. You need to break the page into smaller portions. Do this by distributing your content on different pages, rather than on one page that requires the reader to scroll constantly.

Get rid of content that is not important, and use just one column with wrapped text. This will eliminate the possibility of horizontal scrolling.

3. Include a viewpoint Meta tag

A viewpoint is a virtual section that search engines use to gauge the scaling and sizing of a site’s content.  In this case, using a Meta tag is highly important, as it ensures users on various devices get the best out of their experience.

Without the viewpoint Meta tag description, your site will not function as it should on a mobile device. This element alerts the mobile browser to fit on a small screen. Regardless of the configurations you implement to your viewpoint control, you need to ensure it is located at the starting point of the document.

4. Keep it simple

Your site does not need to have irrelevant content and complicated designs. Make the design attractive and give it an easy to use interface that ensures the ultimate user experience. When optimizing your website for mobile phone users, your design should revolve around minimalism. Your site should be easy to navigate. You can capitalize on minimalism by excluding frames, tables, and complex formatting.

Be sure to find the balance between navigation and content. Simplify your website and reduce the number of clicks within the site.

5. Get rid of pop-ups and refreshes

Mobile viewers hate pop-ups. They are a big inconvenience and waste of time for them. Mobile browsers are set up in a way that do not support pop-ups. They are only there to frustrate the user experience, so make sure your site has none. Do away with pop-ups as well as refreshers, to avoid filling up the smartphone’s cache. It is important to give your user control of refreshing the page only if they need to.

6. Replace text with buttons

Inserting text in websites optimized for mobile phones is quite the task. Instead of filling your site with a large amount of text, you can replace them with navigational buttons so the users can select what they need with ease.

Create your website with the fact that your mobile users will not use a mouse or a keyboard in mind. With this consideration, you are able to come up with innovative ways for your users to have the same experience. Other than buttons, think along the lines of using drop-down menus, checklists, and image selections.

7. Implement Navigation Placement in your mobile friendly design

When you were creating your website, you did a copious amount of research to give your target viewers just what they need in a website. The same tactic should be in place when designing your mobile-friendly site. Learn how your viewers would want to navigate, and integrate this into your design. If they are into quick-changing content, place the navigation menu right below the main content. If they need to navigate what categories are present before doing anything else, position the navigation menu right at the top of your site’s page.

8. Scale your images

Evaluate the images used in your site’s background, and within the content. The images should scale adequately regardless of whether your users browse in landscape or portrait orientation. If your images do not scale to the required dimensions, restructure the CSS rules. The CSS rules should instruct the images to change the width, or fit within the page.

9. Give users access to the full site

There is someone who will want access to the content that is not displayed on the mobile website. With this in mind, you need to include links on numerous pages to give your user access to the full version of your site.

Mobile sites offer a new and foreign landscape, and the process of creating and designing for them can be daunting. However, they provide a perfect platform to showcase your creativity and, most importantly, your brand to a wide pool of mobile users.

Keep their needs in mind, be loyal to your brand, and follow these simple rules. You can be sure that your mobile-friendly design will give your viewers the ultimate mobile browsing experience.

Got some exciting tips and ideas for making a website mobile-friendly? Feel free to share with our pool of talented and creative freelancers by using the comments section below.


Postado 16 agosto, 2017


Designer // Writer // Creative

Tom is a Design Correspondent for Freelancer.com. He is currently based in Melbourne and spends most of his non-work moments trying to find the best coffee.

Próximo Artigo

How To Use Email As A Lead Generation Tool