Introduction
It's Not Just Design
Roles
There are many different roles to be played, by many different websites, depending on what you wish to communicate.
The New York Times
http://www.times.com/
This website, for the most part, shares text. A lot of it. As such it needs to be clean, well layed out and easy to navigate. I think this site could do with being less cluttered, but it is a good example of how one might approach the representation of such media, online.
Mint
http://haveamint.com/
This site is entirely different; it's advertising a product. Notice how there are big graphics and use of large introduction text. The idea is that when somebody visits the site, it takes as little time as possible for that person to learn what the site is about. Also note how the name and the design are connected. Very fresh, like a mint.
As you can probably guess, there are plenty of different things to take into account when designing a website. Think about the audience; age, sex, location, then there are other things to consider like, what kind of computer are they likely to be using and they will be visiting the site from which web browser?
SEO (Search Engine Optimisation)
SEO is, as the name implies, the optimisation of your website, so that search engines can view it, make sense of it and then properly put it in their index. I can not stress enough how important it is to make sure your code is clean, tidy and readable. For one thing, it helps during the development of the website and it actually helps the search engines to properly understand what the website is about.
The order of <h1>, <h2> tags, etc, as well as all the other HTML elements is absolutely vital. If it's a heading, use h1, if it's a sub-heading h2 and a sub-heading of that would be h3, etc. If it's a list, use <ul>... and so on. Indent the code where applicable. View the two examples below, to see what I mean:
Readable, Tidy and Clear
Messy and Confusing
Notice the difference? The second example, unlike many sites online, doesn't have bad code, and the Search Engines won't struggle too much, but can you imagine trying to find your way around it, to find a problem and fix it?
Compare it to the tidy example, and you'll realise just how difficult it can get. Especially if the coding was also horrible.
For Now...
... that is all. It would be great if other members could contribute to this thread or raise any further points you feel that need to be made. Web development is not, and never should be, as easy as programs like Dreamweaver make it out to be. At least, not for a website you wish to become successful in all aspects.
For 3-4 years, I've been designing and developing websites on a personal and, on a few occassions, at a more commercial level. I've decided to write this brief guide to web development to fill in all the gaps that I often see, when I read or come across others peoples' approach to the role.
It's Not Just Design
A website can look absolutely amazing, shiny, new and even direct web design trends in new directions, but this does not make it a good website. It may be a great design, but if the development is shoddy then you've only covered one area of many others. SEO (Search Engine Optimisation), Code (and layout of), Layout of the Design and many more factors come into play that are, in my opinion, much more important.
Roles
There are many different roles to be played, by many different websites, depending on what you wish to communicate.
The New York Times
http://www.times.com/
This website, for the most part, shares text. A lot of it. As such it needs to be clean, well layed out and easy to navigate. I think this site could do with being less cluttered, but it is a good example of how one might approach the representation of such media, online.
Mint
http://haveamint.com/
This site is entirely different; it's advertising a product. Notice how there are big graphics and use of large introduction text. The idea is that when somebody visits the site, it takes as little time as possible for that person to learn what the site is about. Also note how the name and the design are connected. Very fresh, like a mint.
SEO (Search Engine Optimisation)
SEO is, as the name implies, the optimisation of your website, so that search engines can view it, make sense of it and then properly put it in their index. I can not stress enough how important it is to make sure your code is clean, tidy and readable. For one thing, it helps during the development of the website and it actually helps the search engines to properly understand what the website is about.
The order of <h1>, <h2> tags, etc, as well as all the other HTML elements is absolutely vital. If it's a heading, use h1, if it's a sub-heading h2 and a sub-heading of that would be h3, etc. If it's a list, use <ul>... and so on. Indent the code where applicable. View the two examples below, to see what I mean:
Readable, Tidy and Clear
Code:
<div id="container">
<div id="main">
<h1>Heading</h1>
<p>Introduction text.</p>
<h2>Sub-Heading</h2>
<p>Text for the sub-heading.</p>
<p>... and so on.</p>
</div>
<div id="sidebar">
<h3>Sidebar Heading</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
</div>
</div>Messy and Confusing
Code:
<div id="container"><div id="main"><h1>Heading</h1><p>Introduction text.</p><h1>Sub-Heading</h1><p>Text for the sub-heading.</p><p>... and so on.</p></div>
<div id="sidebar"><h1>Sidebar Heading</h1><ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li><li>List Item 4</li><li>List Item 5</li></ul></div></div>Notice the difference? The second example, unlike many sites online, doesn't have bad code, and the Search Engines won't struggle too much, but can you imagine trying to find your way around it, to find a problem and fix it?
Compare it to the tidy example, and you'll realise just how difficult it can get. Especially if the coding was also horrible.
For Now...
... that is all. It would be great if other members could contribute to this thread or raise any further points you feel that need to be made. Web development is not, and never should be, as easy as programs like Dreamweaver make it out to be. At least, not for a website you wish to become successful in all aspects.
