Show navigation

Web Development Tips

Saturday 12th November 2005

Introduction

When you create a web page, there are various things to bear in mind - design, the underlying code, the tools you use, etc. Hopefully, this guide will help you to produce a better, cleaner web page with less confusion and more efficiency. This is aimed more at those that write their own code than those using WYSIWYG editors, but there are some points that anybody creating pages for the web might find useful.

The first piece advice I can give is to look around! Don't just use this website, or just another website. The great thing about the internet is that if you are looking for something, assuming it isn't a particularly obscure subject, there's bound to be pages and pages of writing that can help you, and this is certainly true for web development. What I say isn't necessarily right - this article, just like a review or editorial, represents my opinion, and that's true of most articles on the web about any part of web development. Some parts might be generally agreed upon by the entire web community, while other parts are open to debate, but ultimately it is your choice. There are certain choices I would strongly urge you to take, but it is still up to you. The first choice I strongly urge you to take is: follow web standards.

Code

When you write code, specifically, (X)HTML and CSS, there are certain standards that are best to keep to. Does everybody keep to these standards? No. But keeping to them will help the look of your page to be more consistent across browsers, and can also help those that might not be using an ordinary computer, such as a mobile phone, or the disabled. Keeping to standards also makes your life easier - code should be easier to read and manipulate.

Writing (X)HTML and CSS is much like speaking a foreign language. When you learn a foreign language, you learn the proper speech that everybody expects you to use. If decided to use your own variation of a foreign language, it would complicate things for everybody.

To make sure that your web page is valid, you can use the validator provided by the W3C, the body that sets the standards and specifications for XHTML and CSS, among others.

It is useful, when using CSS, to name classes after their use, not their appearance. For example, if I wanted to highlight a piece of text, I might make it red. As such, I would create a new class in the style sheet. Instead of calling the class 'red', it would be a far better idea to call the class 'highlight'. This means that, should I change the colour of the class, I would not be left with the now meaningless name of 'red'.

When writing PHP, it can be useful to write comments - since PHP can be considerably more complex than (X)HTML, comments help you and other people to understand what the code actually does. Although comments are a good practice in PHP, there are not so useful in (X)HTML, since they increase the size of the file without actually adding anything for the end user.

The Developer's Toolbox

When you start writing any language, there is one crucial part that you will need: something to write with. Personally, I've always preferred writing the code myself - that way, I'm in control of exactly what the content of the web pages is, and allows me to greatly control both layout and style.

If you do write the code yourself, you'll probably need a text editor, of which there are plenty of choices. Which one you'll like depends on what you want with regards to features - the best way is to try any that take your fancy. I find syntax highlighting and tabs are enough for me, while others prefer a selection of tags to choose from. On Linux, even the basic text editor that you'll probably have should be sufficient. On Gnome, this comes in the form of Gedit (my personal preference), while those on K.D.E. can use Kwrite. Kate is more advanced than Kwrite, so you may want to try that one as well.

Moving away from the two main desktop environments, there are plenty of other editors. When, for whatever reason, I decide I need a sidepane, which Gedit does not include, I use Bluefish. Not only does this have a sidepane, but it includes a vast array of features to help with (X)HTML, CSS and PHP, among other languages. It allows you to add in tags such as tables, forms and images by pressing a button and following the dialog, as well closing tags for you. It may not be something I use, but I'm sure it is useful for plenty of people. You can also customise Bluefish considerably, allowing you to make Bluefish seem like home.

I've (briefly) tried Scrite - although I didn't try it for long, it seemed more than up to the task. Other editors include Vim and Emacs.

On Windows, the best text editor I could find was Crimson Editor - it includes tabbed browser and syntax highlighting, so is a superior replacement for both Notepad and Wordpad. Incidentally, Notepad can't even read Linux line breaks, making it difficult to develop on both Windows and Linux using Notepad.

Firefox Extensions

Firefox's usefulness is not limited to tabbed browsing and decent web standards. One of the biggest strengths of Firefox is that other people can easily add in their own extensions, allowing each person to customise Firefox to their own needs. While there a multitude of extensions that you may find useful, there are two I want to mention now.

The first is the Web Developer Toolbar. This extension adds, oddly enough, a toolbar. This adds the following drop down lists: Disable; CSS; Forms; Images; Information; Miscellaneous; Outline; Resize; Tools; View Source; Options. While the toolbar may not add much that is particularly new, it makes everything so easy to find and use, it is indispensable. You can resize the page, disable CSS, outline elements and plenty more.

The Web Developer Toolbar Extension

Another thing you can do is validate the (X)HTML of any page - this takes you to the W3C Validator page. However, this can be time consuming if you want to check several pages at once. This is where the second extension comes in, imaginatively called the HTML Validator. This provides a small symbol in the bottom right of the page that tells you straight away whether your page is valid or not. Double click on it, and the extension will tell you all the mistakes in your (X)HTML code. If you want, it can even try and correct it for you.

The HTML Validator Extension

Browsers

When designing a web page, you must bear in mind the different browsers that people may be using. The main three to consider are Internet Explorer, Mozilla Firefox and Opera. While Firefox and Opera generally follow the standards set by the W3C, Internet Explorer prefers to go wandering off, and occasionally doing what it feels like with a section of code. That's not to say that Internet Explorer randomly interprets code - it just consistently gets it wrong.

To make sure that your page works and displays properly, you should check your page in all three browsers. Don't forget - Internet Explorer cannot handle transparency in PNGs, or XHTML that isn't sent as text/html.

When providing a feed, such as Atom or RSS, make sure that you add both a link on the page itself, as well as the link tag in the head of the page. If, for example, you just provided the link tag in the head of the page, Internet Explorer users might be completely oblivious to the feed.

Content Type

What I mean by that vague heading is the different formats of file and languages that are used in your page. Your page should be usable using just HTML and CSS. There are some people that intentionally use browsers that only support these languages, while others surf the internet using a simpler device, such as a mobile phone, which cannot support other languages or formats.

I try to avoid using Javascript, since some people can't or won't have it on their browser. Although it might be acceptable to add it to some parts of the page, never use it for crucial parts e.g. navigation. Around 10% of people don't have Javascript turned on, but I'm sure you still want those 10% being able to use your site.

Another format people seem fond of is Flash. Where possible, try to avoid using it. Obviously, there are areas where its animations are required, such as creating a short. However, there is absolutely no need for Flash when creating your navigation, or, even worse, your entire site.

Accessibility

Following neatly on is accessibility. If you use something like Flash for your site, then some people will be severely hindered. For example, some blind people use a program to read out the contents of the screen to them. If you start using Flash on your website, they can no longer have its contents read out to them.

There are various other aspects of accessibility to consider, such as creating the correct Link tags in your pages that allow navigation. You can see these if you use Opera, and select the Navigation Bar from the Toolbar list. This provide links to other relevant pages, such as the previous and next page.

I could go on listing accessibility features, but instead I will point you towards an excellent site for making your site more accessible: Dive Into Accessibility. You can also see what the W3C has to say about accessibility by looking at the Web Content Accessibility Guidelines. You can also grab a checklist for the WCAG.

Hopefully the information in this guide has helped you even slightly in creating your own web page - if it hasn't, send me your own tips!

To create this article I used:

Useful Links