How to improve user mobile experience

How to improve user mobile experience

Do you have a good user Mobile experience?

With there being so many websites out there, user experience is a very important part of ranking. Not only is it good for ranking but it goes without saying, it is good for your readers as well. If I click on a site that isn’t sized appropriately for mobile, or I can not use the links because they are too small I will not stay on the site. If your readers are not staying on the site then they are not sharing the site to others, which is also good for page rank. So how do you determine user mobile experience? What all does it involve? How do you fix it?  Read on to find the answer to those questions and more.

What is user mobile experience?

User mobile experience is the perception a reader has after using a mobile product or website. If the experience they had is poor then your user experience would be poor. Google has grouped the user experience in seven categories. These categories are;  Flash usage, Configured view-port, Fixed-width view-port, Content not sized to view-port, Small font size, Touch elements too close, Interstitial usage.  You can test your user mobile experience here. Now that you know what user experience is it’s time to start the engines.

What is flash usage?

“Flash” is a technology owned by Adobe. Many websites use Flash to show animation on their webpages. Flash is most commonly used to display photos in a slideshow. When objects use flash to be displayed browsers can not display them on their own, they have to rely on a programmed that is installed on your computer. Why is Flash bad for users? Most mobile browsers do not support flash media. This is why when you visit websites such as gaming sites you will get the puzzle piece icon with the phrase this plugin is not supported.

  • How to fix flash usage
    • Avoid using plugins that are using flash. Find other ways to animate objects on your site. A lot of sites like to use sliders to show images, recent post, etc. Be sure these plugins are not using a flash player and instead using html5 to display javascript animations. This will be sure to help user mobile experience and avoid objects and videos not loading on mobile devices. If you do not know if you are using flash the user mobile experience test will show you, or you can test your site with a mobile device such as a tablet or smart phone. Just look for the puzzle piece icon displayed where an image or object would be.
What is a Viewport?

A viewport in HTML5 is the readers visible area of a webpage. Before smartphones and tablets came out viewports were set to a fixed size for computers. When mobile browsers came out it changed everything. The fixed size viewport was too big for mobile browsers so they made a quick fix and scaled down the entire page. This was a quick fix but it doesn’t look good on mobile because it makes everything too small to read without having to zoom. If I have to zoom and scroll while I read chances are I will not stay on very long. Size your viewport appropriately to help user mobile experience.

  • How to fix viewport not configured
    • If you are getting this error chances are you do not have the viewport meta tag in the header of your page. The first thing you need to do is place <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> inside the head tag of your header.php file. The meta “viewport” gives the browser instructions on how to size and scale your page. The content=”width=device-width tells the browser to follow the screen width of the device being used (which will vary depending on device). Initial-scale=1.0 sets the initial zoom when the page is first rendered. View these links on a mobile device to see the difference no scaling, scaling

What is a fixed width viewport?

A fixed width viewport has a pixel size instead of device width. Some developers use this to fix non-responsive themes and size a child theme to use a smaller viewport. However this isn’t the best practice for scaling websites.

  • How to correct a fixed width viewport
    • If you are getting this error then chances are your meta viewport says a set pixel instead of device-width. The easy fix for this is simple. Go to your theme editor. Find your header.php file, if using a child theme you may have to go into the parent theme editor to find this. Look for the meta viewport tag in between the head tags. Then where it says width=(numbers)px to width=device-width and be sure that initial-scale=1.0 is after that. That’s it your done!

Why is content not sized to viewport?

When you get this error it means that you have fixed width objects images, boxes etc. that are larger than the visible area. This will cause a side scroll bar on a mobile device. Common objects with fixed widths are pictures and advertisements. Banner ads that are set to 1200px wide and not responsive when viewed on a mobile phone with a width of 380px the banner will break your mobile view. You will only see 380px of the banner and have to scoll horizontally to see the rest. This is not good for user mobile experience, especially if it is an image or content box as shown in the no scaling image.

  • How to fix content not sized to viewport
    • This task isn’t as easy as adding and editing the viewport. It requires knowledge of CSS and lots of time. You will need to go through your site to find any content that is wider than a mobile device. Once you know all of the problem objects you will need to look through your editor files and find those objects inside the css and php files. After you find them you will need to resize or re-position them to a relative setting such as a percentage instead of a pixel. This will scale the object to the same percentage on any screen. Very rarely should you use an absolute size or position as these do not change with screen size and will cause issues in user mobile experience. If you do not feel like tackling this task on your own let us do the work for your see our mobile friendly child theme help.

Do you have small font size?

Font sizes are another big issue with mobile devices. If you have read my post how to make a mobile friendly site then you have seen the difference between 12px font and 4px font. If your font size is smaller than 12px it will be very hard to read on a mobile device. This will cause the reader to have to zoom which will also cause a horizontal scroll bar and that is no good.

  • How to fix small font size
    • This is a simple fix for the content you wrote. All you need to do is change the size of the font to anything 12px and up. Don’t go to big though as it will display less words per line, and on mobile devices this can make it on word per line. There may be instances where the font size is in your theme or plug-in. This is a little more difficult and requires knowledge of CSS to edit. If you have some experience you just need to find the style.css for the object with the small font size and adjust it in the editor.

Are your Touch elements too close?

You will get this error when buttons or links are too close to each other. When using a desktop it is easy to get a precise click with the mouse pointer, however on a mobile device where you use a touch screen things can be a little more difficult. I’m sure you have visited websites where you tried to click a button and tapped the button near it. It was frustrating, especially after you tried several times to no avail.

  • How to fix touch elements too close
    • Some elements may be in content you have added, if so, just put some space between them. However most elements will be in the theme or plugin. Fixing this also requires css knowledge. Depending where it is and what is close to it, usually just need to adjust your margins and padding around the button or link. This is done by setting margin-top: px, margin-bottom: px, margin-right: px, and margin-left: px. When editing your theme or plugin be cautious as a one missing ; can break your site and give you a 500 error.
What is Interstitial usage?

Interstitial refers to app pop-ups such as subscription forms, ads, and anything else that require a user to exit off before the page is visible in mobile. While that pop-up may look good on desktop only taking up a tenth of the screen, when viewed on mobile it may take up the entire screen or worse, not show the full pop-up and not be able to exit out. This is a big turn off to readers and most will exit from your site before seeing any content. Google has stated in a new release that they will be penalizing sites with pop-ups in the above the fold content as well. View their write up on it here.

  • If you are using pop-ups decide if they are really worth it. Are they bringing in subscribers? Is the ad paying enough to get penalized? If you answered no to these then simply remove the pop-up. However if it is really helping your site then try changing the conditions for view. Set it to about 50% of the page. This will keep it out of the above the fold content, and allow users to see some content. I prefer to put pop-ups at the bottom of my content so my readers will have a good idea if they want to see more post from me. This will also help your subscription email conversion. If a reader signs up before the post they may not like your content and just ignore your emails.

 

 Time to shift gears

Time to shift gears into overdrive. Now that we have gone over all of the user mobile experience issues and how to fix them, hopefully you have a better understanding and a better user experience. Some adjustments are a quick fix and others take a little more time and require more technical knowledge. Remember to be cautious when editing plugins and themes. If done wrong you can shut down your website. If you are still having issues and would like some help feel free to contact us. Better is always possible with the right mind set and the right knowledge.

 

How to improve user mobile experience