Class 2 – Separation of presentation from content

In today’s web development environment, and in software development in general, there is a popular principle of separation of presentation and content.  In terms of web development, this would mean that the contents of a web page should not be dependent upon the style or design of how that content is displayed on the page.

In some ways, this is a question of efficiency.  Until the last few years, a website’s style was completely and permanently interwoven with its content.  The parts of the code that conveyed the meaning of the site, i.e. its text, were coded in such a way that they also were intermingled with code that indicated how that text should look, what font it should be displayed in, what color, etc.  Thus if someone wanted to change the style, they would have to also change the content, and sites were thus difficult to maintain.

In today’s web environment, where users can be viewing a website through one of many web-enabled devices, such as screen readers for the hearing impaired, mobile phones, set-top boxes, as well as the regular personal computer, separating the presentation of a website from its content allows developers to use the same content but present it differently depending on the device that is accessing it.

By separating presentation from content, an iPhone user, for example, may see a version of a website that is optimized for a small screen, while a Mac laptop user would see the full-size version. They would both see the same content presented in different ways.  You can imagine that a visually-impaired user could also benefit from a different presentation of the same content.

Use XHTML for content and CSS for presentation

This is the fundamental principle that we, as trendy web developers, will try to apply to our usage of XHTML and CSS code.  We will make every effort to use XHTML code purely for the content of our web pages.  And we will use CSS code to indicate how that content should be presented.

We will also do our best to keep CSS code in separate files from our XHTML code, so that the two are not mixed and mingled.  Our CSS code will be kept in files with a “.css” extension, while our XHTML code will be kept in “.html” files.

All is for the best in the best of all possible worlds

This all sounds great in theory, but the web is a messy place.  Given the tools available to us today, the pure separation of presentation from content will not allow us to achieve the sophisticated visual designs we might want our sites to have.  We will find that we must often structure our XHTML code in such a way that the CSS can easily make the page look the way we want it to, thus making the one somewhat dependent, or at least influenced, by the other.

Furthermore, this separation is predicated upon the notion that a site’s design has no importance to its meaning.  One could argue that many sites, especially heavily branded sites, rely primarily upon visual impact to impart their message.  The idea that a message is conveyed solely or primarily through text with no reliance upon presentation is to ignore the complexity of social interaction, and this principle probably says more about the people who profess such things than it does about technology.

But despite these shortcomings, as things stand today, there are still practical benefits to separating presentation from content as much as possible.  Although it is awkward at first, one gets better at it with practice, and it does save time and make maintenance of sites easier in the long run.  So you should do your best to separate content from presentation by using XHTML to demarcate your content, and CSS to indicate styles for the presentation of that content.

Class 1 – Musician Site Wireframe Assignment

Your assignment today is to convert a set of Requirements for a Musician’s Web Site into wireframe diagrams that indicate what information will be displayed on each page of the site, and how it will be organized.

Here are the requirements we came up with for the Musician’s Site.  These outline the content that the client wants to see on the site.  How you organize and represent these pieces of content is up to you.  Please convert these into wireframe diagrams using PowerPoint.

• Bio
• Discography
• Tour Dates
• Photos
• Sound Files
• Video Clips
• Blog
• Merchandise
• Contact Info
• Press
• External Links (to other bands, etc)

You will have to group and organize these requirements however you see fit, based on the concepts we have discussed today of information architecture and navigation.  This post gives a broad guide of the navigation elements you may want to consider when tackling this assignment.

Click here to see a similar assignment I gave to the summer class I taught.  And here are a set of wireframe diagrams I created that show one possible solution to the assignment.  Each diagram is meant to show how the information and requirements for the site would be translated and broken down into actual content on a set of web pages.