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.

Get Your Own Place (on the Web) part I: Medievalists Need the Web

This is the first (and, regrettably, shortest) of a three-part series posts that deals with the importance of designing, constructing, and maintaining a web presence as an academic, and specifically as a medievalist.  As a graduate student, I might be putting the cart before the horse with this, at least a little bit, but I can at least say with some authority as a student that the scholars who are going to make the greatest impact on the lives of the graduate students of the next ten years are going to be the ones who can speak about their work in a forum familiar to that audience: the Web.

The Middle Ages as a concept is enjoying a great deal of popularity at the moment. Shows like Vikings, Merlin, Game of Thrones, and the upcoming Galavant are common in TV lineups and, regardless of their attention to accuracy and detail (or lack thereof), the public seems to be hungry for more.  Meanwhile, the latest Hollywood blockbusters and even B movies about "knights" at Renaissance Faires continue to do well at the box office and in DVD/Blu-Ray sales.  Fantasy novels are so popular as to have their own section in most bookstores, and there is no denying the medieval influence on just about every video game that allows its players to swing a sword.

It used to be clear that the force attracting students to the study of the Middle Ages was mostly literature, be it Umberto Eco's The Name of the Rose or Tolkien's The Hobbit and The Lord of the Rings.  Films were also important, as the movie versions of each of these titles can attest.  Now, however, there is more than just a single way of interfacing with any study, be it history, literature, science, social science, or mathematics; as a result, fields of study need to branch out in order to meet new students on their own terms.  To do otherwise is to risk continued obscurity and, by extension, irrelevancy.

More importantly, by making ourselves visible on a more public space, like the Web, we engage in a conversation that has every bit as much long-term impact as those going on within the publications of our field: we are able to shape the way the public views our discipline. One only needs to look at the number of Twitter accounts dedicated to sharing interesting (and often bizarre) artwork from medieval manuscripts (and then looking at their respective number of followers) to know that there is something appealing about the medieval, but one also need only have a conversation with the right colleague to understand that the public image of the Middle Ages is often at odds with our view and concept of the period.  

Thus, this is my appeal to my fellow medievalists: learn to use the web to our collective advantage.  More than any other literary discipline, the web has a way to transform the public's understanding of what we do. If there is something inherently attractive about old books, then the numerous digitized manuscript collections that are popping up like strip malls across the web will feed into that attraction.  Virtual tours (and games!) of monasteries and 3D models of medieval artifacts may not give the visceral experience of being there first-hand, but they certainly give that first taste, which can be a strong motivator to learn more.  Animated interactive maps make it far easier for us to understand the spacial relationships between areas

We study the Middle Ages because we understand that they matter. That kind of knowledge is like a super power, though, because it also comes with the responsibility to share what we learn. If you don't already have a site, head to Weebly or Google Sites now and create one.  You don't have to hand-code anything or know what a <div> is to share what you know and what you love learning about; isn't that the point of this whole enterprise, anyway?

Down the Rabbit Hole: Self-education as Channeled by Google

There can be no doubt that Google has been changing the way we think, work, and learn, and at this point it would take the breakdown of several nations to change that trajectory. That doesn't mean that the academy is ready for the challenge of learning the Google way, though; if there is a social institution that moves at a more "deliberate" pace, the Ivory Tower would have already found it by now, since they've been looking since 1096 or so.  Thus, those of us who have dedicated our lives to higher learning sometimes have a similar reluctance to learning in this newfangled, internetty sort of way.  I certainly prefer my formalized coursework and structured, guided, controlled environments, and I know several others in my programs, past and present, who feel the same way.

Image taken from Marjan Krebelj.  CC BY 2.0

The problem, though, is that learning itself is not something that only happens by reading books or having long, detailed discussions with well-read colleagues, or in a classroom where a master of the subject can provide leadership enough so that (mostly) everyone arrives at understanding by the end of the semester.  Learning happens in so many contexts it's hard to even start to put together a list, and so near as I can tell, as long as learning happens, there is no "bad" way to learn.  Sure, some ways are better than others and many ways are more costly than we would like to deal with, but if coming to terms with required content or skills happens, I think the method is one largely left up to preference.  There are folks out there for whom the school of hard knocks is the only effective institution of learning; at that point, cost is irrelevant.

What we should be asking ourselves, then, in the face of all of this techno-instructo-wizardry is not how to use Google to learn how to code (you already know how to do this) or how to find resources online that will help you fix your borked PHP script (again, you already know how to do this), but how to understand what we're doing when we do these things as learning.

Yes, we're academics, and yes, we're humanists, but it wasn't until I figured out that this was just like any other skill that I started to make sense of the whole enterprise.  Learning HTML is just like learning to change a tire or make spaghetti or replace a lost button on your shirt.  I wouldn't call these skills particularly sexy or employable, but that's because we're adults and we're expected to be able to do them.  Same goes for writing a simple web page (or at least tracking down the information necessary to do so). Coding has become necessary in the same way, especially in our line of work, and once we realize this truth, it becomes much less stressful and much more fulfilling work.

That said, if you're still having trouble finding resources to help you learn the basics, here's a quick list of my own go-to sites. As Dr. Gibbs has pointed out, nine times out of ten no one site will have the perfect solution for you, but these are at least some good ones I've found. I hope you find them as useful as I do.

• Lynda - The University has a subscription to this resource, which can teach you everything from rocket science to how to code.  I focus on the latter, myself.  These videos are high quality and very clear, and they're put together by people who know their stuff.
• W3Schools - Probably my favorite how-to-code website of all time, they have tutorials and quick-reference pages for HTML, CSS, JavaScript, PHP, and a lot more.  Moreover, they developed a way to try the code out in windows in their own website, making it easy to figure things out before including new code in your own project.  They also have a pretty awesome hex color picker.
• Programming on Khan Academy - It may be a little simplistic to start, but there are some basic skills and concepts that every coder needs to know, and Khan Academy is pretty good about making them clear, even to those who have no coding background. It's a lot like Lynda, only you don't need to log in because it's free, and since it's free, what have you got to lose?
• Land of Code - Another good reference site that also provides exercises to test your understanding (and, importantly, the answers to those exercises so you can see what you did wrong and fix it!).

There are actually tons more out there, but this should at least give you a starting point if Google just buried you in options.

See you in class!