THE NEXT :: Free Ebook | Programming and Web Tutorial | Online Marketing | Forex

4th generation web sites have all the elements of a 3rd generation web site along with the following:

1. The proper use of markup (HTML): only structural tags in the HTML, use of CSS, proper use of structural tags in the layout (<h> tag order in a document for example).
2. Respect to usability in web site design: using proven layouts
3. Search engine-aware web pages and web site.
4. Well structured - easily updateable.
5. Automatically printable with CSS media type linked CSS files.
6. In a nutshell: a web standards compliant website.

Hardware you need to start designing web sites

You don’t need any special hardware to create web pages. Just a standard computer and an Internet connection so that you can put (upload) your website onto the web - this is assuming you want to get your website on the web.

Fortunately, web design is not like 3D animation where you need the latest and most powerful PC’s to be competitive. These days home computers are so fast that even three or four-year-old PC’s are more than enough to handle all your web design needs. If you’re not convinced and you still want to spend a couple of thousand on a new PC, give me a call!

Before you go out and spend your cash consider these points:

HTML pages are just simple text documents

Web design is more or less about creating HTML pages. Html pages are just simple text documents that use special ‘key-words’ called tags. To make a long story short, simple text documents are so easy to create and manipulate that hand-held devices can easily view them! Oh, and just in case it’s not clear, even the most powerful handheld PDA’s (personal digital assistant) only have a small fraction of the power/speed of the slowest of desktop computers or laptops.

Ok, some of you are crying that web pages are not just about text and HTML. There are images that have to be created and inserted into your pages, and we all know that image manipulation can really take a lot of juice (computer power). This is true in print work (where images have to be much heavier) but it doesn’t apply to web design because images used in web pages (Gif’s, Jpeg’s and PNG’s) have to be made really light so that they don’t take forever to download. In a nutshell, what this all means is that images only need a lot of juice if they are heavy images.

For those graphic designers out there who know print, images used in web pages (and all screen graphics by the way) need to be reduced to a PPI (DPI) of 72 to 76, a big contrast to the usual 300 DPI when working in the print world!

I always look for these elements in web sites:

1. Clean, easy to update design/structure.
2. Good usability in the design - and all that implies.
3. Fast loading ‘light’ pages.
4. Intelligent use of technology - using Flash when it makes sense not because you want a ‘cool’ intro!
5. The website’s ability to convey the meaning/message of the website quickly, if not instantly.

1. Clean easy to update design/structure.

Just a few short years ago, the web was full of dancing mice, spinning globes, and animated construction workers, things have since changed and design principles are now actually put to good use … amazing!

The problem that we find now with many websites is that the design is not flexible. Websites constantly change, so if you find that putting in a new navigation button is going to take a lot of work, you have to reconsider your design. You should be able to freely add and remove elements from your pages with little to no trouble - that only makes sense.

2. Good usability in the design - and all that implies.

Usability is one of the new buzzwords that people like to use, but what does it mean? In a nutshell, usability is referring to (in web design) how easy someone can get around your website … how usable it is. If someone has to ‘hunt’ for your ‘home’ link or your contact information, then you have a usability problem.

3. Fast loading ‘light’ pages.

This is one of the oldest rules in the book! People will leave your site like a flash if your site takes over 10 seconds to load on a 56k modem. That means your pages have to be less than 60k - images and all.

Being that this is such an old rule of web design, you would think everyone would keep their pages light, right? Wrong! Just take a look around and it’s not hard to find 250k Flash websites! This checklist is just a reminder of what we all know, but sometimes in the excitement of building our masterpieces, we can forget … so check the checklist!

4. Intelligent use of technology - using Flash when it makes sense not because you want a ‘cool’ intro!

I think this is obvious to most people. All the technology used to build websites are just tools; we use a screwdriver when we need to, not because we want to. (Of course, I’ve been known to hammer nails with a screwdriver and saw wood with a steak knife). The point is that you need to let the goal of the website dictate what technology you are going to use, and not what the flavor of the month happens to be at the time.

5. The website’s ability to convey the meaning/message of the website quickly if not instantly.

The one thing that gets on my nerves when I’m surfing the web is when I come to a web page where I can’t figure out what the website is about. (Ok, maybe pop-up windows are worse, but this still ticks me off!) Typically, these turn out to be what I would call ‘artsy’ websites, where the design is pleasing to the eye, but I have to ‘dig’ to get the point of the website.

Make sure that your visitors can easily know what’s going on (and why) when they get to you, otherwise you won’t be conveying your message too well because people will just be leaving your website.

Maybe this lesson should have been called: ‘Developing an advanced understanding of HTML fundamentals’. We are not trying to learn advanced tricks or new tags, we are doing something far more useful: Understanding the basics is what separates the pros from the amateurs.

Introduction

HTML is a relatively simple technology to learn, so easy in fact that once people get just a very basic understanding, they jump into building web pages without much thought about learning anything more about the fundamentals of HTML.

As such, most web designers are not taking full advantage of HTML and CSS; they are wasting their time and money, generally making their lives more difficult.

The differences between logical and physical tags is one of the key fundamental concepts in HTML that, when understood, can have a huge impact on a web designer’s way of doing things.

Logical inline tags vs. Physical inline tags

Logical Tags:

In HTML there are both logical tags and physical tags. Logical tags are designed to describe (to the browser) the enclosed text’s meaning. An example of a logical tag is the <strong> </strong> tag. By placing text in between these tags you are telling the browser that the text has some greater importance.

By default all browsers make the text appear bold when in between the <strong> and </strong> tags, but the point to take away from this is that the strong tag implies the importance of that text. This has impact with search engines like Google who look for such tags to help figure out what the page is about.

There are many logical tags and they include:

<strong> : Strong - as above.

<em> : emphasize - usually renders (made to look like by the browsers) as italic.

<span> : a neutral inline container. - Read about this distinction below.

<div> : a neutral block element. - Read about this distinction below.

Logical tags, as mentioned above, have default ways in which browsers (like IE or Opera) render them. But it is understood that CSS should be used to give them their style, or in other words their ‘look’.

Physical Tags:

Physical tags on the other hand provide specific instructions on how to display the text they enclose. Examples of physical tags include:

<b> : Makes the text bold.

<big> : Makes the text usually one size bigger than what’s around it.

<font> : Used to apply a font-face (like Arial or Helvetica) and font-color.

<i> : Makes text italic.

Physical tags are more straightforward; <i> makes the text italic, <b> makes text bold and <font> is used to set the font face and color for the text.

So why use one or the other?

In a nutshell, physical tags were invented to add style to HTML pages because style sheets were not around, though the original intention of HTML was to not have physical tags. Why? Well physical tags are just messy, tedious, and are more trouble than they’re worth (for the most part).

Rather than use physical tags to style your HTML pages, you should be using style sheets (also called Cascading Style Sheets or CSS).

Block level vs. Inline tags

What is the point of ‘inline’ in the description of the tag categories?

In HTML, tags are either ‘inline’ or ‘block-level’ elements.

Block level HTML elements

Block-level elements exist in their own virtual ‘box’ and are always followed by a line break (like hitting the ‘enter’ key after typing in some text). In other words, a block-level element breaks the flow of text and other elements to create a virtual box around itself.

Inline HTML elements

Inline tags (elements) become a part of the ‘flow’ of text in which they are inserted and have no ‘box’ around them and don’t have the line break, either.

An example of a block tag is a <p> tag (paragraph) and an example of an inline tag is the <b> (bold) tag. Try the tags out and you’ll see what happens to your page when you use <p> tags and <b> tags; all will be made clear once you see it for yourself.

So who cares?

You should care! Once you understand the differences (it’s really not that hard if you just give yourself a chance) and once you understand that you can use CSS to change elements from being block tags to inline tags and vice versa, you will discover tremendous power in your ability to layout your pages.