We are a silent and confidential digital media partner exclusively for creative agencies throughout the UK

One of the most important aspects of design is to know your target audience, hence considering the needs of the target users, such as accessibility, layout formatting, and levels of colour and imagery versus text quantity that can be considered as acceptable.

The above points go without question if you wish to create an effective and successful website design that visitors will come back to day after day.

Having worked with creative agencies for some time now, we have seen some fabulous designs right through to their creation and all has been well. However, on occasion, when a design that we receive is predominantly image heavy and difficult to break down, we find that we have to go back to the drawing board with the designers and take a number of steps to make the website more accessible to those users who might not have quite as high speed an internet connection as those more fortunate, or those who are still running older browsers (such as IE 6) which do not properly support transparent PNG images, which are essential to many of the more aesthetically pleasing designs.

So a few things to note when designing a website, to avoid long download times, and which is both backward compatible to the internet browsers of old and future-proofed for the all-singing, all-dancing internet browsers of tomorrow, are as follows:

1. Transparent Images
Transparent images whose display may be affected by the image that it lies upon, should ideally be sat on a solid-colour background, or one that is easily applied to the image itself, so that should the image move in position, the background will not be misaligned.

2. Body backgrounds
Body backgrounds that run left to right or top to bottom of the browser window which encapsulate gradients should be:

i. Vertical and linear, as that way, the image can be cut into a 1 pixel slice which is repeated down the screen, providing for minimal file size and thus download time.

ii. Horizontal and linear can be done, but it requires larger images and thus longer download times.
Also in this case, consider what would happen if the user had an infinitely large screen, what should the user see either side of your website?

iii. Radial gradients on body backgrounds require the full background to be one complete image, causing maximum file size, and thus very slow download times, visitors are unlikely to stick around and wait for each page to load slowly.

3. Fonts are a big issue

i. Sizes must be an absolute pixel size rather than a decimal ‘point’ size, as browsers will not render fonts at fractions of a pixel, it will simply round a floating point number down to its ‘floor’ value and display the text at that size.

ii. Ideally, headings will be fairly consistent across pages to help with SEO and to make CMS administration as user-friendly as possible.

iii. Use standard web fonts for body content (at least)

• We can use ‘cufon’ image replacement to place text in any desired font, but this can be demanding on the client’s machine which is why we often use it for headings, but it shouldn’t be used for body content.
• Looking to CSS3 in the world of web styling, in the not too distant future (hopefully) most browsers will be able to use @font-face to fetch the font that you wish to use to display the text of your website in, but even then, if a user has ‘Clear Type’ turned off (Windows users – especially XP) then the text will be quite unreadable as there is no anti-aliasing.
• The Standard web fonts are: Arial, Arial Black, Tahoma, Trebuchet MS, Georgia, Verdana, Times New Roman, and Palatino Linotype.
  • For size and shape, Helvetica is closest to Arial if designing on a Mac.
• Browser inconsistencies – different browsers and different Operating Systems often have different font weights as standard, meaning that if there is no whitespace for the extended-width text to fall into then the page layout will break.

4. Consider a modular home page – pulling content from the rest of the website as a window for users to find what they are looking for as easily as possible

i. Users are more likely to stay and explore further if they are able to navigate around with ease.

ii. This provides an opportunity to perhaps use imagery with captions and effects to grab attention.

iii. Dynamic content should be included throughout the site if possible, but at a minimum it should be included in the home page of the website for SEO – if there isn’t going to be much updating going on, consider an outsider’s feed to update your website, without it, you aren’t giving anyone a reason to come back to find out anything new!

iv. Interactivities for the user are always attention grabbers, something that requires a users input to give them a unique answer perhaps.

• To help us best understand your vision for the website that you are designing, provide us with the rollover colours, menu effects, active states of links, and any other states that may be involved in transitions.
• A website isn’t a static, flat piece of paper; it’s whatever you want it to be!
• The ideal width of a web page in this current age is 960 pixels.
  • In order to provide an aesthetically pleasing, standardised layout which your users will be able to follow most easily, it is recommended that you use the 960 grid system as a guide for your designs.

A few other points for you to note are:

1. Image Sizes – When sending images to us, the maximum size that we need is the image at the size that it will be appearing as on the site at 72dpi – this will save on large file size transfers between you and us.

2. Ensure style consistency across pages to avoid confusing your users, some designs involve the branding of the company changing from page to page, which may lead to your visitors being unsure of what website it is that they are on.

- You will notice that well defined brand images use the same style of layouts, logos, colours etc throughout all of their materials, from their website to the side of a delivery van.

Finally…

Dont worry too much about remembering this stuff, that’s what we are here for. We can give you all the help and advice you need in designing your web sites and you can send us drafts of your design for review and we will come back to you with suggestions on how to optimise it from a development angle.

We’re always actively managing web development cycles on behalf of our clients on a daily basis, so you can be assured that we know what we are doing, and we keep and eye on all the latest guidelines and recommendations so you don’t have to.