Redesign of Hunter Island Press
Giving back to the community is an important part of what I’m about as a designer / developer so this week I’ve turned my eye to a redesign of the Hobart not-for-profit organisation Hunter Island Press Inc. The work was done for free simply as a gift back to the Tasmanian arts community and because their cause is a little under the radar. Also, having been responsible for the previous iterations of the site (which I admit were less than my best and often rushed) there is a certain amount of moral responsibility aligned with fixing one’s old templates and code.
Hunter Island Press Inc
Who are Hunter Island Press? They are a not-for-profit with the primary objective to establish and operate a professional public access print studio in Hobart. They’ve now got a studio over on the eastern shore at Wirksworth House in Bellerive and are trying to accumulate some presses and push forward with the next phase of their plan - to run more workshops and expand the studio’s capabilities. I should mention my partner Linden is the Hunter Island Press webmistress, too.
The Rationale that Begged Improvement
The rationale behind the redesign was simple enough - move the blog to its own subsection, create a reasonably quirky (for artists) and yet moderatly corporate looking homepage and revisit the client generated page content to see if things could not be improved on. Some sections obviously had to go either because they were not being supported by new content or simply because they fail to make sense in their own right as valid expressions of the underlying information architecture.
Semantic XHTML 1.0 Strict Templates
The first task was to revisit the original templates and pull them to pieces. The new templates no longer have a pile of unsemantic classnames and ids that mean so little to so few. The site templates also have moved from XHTML 1.0 Transitional to XHTML 1.0 Strict (which they already were achieving for the most part) and some thought was put into the underlying information architecture of the content. And yes the XHTML is delivered with the text/html mime type because the real world is the real world, say no more.
Quality Assurance of Code and Content
In some cases I had to rewrite pages and regain a consistency of the content so that a class was used site-wide, for example, or all definition lists used for interviews were consistently marked up. For some reason WordPress has this pain in the ass issue that’s happened for the last year where occasionally pages turn up with unencoded symbols instead of quotation marks, apostrophes or blank spaces. There had also been a tendency to use empty paragraphs etcetera to manipulate the display of content rather than using the stylesheets and all the instances outside original blog posts (now called news) had to be scoured and revalidated accordingly. Also, the need to maintain accessibility and usability is crucial to the redesign.
Vanilla Stylesheets Designed Upward for Redundancy
The third task was to start the design from a flat vanilla stylesheet. There are two ways you can go with stylesheets - write them for efficiency and be tricky and smart or write them for redundancy so they are insanely easy to pass onto the next person. I went for the redundancy theory so while you may notice the stylesheets are consistently well laid out they are also somewhat larger than they could have been. But, honestly, my concern was maintainability and forward motion for these guys and not showing my brilliant understanding of the finer points of the cascade… even if that were a true premise.
Accessibility and Usability
The site has a max-width of 1000px except for Internet Explorer 6 which will get a fixed width 1000px layout. It should handle scaling down to a handheld or mobile screen quite well with min-widths set at 300px. All the usual suspects are covered such as alternate text on images, ems for font sizes so text scales in Internet Explorer, labels on forms (which I used br elements for instead of lists or paragraphs by the way), visited links will highlight on pages and within the blog (no the news) section. The list goes on. I do recognise a few usability issues particularly with the dashed underline and lists of pages such as the site map but I need to rethink those. The last iteration was both reasonably accessible and usable as well so much of this is no credit to this design in itself. But it is an important factor in the underlying rationale to redesign the site that these functions should be progressively improved each time.
Still Moving Forward with Content Generation
While the site redesign has launched, it is getting tweaks in the templates and stylesheets and we’re also reworking the content of pages. If you do notice any anomolies or problems in various browsers please contact me so I can jump on them early. That would be great. Below is a screenshot of the current version 3 iteration of Hunter Island Press Incorporated which, it should be added, was achieved on a budget of AUD$0.
As a follow up I’ll be printing out copies of the Hunter Island Press Site Style Guide so that everyone posting is aware of the available classes. Most behaviours should be achievable by default but users need to understand the uses and limitations of the system, too. Such as the maximum size an image can be before breaking the layout. If there had been a budget I would have liked to document more of the site structure but I’m just all out of holidays now.
Update: 17 February, 2008
My apologies over the last 24 hours for the inconsistency on Hunter Island Press as I was madly chasing an intermittent rendering error in Firefox caused by the stylesheets. This has been fixed and related to the use of display: table on some containers to contain their floats. I did also have trouble with Opera crashing on clicking links at one point but believe that intermittent issue is also resolved. The site should remain consistent from this point forward.
Update: 19 February, 2008
Tested on: Firefox 2.0.0.12, Opera 9.24, Safari 3.0.4, IE6
Operating System Testing: Windows XP Home Edition
Tested screen width dimensions for consistency, readability and usability: 1024, 800, 300
NOTE: Tested but failing drastically on the homepage in: IE7 on Windows Vista Now working fine in IE7 on Vista after removing an unneeded overflow: auto; on the #alley2 div. There are now no known critical issues with the site.
February 16th, 2008 at 7:18 pm
There’s currently an intermittent issue in Firefox 2.0.0.12 which makes the footer on Hunter Island Press break into three sections - two vertically floated to the left and one floated right… so tomorrow I’ll have to relook at the templates and CSS files.
Its par for the course when you lose time to IE I guess but when its Firefox its a bit more of a hassle. Every other browser seems to have no issues. Plus - and a big PLUS - intermittent errors are a pain in the timeclock to track down.
So if anyone can pinpoint the CSS rule that needs to be down in that #richfooter or its contents please drop a line. I’ll go back to working on it in localhost until its resolved.
February 17th, 2008 at 9:45 am
[...] website that is strong in semantic code and addresses issues of usability and accessibility. He has written a blog post about it which makes an interesting [...]
February 17th, 2008 at 9:51 am
It really looks fabulous - thanks very much for such a huge effort! As a HIP member I can see that the website will be more efficient and easier to navigate. Must be my shout for a coffee then…
February 17th, 2008 at 12:13 pm
It looks good mate - solid effort for HiP.
Is it WP-powered by the way?
Oh, it’s been quiet on my site lately - but that’s just because I’m getting cozy with Expression-Engine at the moment (I’m using Dreamhost, and that was causing a lot of php bugs at first…but I think I’ve got it rolling now, and will be back to testing my 4.0 design quite soon).
February 17th, 2008 at 6:51 pm
Linden I’ve taken all of your whiskey marmalade from the Harrod’s hamper… good enough.
Matt yes its wordpress. I wondered why you’d been a bit quiet. I thought you just had too many feeds to keep up with nowdays.
February 20th, 2008 at 3:12 pm
[...] few days ago I posted about the how and why of the Hunter Island Press Inc redesign. Needless to say the site had just launched and so missed some features and still had unfound bugs [...]