Posted by Jordan Burke on Monday June 13 2011 |
Previously...
Last week, we discussed the overall architecture of the internet and the World Wide Web (W3). We learned about client/server architecture, where the web browsers we use (Internet Explorer, Google Chrome, Mozilla Firefox) act as a client to display information retrieved from web servers, whether it be images, files, or documents. This week, we're going to look a little bit more at how things are displayed in the browser, and what you need to make sure the designer you hire knows.
A guy's gotta have standards
As with any professional field, there are standards in the field of web design. Given the "Wild West" reputation of the internet that may seem surprising, but there are a number of professionals in the field working tirelessly to create, maintain, and teach those standards. Jeffery Zeldman helped pioneer web standards with his book "Designing with Web Standards" (which is into its third edition), and has helped perpetuate those standards through his online magazine (A List Apart), several books targeted at web designers (A Book Apart), and a traveling conference with some of the biggest names in the industry (An Event Apart).
What are web standards, you ask? Web standards are a set of guidelines set forth by the World Wide Web Consortium (W3C) to help guide browser developers, tool authors, and others in their implementation of web technologies and rendering engines - basically, standards guide the ways we interact with and view websites. Web standards compliance also make it easier for those with special needs, such as color blindness and physical disabilities, to interact with websites. They outline a very specific way for the technologies that power the front-end to act and interact. Two of these technologies, which often provoke the most debate regarding their use are HyperText Markup Language (HTML) and Cascading Style Sheets (CSS).
Note: There is a second body that defines web standards, the European Computers Manufacturers Association (ECMA) and they deal with the standards as they pertain to ECMAScript (standardized JavaScript). We will touch on JavaScript at some point in the future, as it is a front-end technology; for now, we will only discuss HTML and CSS.
Coding HyperText ain't like dusting crops, kid...
If the W3 were a building, HTML would be the blueprints and corresponding structural elements. While it has often been misused and corrupted for other purposes, HTML is increasingly being used as it was always intended: for the structure and markup of a document on the web. The markup consists of tags, such as paragraphs (<p>), headers (<h1>, <h2>, etc.), and links (called "anchors", hence <a>), among many more. These elements can then have attributes, such as ids and classes, to identify them for use with browsers, CSS, and JavaScript.
The process for defining what is included in the HTML standard and what is not included is a largely democratic process that involves a good amount of debate, disagreement, refinement, and finally cooperation in the W3C. To give you an idea the length of the process, the last recommendation (creating a static standard to which all browsers and tools should comply) to the W3C for HTML was XHTML 1.0 in 2002 (XHTML stands for eXtensible HyperText Markup Language and combined the format of XML with the tags of HTML.) Since then, the work for a new specification, called HTML5, has been ongoing and hotly debated. HTML5 introduces and integrates a huge number of technologies useful for designers and developers, but it isn't expected to reach recommendation status until 2014 at earliest - some have even said it might take until 2022! Fortunately, modern browsers are increasingly integrating HTML5 specifications into their inner workings, allowing designers and developers to access these new technologies without the long wait.
Stylin' and Profilin'
What's a buidling without any walls, paint, or light fixtures? Not very pretty. That's what CSS is to our HTML documents: the pretty. Ask a web developer who has been around a while about what things were like before they discovered CSS or before it was invented. It was a nightmare. You had to style each tag by hand, creating huge, bloated documents where if you wanted paragraph text a different size than the default, you had to set it on every single tag. When CSS 1.0 came along, it was a beacon of shining light in the world of web professionals everywhere. Not only did it separate the presentational attributes from the structural elements on a page, it also provided a central location to adjust those styles.
The way CSS works is pretty simple: a file, called something like style.css, is linked to from the header of an HTML document. In style.css, the style rules for basic elements are defined so that a paragraph element, regardless of where it is on a website, inherits that element. It CASCADES through the pages, and if it changes, it only has to be changed in one location. Pretty neat, huh?
As with HTML5, the advent of CSS3 has brought a new and exciting time designers and developers, with some incredible effects and demos. You can check out some of the more impressive ones here (note: they only work in Safari or Chrome):
What does this mean for me?
So we've reached the end of our tour for the week, and we once again return to the question: What does this mean for me as a business owner?
For one, you need to make sure that the designer or agency you're working with understand the progression of HTML and CSS. Ask them what their opinion on using HTML5 or CSS3 in production websites. They may be all for it, they may advise on progressive enhancement or graceful degradation (allowing for the implementation of new technologies without a loss of content, a practice we follow here at JBird Design), or they may be against it entirely. Whatever their response, at least make sure they know that the technology is changing rapidly, and that it might affect your website and your business.
Next week
Next week on Web Design Essentials for Businesses, we're going to take a look at the various back-end technologies - a process that will probably take two weeks. Make sure to follow us on Twitter and Like us on Facebook to stay up to date with the series.