About a year or so ago, I wrote a series of articles on internet marketing and SEO-related topics for small business. The intended audience for these posts was the average small to medium sized business owner that doesn’t know much about SEO but knows it is important for his/her business and that they need to learn something. Sort of in that spirit, I thought it might be useful if I write a few quick posts on HTML 5.0/CSS 3.0 and how the evolution of HTML & CSS are changing the web, not just for designers but clients alike…

Trend #1 Clients & Non-Designers Should be Aware Of: Websites are Becoming More Semantic

 

The notion of a “semantic web” is one worthy of an entire post or two by itself but, for the purposes of introduction, it encompasses the idea of making all data on the web knowable, collectible and personal. For website designers, semanticism implies that the content of a website should be organized in such a way that the structure of the site reveals information about its content. For instance, the average website has long been divided into tagged sections such as “body” and “head.” HTML 5 introduces a much more specific hierarchy for website design, with new elements like “nav,” “section” and “aside” corresponding to specific types of information, namely navigation, main content and sidebars. We’ll talk about the Semantic Web more thoroughly in a later post.

Trend #1A: Websites are Becoming Less Image Dependent in their Design

 

This next point relates to the first, (which is why the poor thing has been deprived of its own number…)

Just as CSS represented an evolution step for the web — allowing designers to manipulate the presentation of code via CSS — current trends in HTML 5 and CSS 3 are likewise evolving the web to make content more searchable and renderable from within the browser environment. The result of these changes is code that suggests its content, just by its structure and much less reliance on the “dumb pixel content” represented by illustrations.

What the Hell do I mean by this?

 

Well, let me give you a couple of examples…

In the old days, the top of a website might look like this:

 

Now, there’s nothing functionally wrong about the look of this home page, but, as the markup below illustrates, much of the logo and headlining information was conveyed via embedded images, rather than readable type. For example, the background logo and firm name, along with the script headline were all images. (See below…)

We’re actually in the process of updating this website and porting it to WordPress. In the process, I’m rewriting the code and, for instance, here’s what it’s looking like, using only an image background for the oversized “MC” behind the main logo.

All this readable type promotes search friendliness and makes important content, (like company names and large-copy healines) understandable to every bot out there crawling the web. Translated: more readable content means more ways for folks to find you on the web.

As a couple of final points, the trend towards making presentational elements of websites less image dependent extends beyond just type. Widely used design techniques, such as drop shadows for both text and shapes are now pretty mature in CSS and have wide browser support. So, for instance, the examples below show (again) the sort of work that we’re now producing within CSS and HTML, all of which we formerly relied on images for…

 

The aggregate result of all this decreased reliance on images are websites which load faster and make more sense. “Sense” here is defined as having meaning both to the machines that crawl the web, as well as the folks who browse it…