If content is king then your website is its kingdom and no matter how great your content is, if your website is not providing the users a smooth user experience, your visitors are going to abandon it for sure!
But how can you make sure your website users get a rich and smooth web experience? This article tells you how to give your mobile web users a smooth experience. I will teach you the basic and the best of 5 mobile website usability rules that you can’t afford to miss. Follow these mobile web usability rules and craft a nice mobile web user experience to your visitors. Let’s get started!
Rule No. 1: Don’t go after every plugin you come across!
Plugins are meant to add usability to your website, but that shouldn’t turn out to be a roadblock for your users. Before you install any plugin or add-on, make sure it is worth adding and is going to add value to your website and thus adding value to your visitor’s user experience. More importantly, note that most mobile devices do not support plugins and also remember that plugins are also known for crashing, hanging and slowing down the websites and if not chosen properly, can prove to be vulnerable too. Give it a thought: Just because it is free doesn’t mean it should be in your bucket!
Rule No. 2: Use viewport properly to cater screen-friendly content
What’s a viewport?
Viewport gives web designers capabilities to decide on how to render the content across different screen sizes.
Without viewport, a typical web page will be rendered at a full, desktop width scaled to fit the device screen size. Configuring and defining viewport in your CSS allows you to choose and render web page’s size and content according to the device’s screen size, which can also be called a screen-friendly view.
Rule No. 3: Ditch the annoying horizontal scrollbar by sizing content to viewport
Horizontal scrollbar is one of the things that annoy mobile site users most. It is always advisable to ditch the horizontal scroll bar from your mobile-friendly site.
Here’s how to ditch it without changing much of your code on web pages:
- Different devices come with different screen resolutions hence pay close attention in defining viewports for various screen sizes.
- Also, please note that CSS pixel-wide width may also vary in viewport and hence your page content shouldn’t be dependent on a specific viewport width to render well.
- Avoid setting up large CSS widths in absolute terms can widen your elements unnecessarily, especially on small devices. Alternatively, you can use relative width values such as width:100% etc.
- Avoid setting up absolute positioning values that may cause the element to render outside the viewport on smaller screens. You can use CSS media queries to apply different styling rules for varied screen sizes.
Rule No. 4: Place tap targets properly; size and proximity matters!
When you are building web for mobile, you have to consider space constraint and usability for every element of the web page and this applies to tap targets (buttons, links etc.) too.
Problem: If your tap targets are placed too close with each other and are small, users will have frustrating web experience as they might end up clicking other, unwanted tap targets.
Solution: Keep button size reasonable good. Have good proximity among buttons so that users can tap them without their finger pad overlapping other tap targets.
Pro Tip: Android’s UI guidelines recommend a minimum tap target size of roughly 7mm (48 CSS pixels), compared to an average adult finger pad size of about 10mm wide.
Rule No. 5: Fonts size also matters to offer a good readability experience
And just like the distance, size too is a concern for tap targets. Too small or too large fonts can also leave your users frustrated so make sure you use legible font sizes to offer your users a good readability experience.
Here are few ways you can use to define font size in your CSS, follow the one that fits you best:
Font size can be specified via four common units: pixels (px), points (pt), EMs (em), and percent (%).
- Pixels are “CSS pixels” and vary based on device size and density.
- Points are defined in relation to pixels. A single pixel is 0.75 points.
- EMs and percent are “relative” units: they are relative to the inherited size and properties of the font being used. 1 EM is equivalent to 100%.
Pro Tip: Configure a viewport to make sure fonts will be scaled as expected across various devices.
Once you’ve configured a viewport, implement the Google’s following recommendations:
- Use a base font size of 16 CSS pixels.
- Adjust the size as needed based on properties of the font being used.
- Use sizes relative to the base size to define the typographic scale.
- Text needs vertical space between its characters and may need to be adjusted for each font. The general recommendation is to use the browser default line-height of 1.2em.
- Limit the number of fonts used and the typographic scale: too many fonts and font sizes lead to messy and overly complex page layouts.
The mobile is altogether a different sphere than a traditional web experience and so are the needs of your mobile web users. Going after traditional web guidelines won’t help you much on your mobile web domain. Apply these usability rules and recommendations given by Google and you will on your way to cater a smooth and silk web experience to your mobile website users!
Moin Shaikh an open source tech lover. By profession, he is a social media manager, webmaster and web analyst for an Australia-based IT firm – Intesols. He looks after analysis, design & development and promotion parts of websites. I also contribute for Mozilla Firefox. Love to blog and tweet often! Connect with me on Twitter @moingshaikh
Get our Best FREE Resources!
Download a copy of our best free ebooks for agency and small business business owners.
OR
