The First Things to Consider When Coding Your Website

When you are at the stage of transferring your design from paper or your imagination to reality, there are a number of important decisions to make. This article identifies these issues and helps you choose the best options.

Before reading this article, make sure you have a clear idea of the whole process of web design, and try to avoid skipping any steps.

Future proofing

You need to start thinking about how to ensure your website is easy to manage from the very beginning of the coding process. This includes making sure it is easy to make future changes to your website without having to start from scratch or change hundreds or thousands of web pages. Think about the benefits of server side processing before any code has been written. If you upgrade later, you could save time by using server side processing now.

Separate design from content

It is essential from the beginning that your website design is separate from your content. In web design this is done by using Cascading Style Sheets (CSS) for the design elements and HTML/XHTML for the content. This way, making changes to the design of your website is much easier and your website becomes easier for search engines to index. Follow this recommendation, and you website design will be much easier to alter and your website as a whole will be easier to manage.

Width of the website

This sounds like a simple issue at first, but bear in mind that people may be viewing your website from monitors as different in size as a mobile phone to a widescreen 24” monitor. Several options are available to create the optimal solution, namely liquid, semi-liquid or fixed layouts. A liquid layout is a website that grows and shrinks depending on the browser size. Although this sounds ideal, it can lead to very strange layouts on the largest and smallest screens, where text can end up on one very long line, or in a very narrow column respectively. Fixed width is easy to implement and gives good control over the appearance of the website, but it can also mean that a website uses up a marginal width of a large screen, and may require horizontal scrolling on smaller screens. A liquid layout tries to find a compromise between these two by expanding to a maximum and contracting to a minimum width, but the complexity in achieving this can outweigh the benefits.

Type of font

This is a popular subject with designers, who can argue for hours over the best fonts for websites. The key thing to remember here is that most fonts that you find in word processing packages, such as Word, are not suitable for your website, as the browsers of your visitors are likely to support only a handful of the most common fonts. In reality you should choose either a serif (font that has decoration on the letters, e.g. Times New Roman) or non-serif font (font that has no decoration on the letters, e.g. Arial). Real Free Websites has chosen sans serif as the default font, but if the user has the following fonts this is the preferred order: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif. All of these fonts are relatively similar and so the website will always look a certain way.

Font size

Another issue that has been discussed at great length. Font size can be set in a number of ways, including using absolute pixel size, relative size, percentage size and even descriptive words. Setting an absolute font size is bad practice, as some users will not be able to resize your font, making your website hard to read and inaccessible. The best bet is to accept you cannot control the exact size your font will appear and use relative font: your main headers will be biggest, followed by sub headings, followed by the text.

Colour scheme

This one will have a big impact on your website’s appearance and so it is something that (rightly) receives a lot of focus. One factor that is often overlooked, however, is the importance of contrast in your colour scheme. The greater the contrast in colours between text and background, the greater the readability and ease of use of your content. Black and white is optimal, and other combinations deteriorate as the colours become closer in contrast.

Menus

Assuming you have mapped out your website and how your visitors will browse your website, you are in a position to consider how to manage your navigation. The key idea here is not to try something new, but to have your navigation laid out in a standard manner, so that users can find their way around without difficulty. Navigation norms currently involve menus along the top of the website and/or in a sidebar on the left or sometimes on the right of the page. Footers are also used for links of lesser importance. Dynamic menus, or menus that open or change in some way, should be approached with care. There are many examples of dynamic menus that do not function well on all the different types of browsers, and some reduce the ability of search engines to find your links and index your website. At the same time, a dynamic menu may be the best way to fit a large number of links into the space you have available.

Conclusion

Although there are many issues to think about when you actually begin coding your website, there are a small number of core factors to consider. Get these right and your website will be off to a head start, and future management and changes will be much simpler.

Related Articles

• The Key Steps in Great Design Process
• A Complete Website Planning Guide
• How to Write Your Content
• How to Target your Market
• How to Set Your Website Goal

This entry is filed under Web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.