Botanical Gardens

JavaScript Web Developers

Responsive web design (RWD) is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Google’s algorithms should be able to automatically detect this setup if all Googlebot user agents are allowed to crawl the page and its assets (CSS, JavaScript, and images).

Responsive design serves all devices with the same code that adjusts for screen size.

TL;DR

  • Use meta name="viewport" tag to tell the browser how to adjust the content.
  • Check out our Web Fundamentals site for further documentation.

To signal to browsers that your page will adapt to all devices, add a meta tag to the head of the document:

The meta viewport tag gives the browser instructions on how to adjust the dimensions and scaling of the page to the width of the device. When the meta viewport element is absent, mobile browsers default to rendering the page at a desktop screen width (usually about 980px, though this varies across devices). Mobile browsers then try to make the content look better by increasing font sizes and either scaling the content to fit the screen or showing only the part of the content that fits within the screen.

For users, this means that font sizes may have an inconsistent appearance, and users may have to double-tap or pinch-to-zoom in order to be able to see and interact with the content. For Google, we might not judge a page as mobile-friendly because it requires this kind (or type) of interaction on a mobile device.

On the left is a page without a meta viewport specified - the mobile browser therefore assumes desktop width and scales the page to fit the screen, making the content hard to read. On the right is the same page with a viewport specified that matches the device width - the mobile browser doesn't scale the page and the content is readable.

For responsive images, include the picture element.

As a general rule, if your site works in a recent browser such as Google Chrome or Apple Mobile Safari, it would work with our algorithms.

Why responsive design

We recommend using responsive web design because it:

  • Makes it easier for users to share and link to your content with a single URL.
  • Helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages.
  • Requires less engineering time to maintain multiple pages for the same content.
  • Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user agent-based redirection is error-prone and can degrade your site’s user experience (see Pitfalls when detecting user agents" section for details).
  • Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site’s content and keep it appropriately fresh.

If you’re interested in responsive web design, start with our blog post on Webmaster Central and visit the Web Fundamentals site.

Important: Be sure not to block the crawling of any page assets (CSS, JavaScript, and images) for any Googlebot using robots.txt or other methods. Being able to fully access these external files will help our algorithms detect your site's responsive web design configuration and treat it appropriately.Caution:

JavaScript

One part of building mobile-friendly sites that requires careful consideration is the use of JavaScript to alter the rendering and behavior of the site on different devices. Typical uses of JavaScript include deciding which ad or which image resolution variant to show in the page.

This section describes different approaches to using JavaScript and how they relate to Google’s recommendation of using responsive web design.

Common configurations

Three popular implementations of JavaScript for mobile-friendly sites are:

  • JavaScript-adaptive: In this configuration, all devices are served the same HTML, CSS, and JavaScript content. When the JavaScript is executed on the device, the rendering or behavior of the site is altered. If a website requires JavaScript, this is Google’s recommended configuration.
  • Combined detection: In this implementation, the website uses both JavaScript and server-side detection of device capabilities to serve different content to different devices.
  • Dynamically-served JavaScript: In this configuration, all devices are served the same HTML, but the JavaScript is served from a URL that dynamically serves different JavaScript code depending on the device’s user-agent.
Source: developers.google.com
RELATED VIDEO
The Fundamentals of Web Development: JavaScript
The Fundamentals of Web Development: JavaScript
Writing JavaScript in Visual Web Developer Express Edition
Writing JavaScript in Visual Web Developer Express Edition ...
JavaScript for Beginning Web Developers Course | Introduction
JavaScript for Beginning Web Developers Course | Introduction
RELATED FACTS
Share this Post

Related posts

Choosing BI Solution: Tibco Spotfire or Tableau?

Choosing BI Solution: Tibco Spotfire or Tableau?

OCTOBER 23, 2017

Recently Business Intelligence (BI) is gaining increasing importance among successful companies. Business Intelligence allows…

Read More
Google tools for Web developers

Google tools for Web developers

OCTOBER 23, 2017

There are so many potential patterns to follow when a screen size changes the position of specific components—revealing…

Read More