Improve the harmony of your website

It used to be that design aesthetics, speed and usability were elements of the internet that lacked the ability to coexist. You might remember the early Internet browser by Netscape, large pixels, minimal colour, slow, clunky, and difficult to navigate, although this could also be to do with the www being a totally new concept. But new source codes have been developed, technology is continually improving and our savviness with the digital and interactive arena have expanded which has seen these 3 elements become more common practice when surfing the net with flat design and responsive websites being the latest in trend and technology.

We were at a presentation the other night with some great web enthusiasts who each spoke for 5 minutes about ‘what they know’. Mario Visic, one of the presenters spoke about why we all need to do our part in creating a faster web. While he covered the whys (he did only have 5 minutes), we thought we’d give you some tips on how you can go about improving the speed of your website, keeping in mind we are creatives so these tips revolve around also creating a great looking user friendly website.

In his presentation Mario pointed out that ‘a 1 second delay in page response can result in 7% reduction in conversions’ (kiss metrics) so when we look at a website that is receiving 50, 000 page views a day, with an average of 3.5 seconds loading time, if you could reduce that by 0.1 second, each day you will save 83 minutes of time. Over a year you will save 21 days of time…as Mario and Will Ferrell from Anchor Man say “kind of a big deal” right, so it makes sense to look at the ways we can help.

If you’re interested in finding out the loading time of your website and and how its speed equates to how long your vistors are waiting, here are a few apps that do just that.

YSlow – Is a tool developed by Yahoo as a way to analyse a websites performance based on rules and metrics they believe affect a websites performance. Initially developed as a plugin for Firefox, it is now compatible with Chrome and Safari.

Google also has an equivalent tool called PageSpeed. The plugin is available for both Chrome and Firefox. The app gives great insights into the performance of your website including User Experience.

Both tools also provide a summary of potential problems and suggestions to fix the issues. These issues mostly relate to script and coding.

Now we’ve got the backend sorted, let’s look at a couple of things that you can take into consideration when creating or refreshing your website to be aesthetically pleasing while keeping in mind the speed in which your site loads. Both play a large part in the retention of visitors to your website.

Considering two of the main visual elements of a website; typography and graphics, here are some tips you can adapt that will help the loading time of your website with out compromising on great design.

Typography 

With more and more web friendly fonts, designers are becoming spoilt for choice, but this doesn’t mean they should be trying to use as many as they can. Keep in mind you want legible content. While there is less control for web as to how our typography and fonts appear than in print there are some important design principles to consider which will enable your site to be easily navigated and also run efficiently.

1. Contrast by using differing font styles but keep to no more that 2-3 font families for maximum visual impact and to prevent slow loading pages
2. Use hierarchy of typography to differentiate between headers and body text to create consistency and balance
3. Use CSS font stacks when developing your website. These are a list of font families that are called upon if the visitor’s computer doesn’t have the font you have chosen.

Graphics

Graphic are one of the biggest culprits to slowing down the loading time of a website, but illustration and photography can have a powerful impact in communicating your visual message. With some careful consideration and preparation before uploading you can greatly reduce slow loading graphics to prevent visitors giving up before anything has appeared.

1. Optimise images for web – There can be a fine balancing act between the image quality and file size but any reduction in kilobytes can influence the rendering of your image. Programs such as Adobe Photoshop allow you to save files for web. Where you have the option to manipulate the image quality and file size and save as a compressed format such as JPG, PNG, or GIF
2. Size your images to the largest width in your template. If an image isn’t intended to exceed 700px  width (for example) in your design, save it to that width rather than scaling on the website.
3. Compressing files is still possible with out a photo editing program like Photoshop check out these sites for an alternative to compressing your images and getting rid of those extra kbs. jpegmini, Smushit

4. With Retina display (high resolution) screens becoming more prevalent, for these users image quality is important. For this, save a separate high res version of the image, the rule of thumb is 200% increase (for example: normal; 300x400px retina; 600x800px). This saves users downloading large images unnecessarily.

The objective of any website should be one that meets the goals of the business as well as that of the user. Aesthetics, speed and usability can greatly affect the way your website performs but with the consideration of these small tips and the perfect balance of these 3 elements we have the ability for both parties to be satisfied and for the experience to be rewarding.

tweet @melanie_miles_ or @hybridxpression

Photo credit: ChrisK4u / Foter / Creative Commons Attribution-NoDerivs 2.0 Generic (CC BY-ND 2.0)