Get Your Own Place (on the Web) part II: Why (Medieval) Design Matters

Part two of this three-part series is all about the importance of Medievalists not only having their own websites, but having their own well-designed websites.  This is not to say that anyone should ever have a poorly designed website; I think that we can all agree that the world has enough of those and we could actually do with a good spring cleaning to remove many more. Still, as a discipline, Medieval Studies has a need to display information in a specific way that is different from any other discipline (just like every other discipline).  As such, we need to start thinking not only about how to design a good web presence, but most especially about what good design for a Medieval Studies website would even mean.

One way to think about this question is by looking at the code that lies behind every website on the planet; HTML. It's natural, at least for humanists, to understand HTML as a kind of instruction for formatting text on the web. After all, just by putting in some brackets, you can italicize text, make it bold, or move it to someplace on a page.  This seems similar to how we work with word processing software: if we write about a book, we italicize its title to show that those words are the title of a book by clicking on an icon or using a keyboard shortcut to toggle the effect on and off, or we go back and highlight the text and apply the effect afterwards.

That is not, however, the way that HTML was originally designed to work, and it is indicative of the way we in the humanities tend to think of text that we would continue to think about HTML in that way, even though the web design folks have been screaming at us for years to understand these tags as what they are: different kinds of containers that will be rendered differently.  For example, anyone who has written HTML knows that a web browser will render text marked by a <p> tag as a paragraph, giving the text between <p> and </p> a continuous flow on the screen, separated from other text by white space before and after the first and last lines. To a humanist, this seems like instructions to the computer, but a web designer understands that <p> is just a tag that gives no real information at all beyond the simple organizational principle of "the stuff between these tags is given an arbitrary label, and that label is 'p'."  The letter itself is a mnemonic device, no more.

That seems like a strange and abstract concept to talk about when the purpose of this post is to talk about the importance of a well-designed website to medievalists, but it sets up a very basic point that all medievalists need to understand: we have been "programmed" to think in terms of (and by means of) the very tools we use to write, but those rules don't necessarily apply to all situations, all media, and all modes.  As a discipline, we should be the first to realize this.  After all, manuscript culture, even in instances of the completely derivative, always created a custom book.  Each historiated initial, each doodle in the margin, each choice or script or pigment or ruling was unique.  We would do well to emulate that principle when publishing our material to the web.

Let's return to our example of the <p> tag. By understanding the fact that <p> and </p> merely mark the beginning and end of a string, we allow ourselves to ask another, more powerful question: what, then, do we do with that string if it's not just inherently a paragraph?  Indeed, how did monks working in a scriptorium decide what the body of their texts were going to look like? With no intrusive software layer between themselves and the literal page before them, they were able to do anything, but whatever they did, it would have to work within the physical boundaries of the page and with the purpose of the book they were creating. The amount of text, the amount of decoration, and the amount of white space left behind in margins and between lines, and every other detail contributed to the unified presentation of the text and, often, the message behind the text.  In essence, the medieval scriptorium was not only the location of literary production, it was also a location of the production of meaning through document design.

Those of us who study such manuscripts, then, are attuned to the kinds of information that layout and document design carry. We also tend to be far more interested in such things, and we also tend to appreciate them more. Thus, it makes sense that we learn how to manipulate content on the web to improve on the "default" layouts provided for us. There are certainly plenty of ways to do this; between Blogger and Wordpress, there must be hundreds of thousands of blog themes alone, each with its own individual take on layout and design. I would argue, however, that everyone should know how to change at least small, basic things about the pages they create in order to get exactly the right effect.

Thus, I'll leave you with a simple example.  I know that one of my own first impressions of "medieval" text came from storybooks that made use of dramatic-looking dropped capitals. Thus, if one wanted to create a similar effect on a web page, just a little CSS (Cascading Style Sheets) would do the trick.

Put the following code in the <head> section of your HTML file:

body {
font-size:1.1em;
font-family: sans-serif;
}
h1 {
text-align:center;
padding-bottom:5px;
border-style:solid;
border-color:black;
border-width: 0px 0px 1px 0px;
}
.dropCap {
float:left;
font-size:5em;
font-family: 'UnifrakturMaguntia', cursive;
line-height: .9em;
margin: 0px 5px 0px 5px;
padding: 10px;
border-style: groove;
border-width: 10px;
border-color: #A37A00;
color: #A37A00;
background-color: #000077;
text-shadow: 5px 3px 2px #000033;
text-transform: uppercase;
clear: both;
}
</style>

Then, whenever you want a dropped capital, simply put this tag in front of the first letter of the paragraph in the HTML code:

<span class="dropCap">

Then finish it off by putting an ending tag after the dropped Captial character.

</span>

Doing so, you end up with something that looks like this.

Simple elements like this are really not that hard to master, and they end up adding a lot of appeal to web pages that are otherwise nothing more than stock. If you'd like to know more about CSS, check out W3Schools and their tutorials and references.