Site Review – Temple Gate

With the current discussion around the recently announced Temple Gate, An Accessible HTML 5 WordPress Theme, I figured I’d give it a quick review to see how the site measures up in regards to accessibility, usability and overall design.

Strengths

  • The feature highlights that are listed.
  • Decent visual design.
  • Effective highlighting of the most ‘Popular Posts’ in the banner.
  • Semantics are okay. (The <div> elements can be streamlined a bit, but not the end of the world.)
  • Utilization of WAI-ARIA roles: banner, article, complimentary and contentinfo.
  • Information is still differentiated effectively when colour is ignored. (via Graybit)
  • Visual guide used for focus on search input. (In other words, the little magnifying glass disappears when you focus on the search field.)

Improvements

  • Not all links have a title attribute assigned.
  • As well as the current link from the logo, add a ‘Home’ link in the main navigation.
  • Add a ‘Skip to Search’ in the skip links.
  • The main logo that shifts on mouse over can be considered a bit distracting.
  • No text resize widgets or themes in use.
  • Further utilization of WAI-ARIA roles: navigation, main, search.
  • No alternative themes used. At least have one for high contrast.
  • By default, some text is a bit small for skip links and some secondary content.
  • With keyboard navigation (not with the mouse), focus and visited can be improved. Use more than colour to indicate this.
  • Colour contrast can be improved in some areas. Dark grey ‘Sep 2010’ against light grey, light red ‘xiwang’ against light grey and off-white, blog post separators, etc.
  • Consider having an accessibility statement built in, as well as the brief description in the complimentary content area.
  • Consider using GZIP to improve load time. W3 Total Cache has done a decent job for me.
  • Take advantage of a grid layout. (Vertically align the separator between the picture and the ‘Popular Posts’ with the line between the main and complimentary content.)

Things to still test

  • Screen reader testing
  • Multiple User Agent testing (Older browsers, IPad, BlackBerry)

Keep in mind that this is not meant to slam any of the work that been done. It’s simply to improve things for all involved.

Overall, a good first effort. It’s always good to see people automate things in the effort of applying the best practices in recommended web standards. If there’s any questions about the points above, I’ll be happy to clarify them for you.

Design Jr. – Design from a child’s perspective

For inspiration, I want to share with you my original proposal for the 2008 IA Summit: Design Jr. – Design from a child’s perspective.

Back story

Back in 2006, I had attended the 2006 IA Summit. At the time, it was my first exposure to professionals in the IA field. I must say that I was a bit out of my own comfort zone, but that’s how I like to learn new things. Plus, the people I had met really made me feel at home.

In the same year, I was also learning all about being a father. From my own observations of watching him develop, I had seen the connections between my son’s experiences and what he retained. From this, I believed you could extrapolate the very basics of how we, as human beings, can learn and are guided. The result being that you have a better understanding of effective design.

From the summit and father-like experiences, it inspired me to write up a proposal for a presentation I had in mind for the 2008 IA Summit: Design Jr. – Design from a child’s perspective. This is what I submitted:

Title
Design Jr. – Design from a child’s perspective
Authors
Marco Battilana
Objective
To show the recognition and understanding of canonic icons/symbols with children and how it influences today’s user-centered and interaction design practices.
Description

The purpose of this presentation is to highlight one’s ability to recognize canonic icons/symbols, making that instant connection to understand the meaning behind it, and taking the appropriate and expected action. Specifically, what I want to show is examples of the earliest stage of this recognition possible – starting with children.

  1. I’ll show examples of recognition from an early age. Probably using flash cards of common imagery that loosely relates to canonic work that exists today: a house, an arrow, a stop sign, etc. This is to highlight the mental connection and understanding of the canonic imagery.
  2. I’ll show examples of trends that are happening in preschool where interaction is encouraged and the most effective methods to do so are highlighted. This is to highlight the connection between how children interact in a preschool environment and how it carries over as an adult.

From there, I will take these examples and show how it’s resulted in much of the user-centered design and interaction design work that is performed today. Basically, taking what was cited from point 1 and 2 and meshing them with real world examples of web and web application design.

Examples
  1. User-centered design
    • Observe children’s books from different countries to see the communication of letters, numbers, etc.
    • Cite example of showing my son my finished icon work and having him recognize (at a high level) what each one represents
    • Ideas for icons: An arrow versus a realistic finger, A fork and knife versus a realistic plate of food, Showing examples at various sizes to see the difference in recognizability
  2. Interaction design
    1. look at kiosks targeted for children

Results

My submission was rejected. Flatly rejected. In fact, out of the 7 people on the judging panel who gave feedback, 6 of them completely (and bluntly) discounted my proposal. I’ll be completely honest when I say that I was quite devastated at the results.

However, looking on the bright side, I did have the satisfaction of knowing that I had at least enlightened and inspired one person on the panel.

And the lesson to be learned?

Don’t give up. If you believe in something enough, make it happen. But, keep an open mind as to the feedback you receive. It’s always beneficial to bounce ideas off of others and refine as necessary, without effecting the integrity of your original idea.

Looking back, I don’t think the IA Summit was the right venue for this type of proposal. However, I see that there’s a related submission on the 2011 SXSW Panels. I’m going to submit this for 2012 and see where it goes from there.

Footnote

I want to thank Lisa Colvin for helping me out back in 2006. Not only did she tell me about the benefits of Linked In (and being my very first connection), but she also gave some very good advice. She told me not to feel so out of place, take full advantage of the knowledge base available and network as much as possible. And so I did.