The Case for Modern Web Development
The following text is an excerpt from the WebSprockets whitepaper on modern Web development. You can download the full whitepaper from the link provided in the side box of this page.
This document was created to discuss the benefits and purposes behind developing Web projects with Web standards. It’s important to understand how Web standards impact the design and development stages, thereby allowing designers to work more effeciently with the programmers to produce a smooth work flow and a better Web site.
When discussing Web development, it’s important to remember that many of the techniques used in the 1990s have become obsolete, unnecessary, even harmful, and bear little resemblance to the techniques employed today. A frequent problem for professional Web developers is people who have a static view of the Internet and Web sites. They remember when many Web sites were sliced up graphics inside nested tables. While there is no umbrella term to encompass the new techniques and technologies employed, they are sometimes referred to as “semantic markup.” However, people don’t understand what that means, nor the benefits gained by using it.
Simply put, semantic markup is the separation of content and presentation - pure content with no visual style present. For example, paragraphs are placed in paragraph tags, navigational elements are placed into lists, tables of data are placed into tables, and so forth. This was not the case with earlier techniques, where, for example, tables were repurposed to lay out a site instead of containing tabular data.
So why were the old practices adopted in the first place? Simply put, the standards which allow us to create a better Web experience today did not exist at that time, but the demand for richer presentation that was more consistent regardless of platform or browser spurred people to work around the limitations of the era. In the modern age of Web development, new standards and technologies fill this gap without the drawbacks of the earlier techniques.
The new standards are written by the World Wide Web Consortium (W3C). The W3C is responsible for writing and maintaining Web standards, such as HTML, XML, CSS, and other technologies for Web development. When a site adheres to their standards, it is said to be “valid.” They also provide information about best practices for Web development, such as why links with “click here” are a bad idea.
The reason for W3C’s existence, and for adhering to their specifications, should be obvious, but think in terms of graphic design. For years, graphic designers have been explaining to corporate clients the value good graphic design can bring to their businesses. It’s that same principle which justifies using valid code and following the W3C guidelines when building websites. Any designer who understands the impact of good design on business should understand the impact of good programming on websites.
Let’s look at some of the main reasons behind modern Web design practices ...
Quality Assurance
The very nature of the W3C is to bring quality assurance to the Web. In the early days of the Web, there were many ways of accomplishing the same goal when creating a Web page. Some methods eventually proved better than others over time. But the point still stood ... how can a professional Web developer reliably show clients that a quality assurance process was used? After years of practice and collaboration, the W3C has issued guidelines and standards that allow every Web developer to work with tried and true methods, ensuring the best possible product for clients.Legality
While adherence to the W3C specifications provides the highest level of quality assurance, it also protects Web developers and clients legally. As mentioned earlier, there are multiple ways of accomplishing the same goals when programming a Web page. But if the developer has followed the HTML specification precisely, for example, then no one can argue that the page was created incorrectly or is the product of inferior workmanship. A Web page that validates with the W3C’s online validator can be legally shown to have met all requirements from a technical execution point-of-view.Longevity
Like it or not, valid code is here to stay. More and more Web browsers are implementing strict adherence to valid code, which means older sites will either cease to work properly or they will display incorrectly. Building a Web site that validates will ensure compatibility with current and future Web browsers. It also makes a site easier to maintain, which encourages regular updates of content, which in turn helps with search engine rankings. “The underlying technology of the web browser has reached the point where standards compliance must take precedence. In order for the web to maintain its bullet-train rate of innovation, the web browser must become a stable building block for site designers, just as standardization on Windows has encouraged innovation in the PC space.” - David Kerley, senior analyst, Jupiter Communications (http://wp.netscape.com/browsers/future/standards.html)Flexibility
One of the biggest conceptual shifts in modern Web development is the separation of content and presentation. That is, the actual text displayed on a page is fully separated from the information on how it is presented visually. This makes changing the visual presentation much simpler, as you only have to change the stylesheet (CSS) to change how something looks, instead of having to edit each page directly. That kind of flexibility makes it easy to have a stylesheet for PC viewing, for printing, for PDA viewing, and so on. The website simply detects the device requesting a page and utilizes the appropriate stylesheet.Browser Consistency
Since modern Web technologies are freely available open standards, any browser is free to implement them, allowing for widespread adoption of the technical underpinnings of modern Web development, and assures consistency from one browser to another. If a problem is encountered, reading the specification will reveal who is at fault – the browser or the page in question. These open standards are also bringing unity to the browser market. Where once a Web page could look different in every browser, now there is consistency and less need to create multiple versions of a website for each browser.Speed and Size
A site created with modern Web standards is always smaller and faster than a site which employs the techniques of the ‘90s, or a Flash site. Separating the content and presentation means that the size of each page is smaller, and the presentational elements only need to be downloaded once. A web developer recently re-tooled Slashdot using Web standards. While the decrease in size of each individual page was merely 9kb, with the amount of traffic that Slashdot gets, the savings added up to 14 Gigabytes per day, and an estimated yearly bandwidth cost savings of $3,650! http://www.alistapart.com/articles/slashdot/Search Engines
Many of the techniques employed in modern Web development are geared towards search engine optimization. For example, search engines aren’t able to see what’s inside an image without an “alt” attribute, which is required for a page to be valid. The recommendation not to use “click here” as link text is also geared towards SEO (search engine optimization)- search engines use the link text to build information about the page it links to, and “click here” contains no such information.Disabilities Compliance
The W3C standards take the disabled into account as well. For example, to make a page validate, it must contain alternate text describing any images; screen readers and braille terminals aren’t able to display images, nor dechiper their contents without this. Web standards are an excellent first step toward accommodating the disabled. Standards-compliant sites often meet Section 508 law, a requirement for some businesses!Decreased Development Time and Cost
Because everything is standardized and well-documented, it’s much easier for developers to create sites. As browsers continue to implement strict adherence to Web standards (and they are), Web developers are able to develop a site/page and rely on it looking consistent from browser to browser. This is one of many reasons why Firefox is quickly gaining ground in the browser market. Its adherence to Web standards far exceeds that of Microsoft’s Internet Explorer, which frequently requires “hacks” to be created to work around IE’s bugs and poor support for Web standards.It’s also much easier to make changes to a Web site built to Web standards. As anyone who has worked with old Web development techniques can tell you, old-style Web pages are fragile – changing one thing can affect a large number of other elements on the page. Sites created with Web standards are much more robust, making this a non-issue.
Leveling the Playing Field
Many probably remember the “browser wars” of the ‘90s, in which browser makers added features with dubious utility in an attempt to differentiate themselves from competitors. While there is room within the standards framework for new and experimental technologies, they are separated from the standards compliant parts of the browser. This lets developers experiment freely but maintains the existing framework of Web technologies. Browser manufactures are finding they can create a standards compliant engine that is consistent with Web page display, while developing cool new features (such as Tabbed Browsing) that sets them apart from the competition and gains user loyalty.The Browser Game
While it’s clear that there are numerous compelling reasons for W3C compliance, many clients will say, “I just want it to look and work the same in every Web browser.” Depending on the specified project criteria, that can be a lofty and expensive goal. Any worthwhile professional Web developer will always strive to ensure that a Web site looks and works the same in the latest version of the most popular Web browsers. It’s also common to support at least one version back of each Web browser. However, clients need to consider carefully the level of browser support that is desired for a new Web site. The popularity of each browser on the market, as well as the target demographic for the Web site, should be factored in when considering the browsers to be supported. The day is approaching when planning which browsers will be supported by a Web site will be unnecessary, as there will be complete uniformity of how all browsers display a Web page (due to the Web standards movement). But remember, if you want older browsers supported, you lose advanced features available in the newer versions of HTML and CSS. The more browsers that have to be supported, the more trade-offs that will be encountered and the more expensive the project becomes.Web development is always a compromise, which is very important to understand. While you may lose some control over presentation and design elements in the short term (browsers are continually improving), you are gaining the eyes of the whole world. That being said, quality Web developers always make every effort to maintain the design intent.
An additional consideration is that many older browsers frequently have bugs that have been fixed in later versions of the browser, which either means it isn’t possible to adhere to W3C specifications, or additional time will be required to find a “valid code” work-around to the problem.
With all of this in mind, it’s important to remember that most popular browsers are free! It’s not unreasonable to expect people on the Internet to keep their browser up to date, especially since newer browsers bring added features and better security. People know this. Thinking that a Web site has to look good in Internet Explorer on Macintosh is a symptom of the “static Internet” mindset. But let the browser statistics speak for themselves. Is it worth doubling or tripling project costs to support a browser that is less than one tenth of one percent of the market?
You can read the rest of this article by downloading the following PDF (and continuing with page 5):