WordPress Parallax Scrolling Website – Quaero Media Goes Live!

After 18 months as being a consultant I have re-branded my consultancy into an overall Agency of “Quaero Media”. The first point of call is getting clients on board but this require more than just my personal name and brand and of course required the development of a company website.

Being different

Rather than just a standard website, I wanted to and felt needed to create a site which stands out but also is built from a strong technical SEO point, so I decided to build a Parallax scrolling website with a community blog attached. If you like parallax websites there are some really good ones like Mario Kart Wii sites like this gave me inspiration to try something a little different.

The Design:

I am not a designer but yet I have worked with many designers and developers over the years, I wouldn’t consider myself to a coder if I was sat in a room full of programmers but yet I can piece together code to perform what I require, I also understand the logic previously working in C+, HTML and then PHP but also being a CTO for a listed company in my previous capacity means I’ve had to be aware of technical specifications in a lot of diverse areas, but to make my life easier I initially purchase a template which I could customise to reduce work load.

Some Background:

So I wanted to use a parallax design, however a one page website is not the best solution for SEO, so I created the blog outside of the parallax framework. (Note: The whole site is created in WordPress). What next created a problem is that for anyone that saw my SMX London presentation on Mobile Trends, Apps and Landing pages (with Rob Kerry and Andy Atkins Kruger) will know I made the statement that “Approximately 20% of your traffic now comes from a mobile device” so I needed to make sure the new company site could be viewed on tablets and smart phones something which parallax websites don’t do very well.

Creating the website:

I’m going to be very transparent and tell you how I created the site, what resources I used, what I had to change to my pages to get the Parallax affect to work in WordPress but also what I did to get the site up and running in fashion which I could take any criticisms on board but know that I implemented a lot of the points which I would advise in my services to other companies.

Themes:

The website consist of two and half primary themes, you might be thinking how do you have half a theme? It’s because there is one main theme which runs the desktop version of the website which I have created a specific template (The front page) which uses a separate styles sheet and few pieces of code to pull in each single WordPress page into the one page site.

I carried out the standard work to choose a static page for my home page and the blog page.

I then used the following code so that I can pull in each actual single page I created in the WordPress admin into one single page template:

Code to display a page outside of WordPress:

I had to add the standard WordPress header code and then the following:

The Page Title:

<?php $page_id = 164; $page_data = get_page( $page_id ); echo ‘<h2><stong>’. $page_data->post_title .’</strong></h2>’;// echo the title ?>

The content:

<?php $page_id = 164; $page_data = get_page( $page_id ); echo apply_filters(‘the_content’, $page_data->post_content); ?>

Where ID equals the actual page ID, I repeated this ten times so my home page is actually ten pages.

What about duplicate content of those pages? And what about mobile devices?

To get around the mobile device issue I installed the “Mobile theme switcher” plugin (Link in resources); this enabled me to use a second theme for anyone coming to the site from a mobile device.

I used a an adaptive design for the second theme; this means once someone uses the site from a mobile device the whole design adapts to the screen size, the advantage:

  • My site can be seen on virtually all mobile devices and is usable
  • There is no duplication of content as they are all the same URLs

Desktop Version:

Ipad Version:

Iphone Version:

You will however notice that the pages I did create into one single entity for the desktop version are now the menu; so surely this could give some form of duplicate content? I did this because on a mobile you don’t really want all that information on one page, so the unique pages are all accessible from a mobile device I however did no index them and put the canonical as http://quaeromedia.com – thus removing any issues from this scenario.

The other change I had to make to the second theme (For mobile devices) was to remove the dynamic menu and sidebar widgets, this as it simply conflicted with widgets in the desktop theme.

WordPress Setup:

I used the following plugins (annotated with reasons)

Plugins:

Implemented Tracking:

WordPress Settings:

Writing:

I added following ping services a total of 72 – Download File – (I’m not going to list them all here.)

Discussion:

I also added a list of blacklist comment words (There is probably a lot more, but this is the initial list). – Download file.

Permalinks:

For my permalink structure I used:

  • Custom Structure of: /%category%/%postname%-%post_id%.html

This was because I like an organised structure of URLs by Folder, I can also identify posts easily because they will contain .html

Page Speed:

Well its not excatly going to put me a no.1 position if i have a good page speed, but i think it is important to make sure your website is fast on loading, so using firebug for firefox with the Google Pagespeed addon, i simply went through the site to see what changes I could make.

So could be better, but from a personal perspective 90 is a good score and I feel I can benefit my time else where than making this number greater.

What else I did:

For me putting a new website live is not just about the website, you have to consider the social entities which are part of your website family; so I created:

Final Checks:

I think it is important that you check cross browser compatability, however there are so many I have checked Quaero Media works on the following and then will analyse anaytics.

  • Firefox 11.0
  • Google Chrome 20.0.1132.47
  • Internet Explorer 9
  • Ipad 1 – Safari
  • Iphone 4s – Safari

On to the future

We would love to hear you thoughts on our new website, if there was something you would have done differently, if you like / dislike the site, is there any plugins you think we should have used.

Thanks for Reading and welcome to Quaero Media.

The following two tabs change content below.
With 10 years+ industry experience in Search Neil has carried out strategies across Retail, Financial, Health, Travel and Gambling Verticals across markets from the UK, Ireland, France, Italy and Sweden he is well versed and shares these experiences internationally in his blogs, talks and seminars.
This entry was posted in Development, News. Bookmark the permalink.

 

  • http://pageslab.com/ The Rising Page

    I Love the site.
    How exactly did you create it in WordPress.

    Been scouring the internet looking for a way to implement Parallax scrolling on a couple of pages on my website, but I am coming up short.

    Help!