H697 Final Final Project, WordPress Translation Questions

The utterly final (for class anyway) version of my project is live.

One of the things I’ve learned about myself and webdesign, particularly when I have a WYSIWYG editor to play with, is that little alignment tricks appeal to the part of my brain which was imprinted in preschool Montessori education. Making things line up! Yay! Which would be why the paragraph text in the sidebar aligns with the edge of the header image, the lists in the sidebar align with the header text, and the right margin of the content text ends on the same line as the text in the top line of the header. Mildly obsessive, maybe, but also fun.

What I’m having the hardest time figuring out is how, exactly, I want to translate all of this into WordPress. Why WordPress? Because it’s a free, user-friendly CMS and the contributors/editors who will be maintaining content once the site is live are not universally tech-savvy. I might consider something like Drupal if I heard people tell me “Yeah, the user interface is totally intuitive once it’s set up!” but so far I haven’t heard that. (Also, a not insignificant fact is that I’ve been using WP for about 4 years now, and have no experience with Drupal…)

Most of the switch from hand-code to WordPress is straightforward, and some of it will even be easier (News, for instance). What I’m having trouble with is the Mentoring Toolkit. I could easily create a Mentoring Category with child categories which match the divisions I’ve sorted the essays into, and then just re-create all the pdfs as posts. Or I could make a static page with PDFs linked. Or I could do both – archive the old essays in a static page and link the static page to an active category. Any thoughts?

H697 Changed Way of Seeing

I spent the last four days at a conference, and at this conference there was a poster session. This was my first time ever going to a poster session, and I had no idea what to expect. Still, I had not anticipated wandering around looking at the posters and thinking about them as much in terms of design as content (sometimes more).

I really shouldn’t have been surprised. As this xkcd strip points out, once you learn to see things like kerning, you may never stop seeing them. 

Some of the posters had good visuals but were weak on the information included. They lacked a strong Who, What, Why (not to mention Where, When, How). Others had good topics but were information-heavy, with very little white space and no flow. Most were good, but not outstanding, with a working balance of visuals and text.

There was, however, one which I saw and immediately thought “Wow. They really thought this through.” The overall design clearly evoked a particular cultural marker (tourist postcard), the text was readable, and the whole thing communicated their goal and focus. Here is my slightly skewed cameraphone picture of the poster:

Poster for History in Bloom
History In Bloom poster, OAH/NCPH 2012

It looks like an old postcard, especially in the filter they used to posterize (I think?) the picture of the Smithsonian Castle. The planted borders subtly connect the three text boxes. The eye is drawn from upper left to lower right by the larger font of the project title, History in Bloom, and the postcard greeting. The colors are consistent, the text is readable, and it clearly communicated the overall project in a format which was comfortable to read in the crowded space between tables and posters.

Apparently the project in its final form was sufficiently well-produced to be adopted by the Smithsonian; check out the History in Bloom page on the Smithsonian Gardens site.

H697 Review of G. Cohrs Design Assignment

For this week’s blog I am reviewing Geoff’s design assignment page, Mapping Civil War Alexandria. This particular page, which looks to be part of a larger envisioned project, is focused on May 1861.

First, some strengths and nice touches:

  • I like the use of the outer container div as matting, which evokes a manuscript document on a desk (at least for me).
  • The sidebar color picks up on the color of the water in the header image, which is a very nice touch.
  • Separation of nav into horizontal for primary and vertical for secondary (I’m assuming that’s that the “Explore the City” is?)
  • Nothing is so far away from another element that it feels isolated or confusingly floating. I particularly like the consistency of one block (callout or image) for each section of text.
  • Great captions, very informative.
  • Use of a primary source quotation for a callout, to flesh out the text, and repeating the matting color for that callout.
Some things which might be tweaked:
  • Two of your three h3s are in all caps, and one is not. It’s such a bold font that I don’t think all caps is necessary, although it certainly works and doesn’t read as shouting. Either way, they need to be consistent.
  • The header image is great, but the script font is a little hard to read. Maybe fading out the image more and using one of the layer blending tricks might help it stand out? Also, I’m not sure where the two lines are supposed to have the same emphasis, but if the script is supposed to be more important you might make it bigger.
  • Body font could be a little bigger to be more readable (I looked at your CSS and noticed odd values for your ems. Maybe one of the fonts is throwing things off?).
  • Also, the sidebar text is more dominant on the first view than the primary text; it works here because you want people to know it’s an assignment, but in a larger project you might want to de-emphasize sidebar text. Unless, of course, in a larger project you’re only using the sidebar for nav in which case ignore me.

Overall, I find the site to be very visually appealing, not to mention interesting for its content. I love the way all the colors work together, even the pictures of Robert Knox Sneden and the view of Alexandria have similar tones/values. Good work!


H697 Design Assignment

My design assignment is live – twice!

The first iteration of my design assignment is live and linked from my portfolio page. Lindsey critiqued this design and I am grateful for her suggestions. What you see at design.html is what she critiqued, with the exception of one fixed typo (four digit years! not three!).

I have taken her suggestions into consideration and done some further tweaking to try and reduce the gulf between header and content. A revised version of the page can currently be found with the name design_2.html. Some time in the next week I will switch these urls around, preserving the first draft as design1.html and updating the page linked from my portfolio page.

One of the things I’ve fixed is adding in links in the content. I had left them out initially for two reasons. The first is that the source text, from the current SAWH homepage, is not very link-heavy. The second is that I was trying to think in 1970s terms, drawing from two magazine sources, and magazines in the 1970s did not have hyperlinks. I wasn’t exactly trying to be clever, I just got so wrapped up in trying to imitate my design inspiration that I forget to update it.

Many thanks to Lindsey for her helpful comments! (and I left a comment over on her blog, linked above).

H697 First week with Photoshop

I could try to be profound and raise questions about editing historic photos, whether this makes them less valid as historical documents, etc. However, some of my classmates have spoken much more intelligently on the matter than I think I could just now, so instead I’ll refer you to Lindsay and Sheri’s posts, as well as David and Geoff, who contextualize image editing from a public history/museum standpoint.

My concern after this week’s videos and book about photoshop is, I’m afraid, far more pedestrian. I have long been aware that good editing can improve a photograph. My father, an avid digital and former semi-professional photograph calls this “developing” his pictures, or working in his “darkroom” (aka his iMac’s software). My friend Kelsey has put up photos on flickr which show the variations which can be produced through good editing.

I suspect that there is not a lynda.com video or book out there which can help me figure these things out. Rather, as Claire notes, it takes time and a lot of mucking about until things start to make sense.

This week I commented on Claire and Geoff’s posts

H697 Type Assignment

This week’s assignment was to create a webpage which demonstrated a basic grasp of wordprocessing, css, and webfonts. I knew that which fonts I chose would depend on the text I used, so that was where I started.

I thought about using an essay from my MSc programme, but it’s a bit long and I didn’t want to deal with reformatting all the footnotes to get them out of .doc encoding. Besides, I knew I wouldn’t have time to hunt down unrestricted images to use with it. My thoughts then turned to public domain texts, and immediately went to Sherlock Holmes. (( One of my New Years Resolutions is to re-read all of the Holmes stories in publication order. )) I also thought about using one of Lady Mary Wortley Montagu’s letters, or a bit of Margaret Bayard Smith’s memoirs, but I’m not as familiar with them and it would have been harder to find a section which would provide a block quotation and good pull quote.

I thus chose to use A Scandal in Bohemia as my text. I’m familiar with it, it begins with a note from the Prince which I could use as a blockquote and includes in the beginning a classic Holmes line “You see, but you do not observe” which works very well as a pull quote. What follows are my thoughts on the design of the page, A Scandal In Bohemian Webfonts.

Continue reading “H697 Type Assignment”

H697 Week 2: Fonts

My final semester as an undergrad, I took a course on the history of the book, co-taught by the head of special collections and a professor in the English department. We started with early writings on clay tablets (and yes, I got to hold a little piece of ancient writing!) and carried forward all the way to a proof of a book by a poet who taught the occasional class at our college.

I bring this up because the historic fonts, and their creators, who show up in the first part of Ellen Lupton’s Thinking with Type are, in a way, old friends. Caslon and Didot, and of course Gutenberg and William Morris. I was aware that fonts changed over time, but not the theories behind them (humanist vs. modern, etc). That they were governed by aesthetic theory makes sense, and often seems to have been driven by the same impulses which drove interior design. It would be a fun exercise (for a real font designer) to create fonts based on some of the great interior designers. A Latrobe font!

The caveat in the last paragraph is due to the fact that I’ve discovered just how much work goes into creating a font or font family. If you want an idea of the thinking, criticism, and effort of a font, just watch Helvetica (2007). You’ll never see street signs the same way again. After this week of reading and learning about fonts, I’ve been analyzing every shop sign I see.

H697 Inaugural Post

A new semester, a new category of blog posts for a course. This spring, the course in question is H697: Creating History in New Media.

The readings for this week make the point that deign is an important aspect of the presentation of information. Norman uses science to prove to us that “attractive things work better,” explaining how emotion impacts our reasoning and creative processing. Happy people think creatively and find new solutions, unhappy people keep hitting the same button and have trouble coming up with alternatives. The authors of White Space is Not Your Enemy demonstrate how an effective design facilitates acquisition of information, and bad design interferes, or worse makes people bypass your information altogether.

Visual presentation is important. We all know the saying “don’t judge a book by its cover,” and yet most of us do, in fact, use cover design as a way to decide whether we even  pick the book up to give it a second glance, a read of the back cover. The study by Consumer Reports determined that, broadly speaking, the public assesses a website’s credibility based primarily on appearance.

There is, however, an interesting nugget of information hidden in the ConsumerReports. In second section, they break down results by website type. Nonprofit Web Sites had results which differed from the others “in provocative ways.” (( Page 73 )) The identity of the site operator and company motive mattered far more with nonprofits than any of the other site categories in the study. This does not mean design didn’t matter, on the contrary the percentage of comments indicating design importance are up there with identity. What it means, to me, is that we have to remember that the content and the design must complement each other, working in harmony and not opposition.

Hopefully, this idea is obvious, that the design should be informed by the content, and work intelligently with it. Yet there are times when people get so caught up in the latest technological possibility (oh, say, Flash), and forget to consider whether it works for their project.

To put it another way: my other background, besides history, is theatre. Ideally, the set, costumes, props, lights, and sound all work together to create a coherent art design for the show, even if they are designed by different people. It doesn’t always happen. Sometimes you get one dissonant element which throws off the whole feeling, not only of the design but of the play. I grew up with a very good local theatre which just could not do Shakespeare because every show had one design element which just didn’t work; for example, the dark-colored, mid-20th century styled Macbeth which was vaguely noir-until a messenger came onstage in a bright neon biking outfit. One bad choice can disrupt a host of good ones.

For history in new media, then, we need to be aware of our design. It should facilitate the concepts, hopefully evoke positive emotions in the user, and be internally consistent. Always remember to think twice about the neon bike shorts (metaphorically speaking).

Required Addendum: I commented on Sheri’s post Credibility, Creativity, and Competence in Digital History.

Week 3: What Is Digital History?

(For those not in the class, the syllabus is online.)

The readings for this week took me from familiar ground to unfamiliar and back again. Some of them touched on some topics I’d been wanting to blog about but hadn’t quite gotten a hold of, including the history and nature of hypertext and the illusion of permanence of digital media. I will talk about hypertext in a moment, but I want to reflect on the question of presentation of information which is raised both by Cohen and Rosenzweig in Digital History and in the JAH article “The Promise of Digital History“.

Both of these works include discussions about how the material (source, image, analysis) is presented to the user. While design and layout is an element of print publishing, it seems to me a less vital element in that medium than it is for digital history. In fact, the need to consider interactivity, presentation, and layout when creating digital history are part of why I feel that it has many similarities to museum work. Creating an exhibit in physical space and creating a digital history require the curator/historian/team to tackle many of the same questions.

There are design questions: font choices and color schemes, and how long captions/label text should be. There is the inevitable uncertainty of whether anyone will read your text at all, because they might simply look at your lovely objects/pictures and move on, completely missing the carefully crafted context you’ve provided. Then there are questions about layout (how do we want to organize the flow? rooms in a line or independent path creation?) and interactive/hands on elements (do we use them? what do they do if we add them?)

Interactivity and layout for digital historians lead my thoughts to  hypercard. The first personal computer I ever interacted with was the Apple Macintosh (IIe, I think) that my Dad brought home. Most of my first experiences in digital narrative were built using hypercard; as a result I tend to conceptualize digital text in hypercard form, at least in the draft stages. “The Promise of Digital History” and the chapters from Digital History made me realize that I have been thinking in an essentially traditional manner and also inspired a model for alternatives.

How I had been thinking was very linear narrative. If it were a museum exhibit, you would go in via a door or space marked “Entrance” and all the rooms would have only two doors, one in and one out; guided like a historic house or self-guided like many Smithsonian exhibits. There might be hyperlinks which opened small windows of commentary, but the history would otherwise progress in the traditional way.  My hypercard model is a copy of Douglas Adams’ Hitchhiker’s Guide omnibus edition  that technically belonged to my older sister. There may have been some hyperlinked words with sounds or images, and I believe there was a built-in standard dictionary, but the only interesting deviation from a published version was that file opened to a window with a large red button reading Don’t Panic which you clicked to open the text.

The other hypercard experience I remember is a definite contrast. Its physical layout was more a group of rooms opening onto each other in a variety of ways, some of them utterly unexpected, and the stories you uncovered ran every which way, overlapping and underlapping in truly delightful ways. It was a game-story called The Manhole.1 Although the stories were set, the fact that you could discover them in your own order at your own pace was exciting. Simply the fact that the story was discovered and not just in front of you was exciting.

Reading Adams’ work on the computer was entertaining, but playing The Manhole was interesting. Which is why I think it’s worthwhile for digital historians to consider Peter Gallagher’s comment regarding “a pursuit of content versus a delivery of content.”2 The digital medium has such potential to engage users in a pursuit of content, and while it may not always be feasible, it must  not be forgotten.

1 Some images from the game can be seen at Smackerel.net.
2 “The Promise of Digital History,” Journal of American History, September 2008. The comment is in response to a question regarding similarities between museum exhibits and digital history, located roughly halfway down the page.

Quick thought: accessibility and angles

On Sunday I went to the Smithsonian Air and Space Museum out at Dulles with my parents, a friend, and the friend’s two sons aged almost-5 and just-6. Due to recent knee problems, my dad opted to use a wheelchair for the day.  As a result, his eye level was roughly equal with the boys’. Dad ended up noticing signatures inside the wheel well of one plane, and other details that were blocked at the angle of a standing adult.

It occurred to me that it would be a good exercise for curators and exhibit designers to go through their exhibits in a wheelchair (or at least a rolling desk chair at its lowest height). This would allow them to see the space from the perspective of children and persons in wheelchairs, and might lead to some rethinking and redesigning. It might even be a chance to put ‘easter eggs’ at kids-eye-level!