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.
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.
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.
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.
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 ?>
<?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
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.
I used the following plugins (annotated with reasons)
- Askimet (Standard Plugin)
- Ultimate Coming Soon Page (By http://seedprod.com/)
- WordPress SEO by Yoast – http://yoast.com/wordpress/seo/ (Well of course)
- Authorsure (Rich Snippets for Google+ Authors) http://www.authorsure.com/
- TIP: I Made sure all my new and existing email addresses worked with http://en.gravatar.com/
- Cookie Control – http://civicuk.com/cookie-law/index (Ticking the box)
- Mobile theme switcher – http://www.jeremyarntz.com/ – This what enables you to have different themes based on three standard mobile devices.
- Contact Form 7 – http://contactform7.com/(Well people need to contact me.)
- Really Simple Capthca – http://ideasilo.wordpress.com/2009/03/14/really-simple-captcha/ (Integrates with Contact Form 7)
- Disqus Comment System – http://disqus.com/ (Looked at a good number of comment systems, I choose this one)
- After the deadline – http://www.afterthedeadline.com/ (I have really bad spelling so though this would be good to implement. (This is actually part of Jet Pack)
- Jet Pack – It connect with many of the plugin available on wordpress.com (Not used it before but the reviews are all good.)
- Most Shared Post – by Tom Anthony http://www.tomanthony.co.uk/wordpress-plugins/most-shared-posts/
- Sharebar – The standard sharing bar for posts etc, http://devgrow.com/sharebar-wordpress-plugin/
- Had to add in linkedin and Google plus buttons manually tutorial via http://www.internoetics.com/
- Fancier Author Box – http://wordpress.org/extend/plugins/fancier-author-box/I just wanted any authors on the blog to get a little extra.
- I did have to remove the standard author box code from the applicable template.
- Hyper Cache – http://www.satollo.net/plugins/hyper-cache – WordPress cache for system improvement and to save resources.
- DB Cache Reloaded – http://www.poradnik-webmastera.com/projekty/db_cache_reloaded/ – WordPress cache of database queries
- Add link to facebook – This actually creates a facebook app where your posts are automatically posted to your facebook company wall!
- Social Metrics - http://www.riyaz.net/ Lets you see stats on all your posts in the admin system in terms of Social Metrics.
- Smushit - http://dialect.ca/code/wp-smushit/ – A quick way of reducing image file sizes.
- WordPress DB back up - http://austinmatzko.com/wordpress-plugins/wp-db-backup/ – I would be a fool not to install this.
- Wp greet Box - http://omninoggin.com/projects/wordpress-plugins/wp-greet-box-wordpress-plugin/ – Puts a dynamic message based on referrer.
- Google Sitemaps generator - http://www.arnebrachhold.de/redir/sitemap-home/ – This should be standard in WordPress (It’s in my standard list.)
- Bullet Proof Security – http://www.ait-pro.com/ – Security should always be on your mind.
- Broken Link Checker - http://w-shadow.com/ – Make sure your no longer linking to somthing which isn’t there, also stop search engines indexing broken links.
- SEO Ultimate – http://wordpress.org/extend/plugins/seo-ultimate/ – This is quite a good plugin, i did however disable the title and meta description modules as I prefer what you get with yoasts plugin.
- Comprehensive Google Maps Plugin – http://initbinder.com/comprehensive-google-map-plugin – this is to simple show locations easliy via Google Maps
- Auto Tweet Plugin – http://www.zpetneodkazy-linkbuilding.com/ – This creates a twitter app for your website and automatically tweets your new posts.
- Google Analytics
- Google Webmaster Tools
- Bing Webmaster Tools
- 0844 Telephone number for the website from http://www.relaxtelecom.co.uk/ (Can get XML file and call lists)
I added following ping services a total of 72 – Download File – (I’m not going to list them all here.)
I also added a list of blacklist comment words (There is probably a lot more, but this is the initial list). – Download file.
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
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:
- Created Google Places Listing – Awaiting Confirmation
- Created Google Plus Company Page: https://plus.google.com/103115175654391695025/
- Created Facebook Page: http://www.facebook.com/QuaeroMedia
- Created Linkedin Page: http://www.linkedin.com/company/quaero-media
- Created Twitter: https://twitter.com/#!/quaeromedia
- Created Foursquare: – Awaiting Confirmation
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.
Latest posts by Neil Walker (see all)
- 16 Ways to visualise back links - July 10, 2012
- Unnatural links Warning -State of Search – WebmasterradioFM - July 9, 2012
- WordPress Parallax Scrolling Website – Quaero Media Goes Live! - July 4, 2012