design Archive

Making the Web a more accessible place

Monday, March 26th, 2007

I probably should have read the reading selections in order, but alas I did not. Joe Clark’s article “How Do Disabled People Use Computers” was very informative and helped to put in context the later readings. I really liked his direct, honest approach, especially in raising questions about the terms we use to speak about disabled people (ie. “differently abled” which he says “seems to apply more to zoology, where, say racoons can climb trees but dogs can’t”). Refreshing as this was, his description of types of disabilities was informative and helps in thinking about designing websites for this diverse group of people.

It is true that I have given little thought to taking these disabilities into account when designing sites in the past. That said, I have always operated on the assumption that if you design a site cleanly and clearly, you are halfway there. This is somewhat true. Many of the 25 points in “Dive Into Accessibility” are things that I already do, or at least try very hard to do. For example, choosing a doctype, declaring the language, making the page title meaningful, presenting the main content of a page first, ensuring that colors contrast sufficiently, using title attributes on links, using alt tags on images, using real links (not javascript links), and then others of the points that relate to designing with tables which are for the most part moot, except for using table headings and captions and using them appropriately. These are all things I strive to do as part of my regular design process. Admittedly, my own website and projects I’ve done for class, I have been focused on other elements of design and have sometimes let these important elements fall by the wayside.

That said, it is especially helpful to hear a screen reader (at WebAIM). Wow. I had an incredibly hard time understanding that, and I imagine it isn’t easy and is quite frustrating for anyone needing to learn to do this after losing sight later in life. Also very helpful was the note, made in a couple of these articles, that screen readers will read filenames unless you specify a title or alt attribute. Again, I try to put these in my sites, but now that I understand how exactly they are used (other than the nifty visual tool tip that some see), I will certainly make an effort to ensure these tags are used and used properly.

One final note is that I did not really understand how learning disabled people use the Web. I went to a high school that had a special program for kids with learning disabilities, and I always thought that they read slower because they processed information differently. I didn’t think that it was that they couldn’t read at all. Dyslexia, I always understood, is a disability that one can learn to overcome or compensate for. I know there are others. Some people learn better by hearing than by reading, so couldn’t they get a screen reader? Until I understand more about how this group of people uses the Web, I cannot accommodate them. The suggestion that all websites should be illustrated, as Clark mentions, is indeed a “cure worse than the disease.”

I continue my discussion about learning disabilities and accessibility on Mark Stevens’ Learn More History AND Technology, and I raise some questions about our audience on Maureen Guignon’s CLIOblog. In the end, I think that there are sufficiently accessible websites and there are websites designed to be accessible. Which one you require is a matter of your expected and intended audience, and as Mark says, “It does not take a terrific amount of intellectual ability to figure out that reasonable accommodations should be made in order that “disabled” people may access web pages.” Here here.

Sketching out Ideas

Sunday, March 18th, 2007

I’ve spent the past several days reading and mulling over the current class assignment: various restoration and other tricks with photos. I’ve taken examples from the Eismann book (Photoshop: Restoration and Retouching by Katrin Eismann), and I’ve played around with several photos. I think I’ve gotten the hang of cleaning up images, but I have to admit I don’t like hand-coloring. Maybe I need more practice to get better at it, but I think the results of my efforts don’t show how much thought and effort I really put into hand-coloring. The results are poor.

preliminary sketch My preliminary sketch for my image assignment website.

Thankfully, I had a stroke of inspiration when it came to the web design for this project page. Since I’m employed by the wonderful Center for History and New Media as a web designer, I feel utterly obligated to make a 200% effort on these design bits—that’s what I’m in the class for, right? To strive for better design? Well, I thought I would share with you part of my design process. I always start with a sketch, and this time I wanted to do something with a bit of a retro feel. No doubt inspired by the recent readings on such desgin (particularly by Cameron Moll), but also by the retro nature of my subject matter. These are, afterall, OLD photos. Some older than others, but hopefully my design can tie them all together with a fun, but still simple and elegant look.

I’m currently plugging away at it. I had to figure out a php thing I’d been trying to figure out for weeks, so can I have dynamically generated pages. Fortunately, with a stroke of luck a well-worded Google search turned up the perfect tutorial (and a pretty cool site: inobscuro.com). I’ve also been trying to create some cool artwork to go along with the page, and I’m trying to make sure it’s all coded correctly. Much work left to do…

Reading through some of the other class postings, I’m not the only one with a dislike of colorization and some difficulty with Photoshop (see Steven’s “De-Constructing History 2.0″). Discussing her process of image editing, Misha’s post “A bit of gray here and there” made me want to go back and do more…just as soon as I find the time.

Glorious Colors of Nature

Wednesday, March 14th, 2007

So, while on vacation, I actually did plenty of thinking about design. Not just while doing the readings but while walking around, walking on the beach, looking at the ocean, while driving. I noticed the incredible beauty of the colors of nature and how those beautiful colors would make awesome web palettes. Here are a couple of examples that I found particularly inspiring:

woodandwater Cool blues, greens, and browns.
driftwood Similar colors, but brighter and with a few lighter shades.

Photoshop Techniques

Monday, March 5th, 2007

I must confess I am short on time this week. My husband is back briefly on R&R from Iraq, and I selfishly want to spend ALL of my time with him. I know that in a few days’ time, when he is gone, I will mull over and work through these techniques we’ve read about this week— it usually takes me working on a project before such tools reveal their usefulness. I can read about a technique, but until I am working on a project and encounter a design issue (ie. how to achieve “x”), I cannot truly internalize the method. But it’s during one of these “design issues” that I have an a-ha! moment and remember a tool I’ve come across, find that book or web site, re-read the tutorial or example, and make brilliant progress in my work. Thankfully, we have spring break next week, when I can spend some extra time with these books and techniques and re-visit past and current projects with new ideas in mind. I do already have one idea, which I noted on Mark’s blog, that I can use the “wicked worn” look to great effect on my genealogy site, which one day will be much more than a sample page for our type assignment.

I dream of color

Sunday, February 25th, 2007

I love the technique David Shea discusses in his “Photographic Palettes.” In particular, the box-drawing: drawing a box in the color you want to use and adding on top smaller white and black boxes of varying opacities to generate a color palette. I have come across the concept of choosing color from a photograph, and though I haven’t done it yet, now that I’ve seen a rather cool demonstration of it, I will have to try it soon. I’ve come across a few things recently that also help with color strategy —namely Eric Meyer’s Color Blender, which is great for finding shades of a color or colors to create a coherent color theme for your website. I am also reading The Zen of CSS Design by Dave Shea and Molly Holzschlag and in Chapter 2, “Design,” in the section called “Springtime,” the authors discuss “Using Color to Evoke Emotion” and mention a few other useful tips. My favorite, which is similar to the one Dave Shea mentions in his “24 Ways” article, is creating a color strip in Photoshop. Much like a paint swatch card, you can create boxes of color and shades of color to see how they complement one another. The advantage of this method is that once you find a pleasing palette, you can not only save it as something that you can easily refer back to, you can also easily select the RGB/Hex value in the swatch and paste it into your CSS. [Dave Shea and Molly Holzschlag, The Zen of CSS Design: Visual Enlightenment for the Web, Berkeley: Peachpit Press, 2005, p.64.]

Danilo Black USA website—an example of minimal color in website design. At Chuck Green’s Ideabook article on Color Strategy, he discusses four strategies for color selection in web design:

  1. Using subdued colors to highlight the main focus of a website: the product or service, as at the New York Times, Apple, and Barnes & Noble.
  2. Color-coding sections of a website to create continuity and clarity of your message throughout your site.
  3. Minimize number of colors: while I really, really like the website in his first example in this section (Danilo Black USA), the site, and maybe it’s out of date, seems to have no content. There are only a couple of links and I can’t figure out what the point of the site is. Visually, though, it is very appealing.
  4. Deconstruct exemplars: find sites you like and pull out the colors they use and figure out how they use them, then apply this to your own site.

Now, after being obsessed with design and seeing design elements and font styles everywhere, I’m sure I’ll notice color and color schemes…

After looking around at a few of the class’s blogs, I commented on Lee Ann’s blog about, basically, the learning curve and expectations with regard to this design stuff. I am continuing a thread I started when I posted about “The Polyglot Manifesto,” saying that we can’t all be great at everything. Now, I don’t want to sound negative or like I have no personal ambition, but I do believe it is rare to find people who excel at -everything- they do. I guess I’m trying to be encouraging to myself and others in saying that it’s okay to get just the basics and to plod away at this doing the best you can. Sure, you push yourself and challenge yourself, but I don’t think you should punish yourself if you aren’t as competent as Dave Shea after six months of practicing CSS web design.

I also added on James’s blog that web design is indeed hard work and time-consuming. It seems similar to writing and editing a paper, you can edit and re-edit and edit some more and refine and refine until you get your final product just the way you want it. That’s why I like my job: I get to constantly challenge myself to create something new or to achieve something specific with my design. Plus, there’s always some new CSS technique…

Back to “presentation matters”

Monday, February 19th, 2007

I had to leave a comment on Jenny’s blog after receiving a comment from her and reading her latest posting. I got to thinking about why we’re all doing this…or, rather, why the real historians in the class are doing this. And I think one main reason is that presentation matters. Contrary to what I know some of you think (Ken, I’m largely referring to you and the discussion we had, which I think trailed over into class and you talked about in your blog entry “Grey Suits and Greening”), unless your opinions have changed as they may well have, presentation matters. Now, I know you have good reasons for believing that image isn’t everything, and you’re right, but that’s taking it too far —image isn’t everything and presentation matters. You don’t have to have the world’s most beautifully designed website to have an impact on your audience, but looking like you care can go a long way. Sorry, don’t mean to beat a dead horse…but I’m convinced there’s a reason why we all want to do well with this type assignment, and I don’t think it’s just for a good grade.

Thinking Design

Sunday, February 18th, 2007

This week, I’ve become obsessed with design. I feel this is my weak area when it comes to web design–the creativity, the artistic sense, the simple beauty. Instead, I’ve seen myself as a good coder, a quick learner, a problem solver. I am probably just something of a perfectionist and have standards so high that I’ll never meet them (but that’s another issue).

All this is to say that “design” is first among my many top priorities these days. I want to learn how to use color, type, whitespace, and artwork for maximum benefit in a standards-compliant website. I don’t want my websites to look overdone, I like things clean and simple, but I don’t want them to look plain and simple.

So, as I’ve been going about my life in the past week, I’ve started to see design everywhere. Buildings that look like good frames for a webpage. Shapes that inspire background or header images. And, of course, fonts. I thought I would post here a few of the websites I’ve noticed in the past week that I really like. We always take inspiration from others’ work, and looking at my favorites is one of the first places I turn when I start a new project. I note their colors, their code sometimes, their artwork. I note what I like and what I don’t like.

Photo of Erskine Design website Erskine Design: Clean, elegant, and a little bit playful.
Photo of Hicks Design website Hicks Design Creative, artistic, and still simple.
Photo of NDesign website NDesign: Graphic/web designer Nick La’s portfolio really showcases his artistic ability and serves as a great spot for web inspiration.
Photo of OPM website OPM: Finally, the Office of Personnel Management updated its site with excellent, clean design.

Hopefully, you will find them (and the sites they link to) inspiring, too.