How to Fix Common Mobile Content and Usability Issues
From last year mobile became dominant device for search query, and from April 21, 2015 google's mobile friendly search algorithm update (Commonly known as Mobilegeddon, which is designed to give preference to mobile friendly websites over non-mobile friendly websites), it is your responsibility to make your site mobile friendly in order to claim higher position on search result.
A recent research revealed that Search is 48% mobile user's starting point, and it's increasing rapidly. The analysts of RESEARCHANDMARKETER says that the global mobile entertainment market to grow at a Compound annual growth rate (CAGR) of 17.82% over the period 2014-2019.
The forecast is simple, mobile is taking over the control, and search engine like google and bing taking steps to adopt it. To help you, ensure that your website is good to go with this, here are few common mobile content and usability issue and solutions in Search Engine Optimization Prospective.
In this article, we'll cover
- Use Stylistic Images
- Font and Text
- Loading Speed
Viewport Configuration:For those that are unaware, viewport controls the way web pages are displayed on different devices. Without a configured viewport, pages will appear on mobile devices as the typical desktop screen width, only scaled to fit the screen.
Because visitors to your site use a variety of devices with varying screen sizes—from large desktop monitors to tablets and small smartphones—your pages should specify a viewport using the meta viewport tag. This tag tells browsers how to adjust the page’s dimension and scaling to suit the device. Learn more in Responsive Web Design Basics.
There is clearly demand for the viewport meta tag since it is supported by most popular mobile browsers and used by thousands of websites. It would be good to have a true standard for web pages to control viewport properties.
Use Stylistic Images:Wherever possible Apply simple styling and Add stylistic images. These are always some images in our website that were important to the narrative of our product. Stylistic images are images that are not needed as part of the core content but add visual flare or help guide the user’s attention to a specific piece of content.
Set your Breakpoint:
- Constrain the maximum width of the design.
- Give enough padding to elements and make bigger the text size.
- Make the video float around the content.
- Reduce the size of the images and have them appear in a nicer grid.
Font and Text:
FontThe viewport also impacts how fonts are scaled on different devices. A page without a properly configured viewport is scaled down on mobile devices, often resulting in the text on the page being illegible due to its small size.
Some mobile browsers may attempt to scale fonts for pages without a properly configured viewport. This scaling behavior varies between browsers and should not be relied upon to deliver legible fonts on mobile devices. PageSpeed Insights displays the text on your page without browser-specific font scaling applied.
TextOn the narrow viewport, you don’t have a lot of space to display content so the size and weight of the typography are often drastically reduced to fit the screen.
With a larger viewport, you need to consider that the user is more likely to be on a larger screen but further away. To increase the readability of the content, we can increase the size and weight of the typography and we can also alter the padding to make distinct areas stand out more.
Avoid Flash:As it currently stands, the majority of mobile browsers do not support Flash-based content. Sites that embed any content that relies on Flash, whether it be for animations, videos, or navigation, are essentially damaging the site’s potential since users on mobile can’t view the content. So you shouldn't have flash on your website.
See Google's PageSpeed Insights Rules for how to improve web page load speed.