Optimising your website speed: be a cheetah, not a snail.

    

  

The prominence of smartphones has allowed people access to content on-the-go like never before, with information literally at the tip of their fingers.

Search engines and social networks have opened up a plethora of information to us, whilst Google Earth and Apple Maps allow us to go anywhere in the world from the comfort of our own homes.

However, we live in an ever increasingly impatient era. People want all of this information yesterday and don’t want to wait around for a page to load. Although I reference Google, Apple and social media platforms, these issues still apply to your website.

The average user will spend 10-20 seconds on a new website, and included in that 10-20 seconds is the time waiting for the page to load. So if a page takes, say 5 seconds to load, you’re really only being left with 5-15 seconds to capture their attention. Double that load time and you’re undoubtedly reducing the likelihood of a user engaging with your content. Yahoo estimate that as little as 400ms increase in load time can result in a drop of traffic between 5-9%.

At this point, a few things should be cleared up. If a user has an abnormally slow or outdated internet connection, there is not an awful lot you can do to compensate for that. If somebody is still on a dial up connection, it’s not your responsibility to cater for someone using vastly outdated technology. It wouldn’t make business sense to reduce the impact of your site content for the sake of a tiny section of the market.

Secondly, if you’re about to test the load times of your own website, then remember to clear your cache on your web browser, otherwise components will already have been pre-loaded, which will give you a false reading.

Ways to speed up your website
There are many different options when it comes to decreasing the load times of your site, some of which are inexpensive (and sometimes free), others which can be costly depending on how far you wish to go in improving speeds. I’ll start with the least expensive.

Content
The main building blocks for your site is what a visiting user will read and interact with. Generally speaking, text will impact on load times very little. Whether it’s a paragraph or 50, the load times will be rarely noticeable.

What can impact on load times is the inclusion of images and how your site is styled. Images are great and it’s a fact that inclusion of images improves engagement. However, there’s no need to have a super hi-resolution picture in your blog post or pages (unless of course it’s relevant to your industry) and using tools such as Photoshop (paid) or the GIMP (free) you can reduce the file size of an image while trying to maintain an acceptable quality. It should be noted, in almost all cases there’s no way of reducing file size yet improving quality!

Videos are again, good for engagement, but always let the user decide if they want to play them or not. If you’re embedding something from Youtube or Vimeo, don’t set them to autoplay as it’s just another resource that’s being used up while the user tries to navigate around your site.

Hosting
This may seem obvious, but make sure that your existing hosting can support everything that your site requires. If you have a lot of concurrent activity and processes going on (i.e a booking system, a complex search facility, an online store, a live chat system), make sure that you're meeting the minimal requirements for any system.

Remember that all of your web traffic are sharing these resources, so it's always best to overcompensate in this department in the event that you get a large number of visitors at the same time.

Caching Software
What is caching? In a web sense, it’s a mechanism for the temporary storage of web documents to increase performance. Almost all web browsers perform this by downloading images and styles to your local machine, so that when you access a site again, it loads quicker.

At fatBuzz, we look to add server side caching wherever possible. What this means is the caching is shared between the browser and the server, increasing performance on the machine itself and balancing the load on both sides. This can mean less requests from the user to the server, as some of the content isn’t being downloaded, which will improve load times.

This is not something that I intend to go into in great detail, as it can be quite a complex system that if setup incorrectly, can cause more problems than it will solve, but if you do wish to discuss this with any of the web team at fatBuzz, give us a call on 0141 427 0727.

Content Distribution Networks
When a user is accessing your website, they’re connecting directly to the server that your site is hosted on. If that user is in the UK and your server is in the USA, then the load time will be increased compared to a US user, purely due to physical distance between the two points. A CDN alleviates this problem.

A copy of your site is distributed to various servers throughout the world, so that when people are accessing your content, they’re not having to cross several continents and then back again to read what you have to say. This can be a more costly method, as in all likelihood it will require a subscription with a CDN provider such as Amazon, Cloudflare or MaxCDN. I’d advise this setup for anyone that is providing a service that goes beyond your local area.

Finding ways to improve the speed of your site is something that should always be pursued, and when teamed up with quality content and stunning design, it completes the package to help pull people into your website. Google have also started ranking sites based on speed of delivery, so it can also make a difference in that push up the google rankings.

I've only touched on a few of the issues here, so If you have any questions about your site and what we can do to help improve it, or any other related issues, please get in touch by e-mailing jon@fatbuzz.com

If you have found this post interesting please share it with your online community using either the Twitter, Facebook and Share buttons below. Thank You.

    

  

Work Experience Student Shows Hunger for Success

    

  

For the past four days, the fatBuzz team have been privileged to have Lex Moore, a fifteen year old pupil from Wellington School, in the office on work experience.

From social media marketing and video production, to web design and development, Lex has been involved in every aspect of the business.

But rather than us telling you what she’s been up to, we thought we would let Lex do the honour.

On the Tuesday when I arrived here, I spent the morning learning about what fatBuzz does and spent time delving further into social media.

After this, I began to write a blog post about a subject I personally like a lot called The Hunger Games. I wrote two separate articles, one about my favourite character, and the other about why I love The Hunger Games so much. (You can read Lex's blog posts HERE). 

It was interesting and I had fun testing myself on how to write in a way suited to the Internet. I enjoyed the writing aspect a lot.

On the Wednesday while I was here, I had the opportunity to go with Malcolm to film a piece of footage for a company and see how the system works. Later in the day, I set up my own blog using WordPress and was able to personalise it by choosing my own theme.

I also looked over coding using CodeAcademy which helped me learn about coding after I had only touched on it at school.

After lunch I also had a look at Photoshop and was able to edit a header for my blog with David. I learned how to use some simple aspects of Photoshop as I had never used it before.

On Thursday, I went over the blog posts I had written two days previously and edited them quickly to fit my blog.

After this I filmed a couple of videos, one being about my time here at fatBuzz, which you can view above. I edited the video after which was fun, and gave me a view on some editing skills and how to make a video look good.

After adding music and photos into the video we uploaded it to Vimeo. Later on in the day, Joanna and I put my previously written posts onto my blog and added hyperlinks for each post.

We then added my video I recorded about The Hunger Games into my second post. After learning this, WordPress seemed a lot easier to use, and I will definitely be continuing with my blog.

We certainly hope Lex will be continuing with her blog, because she is a terrific writer with undoubted ability. We have no doubt that she is well on her way to achieving her dreams of being a writer or journalist.

You never know, she might even end up working right here at fatBuzz...

If you have found this post interesting please share it with your online community using either the Twitter, Facebook and Share buttons below. Thank you.

    

  

Dean's: A Short and Sweet Process

    

  

As you may have noticed in various media outlets including The Drum and The Scotsman earlier this year, fatBuzz was enlisted to design and develop a brand-new website and online store for global shortbread brand, Dean's.

Last week, after less than three months of hard work and dedication, we were delighted to launch a site that is not only modern and visually appealing, but one which also maintains Dean's traditional heritage and identity.

One of our main aims when building the new Dean's site was to simplify the process for the admin staff and remove confusion for the customer.

Prior to launch, the site was split into three elements: content about the company, the shop, and the blog. The main issue was that each of these parts were completely different in look and feel, not to mention they each had separate domain names.

The old Dean's website: leading to inconsistent pages and sections

We wanted users to be able to land on any part of the site and navigate seamlessly from the main content to the online shop to the latest news section, all while having a consistent navigation.

It was also very important that Dean's personnel could log in to one central location that would give them control over all elements of the site; something that we've managed to achieve with great success.

Stand out from the competition

Before beginning our design process, we looked at the analytics on the previous site and noticed a considerable amount of traffic from mobile devices and from older desktop machines.

So, in order to cater for the right markets, we had to make it responsive and ensure cross-browser compatibility as much as possible.

Not only that, we had to ensure that the site was scalable; whether we had 1 product or 1000 products, the site should feel just as approachable and manageable.

Design - Meetings, moodboards and meticulous planning

The brand-new Dean's homepage

With all these ideas in mind, the design process began by having a meeting amongst ourselves and meticulously examining the good and bad parts of the existing site, which gave us an idea of what to keep and what to improve on.

From there, we created wireframes of the site, so that we had an idea as to what the customer journey would look like. Having created some moodboards to help express our ideas and vision for the site, we presented a considerable number of different designs, which varied in colour, element size and position - once this was approved, work commenced on building the site.

Development, details and devices

Looking at the site, there are subtle details such as using different graphics for mobile devices compared to the desktop equivalent, but regardless of which device you're using, you won't miss any of the key content.

Once the core site was complete, we integrated the ecommerce side of the business, and started to build the responsive element.

Online store: Full range launching on 20th November

Testing the site then involved dummy purchases, awkwardly sized images, extra-long blog titles, poor networking conditions, and most importantly, feedback from Dean's.

Finally, we moved the test site onto the live server, which involved some more testing to ensure that all elements were still working as expected.

From an SEO perspective, we made sure that old links were being permanently redirected to their new site equivalent, which ensures that all the work put into Dean's SEO to date won't be diminished.

Now that the site was completed, it was time to let people know about it. As we're sure most of you will already know, we have worked with Dean's on their social media management for the past two years - so we of course utilised social media.

Facebook graphic for Dean's competition

However, rather than physically running the competition on Facebook or Twitter, we decided instead to run it on the website to drive traffic - thus far, we have received almost 3000 entries!

Thankfully, all the hours of hard work from both sides has thoroughly paid off, and we're sure you'll agree that the new website looks absolutely fantastic.

Please feel free to have a look around the site, and give us your feedback by either commenting on this blog post, or by getting in touch on Facebook, Twitter or LinkedIn.

And don't forget to enter the competition to win a delicious Dean's hamper - just in time for Christmas!

If you have found this post interesting please share it with your online community using either the Twitter, Facebook and Share buttons below. Thank you.

    

  

Flat design, your target market and making your site more accessible

It has become something of a taboo subject in design recently: everyone is talking about it, Apple have designed their latest mobile operating system around it, and new websites are popping up every day utilising it (some doing it very well, others not so much). The subject, of course, is flat design.

At this point, we should probably give you a rough overview of what flat design is. No longer do we have thick gradients, heavy shadows and the idea of objects jumping off the screen, and gone are the faux leather books, mock notepads and glossy bubbles. All of this falls under the category of skeuomorphism, which in simplistic terms, is the anti-flat design.

With flat design, we’re treated to block colours, subtle to-the-point-of-being-almost-unnoticeable gradients, no shadows anywhere to be seen (unless necessary to give text a faint definition) and an emphasis on text and imagery to convey the user message.

So, what is our opinion on flat design? We asked fatBuzz web developer and former Apple employee, Jon Mills, the self-confessed loather of skeuomorphism for his (slightly biased) opinion.

Personally, when done well, I love flat design. I think it’s cleaner, easier to navigate and far more appealing to the eye. Equally, a lot of people find it too vibrant, and with the removal of indicators as to what an icon or section denotes, users are finding it difficult to get used to. Ultimately, like any change though, it will take time to adapt.

For me though, there are some understated benefits to flat design, and this was particularly highlighted by one particular client’s requirements.

At fatBuzz, we are managing a site for Superior Homes, a property developer in Kenya (where the infrastructure is still in its infancy regarding internet connections) so we’ve had to ensure that we can deliver certain content at a relatively low file size, so that it can be viewed on a Kenyan connection in reasonable time.

The same can also be said for mobile sites, which will sometimes be accessed on a mobile network that won’t always have the rapid speeds we’re used to here in the UK.

Flat design can help complement both these scenarios, by ridding itself of the code and images required to create a skeuomorphic environment.

For example, a flat designed pink block may only take 3 lines of code, whereas the same block with shadows and gradients could take upwards of 20 lines by the time you’re finished covering all browsers (read my blog on browser compatibility).

Extrapolate that into a full site and you could end up adding several hundreds of lines of code, which will of course take that bit longer to load.

When we’re in an industry where everyone wants information yesterday in the palm of their hand, you need to consider ways to achieve this - and improved loading times of 2-3 seconds could make all the difference to the user experience.

Of course, this does pose a few questions to consider about your existing website, and whether it caters for your target audience.

Do you look at the figures to see where in the world people are viewing your site, and do you consider the devices they view them on? Optimising your site is every bit as important as having a presence on the web, and making sure it’s suitable for your clients isn’t something that should be overlooked.

This is a topic that I could write 30 pages about though, so rather than overwhelm you with countless facts and figures, I would invite anyone with questions regarding flat design, their target audience and/or site optimisation, to get in touch with either myself, David or Stuart on 0141 427 0727.

I’ll leave you with a link to the very best of flat design http://fltdsgn.com/ - please let us know which site is your favourite and why by commenting on the blog or on Twitter or Facebook.

If you have found this post interesting please share it with your online community using either the Twitter, Facebook and Share buttons below. Thank you.