Why are the basics still so hard?

Last week I encountered a few situations where all I could think was, "why is this still so difficult?" In one case, someone who was incredibly tech savvy was having difficulty getting a TV to work with a particular attached device -- shouldn't this be easy by now? Why do we all still have four television remotes? Why is there such a confusing jumble of wires and inputs? Why haven't we figured this out yet? Virtually everyone (at least in the US) has a TV and at least one device attached to it -- a DVD player, a cable box, or maybe a TiVo, or AppleTV, or even a full home media system -- but these systems still seem designed from an engineer's perspective, not for the average Joe.

I don't know how to answer all those questions I posited there, but I'm hoping that we eventually reach a point where we start making a little more room for real world usability. I've heard (unfortunately I can't cite a statistic) that HDTVs are frequently returned because people think they're broken, when in reality it's because they haven't attached it to their cable connection correctly or they have not properly adjusted the settings, and if you mess all that up, the end picture often looks worse than old analog TV. But, how is an average person supposed to know that? And at what point do you get enough complaints and returns to actually go back to the design phase and say, "let's simplify this"?

A lot of designers thinks this means that people are stupid, and you have to oversimplify to the point of babying people. Let's snap out of that mindset, and instead try putting ourselves in someone else's shoes. Imagine some field you know nothing at all about, and now imagine an expert working on something that is ultimately meant for you, the "average" person. Wouldn't you want them to make it as clear and easy for you to understand as possible? So why balk at doing that in design?

New Portfolio Site

I've just relaunched my portfolio site. The re-design isn't hugely dramatic, and I will probably continue to do some behind-the-scenes tinkering to clean up the code and maybe do a little text editing here and there, but I'm proud of the relaunch!

The main differences:

• The primary navigation is now along the top
• There is more use of color throughout the site
• The "About" section has been expanded
• The thrust of the site is now more about making client connections rather than just showing what I've done in the past
• The new color switcher!

I've also tried something new where the entire site is designed without any images (with the exception of the portfolio imagery). Most websites use combinations of background graphics, graphics-as-text, and other graphical embellishments, but I gave myself the challenge of doing it all solely using HTML and style sheets. There may be a slight benefit in loading speed, but for the most part, this was purely as a personal challenge to see what I can achieve, and I'm pretty happy with the result.

One of the key additions to the portfolio section is the recent relaunch of the SpeakEasy Stage Company site, one of Boston's premier theater institutions. Check it out.

I also finally linked to my blog, which has been running for about 3 months now, as I wanted to make sure there was a decent back log of content available before promoting the blog. So feel free to peruse past entries and let me know what you think - leave a comment on a post if you find it interesting! (Please note that for now I am using a blogger template for the blog, but I plan to create my own blog layout soon - one step at a time.)

Thanks for visiting, and if you're looking for a new designer, hopefully I might be working with you soon!

Introducing the color switcher

I've just relaunched my portfolio website, and one of the main new features is the color switcher (pictured above). I realized a few things about my site as I was considering a redesign:

• My site has a very simple color pallette - black, white, and green - but the green was chosen somewhat arbitrarily. Why not a different color?
• My site should be more than just a place to show images of my work, it should show some of my coding ability as well.
• Some of the best design firm/portfolio sites I've seen add a level of interactivity that engages the visitor.

Those three concepts tied together quite well in the concept of the color switcher. I used the code from this helpful tutorial at A List Apart and removed all color declarations from my primary CSS style sheet (sorry if this is a bit codey for the non-coders), and then created seven style sheets that dealt only with colors. It also creates a cookie which remembers what color you last chose when you return to the site.

All in all, it is a fairly simple concept that can be executed in larger ways for other sites, such as changing font sizes or allowing re-skinning for users, and can extend well beyond colors into entirely reformatting the visual structure. CSS Zen Garden is a good example of this taken to the extreme, although unlike CSS Zen Garden, my color switcher requires no page refresh.

Pretty neat, huh?

What is accessibility?

One of my most enlightening experience at a previous job was learning more about web accessibility. At first the word "accessibility" may conjure images of people in wheelchairs needing ramps, rather than stairs, to enter buildings. This isn't so far off the mark in terms of web design.

Accessibility certainly deals with making websites that work for individuals with impairments that might make websites otherwise difficult to use. These can include:

• Visual Impairment - Note that this covers a wide range, from the completely blind (who use screen readers to have content read to them) to those with poor eyesight (who can see but need larger text and clear imagery) to those with color blindness (who may have difficult seeing certain contrasting colors, such as red text on a green background).
• Hearing Impairment - One might think this is not a problem on the web, but as video and sound are increasingly used, some sites have entire introductions and "avatars" that use audio to provide instructions and content -- without a text component, the hearing impaired are lost.
• Motor Skill Impairment - I don't know the technical term for this one, but it's important to remember that not everyone uses a mouse, and not everyone who uses a mouse has the dexterity to easily click on a link if it is just a few pixels in size.
  

The funny thing about designing websites with all of the above in mind is that you generally are improving usability for non-impaired visitors as well. Some people with fine vision may simply prefer larger text for reading, and good visual contrast makes a site easier on the eyes for everyone. Similarly, someone may not be hearing impaired but may be browsing your site in an environment where they can't have sound turned on (such as at work or at a library) -- making sure your navigation and content is available as text helps here, and can also help those who may not be fully fluent in your language and find it easier to read text. And of course, we've probably all been in situations where we've moved our mouse through a set of complicated drop-down menus only to get frustrated as moving 1 pixel outside the target area makes the whole menu disappear -- that doesn't require any impairment to be annoying.

There are also behind-the-scenes benefits -- websites coded with accessibility in mind can often place higher in search engines, as semantic markup (for example, labeling your headers as headers rather than just regular text with fancy font formatting), image text replacement (that is, whenever your graphics have text in them, the text should be written into the code as well), and proper usage of "alt" and "title" tags will help the search engine find your content and mark it as relevant.

It's also important to keep in mind that many web technologies -- such as JavaScript and Flash -- are not enabled or available to some users (the most notable recent example being the iPhone's lack of Flash support). The concept of "degrading gracefully" has become an important one -- essentially meaning that should these technologies be turned off, your site content should still display in a readable (and hopefully visually pleasing) manner.

I do not consider myself an expert in accessibility but it is certainly something I keep in mind as I design sites, and with each new project I try to implement new learnings. I think it's important to share this concept, however, as many people have never even heard of or thought about website accessibility. Having this knowledge in the back of your mind, even if you don't necessarily know 100% what its implications are, can help in the decision-making process during design. Accessibility issues may only be strictly necessary for a rather small minority of visitors, but designing with them in mind usually has a positive impact for everyone browsing your site.

How much can you know?

Confession time: I don't know everything. I know, you're shocked. But seriously, I was talking with a couple friends who are in web design, shooting the shit about various techniques and CSS and JavaScript (you know you're a nerd when...), and at one point I blurted out, "sometimes I feel like I don't know nearly as much as I should and I'm just making it up as I go along." My friend, who has had a few years more experience than I have, didn't miss a beat: "You just described everyone in our industry."

That was comforting, and probably true, as there are so many different things any individual could know in the field of web design that it's pretty much impossible to expect anyone to know it all. I'd argue that the greatest advancements in design have come from people who were making it up as they went along.

It seems to me that a good designer -- or perhaps more specifically a coder/developer -- doesn't necessarily need to know how to do every idea or assignment that comes their way. They just need to know how to LEARN how to do it.

I'll give an example of a recent project I did. There were a number of techniques I wanted to do, yet didn't know specifically how to do them off the top of my head. Among them: tabbed content within a page (rather than clicking to a new page for every tab), an automatic rotating image slideshow, a form that calculated various fees and totals in real time as you select different options, and a method to display content only if it exists on the server and how to present an alternative if it doesn't -- these are all things I had never done before, but knew I could figure them out, and I managed all of them successfully. Admittedly these are smaller features, and allowed me to learn in chunks rather than being presented with something as complex as "build us an online stock trading system." I felt confident tackling them because I at least knew enough about the various languages and techniques involved to know that they were all achievable, and as I worked on them, I learned more about other underlying concepts that will help me with the next new idea/design.

I think too many people, when given a challenge they don't already know how to complete, simply give up and think it's outside of their abilities. This is rarely true. There are still coding languages and techniques that seem so complex to me that I can't help but feel intimidated -- but breaking them down, and remembering that everyone who is now an "expert" was once in my shoes as well, has made me realize that knowing "how to know" is a skill that lets you do just about anything.