Google’s New Responsive Design Algorithm Changes: What Does Responsive Mean for Your Site and Rank?

If you keep up with the latest Google algorithm changes, you’ve probably heard about the announcement on mobile design. Google recently announced that it will use mobile usability as a factor for its website ranking. This means that your website could be affected if you don’t have a responsive or mobile-friendly design. Website designers are familiar with what it takes to make a site mobile, but this article highlights what webmasters need to know if they don’t have responsive design experience.

What is Responsive Design?

Responsive design automatically formats and lays out elements of your web page dependent on the user’s screen size. In the old days of web design, webmasters had to create pages that fit large desktop monitors. These desktop monitors gradually became larger, so webmasters were able to create wider and larger layouts. Broadband also became available, so webmasters could create large images without worrying about the user’s download speed.

The opposite is happening with website design trends. Users are moving towards smartphones and tablets as a means of browsing the web. Sure, desktops are still used, but these smaller devices are quickly becoming the predominant form of browsing. If your website uses large image files and designs based only on desktop users, mobile users will have difficulties using your site. Frustrated users mean a loss in sales, and now Google has announced that its bots will detect sites that aren’t mobile friendly.

With responsive design, your site layout maneuvers to different areas of the screen based on the mobile device’s screen size. In other words, the same layout fits a smartphone, a tablet, and a regular desktop monitor.

The basis of responsive web design is CSS3. CSS3 is the latest version of cascading style sheets. CSS is the de facto in website design. All of your font styles, layouts, colors, and images are controlled by CSS. CSS3 offers a new type of action called media queries. Media queries detect the user’s screen size and lay out the website design accordingly. Media queries are only available with CSS3, so if your site doesn’t use the latest style sheet version, you won’t be able to work with responsive website designs.

HTML5 is usually integrated with CSS3, although it’s not a requirement to work with responsive designs. HTML5 makes it easier to work with media. The latest HTML version uses new tags such as video and audio that make it easier to create media-rich website designs.

Another issue with smaller screens and mobile devices is bandwidth. Although mobile devices have advanced in hardware and software, bandwidth is still very limited on mobile devices. Also, mobile device users still pay for data and most smartphone plans don’t offer unlimited data. Even companies that claim to offer unlimited data start to throttle users who take up too much data usage each month.

Limited bandwidth means you must consider the size of your website files. Images are usually the most difficult for webmasters to streamline. Reduce the size of old image formats and the quality of the image suffers. You won’t be able to avoid image quality reductions when you work with .jpg or .gif files, but you can create vector images to guarantee quality with any image size. With vector images, you can resize the file to a larger or smaller image size without losing its quality. Vector images usually have an .svg file extension, although there are others that you can work with.

The rule of thumb when working with responsive designs is to always work with the smallest screen first, and then lay out your website design for increasingly larger screens until you reach the biggest desktop monitor you want to support. You can limit the screen sizes you support, but tablets and smartphone manufacturers continue to change screen sizes to compete. For instance, the Apple iPhone used to have only one size for each new version, but Apple released two screen size options with its latest iPhone 6. The same can be said about tablets. Tablet manufacturers offer a variety of sizes that you’ll need to consider when you work with mobile website design.

Do You Have Any Other Options?

You do have options other than responsive website design. Responsive designs are the preference of most website designers, but the other option is a mobile version hosted on a dedicated subdomain. This type of site is called an “m site.” An “m site” gets its name from the common subdomain used. Most website owners put a separate mobile site on a subdomain such as “m.mydomain.com.” The “m” indicates to users that the subdomain is a mobile version of the main desktop website. An m site was the original method of serving mobile content to mobile devices, but then CSS3 and media queries offered responsive design.

If you choose an m site, you’ll need to work with an entirely separate solution from your main desktop site. M sites also work heavily with canonical tags. Canonical tags indicate to search engine bots that two pages are identical and one of them is your preference. Canonical tags are used similarly for m sites and desktop pages. For instance, suppose you have a sales page selling widgets on a desktop app and a separate page selling the same widgets on a mobile subdomain. The canonical tag indicates to the bots that the mobile page is the same as the desktop page.  Google also uses the “rel” element to link mobile and desktop versions. The “rel” element points the bots to the alternative mobile page related to the desktop page. Working with these two tags can get confusing, and webmasters can easily make mistakes. This is another reason why responsive design is preferred over separate m sites.

Are There Any Other Considerations?

Search engine rank is always a priority concern for webmasters when they release a new design. No one can guarantee that you’ll keep your existing search engine rank. Most people see a bit of a dip in ranking, and then it returns to where it was before the new design changes.

It’s also important to test your changes before they go live. Any errors can severely hurt your search engine ranking and sales, so have a tester go through the site and give you feedback. You never want your coder to also do testing. Coders know how the site works and often don’t find errors that your users will find. It’s best to have a third-party tester ensure that all parts of your site are working properly.

With the right designer and a little bit of patience, you can have a great mobile site. With Google making changes to its algorithm, you’ll need to consider mobile site design if you haven’t already. Just a loss of one place in search engine rank can greatly affect your sales and income.