Basic Web-Page Design Tips

Small Intro.
This section of my site is all about the BASICS of designing your own website and then uploading it on the World Wide Web. I'm only a humble amateur 'hack' and there are millions more people around with greater knowledge of the subject than me - but below are many of the ideas that I have found helpfull while learning to build my own website.

I'm assuming that you already have an Internet account and a computer with either Internet Explorer (IE6) or the increasingly popular FIREFOX web browser.

I've tried to put it all into 3 main Sections,ie:- What you need to HAVE, what you need to KNOW and what you need to DO.

WHAT YOU NEED TO HAVE.

A GOOD BOOK ABOUT HTML
I used 'SAMS - Teach Yourself HTML in 24Hours'.
It consists of 24 x 1 hour lessons and quickly builds your expertise in manageable chunks.
You should be able to get it from any of the High Street Bookshops ($24.99).
Read about the book at Sams - Teach Yourself Books

AN ON-LINE TUTORIAL.
Go to HTML Goodies for a good on-line HTML Tutorial.
TrainingTools.com is quite good as well.

An HTML Editor.
All of these 6 HTML Editors are currently free (5 April 2005):-
Arachnophilia
1stPage 2000
HTML-Kit.
NoteTab Light.
XStandard.
N-View

These days I use Dreamweaver MX but it costs $250+, which is a lot of money to start out learning with. Its best to use a freebie 1st, see what functions you get (and what you don't), then spend your money wisely after that.

AN FTP PROGRAM - (to upload your new pages from computer to website) - FREE again.
Cute FTP - Cute FTP7.0 Home Edition
Leech FTP - Leech FTP
CoffeeCup - CoffeeCup Free FTP 3.0
Smart.FTP - Smart FTP 1.1
Ace FTP - AceFTP 3

ACCESS TO A CHATGROUP - (eg - Web Designer Room2 on Yahoo).
When you've read your book(s) and done your on-line tutorial(s) - you will still get stumped and have loads of questions unanswered.
In the chatgroups your asking REAL people for help - and they usually do !!
But DONT just ask people to do it for you. Try to do it yourself first untill you get stuck - then ask for help - and DO say please and thank you.

PATIENCE.
When you have lost all your hair and bitten your nails to the Quick - then BE PATIENT.
A sense of humour helps as well ..... lol, but only YOU can provide that !!

WHAT YOU NEED TO KNOW.

HOW TO 'VIEW SOURCE'.
When you see a web page you like the look of, and wonder "how did they do that ??", then click the top line browser 'VIEW' button and go down the list to 'SOURCE'. You can then (usually) look at how the HTML was written to produce the page (or the effect) you are looking at.

You actually learn SO MUCH from looking at how other people do things - its a tutorial in its own right !!

DO NOT copy and paste the entire lot straight onto your own website - as that is blatant stealing. But there is no harm at all in using the idea to produce your own page and code from ideas you have seen. You will however find that most personal site webmasters WILL allow you to copy ideas and things if you merely ASK THEM FIRST, as they see it as a feather in their cap that you like their work so much you want to use the same sort of thing yourself. But please remember to ASK.

ALL BROWSERS ARE DIFFERENT.
When you write your web page, then proudly sit back and view it, remember that the only people who view it EXACTLY as YOU see it are the people with the same browser (AND VERSION) that you have. (It's also true that people 'view' in different screen sizes and at different resolutions - and that makes a difference as well - but I'll cover that later).

It is true however that each supplier tries their damndest to make sure all their new browsers are 'backward compatible'. So if you wrote your web-page looking into an Internet Explorer version 1, Someone looking at the page in an Internet Explorer version 5.5 should see exactly the same page.

The next problem is - All Manufacturers browsers use a different programme design to run their browser than any of the others. Microsoft, Firefox, Netscape, Opera or Konquerer etc etc all work on differently design software packages. They all (could/and often do) interpret your HTML code in a different way - and therefore produce a different screen output.

But don't despair - There is a common HTML standard that ALL browsers are supposed to work to - and I'll cover that next.

HTML STANDARDS
Just like all Browsers have different versions, HTML has evolved somewhat along the years too. With each newer version enabling the HTML writer (YOU) to do cleverer things with your HTML commands.
I can remember the 'standards' of HTML2.0, HTML3.2, HTML4.0, HTML4.01 and now XHTML.

The content of all these different versions have theoretically been agreed by all the major Browser manufactures - and once agreed - each manufacturer is supposed to ensure that their browser software programmes (although all different) actually interpret your HTML code in the same way as each other. My only comment here is that Firefox is fairly good at it - and Microsoft is, well, not so good at it (in my view).

Don't scare yourself to death when you get there - but goto W3C definitive guide to writing XHTML. There are similar links to all the other versions as well if you trawl round the 'W3C' site. (The W3C site is the one which publishes all the agreed HTML standards.)

You would be best advised to write your initial HTML to the HTML 4.01 Transitional Standard (as it lets you leave all your 'style' commands on the page rather than forcing you to put them in a 'stylesheet'. GOTO W3C HTML4.01 Transitional info for the full list of what is acceptable HTML.

So - the only thing I'm asking you to remember here is that there are different HTML versions - and that you SHOULD 'declare' at the start of your HTML document - what HTML version you are using (It's called document declaration).

You can 'view source' on my own page here (on first few lines) to see an example of my document declaration for XHTML 1.0, or goto W3C HTML Transitional Document Type Definition for the exact wording of the document type specification for HTML 4.01 Transitional.

WHAT EXACTLY IS HTML
HTML is an abbreviation for Hyper Text Markup Language. You use it as commands to wrap around your TEXT so that browsers can identify how you want your TEXT 'marked up/displayed'.
eg:- if you put <p> .... </p> around your text it means you want to put that text in a paragraph, or <br> at the end of a line it means you want a line BReak.

Its worth bearing in mind at this point that HTML was initially invented as a TEXT markup language. However lots of people (me included at times) tend to fly into a page and use HTML to markup the pages STYLE as well, eg add colours, font information and allsorts.

It really is good technique from the start to actually write a web page like you were using a plain old typewritter, ie:- JUST WRITE THE TEXT and the commands used to place the actual text on the page.

LEAVE YOUR STYLE TILL LAST.

LEARN ABOUT CASCADING STYLESHEETS

When you start writing a web page, the temptation is to write the content and add the style as you go along. This does however become quite time consuming as for EVERY paragraph you write you have to specify the font-size, font-weight, font-style, etc, etc.

Cascading Style Sheets (CSS) have been introduced to save you this long and laborious task.

All you need to do is to separately specify what attributes each of your elements will have and the stylesheet applies it to that element everytime it occurs. This is especially helpful if you have lots of pages on the site and the stylesheet can apply to them all.

I'm certainly not going to TEACH you about Sylesheets here - but I just want you to realise they are there.

The best tutorial I have seen to introduce you to this is at Adding a touch of Style - by Dave Ragget

I've also written my own explanation which you might like to read as well.

Having said all the above about Cascading Style Sheets - You will no doubt be keen to get going on your first web page and laboriously adding all the style comments will do you no harm at all in the actual HTML learning process.

RESOLUTION (Screen viewing size).
The other thing that changes a viewers perception of what THEY see as opposed to what YOU see is the screen resolution that everyone has their monitors set at.

The most common screen settings are probably:-
800 x 600 (pixels)
1024 x 768 (pixels)

If you go to your desktop - right click - then go down the menu and select properties, it should bring up a box titled 'display properties'. One of the tabs is labeled 'settings' - select this and you will see what YOUR monitors display resolution is set at.

For someone writing text (and viewing at 800 x 600) then your text goes along to the end of your screen then flows down to the next line and carries on. So you write your page - it all looks superbly laid out and everything is exactly where you want it to be.

However - someone links to your page (viewing in 1024 x 768) and your 1st line of text flows onto their screen (but doesn't fill the line cos they have a BIGGER viewing area) and some of what's on YOUR second line carries on filling up the space in THEIR 1st line.

Its not a problem in regards to CONTENT, but it IS a problem with regards to LAYOUT.
On a page of pure text you would never really notice - but when you mix text and graphics and your page is VISUALLY important - you really need to test your page in a few different resolutions before you upload it to the web.
The other thing I would suggest you do is to ALWAYS design your pages in 800 x 600 resolution.

The reason for this is that when a page is designed in a higher resolution - it often produces horizontal scrollbars when loaded into an 800x600 viewer. I personally hate having to keep scrolling across the screen to see the last 'side bit' of pages.

WHAT DO I NEED TO DO (consider).

PURPOSE
My only comment here would be to ask you to consider the 'purpose' of your site - before you launch into writing your first page.

Its so easy to carried away writing the HTML, adding the style and lots of images and things. But stop and ask yourself "what am I trying to do here".

If its a site to promote your business - then you really do need to be focussed. If its a site for your own personal pleasure - then you can wander round (subject-wise) as much as you want - just remember that if you subject is 'interesting enough' - then you will attract visitors back to look again and see how you are progressing.

COLOUR
A Sites Colour Scheme is a very personal thing and its certainly not for me to tell you what colours you can or cannot use. However, I personally find that 'dark' sites make my old eyes ache a bit and people are just likely to go elsewhere if they find things hard to look at.

Actually, more important than the colour itself, is the CONTRAST BETWEEN the colours you use.

I have a site-page on 'Web Accessibility' (see BOBBY), which deals with 'Blind and Partially sighted people' surfing the internet - and colours are dealt with in more depth there.

LAYOUT
Each web page on a site is different of course - but you should try to ensure that a few things remain consistent.

Have a site index on every page - and keep it in the same place on every page. It will ensure that your site visitors find navigation easy.

Always put your e-mail address on every page - again try to keep it in the same place.

VALIDATE YOUR HTML (and CSS).
I talked earlier on about writing HTML to a certain Standard.

So when you (think) you have finished writing your page - check your HTML in one of the many FREE 'validators'. As well as checking all is ok, it helps when you have a fault too - as the GOOD validators point to where the problem actually is and explain how to fix it.

GOTO:-
W3C HTML Validator (the Industry norm).
Validate the HTML on your web pages - it helps clear any faults on your site !.
DOCTOR HTML
Another HTML Validator which gives different (but still excellent) facilities.
Are your Cascading Style Sheets your Weakest Link ??
Validate the CSS on your web pages.
Bobby.
Validate your web pages to see if Blind and partially sighted people can easily view your webpages !!

FLASH
LEARN TO WRITE HTML BEFORE ADDING 'FLASH' TO YOUR SITE !!!!

I hope you found this page of some use to you, and whether you agree (or disagree) with some (or any) of my ideas - lets hope it's made you think it !!

Gimme some feedback on what you think. My e-mails up on the top right hand side of the page (or maybe the one down at the bottom is nearest).

Back to top of page


If you are interested in GEORDIELAND then visit the site below.

Geordieland: Home of the Gods.

Home Page | Basement | Belarus | Wor Geordie | Handel | Search the Site | Site Map | Web Design | Email Me |

© Jimsky's Emporium 2004 - 2008.