Thursday, October 11, 2007
New Redesign
Last week, I launched a redesign to the Office of Admissions homepage. This redesign was completely fueled by statistical reports from our web analytics software. Besides our homepage, our highest traffic destinations were the majors section and the calendar. Click-through testing found that these areas were not as easy to find as they should be.Therefore, the redesign focused on bringing these areas to the home page. The majors are now available right in the center, and the calendar is integrated into the footer - and every page on the site.
I will run official reports in a month and analyze the data in more depth, but early indications show more click-throughs to the majors and less searches for events.
You can check out the new, more functional design at: http://admissions.unl.edu
Wednesday, May 02, 2007
Web Designers Survey
For all web designers out there, you should take this survey. From A List Apart's website:
Designers, developers, project managers. Writers and editors. Information architects and usability specialists. People who make websites have been at it for more than a dozen years, yet almost nothing is known, statistically, about our profession. Who are we? Where do we live? What are our titles, our skills, our educational backgrounds? Where and with whom do we work? What do we earn? What do we value?
The survey can be found at: http://alistapart.com/articles/webdesignsurvey.
Tuesday, January 09, 2007
Adding CSS icons to links automatically
Many times, developers come across the need to link to "non-web" documents. This would include .pdf, .xls, .doc, etc... files. What has become a common theme is highlighting the hyperlink by adding an icon next to it showing the user what to expect. In other words, if the hyperlink goes to a .pdf, show a small .pdf icon next to the link.
This can be easily done with CSS through a class:
a.application-pdf {
padding: 3px 18px 0px 0px;
background: url(application-pdf.gif) bottom right no-repeat;
}
application-pdf.gif is a small icon. You can see how it looks at: http://admissions.unl.edu/diversity/nationalhispanicvisit.asp
This requires a class to be provided on the link:
<a href="xyz.pdf" class="application-pdf">The year-end financial report</a>.
This works great, but wouldn't it be better if we didn't have to put this class in every time we created a link to a .pdf?
Through CSS, you can use selectors to automatically add the icon image. I won't go into the details, the gurus over at Ask the CSS Guy have done that already. It looks like this:
a[href $='.pdf'] {
padding: 3px 18px 0px 0px;
background: url(application-pdf.gif) bottom right no-repeat;
}
However, this only works in IE7, Firefox and Safari. This leaves out a major population of IE6 and lower users who haven't upgraded (through my experience of IE7, I can't blame them). So I got to thinking, how can we make this better?
Enter jQuery. I love to find ways to use jQuery in my applications. When it comes to using Javascript, jQuery is the way to go!
What if we used jQuery to setup a rule to work only for IE6 and lower users that will add the icon? With that in mind, this is what I came up with:
$(document).ready(function() {
/*@cc_on
@if (@_jscript_build < 8832)
$("a[@href$='.pdf']").addClass("application-pdf");
/*@end
@*/
});
Basically what this does is determine if the broswer is IE6 (@_jscript_build < 8832), finds all links which end with ".pdf" and then add the "application-pdf" class to the A tag.
In the CSS, I have combined the use of the CSS selector and the original class definition:
a[href $='.pdf'], a.application-pdf {
padding: 3px 18px 0px 0px;
background: url(application-pdf.gif) bottom right no-repeat;
}
The same would work for any other document type, all we would need is another icon, the class definition and a line in the jQuery function.
With the combination of CSS and jQuery, we now an automatic way of adding icons next to each of our links to "non-web" documents. This won't work for user's without JavaScript, but it is still accessible. I figure I'll probably miss some .pdf links anyhow, so the payoff is about the same.
Thursday, November 16, 2006
Accessible Web Experience Design
One of the hot topics today, as you are well aware of, is AJAX. It allows us to create some amazing programs which work inside the browser. AJAX is the driving force behind the web experience design trend.
The one thing AJAX lacks is a simple implementation of accessibility. Many have come up with ideas on making the experience more accessible, but in reality it comes back to the need to build a process for the exceptions.
We're building a system on TWEEK to work with this issue. On the main UNL website we have also come up with some enhancements for users without javascript and/or users with screen readers.
If you are interested in this, follow the following links for more information. This is where I have started and as I develop more RIA I will update you on my findings.
- Standards Schmandards
http://www.standards-schmandards.com/2005/ajax-and-accessibility - W3C's commitment
http://www.w3.org/2006/09/aria-pressrelease.html - bestkungfu weblog
http://www.bestkungfu.com/archive/date/2005/03/ajaxessibility/ - 456 Berea St
http://www.456bereastreet.com/archive/200511/web_20_and_accessibility/
Wednesday, October 25, 2006
Getting Real
The team over at 37signals embrace the new web design 2.0. They start with the interface and then work backwards. The interface is what the customers/users see; make that the best it can be and then add the functionality.
It seems to be working just fine for them, Basecamp, Campefire and Backpack all seem to be doing well.
They recently released a book on their philosophy of "smarter, faster, easier" web applications. After the first chapter, I'm hooked. Check it out for free online at: http://gettingreal.37signals.com/toc.php
From the first chapter:
Getting Real starts with the interface, the real screens that people are going to use. It begins with what the customer actually experiences and builds backwards from there. This lets you get the interface right before you get the software wrong.
Monday, October 16, 2006
Free Lasik -- if you can see
I heard on the radio today that a local eye doctor's office was giving away free Lasik sugery to one needy individual. All you have to do is fill out a form on their website. Being a wearer of contacts and having a desire for Lasik, I figured I would look into it. It turns out the practice has a very long form on their website with a required essay. Even though it sounds better than the do-it-yourself Lasik option, I opted to not fill out the form.
After a closer look at this site, I noticed it fails miserably at accessibility, especially for vision-impaired individuals -- their primary audience.
All images lack the alt attribute - the main reason for the lawsuit against Target. The top navigation involves text inside an image, something which a screen-reader won't be able to understand. If a user is able to see, but has an issue with contrast, the left side navigation is next to impossible. Good luck finding your way through this site if you have a vision-impairment.
The major issue with accessibility is not that it is tough to implement -- all these changes can be corrected in twenty minutes -- it's that too many designers don't understand. If a contractor were to build an office for these doctors, the office would have wheelchair accessibility and Braille signs. But when the web designer is contracted, these rules are discarded. In the end, the business receives an incomplete website with a possible pending lawsuit. I hope they saved a lot of money by going with the cheap designer.