Welcome back, this lesson is on common issues and best practices. Now that you understand mobile trends, let's talk about mobile website best practices. In 2015, Google announced that mobile-friendly websites as they defined them, would receive a boost in search rankings. These best practices also improve the overall user experience and mobile conversions. However, issues on legacy websites must often be overcome. In this lesson you'll learn about common issues in mobile web design and usability, we'll focus on specific issues that cause sites to not be mobile-friendly, and then you'll learn what you can do to improve the mobile user experience. In this lesson you'll learn about both the general and specific issues that cause websites to not be mobile-friendly, get an explanation of what you can do on your current mobile site to make it so, and you'll gain access to the mobile-friendly test provided by Google. On Google's developer website, they've shared about common issues in mobile web design. The first is forgetting the mobile customer, good mobile sites are useful by helping visitors complete their tasks whether that means reading an interesting article or checking on the store's location. But don't get caught in the trap of only creating a mobile formatted site that looks pretty on mobile without having useful functionality. A mobile-friendly site is one that's useful for both mobile customers and optimized for those customers' most common tasks. Common issue number two, is implementing a mobile site on a different domain, subdomain, or subdirectory from the desktop site. Multiple mobile site configurations are supported by the search engines but creating separate mobile URLs increases the amount of work for maintenance, updating, and can be a source of technical problems. The solution here is to use Responsive Web Design serving desktop and mobile on the same URL. It's very easy to think of your website as the only source of inspiration, but there are so many other sites in your space to consider whether they be competitors or those that inspire you on a personal level. Take a look at their best practices, you don't have to be the first in your industry with a particular technology or a mobile layout, but you can still benefit from learning from those before you. Now let's get into some of the specific issues that Google mentions. The first one is blocked JavaScript, CSS, and image files. You need to allow Googlebot to access these so they can see your site like an average user, if your site's robots.txt file disallows crawling of these assets, it can harm how well algorithms both mobile and desktop render and index content. Unplayable content can also be prohibitive, some types of videos or content are not playable on mobile devices such as those that are constrained by media license, or with Flash, or other players not broadly supported on mobile. Unplayable content when featured on a page, any website but especially mobile can be very frustrating for users. Using HTML5 standard tags for videos and animations is the best practice. Another specific is the use of interstitials, interstitials are those typical ad overlays that partially or completely cover the content of a page a user is visiting. These are seen on devices where a website might be promoting a native app, or a mailing list sign-up form, or an advertisement, and make for a bad user experience. In extreme cases, the interstitial is purposely designed to make it difficult for the user to exit out and view the real content. Any interstitial page significantly impacts the user experience and should be minimized on mobile devices. Slow loading mobile pages can really be a problem, it's important to make sure your mobile site loads quickly especially for those users that might be on slower access plans globally. Users can become really frustrated if they have to wait a long time to see your content. Google's PageSpeed Insights tool can help you understand some of the issues that should be fixed, also make reference of the mobile pages render in under one second resources available from Google online. Setting your viewport correctly is also critical, because visitors to your site use a variety of devices with varying screen sizes, pages should specify a viewport using the viewport meta tag. This tag tells browsers how to adjust the page's dimension and scaling to suit the device. Yet another issue is small font size, avoid setting the font size too small to be legible on a mobile device, forcing users to pinch to zoom in order to read. Once you've specified a viewport for your web pages, set font sizes to scale properly within the viewport. Touch elements may also be too close, buttons and links can be so close to each other that a mobile user cannot easily tap a desired element with their finger without also tapping a neighboring element, this can be so frustrating. To fix these errors, make sure to size and space buttons and navigational links suitably for your mobile visitors. Updating a website to be mobile-friendly is critical, Google has included a mobile-friendly test that you can run your website through. If it's in responsive design already, it should pass. The top three things to know when building a site for mobile are number one, to make it easy for customers. Two, to measure the effectiveness of your website by how easily mobile customers can complete common tasks. Three, to select a mobile template, theme, or design, consistent for all devices using Responsive Web Design. In summary, now that you've completed this lesson, there should be no mistaking the mobile errors possible on a website. These impact both rankings and the overall user experience, they are vast though and require a tight alignment between teams to really execute on the fixes required. Solutions are out there for teams committed to doing the right thing, and the mobile-friendly test is one great way to get started with testing your website.
