Superfast Website Design

Speedometer on fire

Design For Speed

As website designers, it’s very easy to throw the kitchen sink at a project during the design phase. After all, we all want to design a website which will provide the ultimate ‘wow factor’.

With the ongoing improvements to global network speeds we’re in a position to make good use of additional backend scripts as well as high quality, large graphics for our websites. Recently here, it’s been announced that Milton Keynes is now a gigabit city.

But it’s important to remember that one of the key factors of website design and development is to ensure that our sites are accessible to all users. This can be achieved in various different ways.

A responsive website means that it’s accessible and formatted for all users regardless of which device they’re using. A website that uses Flash for example isn’t 100% accessible because various different devices no longer support the technology. Most notably, the Apple iPhone and iPad.

But just because a website is responsive, it doesn’t mean it’s entirely accessible.

How come? Well, one of the biggest culprits of a site not being completely accessible is due to mistakes made during the design and development phases of a project. We’re going to explore the various reasons why a site may not be completely accessible and look at ways to achieve ‘superfast website design’ by designing for speed.

The Need For Speed

Not every web user has the luxury of a fast network. It’s important to remember these users when designing for the web.

During any design phase, we constantly ask the question: ‘is this element or graphic essential?’. The age old philosophy of, ‘less is more’ can easily be applied to web design. There are various different reasons for this:

  • Improved user experience by allowing content to breathe
  • Improved user interface by allowing white space and elements to flow
  • Clear and concise content hierarchy
  • Not bombarding users with too much information

Not only does stripping back add the above benefits, but it also reduces the overall time it takes for your web pages to be downloaded by first time visitors. If your web pages aren’t loading within 1-6 seconds there is a high chance your visitor will move on and go elsewhere. In fact, lets be precise about this – according to an Akamai study, 47% of users want a site to load in two seconds or less.

“If a site takes so long to load that we can’t even fetch it, then that will affect your rankings because your site is timing out” – Matt Cutts, Google

Site speed is so crucial now, more than ever in website design. So whilst we can discuss the latest web design trends, the one trend that is on top of the majority of web designers is designing for faster sites.

So how do we go about optimising our websites for speed?

Minimalistic Web Design

Apple website on a laptop outdoors

It’s a safe assumption to make that any web designers who test and strive to make sure their clients websites as quick as possible, will be valued and sought after more than those who overlook this.

Now obviously, no designer or clients wants a bare-bones design, it wouldn’t engage your audience. But by designing in a minimalistic way, a site has less elements to load. When there are fewer elements for a browser to load, you automatically increase the speed of your site.

So how us web designers approach website design can be the difference between success and failure. With smart planning in the design phase, everyone can save themselves a lot of trouble – by designing to avoid harmful practices that will affect your site’s performance.

The true principle of minimalistic design can be applied very early on so that users don’t have to wait an age for a site to load from one page to another.

Some examples of minimalistic web design:

  • More white or negative space
  • Shorter web forms
  • Using a hamburger menu instead of your usual top navigation bar
  • Smaller images/graphics
  • Using one font instead of loading various different types of fonts

Understanding Perception

In some cases, and particularly in web design, perception really is reality. Sites which are perceived to be very easy to use don’t always have to be superfast to provide users with high levels of satisfaction or UX (user experience).

Having a website that is fast to load is critical, however the perception of speed and be altered by loading elements when they are required. This is sometimes referred to as ‘lazy loading‘. What this means is that a user doesn’t have to wait for all the elements of a page to load to begin their browsing journey.

An example of this is elements being loaded in the background and in order of the page structure, usually working from top to bottom. So simply put, a user visits a site and the very first elements (above the fold if you like) load almost instantly. Whilst the user scrolls down the page, the following elements are pulled in and become visible. These elements are simply waiting in an orderly queue to be loaded.

After all, there is a high chance that users will not scroll down to a website footer as soon as they arrive. So there is no urgency to have the elements in the footer load as quickly as the site header. This in return will buy time for the website when it comes to loading.

By using smart technology and using smart design, we can increase the perception of performance and make the interface appear faster.

From Design To Development

After a well thought out design has been signed off by the customer, it’s time to develop and build the website. The responsibility of a web developer is not only to build a website which is compatible across all browsers and operating systems, but it’s also to optimise the site for speed.

A web developer must continue where the web designer left off. Open communications should be ongoing between the two and explanations on the thought process behind the design be explained.

By taking care of the code and looking to minimise scripts, load times are reduced

When deadlines are tight and budgets are small, it can be tempting for web developers to take shortcuts. Not in a malicious way you understand, but by using bloated code or scripts which could be easily condensed. By taking care of the code and looking to minimise scripts, load times are reduced.

When a design is handed over to the development team, it’s important that the assets provided have been optimised for the web. So lets take two important elements – graphics and images.

If there is a section on a web page where an image will sit there is very little point in supplying an image which is larger than the space it’s going to fill. Many content management systems will resize an image but the image file size will remain the same. By resizing the images accordingly, you’re not using any more resources than what’s required.

You can go a step further too with your images or graphics. After resizing them you can then look to compress them.

Images size details after compression

There are plenty of useful online compression tools which will compress your images or graphical elements. Some by a huge 40-50% in file size. It makes sense to do this too. If a 1mb image takes for example, 1.0 seconds to load and you manage to compress that file size down to 200kb, that’s 0.8 seconds you have saved. When you have a page containing many images that soon adds up!

Test Your Design

It’s a well know fact that Google loves a fast site. After all, they just want to provide relevant content to users in a quick and timely fashion.

Google also provide tools in order for you to practice what they preach. One of these is the PageSpeed Insights tool. It’s very simple to use. Just type in the URL of the page you wish to test and hit ‘analyze’. Shortly after doing so you will be presented with details on areas of your page which could be improved.

It could be that you’re not using server side compression or that you should try to eliminate render-blocking JavaScript and CSS in above-the-fold content.

Graph showing web page element loading times

GTMetrix too is a great tool to test your site speed. One of the best features of their free service is the Waterfall Chart (pictured above). This will help identify and sort through the loading times of every single element on your website. It could be a single image or script which is the culprit, but at least you’ll know what you need to fix.

Choose A Great Web Host

Finally, even with all the above safely in place you need to back it up with a reliable and speedy web host.

If website speed and server resources are important to you then it’s recommended to try and avoid using shared hosting. Shared hosting means that your website is fighting it out with other sites on the same server for server resources. There will also be restrictions on just how much resource is distributed from the server to each site.

In addition to this, if one of the websites on the server is experiencing high traffic, CPU cycles or being hit by large emails then this will no doubt have an impact your site.

By choosing a dedicated server, be it a physical or virtual server you’re providing your site with resources solely dedicated to your site. Your site isn’t affected by any external influences and you have full control too.

It would also be wise to explore the benefit for using a CDN (content delivery network) as well as using a caching solution on your server. What you will be then providing your website with is the VIP experience! In return, your website will provide your users with a VIP experience too.

Easy to use, pleasant on the eye and loading quickly. Those three factors go a long way towards great web design.

If you found this article interesting, you may want to read out article on why web design isn’t just visual.

If you would like discuss your website performance or you’re planning on a redesign, feel free to drop us a line. Call us on Milton Keynes – 01908 967359.