Category Archives: Challenge

grader

Improve Your Website From a Gamification Perspective

A step-by-step guide

Launching a new website can be a challenging and stressful time… we should know! A few weeks ago we relaunched the PAULEY website after a major design upgrade. We’d taken advantage of the latest web technologies to create a more interesting and engaging user experience.

The website looked great, but how did we know it was working? Was it doing the job we needed it to do?

Your website is one of your most important marketing assets. But it can be tricky to figure out whether it’s working as hard as it should be.

As part of the upgrade process we utilised HubSpot’s Website Grader—a free website verification tool, which analyses key metrics to address the performance, mobile responsiveness, SEO and security of your site to make sure it’s reaching your target audience. You could also try Google’s PageSpeed tools, although they’re not quite as user-friendly.

After analysing your website, the tool will return a score out of 100, providing useful information and insights about its overall performance to improve your website. Within a few days, we’d figured out how to bump up our score from 64% to the elusive 100%. And it’s something you can do, too.

Website Grader’s great example of gamified marketing makes the process enjoyable and addictive. Can you score 100%?

Let us take you through a step-by-step guide to how you can maximise your online presence.

1. Improving your site’s performance

This functional assessment of how your site can be improved has the most steps. There are seven key metrics you’ll need to work on:

Page size

This analyses the size of your website’s homepage. In order to achieve a positive score, you must ensure your homepage is less than 3MB in size. We did this by:

  • Removing any redundant code
  • Compressing images\ videos to reduce their file size
  • Avoiding too many custom font files
  • Using a CDN (Content Delivery Network) for such files as jQuery
  • Utilising CSS image sprite technology

Page requests

This looks at the number of HTTP requests your website page is making. In order to score a positive mark and improve your website, you must reduce this number to below 30. We achieved this by:

  • Removing any redundant CSS \ JavaScript files
  • Combining CSS code into 1 single file
  • Combining JavaScript code into 1 or 2 files
  • Utilising CSS image sprite technology

Page speed

This looks at the amount of time it takes to fully render your website (the faster, the better). In order to achieve a positive score, the time taken must be less than 3 seconds. We managed to speed up our website’s load time by:

  • Removing any redundant code
  • Removing any redundant CSS \ JavaScript files
  • Utilising Browser Caching
  • Optimising and compressing all images \ videos to help lower their file size
  • Using services such as FontAwesome to replace some images with their equivalent font icon
  • Compressing any CSS \ JavaScript files

Browser caching

This checks to see if caching has been enabled. By doing this, it enables past visitors of your website to view any previous viewed page again without downloading the images, videos and scripts a second time, or if their Internet connection becomes limited or unavailable. To enable caching, speak to your website hosting company regarding enabling Apache’s mod_expires.c and adjusting the .htaccess file.

Page redirects

This checks that you’re not using any page redirects—a technique used when directing a user from one URL to another. In order to achieve a positive score you must ensure that no page redirects are active, as this will inevitably slow down your page loading time. Therefore any active page redirects should be removed or disabled as soon as possible.

Compression

This checks to see if your CSS and JavaScript files have been compressed. By compressing CSS and JavaScript files you will help reduce their overall file size and thus achieve a faster load time and a reduction in bandwidth consumption. If you’re not comfortable with compressing files yourself, then you’ll find an array of useful online tools, such as JavaScript Compression and CSS Compression.

Render blocking

Render blocking can have a detrimental effect on your website’s loading time, and it’s often the result of CSS and JavaScript code keeping your website from loading quickly. Improve your website by:

  • Combining your CSS \ JavaScript into the least number files possible
  • Putting complex JavaScript files at the bottom of your site
  • Avoiding the use of @import to call CSS files
  • Correctly labelling your CSS files (ie: media=”print”)

Screen Shot 2015-09-08 at 14.23.402. Making your site mobile-friendly

It’s now vital that all websites have a mobile-optimised version, because not doing so could result in your ranking being penalised by search engines such as Google.

But you might need a professional to help you: This process can often demand a high level of time and financial investment, depending on your website’s size and complexity.

Creating a responsive design creates a fluid experience, and allows your website to adapt its layout for a multitude of different device sizes, such as desktops, tablets and smartphones. Responsive sites also avoid the need for a separate tablet and mobile optimised version.

Website grader also looks at the ‘view ports’ metric, which checks for any valid view ports code. This is the method in which the size of your website is controlled by the size of the device you’re viewing it on, such as a desktop, tablet or smartphone. Additionally it allows for better control when showing or hiding particular elements from certain device screen sizes.

3. Getting SEO to work for you

Search Engine Optimisation is a poorly understood area, but Website Grader breaks it down into four metrics to make it more approachable:

Page titles

Page titles are vitally important coding tags which are used to display the current page name in your web browser, and used by search engines when rendering search results. Page titles should always be unique, under 70 characters long, and should directly describe the page being viewed.

META description

Hidden within the code, META descriptions explain the content of the page being viewed, and help search engines and other external services to gain a better understanding of what they’re looking at. META descriptions should be no more than 155 characters long, and with a small amount of coding experience, META descriptions can easily be added into a page to improve your website.

Headings

This checks that your website is correctly utilising heading tags (H1, H2), which are used to describe the sections of your website’s page. If your score is showing in the red, then it’s necessary to check you’re using heading tags in the correct manner.

Sitemap

An XML sitemap can help search engines index and understand your website better. Therefore, if your score is showing in the red, try introducing an XML sitemap. Ideally a Sitemap should be generated manually for better control, but there are several external services that can attempt to automatically generate the sitemap for you.

4. Securing your site

This one’s easy, but simple solutions don’t come for free!

A Security Certificate, also known as a SSL Certificate (Secure Sockets Layer) helps to protect your website from security attacks by encrypting communications between the user and website server. It also creates trust with your website users by demonstrating you’re a verified website and a trusted source.

Typically, security certificates can be obtained directly from your website hosting company, and generally cost less than $100 to purchase and install.

Conclusions

We challenge you to get 100% for your organisation’s website!

We love Website Grader’s clear visuals and gamified marketing—exactly the kind of approach we use in our eLearning and Digital Sales programs to encourage trainees and pull in buyers.

And if you still need help with how to improve your website, then we’d be happy to assist. Good luck!

Share

DAYTONA PROPERTY PROKART CHALLENGE!



F
riday 17th September saw Daytona International host the annual Property Prokart Challenge and 2010 was the 13th year at the Milton Keynes Circuit, where they house the infamous Formula 1 Pit Stop Challenge adding to the drama and excitement amongst the races.

The Property Industry Professionals geared themselves up during the 2 hour Qualifier, separating the men from the boys! to then fight it out over the 6 hour endurance race, which was run on Daytona’s new fleet of ProKarts which performed flawlessly on the day.

Holding their own with the hard hitting pro’s were the team at Pauley Interactive and in their first year participating, achieved a modest 25 seconds at the Pit Stop Challenge (18 seconds being the quickest) and coming an impressive 11th out of the 24 teams attending, after starting 18th.

A highlight during the year for the Property Moguls as a fun, friendly, competition and industry gathering enjoyed by all. Group team and individual images courtesy of the in-house photographer at Pauley Interactive, can be downloaded at http://www.pauley-interactive.co.uk/Property-ProKart-Challenge-2010/Property_ProKart_Challenge_2010.html

Share