General Information
To actually make a website, you need to be able to draw upon skills from four distinct areas:
- Graphic Designer
- Programmer
- Content Writer / Editor
- Accessibility / Usability
Graphic Designer
This is about the look and feel of the website, its layout on the page, the choice of colours, the choice of images (both photos and graphic elements), the way it balances on the page, etc.
Proportionally, very few people are naturally good at design, with the most common design mistakes being to overcomplicate designs.
In general, keep things simple, and don’t be afraid of subtle curves.
Use a simple colour pallet (that match with your brand, and don’t clash with each other), keeps page sections in proportion to each other, use crisp powerful images, and don’t use too many fonts.
CSS Mania has a great selection of new and classic design layouts that may help inspire.
Color Lovers has thousands of colour pallets that work well on their own.
And don’t be afraid of using maths to calculate your proportions (ie 1:3 ratio, 1:4 or 1:5 ratios tend to be the maximum range for many elements within website design).
If you are going to design the website yourself, it’s normally best if you don’t have a natural flair for graphic design, to use one of the thousands of free to use design templates that can be found online, or with your web hosting providers.
Programmer
This is the element that’s all about the actual code of the website. The ‘source code’ behind the design.
For many websites, this would typically be the programming languages of html, css, and javascript, although of course there are many more.
html coding is a relatively simple process once you can learn the basics of the language. In general, you need to ‘close’ any ‘open tags’, and failure to do so in the correct order, is the reason why most websites seem to fail validation, or display the same on multiple web browsers.
If you use a right click on this page, and select ‘view source code’, you can see what html actually looks like of this page at least.
If you’d like to learn, attend a course at your local FE college, or buy a good book and work through the exercises. Having a good basic understanding of html can make things a lot easier when it comes to trying to ‘fix’ any problems you may have with your website later.
If you have made a start at learning html, WebDeveloper is a pretty popular forum for programmers to exchange thoughts and ideas, or help solve problems for each other. But don’t expect free support if you’ve not been making the effort to work it out for yourself first.
CSS (Cascading Style Sheets) are an increasingly popular way to help display the design elements of your website.
These are most usefully held in an external file that multiple web pages can all reference at once. Thus helping reduce your bandwidth, and also making things far easier to change the design of your entire website by modifying just one file.
CSS did take a few years to reach the level that was originally intended of them (html was not supposed to be about design, but actual content). In the meantime, lots of designers were forced to use ‘tables’ to layout their content on a page.
Tables are for tabular data, not design, and should have been phased out of new web pages at least 4 years ago.
If you use tables to layout your web page, it may look fine and intuitive to a user who can physically see your website, however it normally adds a lot of confusion to someone using a character screen reader (ie a person with visual impairments), similarly, search engines can’t find their way around your website as easily either.
Tables may see like a good option for their apparent ease in diving the page up into rows and columns, but don’t be fooled. There is so much more that can be achieved much more easily using CSS for the design elements.
JavaScript is the programming code that runs more like a traditional ‘program’ within a web page.
Again this is a useful language to learn if you want to add certain basic interactive features within your web page, without needing to use server side scripting languages like Pearl or PHP.
In general though, you normally don’t need it to build a website, although you may need to copy and paste the code from suitable providers, for things like ‘Google Analytics‘.
Content Writer / Editor
Professional Journalists, Poets and Authors are normally very good with words. Most website content however is written by non-professional writers who are either passionate about their subject, or are asked to write about it within their work role.
Have a quick look around and see what catches your eye. Normally large volumes of text that aren’t separated with headings or images, can put people off from even starting to read. Typo errors, spelling errors, and grammatical errors are also a put-off.
Before publishing your website, run a spell check, get your friends and/or colleagues to read it, and try reading it out loud. Or ideally get a professional proof reader to go through your website, and highlight any errors others may have missed.
In general though, try breaking up large amounts of text with headers, sub-headings, and images. Keep paragraphs small, and try to use the words within your page that you would like people to be able to search for and find within search engines.
For brilliant content, employ a professional copywriter to write it for you. You’ll probably be amazed how much they can do with relatively simple effort and changes.
Accessibility / Usability
Websites are included under the Disability Discrimination Act, and so need to be accessible to people with character screen readers and such like. Machines aren’t yet as sophisticated as the human eye and brain, so it’s important to take a few key steps to try and keep your website accessible.
- Don’t use images for text. In particular, titles, navigation links and headings should all be in plain text within the page, not as pretty images that look like text, just to try and keep the font in keeping with your design.
Wherever you do use images for the purpose of enhancing the user experience of the page, always use the ‘alt’ tag within the code. This provides ‘alternate text’ if someone isn’t physically able to see the image, this should summarise what the image is for, or what it represents. You can also provide a ‘long description’ of the image on a separate page, with links through to it accordingly (ie if your picture tells a story about what you do, provide that story on another page, so that those who can’t see the image, can understand what you’re ‘trying to say without words’. - Validate. This is such an important part of any web design, but is so often overlooked/ignored, to that website’s loss.
Validation of your html code, is much like a proof reading of your website text. It makes sure you’ve written it properly, and that the code can be interpreted correctly by most of the major web browsers.
For example, validation checks that you’ve closed all your html tags, ensures you’re using agreed standards of code, ensures you haven’t written in hacked bits of code that may only be recognised by a limited number of browsers, etc.
Strangely enough, it’s very rare for me to visit a commercial website that does actually validate, as many web developers seem to be happy to leave it with errors because it seems to display okay in a particular web browser, so feel it isn’t worth their while trying to fix the problem.
The two free validation tools I tend to use the most are: - Layout and navigation are two further areas that are easy to get right, but often forgotten by many designers.
The layout of a website page needs to be clear, open, and intuitive as much as possible.
There are various books written on the subject of the psychology of website browsing, where the eyes scan the page, etc. Normally, as you’ll see, most websites have a series of navigation links across the top, and down one side of the page.
Typically, the company logo takes you back to the main home page. Similarly, every page should have a link to ‘contact us’, and your website ‘site map’ (and of course a link to your ‘terms and conditions’).
If you want to highlight something, make the text bigger, or add a colour to it (or behind it).
Images are great to helping direct people’s attention to certain links, but try not to use some form of cryptic code in your images, to represent the various parts of your website. Although the research shows that users can quickly find their way around once they get used to the representations, the main research shows you only have around 4 seconds to hold someone’s attention on your website, otherwise they go elsewhere.
Keep your navigation links in plain text, using words that summarise what the link is for, and keep it in the same part of every main website page.
