CSS: Separating Presentation and Content

In the old days of the web a site's presentation was entirely hard-coded in the HTML. It had handy things like font tags which is what one used to say what face the text was in, what color, size, and so forth. Other ways of presentation were to say what background color, or "bgcolor," the table cells were, what background images they used, what colors the borders should be, etc., which was important then because layout was done almost entirely in tables. This worked OK, but a need for more control of webpage presentation necessitated more evolution of HTML at the cost of it becoming more complex and difficult to update. Basically code for pages grew longer and longer... and uglier and uglier. And it didn't even all work all of the time, considering that Netscape and Internet Explorer - the two leading web browsers at the time - utilized tags that the other did not, causing major cross-browser compatibility headaches. Web designers and developers dreamed of a better way, a way to more separate presentation and content. And by 1999, they had one: Cascading Style Sheets, or CSS.

Non-cascading style sheets have been around in one form or another even before most people knew what an internet was. But it wasn't until 1994 when a style sheet method was proposed that closely resembled the CSS of today, the most important difference being the "Cascading" part, which means interaction and prioritization between an author stylesheet, user stylesheet, and then a User Agent (browser) stylesheet. It wasn't until late-1996, though, that CSS level 1 Recommendation was published by the WC3. And unfortunately it wasn't until 1999 that a web browser achieved near-total adoption of CSS standards (Internet Explorer), and by that time development of CSS Level 3 began, which is still being tinkered with today.

A lack of support for CSS (and probably, also, a lack of knowledge of it) is why I don't think I ever created a style sheet until about 2002 or so. And I think the same timeline can be applied to most designers and developers. Old habits are hard to break, especially when CSS was still fraught with bugs and inconsistent cross-browser support. But we forged on, knowing that even with its problems CSS was the Promised Land, a way to finally get more consistent presentation and separate it from the content so both would be easier to maintain.

And Separation of Presentation and Content is considered to be an important aspect of this new era of the Web we're in now, often called "Web 2.0." And by now and all web designers or producers worth their salt should be almost entirely or using CSS (along with DIV layers, which have essentially replaced tables) for presentation. Font tags have all but vanished; Dreamweaver, arguably the most popular WYSIWYG editor, snubbed its nose at font tags several years and versions ago. Bolding and italicizing text directly in the HTML are still around, though, but the tags are now "strong" and "em" (emphasis), respectively. (Honestly I don't know what was so wrong with the "b" and "i" tags, but oh well.)

So how does it work, one might ask? How is separation of presentation and content achieved? Simply put, a CSS file is coded with classes and IDs which you reference in the webpage file - after you've linked the webpage file to the CSS file of course. In these classes and IDs you declare what each one of them does to the text, DIV layer, table cell, etc., which could be defining font colors, font size, background colors and/or images... I could go on and on. The point is, your style definitions are saved to be reused over and over again, instead of having to copy and paste the same hard code over and over again, which is what we had to do in the old days. And THAT makes for cleaner, simpler, more elegant code, and makes editing the content much easier. This is very important, since more emphasis on Content these days versus monolithic marketing fluff that used to dominate the domain of corporate websites. And this emphasis includes making content more living, ever-changing, especially user-managed content, as in with blogs.

You can get too crazy with CSS, though. When I first got into it my coworkers were all hopped up on defining a bazillion things in each class in an effort to make the HTML pages shorter and shorter, to the point where the simpler pages were only about five lines long. That was pretty cool, but the downside was that most of those really bloated classes were not reusable in multiple situations. And it just shuffled the complexity from the HTML over to the CSS. This philosophy does not work, especially since developers, when they're taking an HTML/CSS prototype into a Content Management system, like to reuse classes whenever they can. This is definitely a bad method of coding CSS, especially if the site is to be dynamic and content-managed.

But there are many different philosophies with CSS one can use. There are almost as many methods of designing them as there are designers. And which ones are good or bad pretty much depend on who you talk to. And of course, the best way to do it, any designer or producer will tell you, is the way he or she does it. But if you just remember to make the classes as reusable as you can, like for instance relying on "strong" or "em" tags in the HTML to further format a text class so you can reuse it in multiple places, you're doing good. Or even, if you're applying classes to table cells, you may even want to - *GASP!* going back to defining widths and text alignments of tables, cells, or DIV layers in the HTML!

But that comes up less and less often with how the use of DIV layers is eclipsing the use of tables these days and you will rarely want to define widths of DIV layers in the HTML, actually; it's better to apply a double class to it or an ID. But still, that philosophy is a good one to keep in mind. Just always be thinking "How can I make this class more reusable?" and you'll usually be on the right track.

For example, when you're redefining header tags like H1 or H2 (which is a good idea for headers in terms of Search Engine Optimization - SEO) you might not want to define the color, in case the header might be a different color in different situations. What I like to do, personally, is set up the site's color scheme at the beginning of the style sheet for the sake of a consistent vision of the branding, give each color an appropriately-named class, and then apply that class to the H1 tag, which I've already redefined to have other attributes. I will only put the text color in the H1 redefinition if I am absolutely certain that the color of each header will always be the same.

Let's say that the client changes branding a little, or they (or you) decide that the header would be better to be another font face. Or size. This is where Separation of Presentation and Content can be extremely useful. If you just change that one redefinition of H1 and re upload the sheet, boom, suddenly all the H1 headers are changed. Easy, huh? In the past, that could have taken 20 or 30 minutes, or maybe even an hour or so if the site is gargantuan, depending on whether or not you had a good "Find and Replace" feature on your WYSIWYG editor. And things like that can really affect budgets and time lines.

Being able to do that can mean that sites can get a fresh coat of paint, as I had mentioned earlier, instead of a whole redesign. You can sometimes re skin a website by only modifying things in the style sheet. You might even get away with restructuring it just by redefining classes controlling attributes of DIV layers - but usually it's more complicated than that (the possibility of this depends on the forethought the producer had, and the more clever he or she was when constructing the initial site). But the point is, there may not be a need to go in and touch the content at all. The site can, in theory, change around it. For instance, a News and Events module could be shrunk, expanded, or moved to a different area of the page or site, or its aesthetics could be changed - like color and so forth - without changing its content or programming behind it. And if content of that module or anything else does need to be updated, it should be as simple as it usually is.

What is the future of CSS? Well, it's murky, to be honest. The developers are still working on CSS3 and trying to get it fully released - someday, but in the meantime are adding to CSS2. This website has all the nitty gritty there. There is an argument, though, in the CSS community on whether or not to issue new versions of CSS2 while we're waiting for CSS3 to be fully realized. Some people think that perhaps it's not a new level that's coming anyway, just more modules. But one thing is for sure, Presentation and Content, for the most part, will continue their separation and maybe someday their divorce will be final, if you will.

I just hope that they don't fight too much over who gets custody of the java scripts.

For more information on CSS as well as some useful tips and tricks, websites like A List Apart or the CSS Discuss Wiki are great resources to consider to enhance your knowledge of it or maybe just to put a few more tricks in your CSS magic hat. Those are just a few of many, though. I recommend lots of web searching. So, Happy Googling, folks!

*EDIT October 28, 2010. We have moved our blog to http://blog.roundedcube.com and you can now comment on this specific post at http://www.roundedcube.com/WhatsNew/Blog/css-separating-presentation-and-content

Business Community Rallies Around Initiative to Boost St. Louis IT

Earlier this week, we launched a new website for a client whom we've been working with over the past six months or so. The website is particularly close to our heart because of the cause it supports. Greater St. Louis Works (http://www.greaterstlouisworks.org/) is a group of private and public sector partners who have come together to make sure that St. Louis attracts, develops, and retains the great IT talent needed to compete in the global marketplace. Needless to say, being a Web development firm headquarted in St. Louis, this project was particularly interesting to us.

As the initiative is in its early stages, we guided the website strategy and provided design, development and deployment services. The website serves as the focal point for communication of this effort along with events and communications from the partners themselves and the St. Louis Regional Chamber of Growth Association.

Greater St. Louis Works really gave us the keys to drive this project; giving us the freedom to do what we do best. As a result, they were able to focus on their day-to-day business while we handled the website - getting their feedback and decisions as needed.

The resulting website was unveiled in downtown St. Louis to about a hundred IT business leaders interested in the intiative. The event was a success and additional collaborative efforts are now in the works to continue the evolution and expansion of the website to further boost the efforts of Greater St. Louis Works. So stay tuned to see the new features and community-related components to come.

*EDIT October 28, 2010. We have moved our blog to http://blog.roundedcube.com and you can now comment on this specific post at http://www.roundedcube.com/WhatsNew/Blog/business-community-rallies-around-initiative-to-boost-st-louis-it

Web 2.0 Design Fundamentals

Is Web 2.0 the handy term for a new, user-friendly and dynamic era of the web? Or is it just a buzz word? However you personally feel about the term, there are definite characteristics most people can agree on that define this new era, whatever you want to call it.

It is generally accepted that the first use of the term was at the first O'Reilly Media Web 2.0 conference in 2004, uttered by Tim O'Reilly. He said that it was "the business revolution in the computer industry caused by the move to the Internet as platform, and an attempt to understand the rules for success on that new platform."

That phrase, "internet as platform," was probably the three most important words to begin to define the often ambiguous term. Since even before 2004 websites have been moving in a direction to become more and more like desktop applications, even sites that aren't considered web applications per se. And to achieve this illusion of a desktop application, web sites and web apps should adhere to agreed-upon design fundamentals of this new "Web 2.0" era of a rich user experience.

Before getting into the actual design tenets, it is important to consider the relatively new technologies that make some of them possible. One of the biggest characteristics of Web 2.0 is managed content, sometimes in back-end Content Management Systems (CMS) for corporate websites, like Sitecore, or user-managed content, like blogs. Another technology to make this move to more desktop-like applications is AJAX (Asynchronous Javascript and XML) which allow rich customization, like collapsable and movable windows, just to name a few examples.

One of the biggest advantages of AJAX or other similar technologies is reduction - or sometimes complete elimination - of page loads and/or reloads. This is arguably the biggest consideration with Web 2.0 Design Fundamentals. Anything a designer can think of, and a developer can implement, to reduce page loads is a smart way to enrich user experience and ease usability. Wizards, movable and resizable windows or modules, and interpage scrolling are all relatively new possibilities in today's Web. This is in large part due to a move to utilize DIV layers more than tables, which were the clumsy old way of website presentation, at one time the only real way to do it. Indeed, you can bet that all of these customizable modules are in fact DIV layers, which are much more flexible and liquid than the clunky old rigid tables, especially used in conjunction with javascript, as in with AJAX. DIV layers can be tricky, though, and sometimes unreliable in terms of cross-browser compability if not coded properly, but they are generally much better than static tables.

Tables are still useful, however, for presenting tabular data and forms, which is really only what they were originally intended for.

So how do things like customizable windows and interpage scrolling reduce page loads, you might ask? It's all about doing as much work, and containing as much of the workflow that we can, on the same page. The old way involved http responses and requests - or loading a new page - just to change one or a few things. Like changing options on a form, for example. This was a nuisance to workflow. Now we can delight users by putting things like Drag and Drop, In-page custom editing, Grid Cell Editing, Slide-Our or Pop-Up editing, Auto Complete, Refining Searches, In-Place Drill-Down, Resizable and Scrolling Modules and In-Context tools in our designs.

On the flip side, there exists a list of things not to do, sometimes called "anti-patterns," that will ensure a poor user experience, things that can go wrong when one tries to make their site Web 2.0 without knowing what one is doing. Things like Meandering Way, where the user is forced to go on a tiring journey with the mouse all over the page to get to what they want, Tiny Targets, where key interactions that are almost too tiny to click, Hover and Cover, where the Pop-Ups mentioned in the previous paragraph cover up important information needed to complete the task the Pop-Up was for, Linkitus, inconsistent or bizarre use of linking schemes, and Too Many Windows and Too Much Animation can all leave users of the offending websites with a bad taste in their mouths. Designers and developers must be very careful when treading into the waters of this new era of the web and they haven't been properly trained on how to swim in it.

There are Web 2.0 design fundamentals that designers don't need developers for necessarily, that don't have to involve AJAX or any of the other progressive technologies available today. There are simpler, but still profound, basic tenets of modern design and production that must be considered when it's time to create - or recreate - a website.

One of those rules of the new Web is separation of presentation and content, which is largely achieved via the use of Cascading Style Sheets, or CSS for short. For the most part, these handy documents and accompanying coding techniques began working their way into the web around 2000 or 2001, and were quite ubiquitous by the middle of the decade. Now, you will be hard-pressed to find a website not utilizing CSS and if you do find one it's either grossly outdated or the person who created it needs a serious talking-to.

I will be going into this more in-depth in another article, but what Separation of Presentation and Content is simply about is... well... separating presentation and content. In other words, how the content is presented needs to be divorced from the content so that either one can be more easily changed. A website can be given a new coat of paint, if you will, without the need for a complete remodel. And without the mess of the old font tags and static HTML color definitions, content change is usually a snap. And that's very important because content, especially living content, on a website, as opposed to the monolith online brochures of yesteryear, is very important to this new age of the web. Users no longer want marketing fluff. Content on demand: they want the content they're looking for, and they want it NOW!

Which is why many of the most popular websites today are blogs. Or, like this blog for Roundedcube, Inc., they're used to go along with a corporate website. Sometimes the look and feel of a blog website, even if a site isn't a blog, is considered to be an aspect of designing in "Web 2.0." Things like tall headers, larger fonts (for a while there the trend was to make text smaller and smaller because somebody thought that looked cool and too many people decided to agree), and taller line height makes the text more readable, another sign of how much more important content is becoming.

Speaking of Roundedcube, we strive to stay on top of the latest trends in design and the technology needed to implement it. We employ AJAX, DIV layers, and of course we always use CSS; we want to make our clients happy by making sure users of their websites are happy. And happy users are repeat users. Which is why we design for a rich web experience, one of the most important aspects of what many have decided to dub "Web 2.0."

*EDIT October 28, 2010. We have moved our blog to http://blog.roundedcube.com and you can now comment on this specific post at http://www.roundedcube.com/WhatsNew/Blog/web-20-design-fundamentals