whhgreens.ca is the basic-information website for the local branch of the Green Party in the Wellington-Halton Hills riding (in Ontario, Canada). It runs on Drupal 5x, and it uses 100% out-of-the-box modules contributed by the wonderful people on the drupal.org site, so no coding skills were required to put it together (beyond a little CSS :)
Features
The site is a pretty standard general community group-type site--an easy-to-post-to venue for doling out information to involved and curious parties. Its needs/features include:
- giving general info about the group
- a means for contacting the group without getting a ton of spam
- posting blog entries and news as needed by multiple users
- listing events
- looking somewhat interesting (not 100% text…)
(Also, during federal elections, it highlights policy information tailored to the local area and has links to outside press coverage, but it doesn't use any extra modules to do this).
Highlights of the Modules Used
Views-setting up menu items/pages for news or blogs or articles, so that Drupal would automatically suck new posts of the right category/content type onto the pages without anyone having to do anything
Calendar (& Date/DateAPI)-posting events
Taxonomy Breadcrumb-listing the trail of where the present page is relative to its parent pages (and thus hopefully helping orient users to where they are in the site)
Imagecache (& CCK/Imagefield/ImageAPI)-including images in the site in a way that the display sizes could be pre-set; a thumbnail of an image could be put on the front page with a title/link, leading to a bigger version of the same image on the page of information the link led to. This was also great for setting image sizes to make sure the images uploaded with posts didn't inadvertently end up being too big to look decent on the screen
XML Sitemap & Nodewords & Path[optional core module]-building a site map, allowing for metatags, and making descriptive url names, in case they helped make the site more search-engine-friendly
Panels-laying out the front page (shows lots of pictures and other useful blocks easily without having to fiddle around much with CSS)
Contact [optional core module]-providing the site contact form
General Site Appearance
The site was made with a custom Zen subtheme. The right nav-bar was a custom block, and the front page was laid out with panels.
Usability
As a wide range of computer users might happen across the site (at least during election season), there were a few usability considerations when putting the site's appearance together:
- It's a partially rural area, so some users might still be on dial-up--tried to make the pictures smaller file sizes, and used alt tags, and avoided general flashy wizardry on the site in case that slowed things down
- Not all users will have hawk-like vision--Drupal was pretty fabulous for this, as the Zen-based subtheme automatically lets the user resize the text on their monitor without any extra work on the design end (the design avoided button-shapes around the primary menu items, for the sake of not having to deal with making buttons that slid to embrace changing text sizes)
- Possibility that some users might be less comfortable around the internet than others--used taxonomy breadcrumbs to help users orient themselves within the site (less relevant during election-off-season since there is far less content & depth to the site, but it is nice to have with the calendar module)
CSS-free rounded corners (sort of)
The custom panel buttons/graphics on the home page as well as the right-sidebar navigation buttons were both made to have rounded corners by using a series of individual graphics, rather than with css (to avoid having to plan for cross-browser mayhem). Each panel picture/navigation button was drawn with rounded corners using GIMP, then uploaded as a picture into Drupal via a series of posts which were categorized or made as a content type that was not already being pulled into any views the site was set up to use. Once the picture-content was in Drupal, the reference to each picture was then put into the html for the custom sidebar block or the custom panels (for example, the "why join?" custom panel for the homepage would be something like: <a href="/linktojoinpage"> <img src="...wherever.png" alt="why join? button" /> </a> ).
