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.

    

  

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.

    

  

Quick Buzz - What is Responsive Design?

How often do you use your smartphone or tablet to access a website? And how often is that website compatible with the device your using to view it?

Since the craze of the iPhone, Android phones and tablet devices began, more and more people have realised that they were losing traffic due to the fact that their website could not be viewed on mobile devices.

Over the years, the way that we view websites has changed massively. Building content was pretty straightforward; you had two browsers, rendering content in a very similar fashion.

Businesses started realising that they had to have a website that was accessible on all platforms, to make  its users time on their site a lot easier, no matter what they visited the site on, whether it be desktop, iPhone or iPad etc.

Ten years on and we had more browsers, more styling techniques, and ultimately, more permutations to design and build for. We not only have multiple browsers to contend with, we also have multiple platforms, with the introduction of tablets and smartphones.

It goes without saying that your site will display on all of the above, but, of course, you want it optimised for your audience. This is where responsive design comes in.

To view more videos, please visit fatBuzz.TV

Here's some examples of the site we've worked on that are now responsive

www.thelustreclinic.com

www.primestaff.co.uk

www.punkroyal.com

If you'd like to know more about responsive design, then please feel free to give Jon, or David a call on 0141 427 0727

If you have found this post interesting there's a chance that other people in your online community will too, please use the share buttons below to tell them about it.  Thank you, it is much appreciated.

Another New Face at fatBuzz

Our client list is ever expanding which meant we were on the lookout for a new web developer - and we have found the guy who fitted the bill!

We would like to introduce you to our newest member of the fatBuzz team - Web Developer, Stuart.

Stuart recently graduated from The University of the West of Scotland with an honours degree in Web and Mobile Development.

He has been designing websites since 2001 and started freelance work in January 2008, but fatBuzz is his first full time position since leaving university.

Stuart specialises in creating usable professional websites using the latest W3C web standards guidelines and best practice accessibility, resulting in semantic and SEO friendly XHTML and CSS.

Stuart brings a wide range of other skills to the fatBuzz web team including; graphic design, information design, XHTML/CSS/PHP, and usability standards.

In his spare time, you'll catch Stuart out fishing down in Dumfries and Galloway or playing his PlayStation.

To find out how Stuart can create a user friendly and aesthetically engaging design, whilst ensuring you have a prominent presence on the web - drop him an email on stuart@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.

A look at Responsive Design

If you’re a regular reader of the fatBuzz blog, you will have worked your way through plenty of content regarding the evolution of social media; how it affects our every day lives, the way it has changed for the better or for worse, as well as updates on some of our clients' progress.

However, rather than focus on social media in today's blog post, one of our web developers, Jon, will share his thoughts on one of the key aspects that differentiates one of our latest web projects - a new website for clothing brand, Punk Royal - from most others. Responsive Design. 

Over the years, the way that we view websites has changed massively. If we go back 20 years to the early 90s, you had one platform (the Personal Computer) in which to view Internet content, through either Microsoft’s Internet Explorer or the Netscape browser, which is essentially now known as Firefox.

Building content was pretty straightforward; you had two browsers, rendering content in a very similar fashion, so what you designed on your home/work machine is what all your customers/followers would see on their machine. It was a simple time to be a web developer

Fast forward ten years to the millennium and things had really progressed. We had more browsers, more styling techniques, and ultimately, more permutations to design and build for. You could say this is where things started to get tricky, to make sure that 100% of your audience would see your site, or more specifically, your content, as you intended them to see it.

If we jump forward to the present day, the number of permutations has increased exponentially. We not only have multiple browsers to contend with, we also have multiple platforms, with the introduction of tablets and smartphones. It goes without saying that your site will display on all of the above, but, of course, you want it optimised for your audience. This is where responsive design comes in.

The main premise of having a responsive site is the ability to have one content management system and one set of content, but essentially a different looking site optimised to whatever device you’re viewing on. Roughly five years ago, we did have the option of creating mobile specific sites, but generally, this required having two separate sites, separate domains with two separate lots of content, which when scaled up, is not at all manageable.

Simply using CSS, we can now change how a user views a site, purely based on the width of the device that they are using. This then allows us to optimise websites for not only mobile devices, but for desktop machines too; a category that Punk Royal falls into, with its maximum width sitting at 1440 pixels, generally considered too big for a standard site brochure site.

However, the main target is still mobile devices. 28% of Internet traffic is from a mobile device and a new smartphone is bought every 2 seconds on eBay! And in 2011, mobile transactions accounted for $241billion worth of sales on online stores[1]. Just think of the customers that you could be missing out on if your site isn’t optimised for their use?

The site will change depending on your device - view it for yourself 

The Punk Royal site was built responsively in conjunction with the Twitter Bootstrap, an HTML/CSS framework that helps to maintain cross browser compatibility, something that is equally essential to ensuring as many people as possible see your site as intended. There are essentially two different ways of building responsively; either with breakpoints or as a fluid site.

A site with breakpoints is pretty self explanatory, in that when the browser width gets to point A, it changes, point B, changes again etc. A fluid site constantly changes width and size as the browser size gets smaller and covers every pixel between the maximum and minimum size. If you drag the browser windows horizontally to as small a size as possible, you will understand what is meant.

Building a site with fluidity is very time consuming and requires a lot of patience but it does create the best result in terms of creating something that will optimize to any screen (in the case of Punk Royal, screens between 320 pixels and 1440 pixels wide).

The key part of the site was the navigation and how to handle this on a mobile browser. When a website has only a handful of links, the need to change the menu is probably minimal, however to future proof things, you need to consider that somewhere in the future, further pages may be added and the menu may evolve. This is why with the Punk Royal site, the menu evolves to a dropdown when viewed on mobile devices, essentially removing any restrictions from the design element.

We (well, I...) look at the Punk Royal site most days with pride in what we’ve created, and probably spend a bit too much time moving the browser back and forth to watch the elements morph into their new home. If you didn’t before, you really need to try it!

Hopefully you have something to think about regarding the importance of responsive design and the need to meet as much of your target audience as possible. Remember to have a look at the new Punk Royal website, on either your desktop, tablet or mobile device, and let us know what you think!

If you want to discuss responsive design further, or indeed any aspect of web design or development, just give myself or David a call on 0141 427 0727.

[1] http://mobilewebrockstar.com/13-killer-mobile-web-usage-statistics/