Guidelines To Web Development

Submitted: 2008-01-14 16:53:06

The first, and possibly most major aspect of web design that I have learnt is to do with a term called 'semantics'. This basically refers to the raw HTML that a web site uses to display it's data. Semantics, in HTML terms, means 'using the correct tag for the correct purpose. That is, paragraphs should be marked up in 'p' tags (i.e. no line breaks to separate content), reference should be marked up with the correct form of blockquote and citations, and probably the most widely used, yet completely missed portion of web pages, the 'list' element.

The List Element

I'll focus on this portion of web site creation most because it is overlooked almost everywhere you find a navigation section of any web page. Navigations are, fundamentally, lists of links that take the client away from the current page to another page either within the same domain, or externally. However, the operative part of that section is lists. A navigation should be marked up in a list style whether it is a horizontal list, vertical list, or even various forms of drop down menus. Using a number of divs to do this job is simply bad practice because it encourages use of a tag that shouldn't be used very widely at all.

Divisions

The division tag is one that is overused for things that simply don't need to be placed in divs at all. I have seen whole sites marked up with div tags, and as you can imagine, any search engine that wants to index that site isn't going to know where to start, and what section of content belongs to what. That is the fundamental reason semantics is important. Web site vision is mostly due to having a high search engine ranking, and without semantic code that is simply not going to happen.

Web 2.0

(Definition)

This all comes under the very new web bracket named' Web 2.0' which began life as a term meaning 'less is more' . Web site designers used to feel that, because they were paying for a page to be built and displayed on the web they had to cram as much /stuff' into as possible so as to make the best use of the space given. This meant that page loading times were horrendously slow, even for the time, and that you had to trawl through endless characters of meaningless text just to find what you wanted on that page.

So, W3C and various other major web organisations (as highlighted in the Wiki page) decided to do something about this and, under the generic banner, 'Web 2.0' came up with the idea that 'less is more', or the less you have on your page that you don't need, the better. This didn't just apply to text, but to graphics and all the other elements on the web page as well. So, looking at a web 2.0 page you can expect there to be very little in the way of vibrant and 'in your face' colours and graphics, but more in the way of 'pastel' colours and lots and lots of white space (example).

Dreamweaver (WYSIWYG)

Dreamweaver is one of those programs that really did make huge changes to the web design industry because it meant that just about anyone could build a web site by simply dragging and dropping some text and images on to a blank canvas and have Dreamweaver code everything for you *smacks head*. I was very pleased to hear that you used the 'code' view in Dreamweaver rather than the design view. Based on all I've said above Dreamweaver will completely ignore anything that is close to semantics and 'Web 2.0' preferring to use the most bass knowledge possible when it comes to CSS and general usability.

As for Dreamweaver templates, I'm not 100% sure on them, but I've never really used them myself to any degree because I found it so much easier to create my own template that I could use to create all of the content pages in my site. Once you get around to database driven websites this becomes less important as you can dynamically build the pages, you just tell the server where you want the content put and it does it for you. To me the whole templating system that Dreamweaver uses is very complicated and I've never really had time to learn how it works because I've never really had the need to.

However, saying that, I love Dreamweaver! based on the fact that it has a very good reference section and has a list of all of the available elements and tags that you can use with a certain property. I especially like the support they have built in for CSS in the newest versions of Dreamweaver, so for help with building sites as you go there isn't much better.

One thing I will say, and I'm not sure if you use it, but Dreamweavers 'design preview' uses a browser rendering engine from Opera (called 'Presto') that is very much out-of-date by today's standards. Unfortunately it's ability to correctly display CSS based design is very lacking and it only presents a singular view from one of the many rendering engines that clients use. This is why I would also suggest that web sites created in Dreamweaver for whatever purpose are tested in 'proper' browsers, such as Firefox, IE (6 and 7), Opera and even Netscape.

Firefox

As a web developer Firefox is the browser to use to display and test sites that are being built, based on the fact that it renders using the most up-to-date CSS library available on the web. As well as that I also introduced Laura to some extremely helpful 'addons' that Mozilla offers it's customer and being open source, it's all free! I'll list a few of most useful ones I use on a day-to-day basis at the end of this 'rant'.

The common philosophy that a lot of web developers are leaning towards is 'code it for Firefox, the hack it for I.E'. However, I wouldn't recommend this method entirely because I am very much against hacks in any way, shape or form. However, proposing that a site is coded to look right in Firefox is the easiest way to build a web site because of a number of reasons.

Firstly, Firefox is the leading browser for standards compliancy and the need to 'do things right'. They have the most up-to-date CSS support of any browser out there, they began 'tabbed browsing' and they have plenty of addons that make things so much easier and both client and developer friendly.

Secondly, Firefox will render a web page exactly how you coded it. So, if it looks wrong it is most likely because you haven't coded it correctly. This makes things easier because as long as you use well formed, semantic code, chances are thing are going to look right if you have a bit of knowledge about what you are doing.

Finally, Firefox is great in this sense because the other browsers know how good it is and are all slowly striving to be just like it! (That even includes IE7, which is miles behind, but getting there). That's not 100% accurate, but the general consensus is that Firefox is leading edge and if other browsers want to compete they are going to have to follow its lead. What this basically means is that if something looks right in Firefox, the chances are that it will look pretty close in all of the other standards compliant, 'modern' browsers. The only one that causes a major problem is IE6, which lacks CSS support and is riddled with bugs that make developers pull their hair out every day. But there are ways around this in the form of 'conditional comments' and the '* html' CSS 'hack' that targets IE6 only.

I won't get into any of that now. If you would like any more information about any of that I'd be more than happy to send you it.

And because I've talked about Firefox I almost feel compelled to mention IE, so:

Internet Explorer (Microsoft)

The reason I have referred to Microsoft in that title is because, the problem with Internet Explorer is that Microsoft, as a company, do not like to do things in the standard, well-known way. For Microsoft, the Internet was never anything that important until they realised that is was actually a major section of the industry they could get their hands on and, hopefully, manipulate. MSN was born and became the original problem because Micorsoft felt that they should create an Internet community that bowed to their rules and their standards, completely ignoring that Web Standards and protocols that were already in place.

Because of this they fell very much behind the rest of the internet browsing world who began to realise that, for things to work correctly, they should conform to this standard set of rules laid down by the W3C as that was the standard for web site creation and manipulation. Unfrotunately, because of their own wish to create a new market in the Internet, Microsoft fell behind and have yet to catch up on the standards that most other browsers are now implementing.

I have to say, though, IE7 is a huge step from Microsoft because they recognise all of CSS1 and a lot of the elements in CSS2, which means that most web sites that were built in the last few years, when Firefox became a pioneer, will look presentable when IE6 simply couldn't handle them.

I apologise at this point because I'm ranting.

CSS

So, on to the important part, Cascading Style Sheets. I would like to offer a suggestion that you include some mention of the Universal Selector in CSS, which is simply an asterisk ('*'), and which refers to 'everything' on the page. I use this selector in every single web site I build because it basically gives you a blank canvas to work with at the very start of building a web site. It looks like this:

Code:

* {

    padding: 0;

    margin: 0;

}

As I'm sure you are aware, every single browser loads any web page with it's own style sheet at first, containing various margins and paddings for various element, such as the list, which has a generic margin and padding and list-style-type, so that anyone building a web site can add a list and it will instantly be recognisable as an indented list. The problem I find with this is that when you are creating, for example, a list of links that will be displaying your navigation, the chances are that you do not want them to have those values of margin and padding, and in a lot of cases no margins, or padding. You might think that setting margins and padding to zero for that list will suffice, but when you come to layouts that are floated with set widths, problems occur when margins and padding to not add up, and when elements add their own values that you don't know about, things can go very wrong.

The one problem with the Universal Selector (example) that some people don't like, is that you have to redefine the generic margins and padding for those elements that really need margins and padding, such as the paragraph that has values of:

Code:

p {

    margin: 12px 0;

}

So, at the start of your stylesheet this will need to be reiterated. But on the whole that is one of the only ones you really need to worry about as most of the other ones are values you will want to change anyways. The only values that get complicated are those belonging to lists (example) because IE uses 'margin-left' to position the lists, but Firefox (and most other browsers) use 'padding-left', so to reinitialise the list to display as default you will have to add both rules. More information about the Universal Selector can be found at the link above.

Floats, for me, are the way forward because they are relatively easy to use and understand the basics of, and give a good idea about the correct 'flow' of a document. Not to say they aren't without problems, generally to do with 'clearing floats' that I still don't fully understand, and various other bugs that can be attributed to Internet Explorer (again). In fact one of the widest known bugs around from IE6 is to do with this little thing called 'hasLayout' that IE decided to write in to the back-end of IE and means that things will only display properly if they have, what IE have defined as 'layout' (Example), that is, a width, or height, or some kind of positioning (and in fact one of the best fixes for a lot of IE6 issues is setting the position to 'relative', therefore giving the element 'layout').

I think I should probably leave it at that for the moment as I've rambled on for far too long! I hope some of this at least is helpful to you and if you would like anymore information about anything I mentioned, or anything else at all please do not hesitate to contact me and I'll do my best!

(2192 words)

- Posted by Alex Hall

<< Previous Blog || Other Recent Blogs || Subscribe to feed || || Next Blog >>