From reading the previous parts of my article series, you are probably starting to get an appreciation of web standards and why they are a good thing. You are probably also thinking that the majority of web developers out there are therefore following standards, and the web is a nicer, more fluffy place as a result.

Unfortunately, this is not the case. As a measure of how widespread web standards adoption is, Opera’s MAMA project trawled over 3.5 million web sites and collected various types of data about them, one of which being whether the page’s HTML validated or not. The rather worrying result was that 4.13% of sites surveyed actually validated. Why is this figure so bad? There are many reasons why people are not creating valid code and following standards:

• They’ve been paid to create sites this way for years – why should they bother to take time out to learn new skills?
• They’ve never been taught the importance of standards, and don’t really know they exist. Their course at uni or school didn’t contain anything about web standards
• They are developing sites for a company or university Intranet, and they can guarantee that their users are being forced to use Internet Explorer, therefore they don’t need to bother with worrying about cross-browser compatibility, and can use Internet Explorer-only technologies such as ActiveX.
• They are inexperienced hobbyists, and don’t want to know about the underlying technology and how it works; they just want to get their “look at my kittens” page up on the Web as easily as possible, either by copying and pasting code off a tutorial site, or using a template from an authoring tool such as Dreamweaver or Frontpage.

Whatever the background, I think education is the common thing lacking in all the above cases.

The education deficit

People think that web standards are too hard to learn, or it is too hard to find decent training material, or too expensive to buy books or go on courses.

University courses that touch on web development are usually hopelessly behind the times, and students are rarely taught about web standards. they are usually taught about the Web from the programming direction (“this web thing isn’t like real programming; it’s a bit fiddly and annoying, but I guess you’d better know about it”) or the graphics/multimedia direction (“this web thing is heavily related to graphic design, but it’s a bit complicated and requires code and stuff – let’s see how you go”). There are few courses that teach web development or design as the central focus, and fewer that teach web standards. I’ve even heard stores of students being marked down on their course work for using CSS rather than HTML tables for layout and <font> elements for styling, because that is what the curriculum still says to use.

Secondary schools seem to have it even harder. When I was talking to Anna about writing this article, I commented than when I was at school, IT courses sucked because they were nothing more than Word and Excel courses. She commented that basically nothing has changed (in the last thirteen years!) I found this really worrying – “the younger generation” is a lot more IT-literate these days, and from my experience kids already know how to do Word documents and Excel spreadsheets before they get to secondary school. By that point, they are customizing their own pages on social networking sites, and even putting up their own web pages. But courses at secondary school don’t teach them what they want to learn, so the courses tend to be really poorly subscribed.

I’ve also heard a lot of my friends at professional companies comment that when recruiting new employees, it is hard to find graduates that possess the basic web standards skills, even though these skills are becoming increasingly more sought after.

DISCLAIMER: Note than in the above points, I am stating the general pattern I have experienced over the years; I am certainly not trying to say that these points ring true in all cases. If you are, for example, a school or university teacher that does teach web standards effectively, don’t feel offended. In fact, get in touch with me so you can share your experiences!

Making a difference – the web standards curriculum

WAIIIIIIT A GODDAMN MINUTE!! I said one day (If I remember rightly, it was at about 9.43 one evening, and I was in the bath. It caused quite a stir).

These kinds things were worrying me, so I decided to do something about the situation. I decided to get together with some of my friends and create a definitive course to teach how to do client-side web development properly, using web standards, and make it available online for free:

• It would dispel complaints that teaching material was hard to find, or expensive.
• It would make it easier to get web standards introduced in school and university courses, if ready-made teaching material was available.
• It would also give existing web developers a useful resource to learn from, teach others from, or use to justify investment in web standards to their bosses.

My employers – Opera Software – are passionate about web standards too, so they agreed to fund the project. After many months of hard work, the Web Standards Curriculum was released upon the world. It is completely free for you to use, and released under a creative commons license, so you can feel free to distribute and republish it, as long as you give the original source a credit, and don’t try to sell it for money. The granular nature of the course is very useful, as it is easy to chop articles out, change the order, etc, to suit your particular educational needs. There is also another curriculum available called WaSP InterAct that works in tandem with my course. Opera provides the raw tutorials, and InterAct provides course structures, teaching resources, etc.
.

Let’s all work together

So how can you make a difference? I think my course could really make a difference to web design and development education, and web standards adoption. I’d like to recommend that you all check out my course, and pass it around to any of your friends that are interested in making their own web pages; I’d also like to suggest that you give me any feedback that you have on the course, good and bad – what have we done well, and what could we improve on? What bits of it are hard to understand?

We can go further than this as well – I’d like you to help me by evangelising web standards at your school, university or workplace. Share my course with your teacher or boss, and we can try to get them to understand the importance of web standards more.

I’d also like to start work on introducing some pilot education schemes at universities and secondary schools. I’d like you to introduce me to your teacher, send me their e-mail address (asking their permission first is a good idea) perhaps, so I can talk to them and see if they are interested in helping to create some kind of scheme, or at least evaluate my course for use at their school.

It isn’t gonna be easy – we can’t hope to effect big changes overnight – but I believe that if we work together, we can start to make a difference.

Summary

And so concludes my overview of web standards, with a small education rant tagged on the end. I hope you found it useful. You can get in touch with me on Twitter, Facebook, and My Opera.

No related posts.

This is a question many people ask when they first start creating a web page. After all, one reason why web development has always been so accessible to a large number of people is that web browsers are a lot more forgiving when rendering web pages. In contrast to programming in say Java or C++, where syntax errors and suchlike will cause the code compiler to refuse to run your program at all, you can break all kinds of rules in HTML and CSS and still get something that looks ok on the web browser on your computer at home. So why bother imposing extra rules on yourself? The benefits are not immediately obvious, but believe me, you will start to appreciate them as you delve more and more into web development. I’ll summarise the main reasons in this section.

Semantics

Another related concept that is very important when creating web pages is semantics – this basically means making things self-describing, ie their appearance describes their function or purpose. This may not sound immediately that mind-blowingly useful, but think of it like this – how useful would a stop sign be if it said “go” on it? How useful is a light switch if it is painted to look like a fire alarm?

Transferring this logic on to the Web, how useful is a navigation menu if you can’t tell what information the links lead to, or even that there are links present at all? I think you get the point now. Semantics are very important in many ways on web pages, and web standards provide you with a perfect means to implement good semantics, as long as you use them properly.

Let’s look at a quick example. Say you want to put a title up on a web page, followed by a list of things to do on a day (Let’s not choose a work/school day). How would you structure this using HTML? It is best to choose elements that describe the function of the text, like so:

1. <h1>Things to do on Saturday</h1>
2. <ol>
3. <li>1pm: Wake up! Have a quick bite to eat at nice cafe down the street.</li>
4. <li>2.30pm: Meet more friends in town and go shopping.</li>
5. <li>5.30pm: Grab something light to eat at home.</li>
6. <li>7.00pm: Have a jam with friends, form a new band.</li>
7. <li>8.00pm: Go to local venue and watch metal bands play.</li>
8. </ol>

Well, that’s my idea of a good time anyway. This code would render as follows:

(I’ve also used a list-style:none; CSS rule to get rid of the default 1, 2, 3, 4, bullets that appear on ordered lists – view the page source to check this out.)

This is a good way to do it because heading elements (<h1>-<h6>) are the one and only choice for headings/titles on pages, and an ordered list (<ol>) is the best choice for a list of items where the order of the list items (<li>) matters – it wouldn’t make sense to try to do these activities out of order! You’d use an unordered list (<ul>) in cases where the order doesn’t matter, for example a shopping list.

So why not just mark it up with any old element? You could get a very similar-looking page using the following:

<font size="5">Things to do on Saturday</font>
<br><br>
<font size="2">1pm: Wake up! Have a quick bite to eat at nice cafe down the street.</font>
<br><br>

<font size="2">2.30pm: Meet more friends in town and go shopping.</font>
<br><br>
<font size="2">5.30pm: Grab something light to eat at home.</font>
<br><br>
<font size="2">7.00pm: Have a jam with friends, form a new band.</font>

<br><br>
<font size="2">8.00pm: Go to local venue and watch metal bands play.</font>

(You could even use elements like <banana> and <weasel>if you wanted, and then style them how you want them to look using CSS.)

But this is really bad. In terms of what its function is, it isn’t a heading followed by a list – it is a large line of text followed by some smaller lines of text. And that’s how it will be seen by browsers parsing the code, by search engines (such as Google) looking to pull up content in search engine results and by screen readers (used by blind people to read the Web.) Plus it is larger in terms of file size, harder to style, and more time consuming to make changes to later on.

Ease of maintenance and flexibility

When you separate your structure (HTML) from your presentation (CSS) and behaviour (JavaScript) and use good semantics, you will make your code a lot easier to make changes to in the future. Writing clean HTML to mark up your content and using human-readable class names means that it is a lot easier to find the parts you want to alter later on (it is hard to style just the lists in your page when you have used <font> elements to mark up all your content – how do you point your CSS to just the lists?), and having your JavaScript and CSS nicely laid out with descriptive comments added means you will find it a lot easier to understand how it all works if you come back to a site after not touching it for six months (or if someone else has to maintain your code in the future).

Standards also mean a lot more flexibility. For example, if you are administrating a book review site, and you are using <font> elements to specify the colour of all the quotes on your pages, and you wanted to then change the colour of all those quotes, you’d need to painstakingly pick through every page of your site and change all those instances. That wouldn’t be too bad for 5 pages of reviews, but what about when your site gains popularity and you have 50 reviews, or 500 … or 5,000? If you instead structured all your quotes correctly using <blockquote> or <q> elements and controlled all the styling from an external CSS file using a simple rule along the lines of blockquote { color:red; }, all you’d need to do is change that style in one place, in one file, and it will alter all of the instances, on all pages.

Here’s another example – a lot of sites still use HTML tables to lay out pages into various numbers of columns, or rows. If you for example had a two-column layout consisting of a main content column and a navigation menu column (you’ll see loads of these on the Web), laid out using two table cells, and you wanted to change the position of the navigation menu from the right of the screen to the left, you’d need to mess about changing the position of the content in the HTML. If you were creating the same layout, but using CSS to float the columns beside one another, all you would need to do to make the change is reverse the float values in the CSS – a much simpler change.

Accessibility and cross-browser compatibility

In general, using standards and best practices makes it easier for people with disabilities to access your content – let’s look at a few examples:

• Marking up content properly using proper semantics – heading structures and paragraphs – make it far easier to navigate your content quickly when using a screen reader to read content out (blind people use these a lot.)
• Some people suffering from mobility impairments cannot use their hands very well, or at all, so have problems using a mouse. They therefore need to use the keyboard to navigate web pages, using the tab key to move between links or form elements, or access keys, or features such as Opera’s spatial navigation.
• People who cannot see obviously will not be able to access words inside images, so just don’t do this! If you do wish to use images to convey useful information (eg pie charts or graphs), make sure the image has meaningful alternatives available via the alt or longdesc attributes.

Disabled people represent a significant web audience, and it is wrong to ignore them – how would you feel about being denied access to the web because of the language you speak, or because of the colour of your hair? I know this last example is a bit trivial, but it still serves to illustrate the point. As well as being the right thing to do, it also provides businesses with access to an extra market that they could not reach before. Check out Accessible design makes money for some more details about accessibility business benefits.

IT’S ALSO THE LAW. Well, it’s a bit more complicated than that, but many countries now have acts/motions passed into their law to prohibit web sites that offer a service to the general public (or members/employees, etc.) from being inaccessible to people with disabilities. It is discrimination, pure and simple. And there have been a few high-profile lawsuits against companies and other entities because of inaccessible web sites. If the “get more users” carrot doesn’t make the business donkey run faster (I paid Bruce Lawson a fiver for this metaphor), then the “avoid getting your ass sued off” carrot will…

See Olympic failure for some details about the Sydney Olympics accessibility legal case, and Update on the Target accessibility lawsuit for some details about the lawsuit against American store chain target for having an inaccessible web site.

And accessibility doesn’t end with disabled people using the web. It also describes people using many different desktop browsers to browse the Web, and alternative devices such as mobile phones, televisions and games consoles. These browsers all expect web standards, and if the code they are given is nice web standards code, then they have a higher chance of rendering your code consistently and correctly (some browsers still have bugs and other quirks which may cause problems). If you don’t bother to use good valid code, browsers have to kind of guess what you intended and fill in the blanks, and because they don’t generally guess correctly or do it consistently, you will get errors and unexpected behaviour.

In some parts of the world, more people use mobile phones to access the Web than desktop computers, because of cost or lifestyle choices. Using web standards means that your web sites are more likely to work on these different devices. This is not only because of pure standards support, but also because good use of standards, image optimisation, etc. can mean less processing required and smaller downloads, which means a better user experience, and less cost for those paying for downloads by the kilobyte, which is still common in some places.

Ease of debugging

If you don’t follow best practices, and don’t write good code (eg don’t close and nest HTML elements properly), you are making web browsers work harder to render your sites. This is because when a browser comes across broken code, it attempts to second guess what you were intending, and fills in the gaps for you. But browsers don’t do this consistently, and you will get unexpected behavior when trying to traverse the DOM, leading to further problems with your site (“traversing the DOM” is done when elements are selected, for example when a CSS style is applied to an element). Following the HTML standard properly (applying a doctype to your HTML pages, and then validating your HTML against the rules defined in the doctype using the W3C validator) means your code will work more consistently across browsers; validation is a powerful debugging tool.

Search engine rankings

Using standards and semantics effectively makes your pages more likely to appear higher in search results from search engines such as Google, Yahoo!, etc. This is because these engines rank the importance of search terms by their appearence in heading elements, meta elements, and the frequency by which they appear. If your page is seen as being a more relevant resource concerning these search terms, then it will appear higher in search rankings; if you use no heading elements, then your “titles” will not be seen as important by search engines. Thinking carefully about what terms use on your pages will logically make your pages appear higher in more relevant searches!

A few of your are probably wondering why browsers still support outdated features such as <font> elements when they are generally considered bad practice? Well, a lot of people are still using these outdated methods, and a lot of web sites still feature them. To stop supporting them now would break a lot of existing web sites! All we can do is start doing it right from now on, in the hope of seeing these outdated methods phase out gradually.

No related posts.

Now is an exciting time to be getting into creating web sites — the Web touches many aspects of our lives, it allows you to have an instant global audience, the technologies involved are pretty mature for the most part, there are more educational resources available than ever before and pretty much everyone wants a web site (except my dad). Your friends will love you even more for your new-found skills, and even though it is a very competitive marketplace these days, web design and development can be a very profitable career.

But how do you get into it, and how do you learn what you need to know? In this article I will aim to point you in the right direction, and give you a basic framework of good key concepts to take on board and develop your knowledge of.

Get into web standards!

Being part art and part science, web design and development has never been a very straightforward discipline — there are many good ways to build a web page, and many more bad ways (I hesitate to use right and wrong here, as the right solution for one context can easily be completely wrong in another context). There are many skills to use when coding a web page, some of which I’ll talk about below, and many technologies and techniques to consider, a lot of which are very daunting and complicated for novices to behold. You’re not going to be able to study for a week and then build the next Facebook.

In spite of all this complexity and uncertainty, however, one thing remains pretty consistent amongst all good web sites — the use of client-side web standards to create the web site’s content, visual appearance, layout, and dynamic behavior. And this is where you should start off your learning path.

Client-side web standards?

By this, I am talking about code that runs in your web browser. When you surf to a web page, generally your web browser sends a request to a server, and the server sends back a web page to the client; the client-side technologies used to build that web page are not processed until the page gets to the client. Once there, they are processed, and the result spat out for you to view in your web browser.

Web standards are defined in recommendations — vast sprawling documents maintained by standards bodies (most notably the W3C), which define how those technologies are supposed to be processed by web browsers, and how developers are supposed to use them to create web pages. The W3C are an organization with the aims of standardising web technologies and furthering the evolution of the Web.

But these documents are not the best place to go to start learning web development — they are completely exhaustive in the detail they go into, to try to eliminate as much ambiguity as possible, but this makes them rather cumbersome to digest. You are much better off reading web design tutorials such as the Opera Web standards curriculum.

What other technologies are available?

There are many technologies used in the creation of web pages other than client-side web standards, but I’ll keep things simple and not talk about them much in this document. Here is a short list, just in case you come across some of these terms are are curious:

• Server-side technologies: These are technologies processed by the web server before the result is then sent to your web browser along with the rest of the web page. Such technologies are generally used to connect to a database, and deliver different results to you depending on what options you choose, for example when looking up train times, or buying something from an e-commerce site. Examples include PHP, .NET, ASP, Ruby, Python, and JSP.
• PDF: This isn’t really a web technology as such, although you find it on the Web a lot. It is a format created by Adobe that is good for publishing documents you want to keep as read-only, ie you just want people to read them, and not alter them. They require a special program or plugin to view.
• Flash: Flash is a technology delivered in the form of objects embedded in web pages (termed movies), which need a special plugin to view. Flash is good for delivering certain types of content, such as video, animations, and banner adverts, and can sit nicely alongside web standards, but it is terrible for creating entire sites in, and can be rather inaccessible to people with disabilities (ok, so client-side web standards content can be inaccessible too if done badly, but I’d argue that web standards are easier to make accessible than Flash).
• Silverlight: This is kind of Microsoft’s answer to Flash — a technology created recently to provide dynamic content for web sites. It has many of the same advantages and disadvantages as Flash.

HTML, CSS, and JavaScript

There are many standards maintained by the W3C, but the three you should start off learning are HTML, CSS, and JavaScript, in that order (they get harder to learn in this order, and it is fairly logical to learn them in this order too).

• HTML: This is a markup language that you use to structure your content — it uses a system of elements that you wrap around various bits of content to give them meaning. View the source of this document now — Right-click (Ctrl + click on Mac) and select View source or similar depending on what browser you are using — and look at how the different elements define paragraphs, headings, lists, etc.
• CSS: A rule-based language that you use to style your web page — you can for example select a specific type of element and choose to alter font size, colour, or position on the page.
• JavaScript: A scripting language that allows you to apply dynamic behaviour to sections of your web page, for example allowing you to drag and drop sections, animate things, make things fade in and out, or change styling on the fly.

In general, you should keep your content, style, and behaviour information separate in these three layers, and follow best practices as outlined in my web standards curriculum course. For example, you can add styling information directly to HTML using <font> elements and inline CSS inside <style> elements, but it’s generally better to not do so. In the next issue I’ll talk about this and other benefits of using web standards and associated best practices to create your web sites — accessibility, flexibility and ease of maintenance, search engine optimization, etc.

Related posts:

1. Interview with Zac Gordon