January & February 2006
Learning to develop web-sites using web standards is a bit like learning the guitar, it's fairly easy to get started but to master it takes years of hard work and learning. With the right approach you can become more efficient.
Content first
Historically I would have started a project by creating a design in photoshop, convert that to XHTML/CSS and then add content. This is not the best way. Creating a site should hinge around the content. Understanding the content helps you to do a far better job of creating the site because you are laying out the content to support the goals of the site. After the content is mapped out, the design is created to support the content framework, be it a wireframe diagram or notes on the back of a napkin.
Another benefit that comes from structuring content first (as noted by
Andy Clarke of stuffandnonsense.co.uk at @media 2005), you can't do anything until you have some idea from the client the objectives of the site and some level of content in front of you. This is a good way of finding out if the client is committed to the project.
Use the right mark-up for the job
Semantic mark-up is important. In other words the mark-up (XHTML) that you use to structure your page needs to be meaningful to the content within.
Learn what each element can be used for; if you're not sure of the best way to mark up some content then research and find the best way. Be aware that html has it's limitations but with thought you can work around those limitations without compromising semantics.
Hand-code everything
Using a text editor to create XHTML and CSS will help you to learn about html elements. As you hand-code you will need to know how to construct a page correctly using the right mark-up as everything is up to you. Code-completion whilst it can be helpful, is actually harmful to your learning ability. Hand-coding has the other advantage that you are in control of everything you write, if the code you create isn't correct you can't blame it on the tool!
Build your site with accessibility in mind
Creating a site using web standards already assists you in making your site accessible, not only to those with disabilities, but also to every user of your website. To make your site fully accessible you need to have that in mind right from the beginning. Accessibility is not an afterthought you can apply retrospectively to a site. Learn how screen readers and assistive technologies work and try not to do anything that will exclude these users from being able to fully use your site. Most techniques are common sense and are easy to implement. If you feel you don't know enough about accessibility then look into it and put it into practice in your next project.
Avoid using hacks
When I first started making websites with CSS I found that I had issues with getting a design to work across all browsers. Next I learnt that I could use CSS hacks as a way to selectively overwrite the CSS rules to fix the differences, so I started using hacks every time I came across an inconsistency. This is a bad habit it's all to easy to fall into. The main thing you need to do to avoid this is to understand firstly that there are default styles in force in every browser, and
these default styles vary between each browser. To combat these differences we need to reset the default styles before we apply our own stylesheets.
To that end we can use a special stylesheet such as Tantek Çelik's
undohtml.CSS that resets the majority of the elements that have differences between each browser. Before you apply a CSS hack ask yourself "Am I fixing a known bug with this hack?" If you're not then maybe you're doing something wrong.
When applying hacks for IE bear in mind that IE7.0 could be released and fix some issues with standards support but still be susceptible to hacks designed for IE 6.0. Therefore the best bet is to use
conditional comments. This proprietary feature in IE allows you to apply overriding styles only to that version of IE. In this way you can apply hacks to IE, safe in the knowledge that IE7.0 won't fail due to incorrectly falling for a hack targeting at IE6.0 though whether it will need hacks of it's own remains to be seen!
Don't use inline styles
Another bad habit is to use in-line styles to add styling as you code. This nasty habit is pure laziness, inline styles have the highest
specificity of all (1,0,0,1) so using inline styles will dominate any styling you write for the same element in an external stylesheet. In addition the whole reason we use CSS is separation of presentation from mark-up so inline styles make no sense.
Make your site flexible for different text sizes (aka Bulletproof)
If you are using XHTML and CSS properly then you should be able to build a site that doesn't break if you resize the text. For example using
Doug Bowmans's sliding doors technique can help where you need to use background images in elements that will resize as the text-size changes. A great resource for making your site unbreakable is Dan Cederholm's new book
BulletProof web design
Javascript as a client-side scripting language cannot be relied upon to be available on every user-agent, for example all browsers have an option to turn off Javascript. Because of this Javascript should only be used to enhance existing functionality and not break the whole site if Javascript is off. Avoid in-line events such as onclick, onfocus etc. Instead learn how to
register event handlers in external scripts and make use of the DOM so that the behaviour layer is separated from the mark-up.
Ask for help
When you come across something you don't understand, try and spend the time to fully grasp it. If you use Google and find a resource that has the answer to your problem don't simply cut and paste the solution, read the article and find-out why it fixes your issue and you will have a useful bit of knowledge for the future.
Don't be afraid to ask for help from your peers (work colleagues, friends or community resources such as the
sitepoint forums) (or
dotnetnuke forums - ed.) when you need to. This can be a two way process, you will learn from others and others will learn from you.
Challenge yourself
If all you ever do is fixed-width designs then try a different approach with your next project. The more ways you experiment with layouts, the more you will learn. Try not to design a site with how you are going to execute it in mind, try experimenting with a difficult design to put your CSS skills to the test.
Get to events/courses
Where possible get out to any web-standards conferences/events or workshops you can. Not only is this a great way to learn, you also get to meet other web developers and designers where you can make friends/contacts and swap ideas. Find out if your company has a training budget and see what courses you can get yourself on. It's a great way to take your skills to the next level.
Resources
By no means should this be considered to be an exhaustive list but these are certainly good starting points for becoming a better standardista.
Mark-up/XHTML
CSS and general Web Standards
Accessibility
Javascript
Browser Bugs / CSS Hacks
Events and training (UK)
Stuart Colville - Muffin Research Labs
Stuart resides in Kent (UK) and works as a web developer at Rentokil Initial where he advocates web standards and best practices in all aspects of web development. In his spare time Stuart runs his blog 'Muffin Research Labs' where he writes about web technologies and techniques with a focus on web standards.
This article is Copyright Stuart Colville © 2005