Field Notes Inside an Integrated Communications Agency

Have you ever had the distinct pleasure of listening to a web development nerd ramble on about why your website needs to use CSS and XHTML? Did you find your mind wandering or eyes glazing over when he went on and on about W3C standards? Don't worry - this happens all the time. As a web developer, I apologize for our kind's overzealous and sometimes ridiculous excitement over these obscure acronyms. But apologies aside, I would like to say a few things about why we all get so worked up about a few simple letters.

The technology for producing and publishing on the web has grown out of its infancy. The changes adopted in the past five years are now the cornerstone of modern web design and development: two languages called XHTML and CSS. The magic of these two languages (the part that gets web developers so excited) is their power and flexibility. In a nutshell, XHTML is a web language focused on content. It is used to spell out the textual content, media, and links on a web page. CSS is a language focused on formatting. It gets coupled with XHTML to specify things like where text should be placed on the page or what color the background of the page should be.

Bored yet? Well, don't be - here comes the good part... The underlying point here is not to simply explain these acronyms (by the way XHTML = eXtensible Hypertext Markup Language and CSS = Cascading Style Sheets), but rather to examine the design philosophy that these languages enable us to use. Modern web standards dictate that page content should be separated from page format. Concretely, this is actually done by storing the page content in an XHTML file and the page format in a separate CSS file. It may not be immediately clear why anyone would want to do things this way, so consider the following scenarios:

• Your web site has over 500 distinct pages. Recently your organization decided to change the background color of all the pages from pure white to a striking blue that matches your logo. Unfortunately, the pages weren't designed with XHTML and CSS, so a poor intern at your organization gets assigned the tedious task of changing the background color in hundreds of web page files. With modern design methods, all that would need to be changed is a single line of code in a CSS file.
• Market analysis shows that a significant and increasing number of your company's customers use their mobile phones to browse the Internet, and you'd like to attract them to your website. Your site was designed with its formatting embedded in the content (rather than in a separate CSS file). The site's width is 750 screen pixels, but a mobile-ready version of the site must be only 300 pixels wide. Since the site's format was specified in the same file as its content, every single file on the site will need to be rewritten to accommodate the change in width. Had the site been designed using XHTML and CSS, it would only have been necessary to modify a handful of CSS files to produce layout changes throughout the entire site.
• A customer with a vision disability visits your website using an assistive technology called a screen reader that reads the content of the site's pages aloud. Your site was designed in the year 2000, and its layout was created by embedding text and images inside of tables nested within tables (sound messy?). This sort of design was very common just a few years ago, because it allowed web designers to achieve precise control over how the website displayed in different web browsers. Unfortunately, the customer's screen reader cannot make sense of the table layout, and it reads the textual contents of the site in a confusing and illogical way. Frustrated by the experience, the customer returns to Google to search for a competitor's site that is more accessible. Had this site's content been separated from its format using XHTML and CSS, the customer's screen reader would have read the text on the site in the correct, logical order that was intended by the designer.

These scenarios demonstrate the key features of separating format from content in web design: maintainability, modifiability, and accessibility (and that's not even mentioning code readability, content manageability, or how-could-it-possibly-be-more-awesomeability). In a world where we all use document editors that let us format our text line by line and see the results immediately, it can be difficult to imagine how separating the text content from its format could be useful. What I mean is, imagine having to create and edit an extra file to change the font face from Times to Arial in the letter you just wrote in Word. That doesn't seem convenient or intuitive, but in a website, it's essential. Modern sites are typically hand-coded in XHTML and spread out across many files. There is no method to "select all text" and "change the font face to Arial" for every page in the site - that is, unless you're using CSS! So the next time your web development nerd rambles on about CSS, rest assured, he's speaking in your best interest.

At Capstrat, we're committed to keeping up with the web. We are experts in the usage of XHTML, CSS, and other key web technologies. Whether you have an aging site that could use a facelift or you need a new site built from the ground up, our designers, developers, and communications experts will help your business or organization achieve the future-ready web presence that you need to succeed in this digital age.