More and more sites are using responsive design and parallax effects to provide a more engaging user experience. Both have their benefits—but there’s some confusion around which is which—and how they affect search engine optimization (SEO).
Responsive design refers to a website’s automatic adaptation to the user’s screen size—regardless of device.
The same code base adjusts to desktop, tablet, and smartphone resolutions, changing how navigation displays, how images are sized, and what content appears on the screen.
This approach is preferable to having a separate mobile site in many cases, as it utilizes a single code base—which is more cost effective and easier to maintain. It also provides users with a richer, more flexible experience (mobile site versions typically contain a dramatically reduced subset of content and functionality from the main website).
Finally, responsive design has a positive effect on SEO, as Google and other major search engines now award higher rankings on mobile device search results to sites with an optimized mobile experience (i.e., responsive).
Some examples of responsive websites:
Macy’s, Inc.: http://www.macysinc.com
Bloomingdale’s Jobs: http://www.bloomingdalesjobs.com
The Workshop at Macy’s: http://workshop.macysinc.com/
Boston Globe: http://www.bostonglobe.com
Parallax scrolling is a JQuery technique that creates the appearance of multiple layers of content scrolling at different speeds, often deployed as a single vertical page website with extensive scrolling.
It creates a feeling of movement and depth and can be highly engaging when executed well. This technique is particularly effective in web-based fact books, community reports, and case studies showcasing problems and results.
Some examples of parallax scrolling:
The Nest Energy Partners: https://www.nest.com/energy-partners/
GE Annual Report: http://www.ge.com/ar2011/index.html#!section=letter-to-shareowners
Parallax scrolling can be a terrific way to tell a story, as you can see—but it can also present challenges for search engine optimization, depending on how it’s implemented. Many parallax sites are built as a single-page scrolling site, which dramatically limits the number of keywords and phrases a site can be optimized for. Search engine algorithms assume a single-page site is a less detailed resource, and tend to reduce rankings accordingly. The best solution? Take content that’s important for SEO and separate it out into individual pages. This still allows the use of parallax to tell a story, boosts search results, and provides a great user experience—a great win-win.
Parallax design is a great approach when implemented on a multi-page site, so use this wonderful and exciting technique and still get great SEO results!