Websites with a Heart

Websites and online marketing with heart for your business

• Home
• About us
• Products and Services
• Portfolio
• Articles
• Contact

Efficient websites

An important part of creating an effective site is creating an efficient website. An efficient website is designed with lean code taking up less space on the server where it is hosted. Moreover, every time a website is browsed by a visitor, it is loaded from the server, and the leaner and efficient the code of your website is, the less bandwith it consumes. The less bandwith is used by internet traffic, the less infrastructure is required to cater for this traffic, creating a very green and environmentally friendly website.

In addition, the leaner and more efficient the code of your website is, the faster it loads, creating a great user experience, so it is also user-friendly. Actually all these things are connected;

User-friendly = fast = efficient = accessible

Using efficiency as the guiding principle for the design of your website creates a green and solid basis for your online marketing strategy.

Using CSS

When writing the code of websites, there are many things you can do to make it lean. You can for example use CSS to separate code for how the site looks from the content, such as text and images (the HTML). The beautiful thing is that the user's browser wil cache the CSS file. So instead of lading the same code over and over again with each new page load, the CSS is taken from your browsers' cache. This is lightning fast and of course very efficient. Less bandwidth, quicker loading site. Perfect for everyone.

Neat, semantically structured and validated HTML

It is also important to write neat and (semantically) structured HTML. Both CSS and HTML need to validate. Validation is a process where the code is checked against HTML and CSS standards and seen if it is without errors/mistakes. In other words error-free/correct. Most browsers will still render a website if the code has mistakes in it, but they may show it differently than the webdesigner intended. And in extreme scenarios the page may render completely wrongly, causing the user to get utterly confused and just move on to a different website (your competitor?). Users on the web are impatient. So an effcient site caters for those people. So it's important to have well written code.

Efficient and lean markup

Other things you can do with code is to use the most efficient way of marking things up. For example when naming sections of a page website designers often use things called classes and IDs. On top of this many website designers also use spans to easily create certain effects. This is all good and well, but overusing these things creates bloated code and makes your website slow. And when naming the IDs and classes you can use loooooooooooong names or short names. Shorter is better (although readability for the webdeveloper is also important), because it creates a smaller file.

Make sure everything that browsers look for is there

Another important point to keep in mind when designing efficient websites is to ensure everything that internet browsers are looking for when they load a page is actually there. This prevents errors from being generated and the loading of the website can continue smoothly. A web browser such as Internet Explorer or Firefox for example looks for several types of stylesheets. Stylesheets are files that determine what a website looks like. You can have different stylesheets for different media, for example for viewing a website on the small screen of a mobile phone or a normal computer screen. And you can have a print style sheet for a printer friendly version of your website. If your website uses a lot of colour for example, or big dark blocks, these can look different for the printer friendly version. You can also leave out things that are not needed on a sheet of paper, such as navigation, helping to save ink and paper. Many websites only have a screen stylesheet. The browser looks for the other two, can't find them, takes note of this and moves on without them. No big deal usually, but if all these stylesheets are present there is no error generated and the whole process moves on at an accellerated pace. Two other examples are the robots.txt file and the favicon. The robots file tells search engines which parts of your site they can index. Search bots look for this. If it's not there they generate an error. The favicon is only a small file that is shown at the top of your browser and identifies your brand. If it's not there an error is logged causing a delay. The favicon can be a very small file. The smaller the better without losing quality.

Reducing image file size without losing image quality

Another very important factor in making your website efficient is image size. Several techniques can be used to make image files as small as possible, without losing quality of the image. All this keeps the page lean, makes it load fast, causes less data transfer, less bandwidth consumption, and less hardware for storing an backing up the website needed, which means that less hosting space is needed too. They are all small things, but they do add up. Two webpages, one created by an efficiency conscious website desiger and that does not take these things into account may look and operate in exactly the same way, but the efficient webpage could be 2 or 3 times as small and therefore 2 or 3 times faster than the non-efficient/optimised one. Users experience the difference.

Of course Websites with an heart takes all these points into account when designing, or re-designing your website. Please have a look at our products and services page to see what we can do for you.

Back to top ^

Search Engine Optimisation

A good website is a very valuable marketing asset, but only if people find it. Through search engine optimisation we can increase your website's visibility in search engine results.

Search Engine Optimisation »