Web Pages Done Right

David Parry bio photo By David Parry

I was rather surprsied a couple of weeks ago when I logged onto the homepage of the University I am currently attending and it had changed. Now normally this sort of thing would not warrant a post, especially since the changes “seem” to be aesthetic. But actually, the change was much bigger than that, and much more important. Which gives rise to an occasion for me to blog about what anybody in education thinking about presenting on the web can learn from Albany. This page is beautiful, not from a matching colors standpoint (not really my area of expertise) but rather from an underlying, more fundamental set of reasons that remain invisible to most people. Let me explain . . . (This is really an important topic for anyone presenting information on the web, so if you are in that boat read on, and I promise to keep the technical speak to the absolute minimum.)

What’s at stake here is making information available to the widest audience possible, in short something that should in my opinion inform all educational endevaours. However my experience is that this is not always the case, in fact many academic institutions do not have web pages that are accessible. Indeed Albany’s old homepage was not. But the new one is different, and a great example of how to do things “correctly” on the web.

There are lots of formats that one can use to present/put information up on the web, and for the most part when you surf around on the web, you don’t notice the differences, you just get the webpage you are looking for displayed in your browser. But there are significant differences, and how you choose to present information is a HUGE choice, one that most people don’t even realize they are making.

Without getting into a whole history of how the web developed conversation (which you can find elsewhere, much better, for example here) early on many designers used table driven layout. What this means is that those writing the web page divided the page into a grid and told the browser what information to display in what parts of the grid. Indeed this is how many pages on the web are still written. But this is not so good . . .Why? Well for a host of reasons, but the one I want to focus on here is about making your information available to the largest number of people.

So, behind each webpage you see there is the “source” that the web browser is reading that generates the page. This is what tells the browser what to put where, what color to make the text, what size to make it, what words should be links, etc. This is often what in common paralance is called “HTML” although that term isn’t as descriptive as it should be, but it will do for now. Okay, if you have never seen this “source” do something right now. In the menu for the web browser click on View and find the option that says something about “source” and select that one. (In Safari it is View–>View Source. In Firefox it is View–>View Page Source. In Explorer it is . . .wait stop using Explorer use Firefox instead.)Now this should pop up a window that looks something like the following.

Sourceone.png

So all of those characters are what makes the browser work, what makes it display the page you are looking at this is what is known as “mark-up,” (incidently “mark-up”is different from programming, computer science people can get very mad if you call this programming, really writing all of this stuff is just like speaking another language that’s all). But here is the big issue, there are lots of ways to do this mark-up, and for the most part it will display in the browser the same. But . . .if you are a big institution say, an educational institution, you want to make sure that you pick the way of marking up that makes your page readable by the most number of people.

Now look at the following two pictures. The first is the source from a well designed webpage, and the second is from a random messy webpage.

SourceTwo.png

SourceThree.png

Notice in the first example, that even if you cannot read this language, it looks clean, organized and you can pretty much see the “stuff” that is going on. For example under Zoom Layouts you can see a bunch of text in black, even if you do not know what is going on you can get a sense of the content of the page. Good mark-up should be readable by a human. Why? Hold on I am getting there but first look at the second one. Notice how messy it is. Look at all of that those things labeled tr & td, bgcolor, width etc…all of those characters exist not for information, but to tell the browser how to display the information.

Here is the issue: if you use the second messy method, it might be easy to write the page, but some people will have trouble reading your site. What happens if someone is using a screen reader to access your site? The better way to design a site, even if it is harder is to seperate content, the stuff you want people to read, from style how it should look. That is you really want two separate files, one with text, and one telling the computer what the text should look like. (Allright I know in lit. theory terms this would be a tuff distinction to maintain but work with me). This way a person, or a computer program can strip out all of the content and make it accessible to the widest range of people and machines. There are so many advantages to this, not the least of which is an ethical issue. Sure it is harder to do this way, but it is worth it. Kudos to Albany for doing this the right way. And, if you are going to be involved in web page design, or if your department is going to be re-doing their page, or you are presenting any content on the web, make sure it is done this way.

If you want more information on this try: