Implementing Responsive Design for Mobile Websites

Leveraging the Data-Driven Attribution Model
November 2, 2016
The End of Vine: Considerations for Marketers
November 14, 2016

Implementing Responsive Design for Mobile Websites

Post by Meghan Ryan, Senior SEO Specialist

A large portion of users search for websites on a smartphone or tablet, which is why search engines are placing greater importance on the mobile experience.

Websites with an optimized mobile site are more likely to rank higher than websites with a poor experience, and users are more likely to engage with a brand when the site is easy to use.

Mobile Configuration

Responsive design is the ideal mobile configuration to ensure that a site can be accessed on any device, whether it’s a tablet, smartphone, laptop, etc.; it looks something like this:

Responsive Design Example

Image courtesy of Google

The resolution, orientation, size of images and other on-page elements proportion themselves to fit in any screen size, leading to the most ideal experience on any device.

Google recommends that websites implement responsive design since it eliminates the need for separate pages catering towards different devices. With only one set of pages, search engines have fewer pages to crawl which reduces the risk of duplicate content.

Mobile Best Practices for SEO

Mobile websites should be completely optimized for a fast and easy-to-navigate experience. Consider the following best practices for mobile when implementing responsive design:

Page speed

The greatest drawback to responsive design is the potential site slowness due to heavy CSS use and imagery, which take even longer to load when dealing with slow networks and connectivity issues often experienced on mobile devices. Brands should limit the size of images, minify code, leverage browser caching and reduce redirects.

Don’t block CSS, JavaScript or images

At one time, many mobile devices didn’t support CSS, JavaScript and images, so mobile sites would block one or all three from search engine crawlers. Now, mobile devices don’t really have these issues, and search engines want to be able to see and categorize the same content that users do – so don’t hide it! These elements are also critical to helping search engines understand if a website is responsive or not.

Allow for easy scrolling  

As always, it’s best to place key items and attention grabbing headers at the top of the page, but don’t stress about placing all key content “above the fold.” Mobile devices allow users to easily scroll down the page, making it easy to find content lower on the page.

Don’t use Flash

Flash requires a plugin which may not be available on all users’ phones. To create special effects, brands should use HTML5 which does not require a plugin.

Avoid using pop-ups

Pop-ups can be difficult to close on mobile devices. This frustrating experience will lead to a higher bounce rate.

Design the website for fingers of all sizes 

Touch screen navigation can lead to accidental clicks if your buttons are too big, too small or too tightly packed.

Optimize titles and META descriptions to fit mobile devices

Titles and META descriptions should be as concise as possible to accommodate the smaller screen size. Since the same HTML is served with responsive design, consider the percentage of mobile users versus desktop and prioritize the overall strategy and site-wide preferences accordingly.

Use structured data is great for both desktop and mobile platforms because it highlights data in rich snippets in search results. With limited screen space, a search result with rich snippets stands out even more on mobile than it does on desktop.

Optimize for local search

Any local content should be optimized for mobile search as well as desktop search. This includes standardizing the brand’s name, address and phone number and including the city and state name in the META data.

With more people spending more time browsing the web on their phones and tablets, a website’s mobile design becomes integral to the site’s overall optimization. Mobile optimization incorporates site design, site structure, page speed and accessibility to help deliver the best experience to mobile visitors.

To learn more about responsive design, contact Performics today.

Comments are closed.

Performics Newsletter