vanderwal.net

Gawker outted

Gawker launched today as a weblog focused on NYC using NYC media for its sources. It is a wonderful design that is easy to read and the content has a slight bite.

Accessible persona

I was reminded today of Marcus a persona in Mark Pilgrim's Accessibility tutorial for Weblogs (and anybody else interested). Marcus is actually a real person (as pointed out by Mark), which drives the persona home. This may be my favorite example currently for accessibility.

At work we constantly get outside developers turning over non-accessible sites or applications. The client I work for is put through the painful task of explaining what needs to be done to meet Section 508 requirements. The teeth pulling the client goes through is shameful as the outside contractors want every single item spelled out and they want to know why (they usually have built the application or site through reusing a previous product built by somebody that is no longer there and that way they can do the job cheaply and make a better profit, had they built from the beginning knowing and understanding the requirements it would have been easy and inexpensive to do). Often times I am asked to help define what needs to be done and why something fails compliance, usually as a sanity check (accessibility has been an area of strength for four years or more). The regulations are very broad and do not define the exact actions that should be avoided (this is the correct approach to allow for technological improvements).

Marcus is a great example to have on the shelf as much of the information I work with during the day is public information that the taxpayers paid for, whether they are sighted, physically able, have their hearing, or not. We know that there is a decent number of users that come to government sites from publicly available systems (like in libraries) that have technology that is nowhere near current. These people should be able to get to the information and use the information and applications around it as others can use it. Marcus is usually what we see as worse case scenarios using Lynx, but also what we think of as our baseline. Knowing Marcus exists and is really helps greatly.

There is also a benefit side to building accessible information, it is future ready information. The information that is fully accessible is ready to use with no (or is rare cases slight) modification on mobile devices. This is the wonderful thing about building accessible information. One of the first steps is building information that validates to a standard. The next thing is separating style from the content by using style sheets, which make it easy to over ride any style that is problematic or to easily allow for scalable styles. This two helps create information that is future compatible. Accessible information can also be easily reused in from its presentation as it is built to standards that ease.

Accessible information is also structured properly. Structuring information properly is far more than how it looks, it is how is marked up. A header on a Web page has an "h1, h2, etc" tag around it, which eases the ability to build a table of contents or use that header as a contextual aid to summarize the information below it (that is if headers are tagged properly and the content in the header is properly descriptive). Structuring the information helps the information be reusable out of the Web page as that is what HTML does, provides structure elements in the markup tags. If information to be reused has needs (including structure and context that is easily discernible), which validating HTML provides as a basic foundation -- of course there is much that can be improved upon the basic HTML markup, but it addresses the information needs. Building accessible information applications (Web sites included) keeps money from being wasted in the future and it does not require buying a third-party application, which are often cause more problems than they solve where accessibility is concerned (this will not always be the case).

As Joe Clark's book, Building Accessible Websites points out accessible does not mean ugly or plain. Joe walks the reader through how to make beautiful sites that are also wonderfully to folks like Marcus (side note: Mark Pilgrim edited Joe's book). Another excellent book on accessibility, and is my favorite book on accessibility, as it works very well for Web application developers (and I agree with its approach to information in complex tables more than Joe's approach) is Accessible Web Sites. These are two great resources for leaning how to do things properly. I will be working on longer reviews of each in the near future.

Model of Attraction Outline - Version 1

The Model of Attraction ouline version 1 is now posted. The outline has been structured to set up a structure for filling in the blanks and providing a better strucutre for understanding the MoA. Outlines are my foundations for writing more serious works. Outlines help me find holes and provide a structure to rest content upon. This verion is largely attributed a train ride to Philly that allowed me time and untethered space to think, order, and write.

Please comment if you are so inclined. Find holes are areas that do not seem fully fleshed out enough. Thank you in advance.

Zeldman uncovers the mess of Aventis site

Zeldman hits the ugly nail on the head discussing Aventis. I believe that anybody who believes there is not an poor information design or site that is screaming for an Informaiton Architect has not been to Aventis, there are so many problems that begin with and end with the drop down menus that overlap. Zeldmen points out, as he always does, the need to understand what the HTML markup and code do in a browser. Not only understanding the browser but the user. The Aventis site fails in many areas, but the tucking product information under "About Aventis" makes it very difficult to find.

Zeldman has also been sharing his wonderful redevelopment pains and discoveries. I may tackle the last couple layout bugs I have left if he cracks the right nut.

GUI vs Hand Coding for HTML

Dori posts a matrix explaining how well GUI Web mark-up tools perform and it is not suprising that most do poorly. Dreamweaver MX does admirably, but the JavaScript is not up to par. The best coding is still hand coding. If you do not know how to hand code your job will never be done, it will not be right either. The tools have come a long way, but they are nto there yet.

Redesign explained

You most likely have noticed. There has been a redesign here. This new site is nearly all XHTML and using CSS box model. Going through this process introduces one to all the bug that browsers have that you need to work around. I found that IE 5.5 and up on the PC is horribly buggy and does not follow standard box model too well. Netscape 7 on the PC is the best browser. On Mac OS X the best browser has been Navigator/Chimera and IE 5.2 (through this Chimera became my favorite browser on most any platform).

You dare ask why the redesign? Well it was well past time. The last design had been around for a year or so and the CSS was giving me fits. I really wanted cleaner markup and I wanted to have a font size that scales. I believe that the font scales on all web standards compliant browsers and platforms. It should even scale on the PC's IE 5.5 and 6 browser (this has had broken functionality since day one, if you need a browser to scale font sizes properly get a real browser, one that is Mozilla based will do just fine). I am trying to remove the thin white line under the logo graphic and above the menu bar, it is showing up in IE on the PC and on versions of Mozilla on the Mac (Please contact if you have a solution).

I also wanted a better layout that would permit a cleaner layout. I moved the global navigation to the top bar and it uses and unordered list and CSS to put it in line and give it the roll-over (I stole part of the code from Scott and tweaked it). I also moved the local navigation to the left, which has been a joy as it is near the scroll bar and has made life a little easier. The right navigation may also be a place for other goodies. The right navigation has also helped me on the links page as there are a ton of links and I wanted a sub-navigations (yes, the links page is going to be getting an over haul in the near future with some needed integration with other elements in the site). The redesign also give the opportunity to introduce some small photos or images on the pages and not have other colors overwhelm them.

The box model drove me crazy, but I created some cheats I hope to share in the near future, once I get some minor tweaks around here done. The redesign was done solely on the TiBook and using a combination of the Macromedia MX Studio (Dreamweaver MX is a decent text editor, but I could not find a way to have it show a passable rendering of the pages in its own browser) and BBEdit. I started the process with outlines in Omni Outliner (a tool that rocks and is unparralled) as well as Omni Graffle to put together some wireframes to help me sort out the layout and functionality. This set of tools has been one of the best combinations I have used, I wish I could use this combo at work. I really am missing Adobe Photoshop, which may become my next software purchase, as it is a great tool that saves time.

Please, please write wit questions or bugs found. Thank you. I did this for me, but I hope you enjoy it.

Conferenece envy

Matt has been chronicling his experience at Doors of Perception held in Amsterdam. Matt offers his notes from: day 1, day 2 morning, day 2 afternoon, day 3, and day 3 final notes. This and ASIS&T were two conferences I really wanted to attend this Fall, but the move and house have eaten my money. I am saving myself for the Spring for SXSW, ASIS&T IA Summit, and possiblly DUX along with the possibility of Good Experience Live.

I did pop up to Philly to meet-up with some AIfIA Board members, other leadership counsel folks, and members. It was a great treat. I really wished I was staying for the ASIS&T conference (next year) and spending more time with these folks.

The train up was good as I got a lot of writing done (remember to take headphones if you are not on a "quiet" car, which do not run on weekends). The seat I was in on the way up did not have a functioning electrical socket, so I was pulling on batteries (not to worry I have a TiBook with 4 to 5 hours of battery). I was able to edit, read, write, and work on some graphics last evening and on the train back today. What a wonderful way to travel, particularly to Philly.

Buttons have info cramming illness

This week I have dealt with folks that have created design elements without giving thought to how they or their users would use these elements. The oddity in the three cases was creating a design that used image buttons with text. The size of the button's was fixed with the design. In all three cases one or more of the buttons tried to cram way too much text on to the tiny space. The buttons were unreadable.

Graphical buttons demand forethought. They should only contain one or two short words. Graphical buttons should be clear and easy to read. If the words on buttons are more than one or two words you and the user may be better off using text links. A good button would be "Animals 2001" not "Emprical Study of Animals in Tropical and Non-Tropical Environments - 2001". To convey the full text of the information you may be much better off using headers to structure the information, in this case using "Animal Reports" and "Emprical Study of Tropical and Non-Tropical Environments" then list the years offered in buttons or in a list. This provides much better scanning and can help break the information in to more scanable chunks.

CSS to work around IE mistakes

I really could have used these IE tips for CSS the last week or two I have been learning the hard way (creating CSS and trying in IE then wondering what I had done wrong - I was not the one at fault).

Go back

I had an early preview of a site this past week so to add comments. It is odd to me that sites are still being built with the frame of reference that the user will come through the "font door". If you read your log files the users come in at every opening. It is about even odds that a new user to the site will come there from a search engine, an external link, or from another pointer (e-mail or article). The frame of reference should always try to provide some orientation to the user, such as breadcrumbs or some other link out to related or parent information.

The item that I found a little jarring was a "Go back to the previous page" and it was not a javascript, but a link to what the developer thought was a next level up page. Pure linear navigation is a practice that is no longer a practice, if it ever was. Somebody last night at the DC-IA book club asked whether we navigated or searched, as always it seems to depend. With sites like Amazon we mostly searched, while some smaller sites we would click around. It seemed the greater volume of information lead to a greater instance of searching.

We did not talk about this for long, but it has been resonating all day. One of the things that Amazon does extremely well is end-search navigation. Most folks seem to search Amazon to find a particular item, but then Amazon's navigation and related offerings that could attract the user to the item, which they were searching for or to a similar item. The search result pages offer links to narrow the results or to ensure the user is looking for the musician Paul Young or author Paul Young. A user arriving at an Amazon book page would have all the options and information they needed to find related information and where they are in the Amazon site.

Shooting crickets in the dark

My favorite analogy used this week was "it is like shooting crickets in the dark". Used to describe a plethora of things that are not documented. A sudden change in direction that is accompanied with no certifiable requirements. These situations have cropped up in the past where a photo was used along with stories in a CMS and now the client wants to please a new boss by CIO has not arrived so there is no understaning taste or likes. Many quick options are put together each getting a no and with no more direction than that. This my friends is shooting crickets in the dark, which is akin to "I know it when I see it" school of design management. The cricket keeps chirping you keep shooting.

Wahoo, Books

What a wonderful week in books. I just received Christina Wodtke's Information Architecture: Blueprints for the Web today and it looks fantastic. I have only leafed through it briefly, but it seems to cover the basis wonderfully and provide excellent guidence on how to get through IA successfully.

Saturday I picked up Jesse James Garrett's The Elements of User Experience: User-Centered Design for the Web and have read it in little snippets and have made it through a very good chunk in no time. Much of what I have learned over time, from experience, or from great thinkers like Jesse, which leads to successful Web sites or information applications is in this book. Knowing the steps and phases of approaching development will help you greatly. Jesse has it down for all to read and it is wonderfully written.

I am very glad to not only know these to folks, but that they are sharing what they have learn for others to gain from their experiences. This sharing is what the Web was build upon and will keep the Web improving into its next generations and incarnations. Congratulations guys!

Zeldman redoes and keeps teaching

Zeldman is redesigning and explaining the whole thing as he moves his site into the present. Many of us learned for Zeldman's A List Apart in the early days of Web development and he keeps up this wonderful spirit today. Openly sharing and the desire to learn are what the Web was built upon and is what keeps it great.

Wired goes X(HTML)

While trying to catch up on friends and knowledge I ran across Zeldman's discussion of Hot Wired moving fully to valid XHTML and CSS, which is a bold and wonderful move. Zeldman also points to Wired's defense of their move to the new up-to-date site. These are good reads and help us understand why good markup is important and to understand what goes into making these decisions and the work to make it come to life.

Do not strand them

Stranding users is not a good thing to do, I think we can all agree with that premise. Not remembering that a user of your site can drop in to the site from anywhere to anywhere can be fatal. Take the U.S. Treasury Department, which recently did an expansive redesign of their site. They did a good job at bringing together much of their domain under one consistent branding roof. They have a few large navigation problems, they tend to pop-up a new window at the drop of a hat. Worse is that many of their press releases are built to pop-up, but have absolutely no navigation, not even to the Treasury homepage. I was suckered by this in July while searching for information from Google I was dropped in to a press release with nearly the exact information I was seeking. Big problem, all the Treasury Press Releases (sample of poor Treasury Web design) have no related links and no navigation to get you to the sourse of the page. When the Treasury gets around to fixing the stranded user problems they created they should fix the giant top banner/navigation bar that keeps the information their users are coming to the site for pushed down the page.

I will give the Treasury large kudos for grasping control of the splintered branding that is rampant in the large organizations. This consistantcy provides a couple of advantages by providing ease common design that give welcome consistancy and it makes it easier to go back and correct the navigation and usability errors that were left behind.