Monthly Archives

 

Who's your navigation for?

University website comic

A perfect example of a common navigation problem by xkcd.

Who is your navigation for?

The specific, but diverse populations within a University have  caused some horrible navigation choices. Who's your audience? If a University directs their navigation towards your students, the faculty can't find anything. If they direct it towards the faculty, the students can't find anything. That's not even considering other audiences like parents, sports fans, and potential students.

It's not a problem specific to Universities, they just make a great scapegoat. The same problem can be seen in much simpler sites. The audience the site design was targeted to, and the real audience aren't always the same group of people.

Who was your site designed for? Did you target the right audience? Do you have more than one audience? Are they different enough that it would require compromises be made with aspects of the site like navigation? In the case of Universities, they may even be diverse enough to require different site structure or navigation. State government sites can be the same way. A number of state sites have taken to dividing their home page by audience and giving each audience their own version of the home page. The Delaware state government site is a reasonable example. They use tabs for each primary audience.

It's unlikely that a personal or small business site would need to go to this extreme, but it is very possible that you're not targeting the right audience. Take a moment and pretend to be a member of your primary audience. Look at your site as if you'd never seen it before. Does the organization and navigation make sense? You might like what you see, but you might be surprised too. Good luck.

Potential Change in Web Accessibility Requirements

DEPARTMENT OF JUSTICE - Advance Notice of Proposed Rulemaking.

"Nondiscrimination on the Basis of Disability; Accessibility of Web Information and Services of State and Local Government Entities and Public Accommodations"

The department of Justice has given advance notice of a proposal to change the regulations for web accessibility requirements for State and local governments. One of the suggestions in the document is to change to the WCAG 2.0 standard. State and local governments currently are required to meet the Section 508 standard, though a number of them have chosen the more stringent WCAG 1.0 as the state standard. A change to the WCAG 2.0 standard is significant. Raising a site from WCAG 1.0 to WCAG 2.0 can in some cases be simple, but in some cases it can also require a complete redesign.Accessibility needs to be built into a site from the ground up, not as an afterthought. With sites designed around accessibility, a change may not be too difficult. When accessibility was forced onto an inaccessible design the WCAG 2.0 standard may not be within reach without a complete restructuring of the site.This may be a good time to evaluate where your site stands in terms of accessibility. Try out a tool like Cynthia Says and see how your site does. Regardless of the outcome of this proposal, I think that the focus this will bring on accessibility will be a good thing.

North Dakota Highway Patrol goes Drupal

Working at ITD, I had the opportunity to redesign the North Dakota Highway Patrol's website. This was both a redesign, and a Drupal conversion project. Using Drupal allowed us to develop a very nice looking site that can easily be maintained. Content can be maintained by the people who are familiar with the organization, the staff of the NDHP. www.nd.gov/ndhp is built in Drupal using Zen.

North Dakota Highway Patrol screenshot

Central Dakota Humane Society

Riven Design has converted the Central Dakota Humane Society's website to Drupal.

Central Dakota Humane Society screenshot

The new CDHS site features a pet resource library, galleries of available pets, a news section, and much more.  Several custom content types, and extensive use of the Views module allowed us to make the nice looking and easy to maintain. Content is placed in appropriate menus automatically when saved, and the library and pet galleries are created dynamically. This site's theme was developed with subtheme method, using Zen.

Basic Website Testing

I've been asked a number of times lately how I test websites that I work on. While I'm never shy about talking about this sort of thing, I thought writing it down might be beneficial.

The Basic Browser Check

Visually check your site in several browsers. I'd suggest testing pages in a number of browsers. Always include Internet Explorer, preferably several versions. I'd also throw in Firefox, Chrome, Opera, or Safari as you are able. Bonus points if you're testing in all of these and a few I didn't name. Demerits if your default browser is still IE. Double demerits if you only test in IE.  Checking it on both a PC and a Mac is good, adding Linux is better.

What do I look for?

At this point your looking for basic function. Does the browser display what you expect? Minor spacing variations may be acceptable. A few pixels here or there often make little difference. Sometimes they make a great deal of difference, and you need to be prepared to fix the variations that count. When the difference is 10 pixels between headings and paragraphs versus 11 pixels, you might want to consider how many people will notice versus how much time it will take to fix. If you have misaligned background images, you just buckle down and fix the problem.

Raising the Bar - Validation

Next step, validate everything. There are a number of ways to check site validation. Find one or more of these that work for you and use them early and often. I list several tools I use on my resources page, but there are others. A Google search for validation tools should come up with a multitude of choices. I test templates as I develop, then I continue spot checking through the lifetime of the site design. I also use site quality testing tools like Compliance Sheriff, but that can definitely be overkill for smaller projects.

If you use Firefox, try the HTML Validator and Web Developer Toolbar for testing validation. They let you test HTML, CSS, and JavaScript on the fly.

Accessibility

This is going to be a sinple explanation of a complex topic, but here are a few ways to test for accessibility issues.

None of these are the perfect tool, but they're all helpful and free.

What's it all mean?

These are all tests and tools. None of them will give you a perfect site, but they'll let you know what you have. Knowing what the issues are is the first step in solving them.  Good luck, I hope all your projects go well. Check back soon, I have a more in-depth look into testing for site quality and accessibility planned for the near future.

Ze Frank and Jobz

Ze Frank is hiring. I say this not because I'm interested, but because I like the way he wrote the job descriptions. Two statements jump out at me.

  1. "You should have sent at least one email to someone you have never met telling them that they should stop using tables."
  2. The phrase “Please make that look more like a Muppet vomited SteamPunk.” should seem like satisfactory art direction, and to be honest there was no need to use the word “please”.

Email strangers about the perils of table layout? I have to admit I've sent those emails a few times, but I really don't like to. I prefer to use the offending site's contact form. The second statement confuses me a little though. How could "Muppet vomits Steampunk" be considered a vague artistic direction. I'd only have one question in response to that direction. Which muppet?

North Dakota's www.nd.gov

As part of my work with North Dakota Government's Information Technology Department (ITD) I with a team of people maintaining www.nd.gov. We've recently launched a series of updates, with more on the way. My part of the recent changes involved improving the basic HTML structure, the CSS, and overall accessibility. This new structure is now wrapped in a new theme for the Summer. The content and back-end work belongs to others, but the CSS and Photoshop work is mine.

www.nd.gov screenshot