1 Trick Pony

I look at websites completely differently now.

It's not that I just starting admiring or noticing websites and paying attention to the ones that impress me with their functional designs. I've always done that.

No, it's that when I see one of those websites, now I think "I want to learn how to do that!" The more I master css, the more I think that I might be able to teach myself some other languages and technologies. I don't want to be a one-trick-xhtml-and-css-pony. I've made myself a list of what's next:

1. dhtml
2. javascript
3. php
4. python
5. asp
6. ajax

And that's not even mentioning the database management class next semester that will give me a better understanding of Access and at least an introduction to SQL. And Flash is starting to interest me a bit -- when it's done well (which is rare.) And I also really want to figure out how to use the Bridge in CS3 so that I can have full integration between Photoshop and Dreamweaver. There's a video tutorial about that on lynda.com but it costs money...

Web Design Tip of the Week

What do you do when you've made a nice sketch of what you want your website to look like, but you don't have enough time to build it because you're too busy being a kick-ass design firm?

You animate your sketch and throw it up on the web.

Taking Shape.

I feel like my css knowledge is finally starting to knit itself together into a more cohesive, intuitive understanding.

This week, when I realized that the image file for the search button was corrupted and could not be repaired, and that even if I made a replacement image it would still be an image and not be readable if the browser was sized up, I instead replaced that image with an all-css-styled xhtml button.

Although writing the code for the button took only about two minutes, I spent another hour figuring out what inheritance and competing code issues were getting in the way of the browser displaying the new style. But the real point is that i did figure it out, and the button does work, and also fits with our design theme.

It's hard for me that we won't get to redo the entire site (beyond the scope) and that we won't be able to take the site much farther stylistically (beyond the time frame). Part of me wishes that we were doing a site that was a bit flashier, but I know that we are also doing a very *useable* site, and while that is ultimately more important, it doesn't feel very glam.

Validation.

I went through css hell and back again this week.

And reading through online posts for help, I discovered that generally there are two schools of thought on old-school html vs. new school xhtml: why bother to convert to css/who-the-f***-cares vs. standards rule/I'm-more-compliant-than-you-are!

And I found out I am in the latter camp (somewhat begrudgingly).

Working with tables, I was about to pull my hair out, and working with css is the same way, only with a small, dim light at the end of the tunnel.

As a big proponent of interoperability (of all kinds), I understand the need for standards.

Additionally, it's somewhat akin to learning art techniques... You don't necessarily have to know the rules to break them, but knowing the rules allows you to break them with intention, panache, and an understanding of the consequences that follow.

That said, the css/xhtml learning curve is steep...

Web Gratitude

This week I really got down to working on the website project for class. I spent hours on the cataloging interface page and created many text boxes for the advanced search features. Nick and I had decided that anything that was beyond the scope of the class would just be represented with an image rather than functional code, but I can't help it... I had working text boxes and I wanted to add the feature Nick and I planned on in the mockups -- dynamic default text that disappears when the user clicks on the box, and reappears if the user leaves the box without entering anything. It was relatively easy to find a tutorial that would walk me through the steps of creating my own code of having the text disappear on focus, but I couldn't get the text to reappear when the user left the box empty and clicked outside the box (or in another box).

This whole week I turned over the problem in my head, doing research on my lunch break. I would go to bed at night, and I couldn't stop thinking about html -- my wife even made up an html-related lullaby to try to keep my head from exploding.

Then I stumbled upon the onblur attribute of the input element, and I knew I'd found the mate the the onfocus attribute that I'd already used to clear the default text from the box. Over several hours last night, I tweaked my guesses at the code until it worked -- effectively by reversing the code for the onfocus event. Here's the working box.

This whole week, devoted to getting text to disappear and reappear in a box, gave me a new respect for web developers and how complicated it is the code all the fancy tricks that I take for granted as a web user. All that little stuff that creates a positive user experience is a lot of time and effort!

Usability Testing

This week I sat in on usability testing for a redesign of our homepage where I work. I was fascinated by the fact that the user sped through the ten tasks in the test in about two minutes, when I imagine that it would have taken her about 20 minutes to find the same items on the previous website. (If she hadn't given up already).

The difference in the pages is like night and day -- the designers have managed to take a page that was pretty much a static homepage a la 1993 and turn it into an actually useful portal of frequently used links and content. However, there were still issues related to terminology. The only times the user was confused was when she was looking for information that used jargon that she was unfamiliar with, or when the terminology used in the test prompts was different from, although synonymous to, terms used on the site itself.

Watching this user navigate through confusing terms reinforced my decision to use the heading "our materials" as opposed to "catalog" in the project website. "Materials" has a broader connotation than "catalog", and it's more representative of the website offerings that go beyond a mere online catalog. This is especially important since all the library's items have only been minimally cataloged, and do not have strong subject cataloging or other descriptors that help make catalog searching powerful. That is why the featured materials highlights and subject guides are so necessary for the collection; it's in desperate need of curation to make up for the bare-bones cataloging that often renders many of the items inaccessible in catalog searches.

Web Accessibility

Because I promised...

I'm glad that all of our assigned texts stress the importance of web accessibility and view it as a requirement of competent web design.

However, I am so ready to have the conversation move beyond screen readers.

I understand the focus on vision impairment because the Web is primarily a visual medium. But even within the community of people with visual impairments, screen readers are not the whole story. People with low or no vision may use magnifiers, software overrides for high contrast page displays, adaptive mouses, or braille keyboards. Web designers are not immune from the verbal laziness that accounts for many people using the term screen reader to encompass the entire concept of web accessibility.

Going beyond screen readers also means web design for people with disabilities other than visual impairment. This includes people who are hard-of-hearing or deaf, have physical impairments, cognitive impairments or differences, communication disabilities, epilepsy or other seizure disorders, or a combination of disabilities.

Traditionally, web designers have paid very little attention to the needs of users with cognitive disabilities. As a former special education instructor, I vividly remember the 30 minutes I spent on election day trying to explain to an 18-year-old student with cognitive disabilities that his participation in an online survey at www.vote.com was not the same thing as officially casting a ballot in the presidential election.

And for anyone who is reading this and thinking:
But how many different kinds of users are we supposed to be designing for?
Will accessible web design detract from the experience of users without disabilities?

My response is this:
Designing with accessibility in mind is creating good, universal design. Universal design is design that enhances the online experience of all users.

Improving a site's accessibility for individuals who are blind also improves its accessibility to individuals who access the web in environments that prohibit visual web surfing, such as in the car. Improving a site's accessibility for individuals who do not have use of their hands also improves its accessibility for individuals who must use their hands for other things while accessing the web. - Web Accessibility In Mind

Not yet convinced about the importance of web accessibility?
Try these simulations:
(Note: Requires Shockwave plug-in and is not configured for FireFox3.)

• Screen reader simulation
• Low vision simulation
• Dyslexia simulation
• Distractibility simulation

Information Architecture in Web Design

What was the major thing I learned this week about myself as web designer?

I hate cluttered and wordy websites, and that ironically, these are often the websites one would expect to better better designed, such as W3C.org (and to a lesser degree the Information Architecture Institute). I look forward to learning more about information architecture -- maybe there's a reasoning behind all that cluttered text that I just don't understand yet.

What was the major thing I learned this week about the collaborative process?

I like taking on more than is reasonable, and Nick is good at keeping the scope to an appropriate level. "Scope Creep" is a term I've only learned in the last year, but I soon realized its an issue I've had since grade school. That's the perfectionist in me...

Concepts on deck...

Web accessibility.

Luckily the laziness of large retailers like Target is giving way to better accessibility for those with disabilities, but we have a long way to go. More on that next week.

LIS 7530: Introductory Entry

I currently work at the a special library in St Paul as the senior library assistant. Prior to my current position, I worked at the Jefferson-Madison Regional Library in Charlottesville, Virginia, and the Mills College Library in Oakland, California. I received my B.A. in psychology from Mills College and am halfway through the St. Kate's MLIS program.

My time at St Kate's has allowed me to entertain various career goals, and currently I am focusing on learning as much as I can from this class so that I can begin preparing for a career in information architecture and usability.

I have built simple webpages using HTML editors like Dreamweaver and iWeb, but I am excited to learn to code by hand. I would like to strengthen my HTML knowledge, so I can move on to learning other languages that will help me be more competitive in the post-graduation job market.

Thing #1

I created this blog. I had never made a blog before, but it was actually quite easy because the Things on a Stick directions were clearer than the Blogger directions, and I already had a Google Account and a Yahoo! account. I also already had a Yahoo! avatar created from using Yahoo! messenger at work. So far I like the way Blogger is fairly intuitive, and that things are easier to customize than in Myspace profiles.