Basic Web Design
Simply learning all the HTML tags is no way to become a good web-designer. Anyone can do that, and they still output rubbish. In this advice tutorial, I’ll be giving you the most important tips in general areas to start you off on the right track towards creating great sites. There are loads of links to further tutorials throughout.
This page was last updated on 2012-08-21
Check the Source
Looking through the source code of other sites is an excellent way to pick up HTML methods and tricks. In your browser click View | Source on any page and the code which created it will be opened (make it open in Notepad for the best way to read it) for your viewing pleasure. Find the corresponding section in the code for what you liked and see how it was created. You can then cut and paste code snippets out of the page’s code and into your own. You can teach yourself a lot this way, although it’s never as easy as just sitting down with a Coke and having a good read of HTML Source...
And now the necessary warnings: be careful about learning from badly-written code. There are plenty of awfully-coded sites that you may be reading, so try not to pick up any of their bad habits. Getting code segments and things like that is fine, but do not take designs, scripts, graphics or anything that looks like it took a lot of work. I’ve seen people rip off HTML Source’s design and it’s hugely irritating. Just no.
Once you’ve gotten your code together, the next essential step is to validate it to make sure it’ll work in all browsers without problems. You may be surprised. There’s a good (if harsh) » online HTML validator over at the W3C’s site.
Hand Code
Unless you break out of the WYSIWYG-user’s mentality, you will always be restricted in what you can create. Too many beginners go straight to FrontPage or DreamWeaver and never really learn how to code and design. When things go wrong they don’t have the skills needed to fix the mistakes their editors have left them with, and give up.
Hand coding in a text-editor (like Notepad++, TextMate, TopStyle or even trusty NotePad) means you know your code much better and so can find problems and edit smaller things. You have much better control over your design. You’re closer to your code and are able to incorporate things like CSS more easily. Visual editors also output very bloated code with lots of unnecessary font tags and paragraphs etc. Your pages will download faster if you code efficiently in a text-editor.
It’s never something anyone who has used a WYSIWYG editor wants to do, as at first it looks like a much slower, laborious way to design pages. You’re going to have to get past this barrier — you’ll eventually come to love the advantages hand-coding gives you.
Learn CSS
CSS, or Cascading Style Sheets, are the most important development in the webmaster’s world in the last few years. They allow you to change the look of your entire site by editing one file, and allow you to format and design your pages to look much, much better.
If you can use HTML well, CSS shouldn’t be much of a step-up. Not only are stylesheets a great extra skill for you to have, but they’re going to be essential for creating pages in the next few years. Get a handle on them as soon as possible; have a look at the introduction to stylesheets.
Presentation
You need to structure your page into blocks, by using either tables, layers or frames. Have some clearly defined navigation, content and supplementary boxes — people will know where to look for specific parts of your page. Don’t stack page elements on top of each other all the way down the page — this makes a lot of scrolling necessary, something that the Internet audience do not enjoy. To lessen this, make use of horizontal screen space as best you can by aligning navigation links and inset pictures to the side so that the content flows alongside it.
Limit your font choices to two or three for your entire site. Reference is always made by typographers to the horrific mistakes made early on when word-processors came into mainstream use a few years ago. Magazines and other publications were printed with dozens of fonts used on every page, just because the designers could. This led to the pages looking like a big mess. You should use very few fonts to avoid the same fate.
Stick with a sans-serif font for your main content, as text in this family of fonts is easier to read from a computer screen than serif fonts. Keep your main body text between sizes 2 and 3 (10 and 12 point). Also remember that you should use the common fonts that everyone will have on their computer (found in the font face tutorial), so they see the same page you do.
Colours
I’ve already gone over the importance of using light colours in the <body> tutorial, but I’d like to re-iterate it here. Bright, primary colours are highly uncomfortable to look at, and on the Internet where you’re looking at a lit monitor the whole time, this is very important to avoid. Pastel shades do not strain your eyes, and generally look more stylish anyway.
Have a look at sites like » Yahoo and » Amazon, two of the most popular sites on the Internet, and see what they do. Large blocks of colour are drawn with soft shades. There’s plenty of white-space left as places for visual relief. These sites have been designed following extensive surveys of web users, so they know what they’re doing.
When choosing your colour-scheme, pick one or two main colours. These will be used to fill in the main blocks of your page. Along with these, choose three or four more colours that go well with your core colours — experiment a lot with these. Apart from any once-off elements or graphics, these should be the only colours you use in your layout. They should all be from the web-safe palette.
Make sure there is a good contrast between your background and text colours. Keep your main text black in most places. The areas of most interest on your page should be highlighted with a small instance of bright colour, but make sure it never takes over.
Exercise Restraint
You may get a little excited about the glitzy special effects achievable with things like Java Applets, JavaScript and Flash, but something you’re going to have to realise is that readers are rarely impressed with a dazzling but difficult-to-use system.
Simplicity works best. A basic text-based navigation system is preferable to one constructed with image rollovers. Going straight to a content-rich homepage is preferable to a pointless and showy Flash intro or splash page. Background sounds and the like get annoying after one instance. Scrolling text and multiple gif animations are the hallmark of an amateur designer, and they’re terrible. If there’s one thing that many usability studies show, it’s that readers find many special effects to be quite obnoxious and annoying. The simpler sites always prosper.
Basic Promotion
When your site is ready for the Internet, you can start submitting your pages to the search engines. This causes great confusion and anguish for most beginners — the poor guys can’t figure out why the search engines won’t add their site. Read this: it usually takes at least 4 weeks for your site to appear, if only that. You might get lucky, you might get very unlucky, but that’s all it really comes down to. If you still haven’t appeared in their index after 2 months, you should re-submit your site. It’s a horrifically tedious waiting time, but until the engines are able to work faster it will stay this way.
While you wait, look out for other opportunities to start drawing in readers. Find directories of sites similar to your own. They usually accept submissions and add the sites within a few days.They’re a great place to pick up targeted visitors. Learn how to write promotional, keyword-rich text for descriptions. If you’re feeling really confident about your site’s quality, submit to » Dmoz (the Open Directory), and — lordy — » Yahoo. Remember for the two latter sites however, that your site’s content is the most important thing, so make sure you have lots of it. Getting into either of these is usually a fast-track into most search engines.
Stay away from things like Free-for-all pages and submission websites that promise to get your site listed in hundreds of directories. It’s all a sham.
Add in <meta> tags before you submit to the search engines. Read over Promotion 101 for the fundamentals of choosing keywords. The most important is » Google. Google indexes new sites quite reliably, while you could be waiting forever on others and still get no visitors from them.
Now, another mistake beginners make is that their expectations are too high. Sites that are starting out should be lucky to get, on average, 30 or 40 hits a day; and even then it depends on the popularity of your subject matter. Don’t be disheartened by small viewing figures at the start, websites ’appreciate’ over time. Happy visitors will link to your site, and people will follow these links and become returning visitors. That is, if your site is good.
Also: link to HTML Source! There, that’s my promotion done...
Fundamental Optimisation
I’m sure you’re all aware of the need for optimisation — the Internet is often very slow. A website that does not load quickly is a website that rarely gets read. People are getting more impatient, and now that there is so much choice, if your site doesn’t give a reader what they’re looking for quickly, you’ll never be heard. You can find out all about this in the optimisation section, but for now, here are some of the most basic ideas that you should adhere to when coding webpages:
- Use only a few small images on each page. If you’re going to have large images, only have one or two per page, or use thumbnails. Always use the height, width and alt attributes.
- Don’t use animated GIFs when a static one would have done the same job. Animations are often distracting page elements.
- Optimise your graphics as much as you can. It’s a less advanced process than you probably think.
- Leave out most multimedia effects.
- Split long pages into a few smaller ones.
The Golden Rule
And the one notion that will sum up the attitude you’re going to need to become a good web-designer?
Be willing to learn and improve.
You’ll never produce a perfect site design, much like you can never produce a perfect painting — your work can always improve. Accept criticism of your work (however hard it may be), and work to sort out the problems you and others see. Update your site as much as you can, and redesign it every few months. Care about the quality of your work. Continue to learn new techniques and keep on top of new developments in the world of web-design; look at well-designed sites and pick out elements that you like from them; answer your email; listen to good music; sketch down ideas; and above all have fun at it.
So what’s next?
Ok, you want more? Well continue on through HTML Source then! Have a squint through the Full Index, and here are a couple of other basic tutorials for you:
