Please note that the entire Guide is a work in progress, so please contact me if you find something that seems contradictory, is wrong or just want to comment on something
The web is a wonderful place for distributing and consuming information as well as experiences such as video and games. However, many mistake the Internet for an intranet, web sites are built with no regard for web standards, compatibility and accessibility for specific platforms and browsers. When you can’t see the whole picture SEO starts to mean buying links, accessibility is having alt-texts on images and usability is doing something just because someone else is doing it.
Clean web development is about getting rid of all the noise, clutter and performance sinks in the markup and using the elements for what they were originally intended for. This way we don’t only get better accessibility and compatibility across devices and platforms, maintenance is simplified and the pages will load faster. Together with good content this will result in great SEO, a solid foundation for a mobile solution but most of all a better overall user experience.
Figure 1.1. The source code for SAAB Groups homepage as of 2011-12-02.
Many developers with a base in .NET, Java and similar state that they know HTML and as a result get the responsibility to implement pages or functionality on the web. The reality is this, many developers might know how to write valid HTML (if even that), but they don’t much about web development or web standards.
Take a look at the source for SAAB Groups website, Figure 1.1 shows a screenshot of code with inline styles, inline JavaScript, elements inserted only for styling and id’s that’s longer than most normal sentences. What isn’t shown in this screenshot is the 22 external JavaScript requests (along with 51 inline scripts), 6 external stylesheets, a 23,000 character viewstate variable (look it up in the source, search for “__VIEWSTATE”) and 1372 DOM elements which makes the page land at around 1.95MB. I don’t want to point fingers but this is a classic example of what can happen when system developers with no domain knowledge gets to implement web solutions.
HTML is a very clear and forgiving language which leads many into a false sense of knowledge, they think they know it when in fact they hardly know it at all. Making a web page display a heading and a couple of input fields does not qualify a person as being a web developer, it merely shows that the developer knows the most basic building blocks of HTML. To really know HTML, the developer must know how to structure documents, which elements and attributes are appropriate for different purposes, how to separate design (CSS) and behavior (JavaScript) from structure, accessibility on the web and Search Engine Optimization.
Separately, web standards, accessibility, on-page SEO and a mobile responsive web are important but together they are extremely powerful. What’s even better is that they’re part of the same positive spiral, by making one part better the other will benefit as well. The foundation for all of these disciplines is clean HTML, proper use of DOM elements and clearly structured content.
However, the disciplines mentioned above are mostly related to front-end development, to become a complete web developer you must also possess skills in web and SEO strategy, back-end development and performance analytics and metrics.
Clean Web Development is a complete development theory for any web project or component, it can be adapted to small or large projects, but the name comes from the foundation of clean HTML from which everything else rests.