When designing a website, you may find yourself with the dilemma of having to decide which direction you should take. You can either create a concise, highly informative piece showcasing your specific business or talents, or go all out with a visual spectacular. You can certainly mix these two in varying proportions. However, the underlying principal of which option you or your client prefers is what will determine the start of your project build.
Recently, we were very lucky to have been presented with such a project. We were asked to create a highly visual site where the main focus was purely on the design by the use of a parallax built website. See the final site at the43club.co.uk
Parallax websites have been around for several years now, with each revision getting better than the last. They allow for multiple backgrounds to overlap, rotate and move upon the detection of the scroll movement as a viewer browses the site. The immediate advantage to these sites is that they allow the visual elements on your website to immediately pull in the viewer and engage a reaction and interaction with your work. However, the difficulty we had arose when looking at how we would help improve the SEO and targeted areas of the company. As good as it was creating the visual impact of the site to entice the viewer, the main content, which is why the viewer went there, seemed to be secondary.
So how do you manage the delicate balance between content and design on a website that uses parallax?
The best way is to understand the pros and cons of using this method and then decide where to go from there. Hopefully these comparisons will help you make a decision on how to approach designing a parallax website.
The Pros
– Using parallax will mean all your pages are shown on a ‘single page’, letting users to scroll fluidly between sections in one continuous movement. This not only lets you go all out on the visuals by allowing text and images to overlap into other ‘pages’ but also allows the entire site content to seamlessly converge together as a whole.
– A strong image-filled site can help get you noticed. After all, images are far greater at grabbing attention and provoking a reaction. By using good quality, relevant images, you will not only gain a person’s immediate attention but encourage them to stay on your website. Your site might also encourage social shares. A fantastic example of this instant appeal can be seen on the new kitkat.com site, where although more toned down in its use of images, helps create the right impact to get people talking.
– The creativity you can incorporate into a parallax site can make even a simple website become full of movement and character. This can help get the point across of the particular context you are advertising or describing even if it at first might seem quite ordinary. The website everylastdrop.co.uk does a great job at doing this, advertising the main facts of water use in a fun and informative animation. This is much more beneficial to campaigns to help improve page traffic, increase user duration times and interaction if done correctly and will certainly appeal to a greater demographic of users.
– Having all your content on ‘one-page’ can also help you avoid repetition of content as you focus more on making sure each area only contains the information that it requires and within its dedicated space.
The Cons
– Loading in all the scripts that create the parallax effect, especially if large file images have been used, can create a knock on effect on loading times. Even the best image optimisation and file compression methods will still mean your website on a mobile connection could take a few seconds to load – something that could greatly affect your bounce rates. Remember your mobile users, even those on modern smart phones, as they will not wait long for a site to load.
– Loading times can be excruciatingly slow on mobile devices, especially when using a standard 2G connection, not to mention older devices which will struggle with the overall effect. Deterring your mobile users from having a good experience on their device is not only bad for your business face, but also Google won’t give you any brownie points for a slow loading website – which brings me onto my next point…
SEO
– Having all of your content on one page does not help when trying to optimise and rank for various keywords. This is because the more keywords you are targeting per page, the more diluted and ineffective they become. Also, you do not want to appear to be stuffing too many keywords onto one page. Ideally, you will have pages for each service you offer. If your competitors have this then they already have a step up with bigger keyword sets and several ranking positions in the form of landing pages.
-Loss of page semantics by having page headings and titles all together means, in some cases, you cannot adhere to the standard hierarchy structure. This will not affect the visual look of the site but will certainly cause problems for search engines reading the site. Having all content restricted to the one page limits your points of entry within the World Wide Web. You are also reducing the use of internal links within the site to primary content.
-The most important information of a website is usually held within the home page, where you are trying to describe your business and entice viewers. By using parallax, you may be isolating this content further by allowing the visual design to take over and limit the detail you can include within the main site. This can cause a series of delays to the web build as you rework the design and layout to fit the reworked content, constantly fighting with the content over the design.
So what can you do?
Even though there are cons to the parallax site, there are certainly things you can do to help get around them. Firstly, you can still create the main page site but then also create external pages that you can link to. These house the gritty content the search engines love, but also allow you to go in depth with each area in detail. These pages can be free from the parallax effect but can still be in keeping with the visual theme bringing the pages together, whilst allowing both the visual impact to grab the viewer’s attention. They also provide readers with the detailed content they are there to see.
You do need to be careful though. Taking too much content off the main page can make the site look empty and you do not want to be repeating content across several pages. Also, beware linking back to the main site from these external pages, as each time you go back into the home page, the scripts will have to load again and so the user experience will appear less intuitive than a standard multi page website, deterring some users.
You could also go ahead and create a separate mobile site to prevent a lot of the issues of file sizes. However this again not only will affect the SEO of your website but also the familiarity the user may have with being provided one experience for mobile and one for the desktop, not to mention the additional time it will take to create. One way to fix this is to make sure your parallax site is also responsive. Not a hard task to do but the decision on how many images to use and what size they should be must be decided carefully. This can often bring conflictions between the design that wants to create the full visual impact and the reality of making sure your website is built for everyone and any device.
Ultimately, whichever path you choose, you need to go through the many pros and cons and make a decision based on what your site is for. If you are focusing on a campaign or a low content build, parallax could be a perfect fit for you. However, if you are also intending on going for full SEO as well, there may be some compromises you need to make. As good as having a strong visual impact, if it is not backed up with the searchable content, who is going to find you?