This week was focused on creating my final intermediate project, my “Design” page. For this page, I wanted to go with a entirely new style and organization, breaking from the earlier projects and trying out ideas for how to design and organize my final project. Since I want my final project to be focused on primary sources, I used a photo of a post journal for my background image. Overtop of this was my main content, using a color scheme of various blues that were inspired by the Army uniforms of the day.
I used a couple of fonts (traveling typewriter and vanilla whale) that I felt were connected to my period and topic for the header and the nav menu, but decided that I would stick with a standard font-family for the main body of the page for readability. The page is relatively simple, as my skills with web design, while miles ahead of where they were at the beginning of the semester, are still fairly rudimentary. I did include float over footnotes, and inserted a cropped and underlined photo of the primary source. For my final project I am also considering including a clickable option for the footnotes that would take the user to a full size photo on a new page.
Interactivity is the heart of what the web has to offer, both in general and for digital historians. This, however, is not without its difficulties, as illustrated by the Lost Museum website and Josh Brown’s article. I’d seen the website before in CLIO I, and thought it a bit clunky and dated (it first went live in 2000. Yet Brown brings up an even more important issues than the somewhat AOL-like feel…in trying to create an interactive historical mystery, the creators of the Lost Museum had actually limited, rather than broadened user’s options. By limiting users to the options within the website, a lot of historical context was removed. The end result was somewhat like exposing a user to the woodcut’s from Leslie’s Illustrated while not allowing them access to the text…or for that matter any other of the contextual sources that abound for the period.
This is an serious concern, one which hadn’t really occurred to me when I first viewed the Lost Museum website, or, to be honest when I first thought about interactivity and digital history. My main concern originally, as a historian, was how I could demonstrate my argument in an interactive format, where a user could pick and choose where to go, and in what order. The idea that interactivity was actually shaping (limiting?) users had not seemed that big an issue.
Yet clearly it is. The web’s main attraction for historians is that it opens up the ability to do stuff on a scale not possible in the non-digital world…if instead of opening up accessibility and data we are instead limiting a user’s options we’re kind of missing the point.
Comment’s on Eric’s Post: Interactivity
This week’s readings bring to the forefront something we, or at least I, have not dealt with yet in our web design. This issue is pretty well summed up in the title of Joe Clark’s article, “How do Disabled People Use the Computer?” From the readings, it is pretty clear there are two main components of this. First, and this is the main focus (aside from his diatribe against political correctness) of Joe Clark’s article, is the set of tools and techniques that disable persons use to access the web, and computers in general. Generally caught under the term of “adaptive devices,” these allow disable persons to bypass some of the structural obstacles to computer use and include such hardware and software as screen readers and alternative keyboards and mouse devices.
More importantly for us as CLIO II students, and the main focus of both Jared Smith and Mark Pilgrim’s articles, is the steps we as web designers can take to make our sites more accessible. I have to admit, for someone such as myself, whose code is not quite fully accessible (or at least understandable) to himself, this is a bit intimidating. I’m still trying to figure out the difference between a class and a div, and now they want me to write my webpage for people who look at it completely differently than I do (I’m still working on that skill when it comes to Mac users, let alone disabled people) using devices such as screen readers that I’ve never even been exposed to.
Luckily, people such as Jared and Mark have put together super useful and helpful guides to how to do so in an accessible (ha!) and un-intimidating (well, mostly) how to. Finally, I though Mark’s use of hypothetical disable users was particularly poignent in illustrating why going through these extra-steps is so important, even after I spent eight hours just trying to get the website to look decent to people without any additional obstacles.
Comment on Jordan’s Post: “Accessibility and the Web”
For this week’s blog entry I’m providing some comments on Michael Williams’ Image Assignment. Hopefully this will provide some useful feedback both for Michael going forward and to start our in class discussion of his page.
Overall, Michael did an excellent job. His cropping allows him to eliminate a lot of work during the restore phase without losing anything from the photo. Even with that though, there remained quite a few scratches and other defects, which he skillfully removed, leaving a focused and very clean photo.
I am really impressed with the color work on the dress, the lines are very clean and he was able to add color without losing the detail of the shadows and folds. The skin color still looks a little bit off, but skin color is probably the hardest aspect of colorization.
Michael’s engraving matting was also done very well, he was able to add the background in without losing any of the detail of the engraving itself. However, while his background is very close to the color of his webpage, it is still possible to see the slight difference in the color from his image and the website itself.
This week’s readings were almost entirely tutorial in nature, and complemented the practical exercise we worked on in class last week. While last week’s readings dealt with some of the ethical issues surrounding the alteration of photos, this week’s tutorials accepted as given that in today’s Photoshop world we will be changing aspects of images to fit our design goals, and focused on going over some best practices for doing so.
Taken together, the two Lynda classes and the four blog entries (well, three blog entries and a list of link’s to other like-minded blogs) by Carmen Moll covered three of the main image techniques: colorizing/recolorizing, restoration, and ageing. So far I have only really worked a little bit with recoloring in our class exercise, and found it involved way more steps than I expected. For some reason I had an idea that recoloring just involved identifying one know color in an image, and then running a computer program that based on that would figure out and color in all the others (ie in a picture of a Civil War soldier I know his uniform in navy blue, so set that and let the computer do all the rest). Turns out its way harder than that.
Still, this week’s readings, combined with our in class practice, have given me a good tool kit of techniques for working with Photoshop to colorize, restore, or age images. I’m a long way from being an expert on image restoration, but at least now I have a basic understanding, and some sources to look back to when I run into problems. Perhaps the biggest point I’ve taken away however, is just spending the time to try different things until it looks the way you want (sounds similar to my experience with learning HTML/CSS).
This week’s readings combined so very straight forward, hands-on considerations for using and altering images with some of the more theoretical issues with image use and image manipulation. Dr. Petrik’s entry on managing engravings was very helpful for the nuts and bolts of working with historical images, and especially old style engravings, as part of web design. Not for the first time I found myself wishing I had read ahead in this class, as I struggled with exactly this same issue in trying to insert the War Department Seal engraving as a header image in my Typography assignment. Her tutorial would have been extremely useful, and probably would have saved me a great deal of time in addition to resulting in a better final product.
In contrast, the multipart article by Errol Morris deals with some of the more abstract questions raised by photography, and image manipulation in general. As Morris points out, this question predates photoshop, as even before the advent of image-altering software there was significant debate over the staging of photos and whether they accurately represented reality. Photoshop merely slightly adjusted the issue by moving the question of representativeness from the original photos depiction of reality to the end photos depiction of the original photo. While Morris’ article occasionally got a little too “artsy” in its debate over this issue, I felt that his discussion of photography and reality closely relates to the ever present question of existence of positive, objective truth dealt with by historians. Perhaps the most useful of his observations was the concept that photographs should be treated with the same “close reading” we apply to textual documents.
Comment on Steve’s Post#5: “Image Power”
This week’s readings helped me think about color in a more systematic manner than I have in my early attempts at web design. On my portfolio and type pages I used colors that tied to my theme and content, but never worked through in any sort of organized process how they worked with each other. Clearly, a novice mistake, and something I can improve upon going forward.
For this purpose, I found the chapter in Robin Williams’ work a useful primer, although at times it felt like a rehashing of 2nd grade art class. But perhaps that’s what I need at this point. And while Williams covers considerations of color for both print and the web, the articles from creativebloq and Clagnut offered numerous (to be honest, slightly overwhelming) options for tools to help web designers choose and use colors. In addition to just assisting with finding complementary colors, so of these applications allow you to derive a color palette from an image you upload. This is a very powerful tool for designers, especially when constructing a web site places a heavy emphasis on visual image over text, and something I’d like to experiment with more moving forward.
Complementing the use of color in general, and the use of images and color together specifically, was the chapter on image use and selection from Golombisky and Hagen. In addition to covering the art of image selection and use (using image to provide visual cues and entry points, asymmetric balance, tight-cropping, etc.), I found this reading especially useful in breaking down some of the more technical aspects of images that I am less familiar with, such as resolution and file format.
Finally, the Lynda.com course was perhaps the most pragmatically useful in preparing me for the future projects that are part of the CLIO II course. While providing a fairly comprehensive introduction to photoshop, and more specifically to the use of photoshop for web design, I found it both too basic and too advanced at times. Thus while there were some sections that repetitively covered fundamental topics we’ve already learned there was also significant time spent on tools and topics that are likely more advanced than we will cover in the scope of CLIO II. In particular, it seemed odd that a class that seemed targeted at fairly beginning-level designers/developers was structured around designing and building a website for a client. Not there is not some benefit in doing a wireframe or a mock-up, but as we will not require outside approval for our pages we probably won’t be doing them in such distinct steps.
Comment on Alyssa’s Post#6: Color
So as I sit down to write this it is once again snowing, layering a couple more inches on top of the snow that canceled our class last week. And, since we had no assigned readings this week, I will concentrate in this post on the web page project I worked on in lieu of class. Reverse engineering a website offers some significant challenge compared to an objective based design, especially for a novice digital historian such as myself. Since I could see the outcome but not the method I had to use several stages of trial and error to recreate the Columbine page.
Creating the header and nav were fairly straight forward as we did essentially the same design in class. Getting the text aligned properly was more difficult, especially someone of my rudimentary skill level. I was eventually able to get it where I wanted it by creating a CSS for #content-inner and floating it right with a width termed in percentages that aligned it off of the nav bars. However, this caused the text from my footer to pull up underneath the nav bar and beside the text, looking all messy and out of place. I’m sure there is a more elegant way to do it, by I eventually got it back down at the bottom of the page where I wanted it by inserting enough <br> to push it below the content text. I also had to play around with the various margins to get the nav bars and the text to align evenly below the header.
The pull quote was relatively easy, although I played around with the font-weight to get it somewhere in between the body text and the header texts (I decided on 500). Borders were easy to insert, and I choose a lighter variant of the background color for the header and footer. I’m not entirely satisfied with way the words lay out, I might still go back and play with the leading and letter spacing to make it more even and visually appealing.
Finally, I inserted the columbine flower image and resized it to fit inside the header bar. The one thing I could not figure out was how to get the content’s ivory background to extend above the header and below the footer. I tried playing with the margins and padding of the header and footers to no effect; I was able to get it there by making the body color ivory, but that threw off the borders across the rest of the page (and was also clearly not the method used in the screen shot example, which has a gray body visible around the ivory content). Maybe I can still figure it out before Monday’s class, or one of my classmates can post in the comments how they figured it out.
Comment’s on Mason’s Post#4: Putting the Pieces Together
Things I wish I’d done before building my portfolio page: read these chapters in Lupton and Golombisky & Hagen and watched the Lynda.com tutorial. These three sources provide a lot of great info and ideas on web design (and design in general) and construction, and compliment each other well. The Golombisky and Hagen chapters provided a great base for general layout ideas and design principles (several of which I violated on my first stab at my portfolio website…boxes anyone?) The Lupton reading extended this general basis a little further, providing more detail on the application of these design principles to the web as well as giving a good sampling of options available for web design, many of which are well advanced beyond my abilities. Finally, the lynda course went through the nuts and bolts of actually turning these design concepts into a website using dreamweaver. Combined with the feedback I received in class last week, I have a pretty good laundry list of updates and improvements to make to my portfolio page.
The Lupton readings were useful in providing web-specific design ideas, but I felt that the Golombisky and Hagen chapters were actually the most beneficial to me moving forward in the class, and my overall progression in digital history. the seven elements of design, six principles, and four laws of Gestalt theory provide a structure way to look at and evaluate my website, while chapters four and six provide some examples of good dos and don’ts of layout design. This conceptional framework is certainly more cohesive and effective than my previous system of simply “does this look good?”
Finally, the Nielsen article offered some good (and very specific) guidelines on a very important element of web design: clearly denoting where your clickable links are. This is perhaps the most important single element of a webpage, as it shows user how to navigate through your site, and this user-controlled (but designer influenced) navigability is the defining feature of the web. While some critics accuse Nielsen of attempting to “destroy design and bring back blue links on white pages,” his guidelines are more flexible than that an merely represent some best practices for ensuring that your links are easily and intuitively identifiable, and conversely that no other elements of your page are mistaken for links.
A final thought for the week is that for future semesters of this course it might be useful to switch the scheduling of this week and last week’s readings. While going through and fixing typographical issues on our pages would be fairly easy, having these design concepts before turning in our portfolio pages (especially the Lynda course!) might have saved a good segment of the class from a lot of mistakes and avoided some extensive revising this week. Although maybe doing it wrong the first time had some learning value.
Comment on Stephanie’s Post #3: Geocities called…
This weeks readings were a revelation in that I’d never really thought about type before. Obviously I knew that my Microsoft Word had multiple fonts, but I’d never really paid attention to them; if a professor didn’t specify a font I would just stick with the word processor’s default. Most of the time I couldn’t have even told you what font a paper was in when I turned it in. I’ve also been a “hard copy guy” for most of my career; to this day I still prefer whenever possible to do my reading and editing in actual print rather than on a computer screen.
So the various complications and intricacies of type on the web had never really occurred to me. I thought the readings from Ellen Lupton’s book were especially useful in providing a basic introduction and breakdown of factors to consider when choosing and employing type on the web. I can easily imagine myself having it open on my desktop (“hard copy” desktop that is) while I work on my on webpage designs during this class.
The most intriguing take away from this week’s reading however, came from the Morris article. The idea that choice of font could actually have a statistically meaningful impact on readers’ assessment of the believability of your content is amazing. I almost don’t believe it, but his article was in Times New Roman, so I guess I’ll give him the benefit of the doubt. It is clear from this article, and the others we read this week, that typography is a critical part of design and should be considered just as importantly as the overall layout when designing a webpage (or a paper…I guess my dissertation will either be in Georgia or Baskerville). This is not limited to font choice either, as both Lupton and Williams illustrate the importance of line spacing, alignment, size, and the differentiation between body and headings.
A secondary issue dealt with this week is the difficulty in applying footnotes on the web. While I agree completely with Dr. Petrik’s reasoning for the continued use of superscript notes, simply reproducing the form of print media on the web (with the notes at the bottom of the page) seems to fail to take advantage of the abilities inherent in the new medium of the web. Some form of navigation between note and body seems a better use of the web’s capabilities (otherwise just make it a downloadable PDF so guys like me can easily print it out). While jump navigation from the body to the note (as in Wikipedia) is one method, the use of pop-ups as recommended in Alan Jacobs article (and given as an example in Dr. Petrik’s) seems much more elegant. That said, I worry that a novice digital historian such as myself attempting this method could easily make enough errors to make this method more obscuring than user-friendly.
While I might not be ready to dive into pop-up footnotes or a statistical experiment to choose the font for my next paper/webpage, I will certainly pay a little more attention to my typographical choices than I have in the past.
Comment on Eric Gonzaba’s Post#2: Bye TNR, Hello Georgia