Using Mockingbird, a recently launched Cappuccino-based wireframing tool, I was able to whip up some quick UI concepts I’ve been thinking of for the next iteration of Edit Flow. Though obviously not as fast as a hand-drawn sketch, it’s far more convenient when you’re working with other people since you don’t have to get cameras and/or scanners involved.
Mockingbird has a fairly intuitive interface, and most functionality you’d expect from a wireframing/diagramming tool. Best part: no Flash! Check out the result below. It’ll be updated as I make changes to the diagram.
This is an assignment done recently for class (ENGL 408C: The Rhetoric of Digital Design). The goal was to “Discuss the design of an online newspaper … Combine the terminology of newspaper design with the observations of social semiotics.” I chose theglobeandmail.com mostly because they recently did a redesign ‚Äî it got mixed reviews (exhibit A, exhibit B, exhibit C, Google the rest yourself!) and from an aesthetic standpoint, I’m not the biggest fan either ‚Äî which gave me quite a bit to talk about.
I’ll warn you that it’s not the best and/or most invigorating piece of analysis in the world; many of my points are either rushed and/or exaggerated and/or unnecessary. It’s not very thorough either; I only touch on various aspects of the site and ignores lots. Plus, it’s an analysis from a social semiotic standpoint which is not the most exciting thing in the world. Simply put, you should probably just pass on reading this. But, I figured I’d throw it on here anyway since some of the points I make are valid and/or interesting.
Update (2009-12-21): So, the original technique that I had posted is a bit hacky and kinda gets annoying when you have lots of categories and category templates. There’s a better approach that can add to your functions.php file to make everything work magically, which was inspired by Justin Tadlock‘s comment on a post by Elliot Jay Stocks. Code below:
Add to your theme’s functions.php file and edit as necessary. For example, to redirect to categories with IDs 1 & 5 to a template called gallery.php, change the if statement to:
Note: the stuff below is old, crappy, “legacy” code. Still here for posterity…
WordPress has an amazing theming system. It’s not perfect, but if you know the right things you can bend it to your will and do a lot of cool things. One great thing about it is the template hierarchy; WordPress basically allows you to create custom templates for categories, tags, authors, etc.
For example, if I add category.php to my theme, all category pages will now be styled according the structure within the category.php file. Now, let’s say I have a category called “Photos” that I wanted to look a little different from the rest. (Let’s assume the category ID for “Photos” is 6). All I have to do is add category-6.php to my theme, modify it to whatever, and the “Photos” category page will switch to this new template. Cool? Definitely.
With a system like this, you could technically customize your site to the point where the every category, author, tag, etc. page has a unique look and feel. But, that’s quite a lot of work and in most cases unnecessary. There may be cases though, where you want a small subset of categories to have a unique look, and you want these pages to share this look. Unfortunately WordPress doesn’t allow different pages to share templates. (Intuitively, I would think that something like creating a file called category-6,7,8.php [or similar] would apply this template to categories 6, 7, and 8). You could technically set up separate files (category-6.php / category-7.php / category8.php) and just copy and paste the code across all of them, but that’s a maintenance nightmare. A single change will have to be copied over multiple times, and that’s just annoying.
There are a few ways around this. One of easy ways is to use Idealion’s Category Enhancements plugin. Alternatively, if you want a more theme-level solution, follow the steps below. This is something I discovered while building out the image gallery pages for The Boar (links of what I came up with are at the bottom).
1. In your theme folder, create the category files for the categories you want to apply the custom template to.
Let’s assume we want to apply it to the categories “Portrait Photography” (ID: 5) and “Nature Photography” (ID: 12).
In this case we’d create category-5.php and category-12.php
2. In the category template files (category-5.php & category-12.php), add the following:
<?php require_once('common_template.php'); ?>
3. Create a generic category template: common_template.php
4. Then in the common_template.php, add the following:
<?php get_header(); ?>
<?php echo 'Hello World!'; ?>
<!-- The rest of your custom template goes here -->
<?php get_footer(); ?>
5. Now, if you navigate to http://your-site.com/?cat=5 and http://your-site.com/?cat=12, you’ll notice that their look will mirror what you included in common_template.php
I should note that this approach isn’t limited to category templates; you can use this with author and tags templates as well. Technically, with this approach you could combine multiple categories and tags, as well (though if you do, be wary of category- and tag-specific functions and make use of conditional tags).
You can see an example of this in action at the links below: