Something funny happened between then and now. I realized that content is already made up of objects. All at once, I discovered I was one with all of the content scattered across the web. It was a very zen moment I’m not sure I could recreate on my best day.

See, we are already working with content objects everywhere, but we just haven’t noticed. Take Twitter for instance. Twitter specializes in the content object. It’s a very small object, but it’s there all the same. Take, for instance, a tweet from my feed.

My one tweet is both content on its own and it is part of my feed which is also content. The same can be said for blog posts, RSS feeds, Facebook status updates, YouTube videos, that picture of your cat and any other of a number of things scattered across the web.

The funny thing is, these pieces of content are already broken up for you and made ready for consumption. So, let’s head back to your site for a moment. That footer information you have posted on every page is managed as an object. This can be further demonstrated by the fact that CSS uses the box model to manage the content on your page. Those boxes are objects.

This is getting a little esoteric. Let’s bring things back around for a moment, shall we?

Content is more than just the sum of its parts, i.e. words, images and video. Content is something so real it can almost be touched. It’s a building block. Without content, the web would be nothing and the only reason the web is something WITH content is because content is something.

Still a little weird, right? When you build a site, you could simply throw content at the screen without containers. This would result in a rambling page with no breaks, no sense and no way to logically decipher it. This would be something akin to the center of the sun: lots of elements, really dense and really REALLY hard to live around.

In order to make the content more presentable to the user, we break it up into pieces we can manage and format. As soon as you have done this, you no longer simply have words and other garbage on a page, you now have divisions, paragraphs and images. Outside the page, those divisions are meaningless.

Says who?

If a paragraph from a book were written, longhand, on a sheet of paper, it doesn’t lose the quality of being a paragraph, it simply loses its association with the book from whence it came. This means the content structure is actually meaningful outside of the original context.

This is really useful when you deconstruct and reconstruct a page. All of a sudden you aren’t trying to figure out where to put this image and that word. Instead, you are filling a bucket. That bucket happens to have a name, and that name is ‘page.’ The best part of this whole exercise is, we have now separated content from the page it lived in.

Why do this?

Once you’ve broken the content out of the page, it doesn’t really matter where the content comes from. This means you can start drawing smart boxes on your page and simply filling them with the content you want. Need an RSS feed? I’ll draw a box for that. Want a piece of home-grown content? I’ll draw a box for that too. After all of the box drawing is done, you can start pulling in pieces from all over the web and putting them right into your site.

Much of this isn’t new. We’ve been dropping content into sites like this for years. Where this can get really interesting is when you are working on blended content/application sites. All of a sudden something really magical happens. Functions aren’t programs which live off in a separate ecosystem. The functions become OBJECTS!

When your functions become objects, they stop being scary and just become part of the content flow. Forms go here, dynamic items go there and the page comes together. By simply realigning ourselves and looking at content as objects, instead of words, images, feeds, functions and all the other odds and ends available to us in spades, putting a site together becomes something of a spiritual experience. All of the wonders of the web come together to form a cohesive whole.

For your next project, go crazy. Imagine you are playing with blocks and throw away your content notions altogether. Use the APIs available in the wild and build a smarter page. The magic of the web is the fact that everything exists a mere request away. Think about objects and build your site. Make the web a better place.

©2012 Chris Stead. All Rights Reserved.

Engineers and designers work together, or divided as the case may be, to create an experience that users with all of their faculties and a modern browser can enjoy. While this goes down, the rest of the world is left feeling a bit chilly.

What happens is, the design starts with the best of intentions and, then, the interactivity bug takes hold. What comes out is something that is almost usable when slightly degraded, but totally non-functional when degraded to the minimum.

In the end, of course, the user needs must be considered. Having a graphically intensive site doesn’t hurt if you are a design firm, but might not be the best option for a company dealing with medical customers.

My suggestion, however, is simple. Instead of degrading your site as the user needs become greater, start with a site that is usable at the lowest common denominator and work up.

Understand who your audience is and prepare to serve those of them who have the greatest needs. Build a site that is attractive and works if the user can only view it through a program that reads for them.

Once your site has been built and is fully functional, build up. Integrate functions to serve the users that have some needs, but aren’t in the highest-need area on the spectrum.

Continue on this path until you have integrated all of the latest and greatest, bleeding-edge functions that your highest-ability users can interact with.

As you build this way, be sure that you are simply enhancing the function that is already on the screen. As you add enhancements, you should be able to remove them cleanly and still get the same experience you started with.

I call this approach graceful integration. Each progressive step, you integrate more functionality and interaction, preserving the layer just below as a separate user interaction.

Each progressive enhancement should be separate and easily disabled. The granularity of your enhancements can be as large as a two-step approach: all or nothing. You may also enhance your site in a careful way that allows for several levels of degradation depending on the user and their distinct needs.

A natural separation of user interaction happens when HTML is written, CSS is added and Javascript acts upon the subsequent design. This three-tier separation, you can use the work that will be done regardless to define your user interaction in a clean way.

One of the best quotes I’ve heard regarding graceful degradation, in paraphrase, is, “if you show it with Javascript, hide it with Javascript.” I offer this with no source as I can’t recall where I heard it. If you know/are the author of this, stand up and reap the rewards.

The attitude in this quote represents the core of graceful integration. As you pile the Javascript on, be sure you manage its behavior with Javascript. Don’t use CSS to manage something that is going to be handled with Javascript. If you must, prepare a style sheet that defines scripted behavior, but set the object classes with Javascript.

There are other benefits you’ll gain from this approach. Not only will your users appreciate the time and care you put into their experience, so will the search engines.

As search spiders crawl your site, they won’t see any CSS that looks to be doing something sneaky like hiding text from the viewer. Spiders have gotten smarter and they recognize when something fishy is going on. As you are already doing something good for your users, you get this bonus for free.

For those of you looking for snippets of code, the best thing you could know and rely on is the “noscript” tag. This is a tag which defines the behavior of the page for users without Javascript. I use this quote a bit to display extra form controls when Javascript has been disabled or is unavailable to the user. You can use it like the following:

<script type=”text/javascript”>
//your script logic goes here
</script>
<noscript>
<!– HTML elements go here like style definitions or form controls. –>
</noscript>

You can also use noscript by itself scattered throughout the page to display page elements that might, otherwise, be missing for some of your users.

In the end, behavior on your site should be defined by the HTML first, the CSS second and the Javascript third. Should you choose to go to a finer granularity, don’t forget to double check your users can still use all of the layers effectively. Be mindful of your users, integrate function into your site in stages and make the web a better place.

©2012 Chris Stead. All Rights Reserved.