As you continue to scroll, you see that the bike also has a title, which describes what type of rider you might be. Let’s walk through an example of a well-done parallax site, Cyclemon that takes mobile into consideration.Īs you scroll down, the image above changes the image of the bike and it’s not especially slow to load.Īs you begin to scroll down, a bike appears. Featuring all the content on a single page certainly doesn’t help site speeds either. Parallax’s heavy JavaScript use can increase load times, which wreaks havoc on mobile users. Other downsides are speed and mobile-friendliness. Parallax Can Be Slow and Isn’t Mobile Friendly The SEO experts at Moz have written an extensive article on other workarounds, including Kevin Ellen’s jQuery solution, if you want to dive deeper into the specifics around SEO and parallax. It’s never a bad idea to target a single keyword in your H1 header and body paragraphs. Kevin Ellen, of iProspect, has an excellent tutorial on how to implement a jQuery solution. You can use jQuery to slice up a page into different sections with different URLs (for search engine indexing). Use jQuery to divide content for search engines.In her article, Lindsay recommends using parallax in specific areas on your pages to illustrate smaller stories rather than larger narratives. Add parallax to selective parts of your pages.Image Source: Flat Design vs Realism 2013īut there are a few ways around this. Having content spread across more pages gives your site more search engine visibility. That means search engines – like Google – will only index that single page. Lindsay Kolowich in her Hubspot article “ Is Parallax to Blame for Poor SEO?” says that the dent to SEO comes from placing an entire site on one URL - something that parallax scrolling encourages. Parallax and SEO Don’t Usually MixĪs described in the free e-book Web UI Best Practices, parallax can come at an expense – your site’s search engine optimization. When it comes to parallax, you must consider multiple factors ranging from SEO to usability best practices. However, that raises the question: do they actually deliver a good UX? Sites such as “ The Boat” by Nam Lee use parallax as a narrative device. As Jacqueline Kyo Thomas points out in her excellent UX Matters article on the subject, “Parallax scrolling is very effective in guided storytelling.” In other words, you can help sell your products or services through a scrolling storybook. Having both the foreground and background content scroll at different speeds creates an illusion of depth. In this piece, we’ll explain a few things you must consider if you want this technique to work for you. One technique that’s taken hold in recent years is parallax scrolling - a visual effect that adds the illusion of depth to your site. Skeuomorphism gives way to flat, and flat gives way to … something in between.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |