Responsive Web Design Can Help Your Ranking in Google
- Severe Mobile Usability Problems
- How Responsive Web Design Can Improve Your Site
- Make Your Pages Work for Large Screens, Too
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
If your website has severe usability problems on mobile devices, Google will delist your site or rank it lower in search results—especially search results on mobile devices. But by using responsive web design (RWD) you can create a site that works well on mobile devices and expands to fit larger screens. If your site works well on mobile, Google will be much happier with it.
Adding your website to Google Webmaster Tools (GWT) is a great way to get information about how Google views your site, the search traffic you are getting, and what pages are found in Google. But you might not know that these tools will also send you notices if your sites have problems.
One problem your site might have is how it looks on mobile devices. As mobile devices have become more popular with consumers, Google has adjusted search results to reflect this change.
Severe Mobile Usability Problems
Many issues can cause usability problems on mobile devices, but GWT looks for several specific mobile usability problems. If GWT detects these problems on your site, you will get an email alerting you to the issue and giving you the chance to fix it (see Figure 1).
)
Figure 1 Google Webmaster Tools shows how to fix mobile usability issues.
GWT points out problems like these:
- Flash use. Most mobile devices don't render Flash at all. If your site uses Flash, especially for navigation or the main content, mobile users will not be able to use the site. Best practices recommend that you avoid using Flash and instead use HTML5 and other web technologies.
No viewport. If your site does not have the <meta viewport> tag set, the site might not display correctly on all devices. Use the <meta viewport> tag in the <head> of your documents, as follows:
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
Fixed-width viewport. Even if you have the <meta viewport> tag set in your document, setting the width to an exact or fixed width can cause problems on smaller screens. To make the width of the viewport adjustable, change your <meta viewport> tag as follows in the <head> of your documents:
<meta name=“viewport” content=“width=device-width, initial-scale=1“>
- Horizontal scrolling. Sometimes the content on a page is not sized correctly for the mobile viewport, requiring horizontal scrolling to view all of it. Unfortunately, many mobile devices have trouble scrolling horizontally. Use relative widths and positions for your elements, and make sure that media items such as images and videos are scaled to fit.
- Illegible fonts. This issue occurs in pages that don't have a viewport meta tag. Many mobile devices have high-resolution screens. When they display text, the font size ends up being tiny. A good rule is to create pages with a base font size of at least 16 pixels.
- Touch elements that are too close together. GWT looks for how close your touch elements (links, buttons, and so on) are to one another. Links that are too close to each other can be nearly impossible to tap on a small device. This problem is often caused by a missing viewport meta tag, but if you have a viewport tag and you're still getting this error, you should make the tappable elements on your page larger so that they are easier to touch.