Mobile Web

This will continue to grow and become increasingly important in the future. As a university, we’re probably safe lagging behind in mobile development. However, the message was this: build web standards based sites, and you’ll be ready when the mobile revolution happens.

Accessibility

Let me repeat: build web standards based sites and you’ll meet most of the accessibility checkpoints.

Typography

Ahh… an old topic that had fallen by the way side in the last couple of years. For me, the subject of typography would have to be the most inspirational bit that I took away from SXSW. Sitting in on sessions about Grid Theory, Web Typography, and being able to see the world premiere of the documentary Helvetica took me back a few years to my days in CDES.

Typography is more that just choosing a font. It’s about making sure you use proper ligatures, have a good vertical flow that content follows, and making sure when you define substitute fonts, they’re similar.

Networking

Last year, I went to SXSW with hopes of meeting some of my web design “superheros” and for the most part I was able to say “hi” and chat for a few minutes with most of them. That was all fine and nice, except they were meeting so many people, I really didn’t feel that anyone really remembered me the next day. What I found was that the lasting connections I made were with other people from universities. This year, I wasn’t really interested in trying to talk with all the “VIPs” of web design, but rather meeting up with the people I had met last year: Dave, Josh, Jessa, Chip, and Pat. On that level, this year was a great success. I spent some quality time hanging out with Dave and his crew, along with Josh and Jessa.

Sessions

I suppose it’s hard to really know what you’re signing up for from the session titles. I had a lot of hope that I would find tons of good information in the sessions. I was sorely mistaken a few times, and spot on others. I would say that overall the quality of the sessions were lower than last year. I discussed this with others, and they felt the same. The focus this year seems to have shifted toward video and business; not much of a surprise there considering the YouTube purchase by Google. While some will claim that SXSW is not about the sessions but the hallway discussion or after hour events, it’s hard to make that justification to your employer.

With that in mind, I would continue to advocate SXSW as an event that we must continue to send people to because you never know what will grab your attention and what will reinvigorate you.

Final Thoughts

Now that I’m back from SXSW and have had a chance to reflect on my experiences, I’d like to see SXSW continue to play a roll in web development at Chico State. In many respects, much of our web presence is a few steps behind. Here, we tend to treat the web as an extension of old media. Through learning about new technologies, techniques, and what other universities and businesses are implementing, we can understand where we need to guide our own web presence. Instituting that type of change can be difficult and require a lot of energy. SXSW gives you an infusion of energy to help you become an agent of change. Hopefully next year Chico State can have a larger contingent travel to SXSW to experience all it has to offer.

Don’t be a tool. Use One

There are pleanty of free tools out there for evaluating your web site for accessibility. The best place to start is, if you have Firefox, installing the Web Developer Toolbar. The toolbar enables you to check validation as well as highligh missing alt tags, or headings (which are important to screen readers).

Doing the right thing, without your boss noticing

Use semantically meaningful markup. Using the right element for the right job will help create a richer context for the document. Also you can do simple things like provide hidden “Skip To…” links at beginning of documents in addition to hidden form labels and table heads.

There are tons of more web-based tools and wizards on Accessify such as Table and Form builers.

With that in mind, Mark and Richard also reminded us that typography is more than just about using pretty fonts, but rather it’s about using the right characters. For example, using proper quotation marks rather than primes(tick marks) or when to use an em vs an en dash.

Probably the best anecdote from the session was about The Sun newspaper in England which is akin to People Magazine; basically celebrity fluff. Richard pointed out how The Sun was written so that an 8 year old could comprehend it. Despite of the low barrier of comprehension and less than Pulitzer Prize worthy content, all of the articles have correct character usage. Richard explained that everyone, from the writer, to the editor, and even the printing press operator care about the correct usage of typography.

This got me thinking: why don’t we care about typography? Working in Information Resources, our jobs revolve around communication. So why don’t we pay closer attention to typography which servers to facilitate good communication? Is this a by-product of the computer era? I’ll have another blog post about this later.

Richard and Mark continued with their presentation, highlighting the importance of vertical flow (something we desperately need to fix in the portal) and how typography influences grid design and how those grids were calculated.

There was also a call to developers to really take advantage of CSS and start defining font stacks properly. Case in point, by default in Dreamweaver the font stack looks like this:

p {font-family: Verdana, Arial, Helvetica, sans-serif;}

What’s the problem with this you might ask.

1. Arial is not a suitable back-up for Verdana. Verdana is a much larger and wider font. Use Tahoma instead of Arial
2. IMO: Arial is the font for the cheap designer. Helvetica is a much more adaptable font, and in specific Helvetica Neue (pronounced: no-oy)

So, let’s rewrite the above CSS rule in two distinct flavors: for Verdana, and for Helvetica.

p {font-family: Verdana, Tahoma, sans-serif;}

p {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}

I don’t believe Helvetica or Helvetica Neue ship by default with Windows, so why specify it ahead of Arial when a super majority of your target audience is probably browsing on a Windows machine? Progressive Enhancements! It costs next to nothing in bandwidth to add an extra font to that font stack (which will be cached in most instances) so you might as well specify the nicest font possible so those who have it installed, or use a Mac, can enjoy a nice font family and those who don’t will still continue to see the world in Arial (those poor souls).

As soon as the audio of this session is posted, I’ll put up a link, but in the mean time you can browse the presentation slides and find other resources on Typograhy

• Humans like to infer intention / order
• The grid is the most vivid manifestation of the will to order in graphic design
• Constraints are the mother of design invention
• Alignment is critical to the success of the grid
• Add more spacing to the bottom of text.

I had a brief chance to talk with Mark Boulton yesterday, and he indicated that he’d be going into more grid theory tomorrow morning, so I’ll definitely be sitting in on that session. Now that we’ve been using Yahoo’s Grid-Font-Reset stylesheet in practically all of our projects, it’s made accessible and standards based grid layout more possible. While, I have yet to push the envelope w/ Yahoo Grids to create some of the calculated grid layouts that Mark or Khoi dream up, it helps me get into the mentality of thinking in grids.

Download the presentation slides

• Activity vs People centered design
  • People adapt to technology all the time, don’t make technology adapt to people
• Look for trends, not 1-off request
• def. Genius design: Hire better, do less user testing

The conclusion the panel somewhat seemed to agree upon was that users vary so much it’s difficult in some situations to design for them. Instead we should be focused on designing for an activity that the user will need to perform.

The Highs

• Grids are Good
• Everything you wanted to know about Mobile Web but were afraid to ask
• Accessified! Practical Fixes for Web Designers
• Why we should ignore users
• Moving Corporations toward accessibility
• Uniting the Holy trinity of Web Design

The Misses

• Design Workflows at Work
• High class vs. Low Class Web Design
• Web App Autopsy

Web Awards

Last night they held the 10th Annual Web Awards, hosted by Ze Frank. He was by far the most entertaining person I’ve seen so far. In some strange coincidence, I was wearing my Vitamin t-shirt and was approached by Ryan Carson (the proprietor) who thanked me for wearing the shirt. Turns out, Vitamin won an award for Educational Resource. WooHoo! After the show, Gillian Carson approached me and thanked me for wearing the shirt. Turns out there were only 25 shirts made, and so far I was the first one they’d seen wearing one. How cool is that?

• Useful — To have the courage and creativity to ask whether our products are useful and be able to develop innovation solutions to make them more useful.
• Usable — Usability, ease of use, is necessary.
• Desirable — Image, identity, and brand are all parts of emotion design to keep in mind before sacrificing for efficiency.
• Findable — Build navigable sites that help users find what they’re looking for.
• Accessible — It’s the ethical and legally required thing to do.
• Credible — Design elements do influence whether or not a user will trust and believe the information presented.
• Valuable — The user experience must advance the mission of the organization.

So what purpose does this diagram serve? As mentioned above, it breakdown how Morville views the qualities that make up the user experience of a website. The advantage is to look at one of your existing sites or products through this honeycomb. It can be a conversation starter that’s a little different and more interesting than “How do we make this accessible?” or “How can we change the template?” While those are two pieces of the puzzle it’s not the whole puzzle. Taking a different approach to evaluating your site can lead to changes you might not have dreamed of.

The second advantage to using this model is that it affords you the opportunity to tackle a larger problem in more manageable chunks. Sure you might not be able to do a complete makeover of your site, but, for example, it might take that many resources to improve the findability of the most sought after content.

Challenge
The next time you tackle a web project, evaluate any existing site, or your own design, through the honeycomb matrix to see if you think it will create a positive or negative user experience.

Demystifying the Mobile Web
When thinking about a mobile web problem, remember…

1. Context
2. Content
3. Component

Web 2.1: Making Web 2.0 Accessible

Don’t read WCAG 2.0, read Understanding WCAG 2.0

Whether a site works with or without Javascript is an interoperability problem, not necessarily accessibility.

Holistic Web Design

def: Importance of the whole & interdependence of the parts

• Involve everyone
• Share, communicate, educate
• Compromise

Microformats

Principle: Keep things “micro”
Process: Emphasizing getting real
Community: Minimize duplication

Roach motels are so Web 1.0 — Jeremy Keith

Embracing Standards

Transparency with the public is a good thing. Airing dirty laundry creates pressure internally to be better.

Networking

I had a great chance to meet-up with some University Web folks. It was great to meet: Chip D (University of Denver), Dave Lowe (Biola), Josh Works and Jessa (KSU), and Andrea (Humbolt State). It was great to hear that every institution faces their own challenges and it sounds like Chico has a good infrastructure in place to grow.

WaSP Educational Task Force

There was also a buzz and push for web designers and developers in the university sector to become more active with the Web Standards Project. The Educational Task force is trying a two pronged approach of trying to:

1. Get universities to develop web standards compliant web sites
2. Get instructors and professors to teach students about web standards

If you’re interested, join the mailing list or check out the IRC.

Powers you need to be a web design superhero

• Keep pace with new trends and technologies
• Be Agile
• Stretch yourself
• Understand your clients needs
• Be able to convince your client that what they think they need, is not actually what they need
• Empathy – Understand your Users and their goals
• Be able to sense danger ( ‘here be dragons’)
• Precognition – Anticipate new trends
• X-Ray Vision – Understand the semantics
• Invulnerability – Don’t let comments and criticisms discourage you
• Have a sidekick

Who are your web design heros?