For the record: I’m not a die-hard fan of Visio, but rather I believe in choosing The Right Tool for The Job. In this case, Visio has been most effective, though I do use other tools when Visio is not appropriate.

Quick Links:

1. Tip No. 1: Backgrounds & Guides
2. Tip No. 2: Use Layers to Group Common Elements
3. Tip No. 3: Use “Shape Data” for Common Shapes

Tip No. 1: Backgrounds & Guides

Guides provide a great way to implement consistent columns and rows for a page. This is useful when planning a series of pages derived from a common layout.

Problem:

In my wireframe document, I have three different types of background pages for common page configurations. Each page has a defined “working area” where I layout my shapes and other elements. In the past, I have typically resorted to adding guides on each page, and most of these guides are aligned to the “working area” previously described.

The problem is that I’m having to add new guides to each page I create. I’ve tried a variety of techniques to manage my guides, and the one I had settled on previously (and still use to some degree) is copy/pasting my guides (and other shapes) using a macro called:

CopyNoTranslate()

I found the macro on Welie.com, and suffice to say this did improve my efficiency, but only to a degree.

Note: Wellie.com is a great source for useful macros for Visio beyond just the one function.

Solution:

A better solution was a heck of a lot easier than I realized: add the guides to your background pages.

Using guides in the background pages allows me to ensure consistency in terms of shape dimensions (vertically and horizontally), by allowing me to “snap” a shape to align to a guide. This approach has the added bonus of minimizing the number of additional guides I need top drop onto a page. I’ve only discovered this one feature recently, and it’s really helped to minimize the amount of repetitive work I had to do in preparing the pages.

Tip No. 2: Use Layers to Group Common Elements

This one takes a little bit of time to get in the habit of doing, and at some point, I’ll get around to writing a macro to automate it.

Problem:

There are times where I have a number of shapes or a collection of shapes that I want to show or hide when I output the document for a client review (*.PDF). In the past, I have resorted to commandeering Acrobat’s layer’s feature, but the learning curb for clients was a little too high for me to expect to use that as a long-term solution.

Solution:

What I ended up doing was using Visio’s “Layers” feature to group common elements together by assigning selected shapes to a layer. You can see a quick demo/tutorial on how to use Visio’s Layers here.

This approach allowed me to toggle shapes such as annotations or overlays (e.g. “Modal Windows”) on certain pages, and hide them altogether for others.

This approach does come with a small caveat: if you want to show all of the hidden layers in your document, e.g. annotations, you’ll need to either produce one document with all of the elements showing, or two documents—one with all the elements showing, and the second without.

Tip No. 3:  Use “Shape Data” for Common Shapes

In an earlier article, I provided a detailed tutorial on how to leverage the Shape Data features for adding prompts with input fields (with some intelligent behaviour). This one feature has allowed me to improve how I manage and work with text and information I add to my wireframes, etc.

Problem:

You might have a pretty concise library of common elements that you use on a regular basis, and a few of them require that you update a number of fields. A good example of this is Nick Finck’s Sitemap Stencils which are still in use by designers today.  If you’re using the stencils, you’ll likely have discovered that you need to click a number of times to drill down into the desired field before you can enter any text (the page ID for example).

Solution:

Use Visio’s Shape Data features to help automate the task of data entry and editing for common shapes. Apply this feature sparingly as it is easy to go over-board with the technique.

Shape Data can improve the task of updating and manage these shapes by automating the data-entry task. I won’t go into great detail here, but if you want more information about how to accomplish this, take a read through my tutorial: Creating a Reusable Shape with Visio Shape Data Support.

What’s Next:

There are a number of great sources for more tips on using Visio’s lesser used features (and some of it’s more advanced features); one such source is VisGuy.com—from whom I have learned a great deal about Visio.

If you have any tips of your own, please feel free to share them here.

Note: this should really be a screen cast – next time

Custom IA Shapes with a Dialog/Prompt

One of the primary building blocks of any information architecture is the shape that represents a page concept. There are some great stencils out there for Visio that other designers have put together, but you’ll find that maintaining these shapes (when on page) can be laborious given how Visio constructs its geometry.

One of the time savers that can be leveraged is the use of “Shape Data” to add custom information to a shape, and “Shape Graphics” to display the custom information. One other feature that can be leveraged is the customization of “Shape Sheet” information to provide dialog support.

What is a Data Graphic?

Microsoft Office Visio 2007 Professional offers new ways for businesses to visualize information. New data connectivity, data linking, and data refresh features enable users to more easily connect to external data and associate it with specific shapes in a drawing, and to more easily refresh the data manually or automatically. The Data Graphics feature presents linked data and other shape information graphically in a diagram. Together, these capabilities make it faster and easier to communicate important information for making decisions and taking actions.Source: MSDN – Office Developer Center

In short: Data Graphics provide visualization capabilities to represent data in a meaningful way.

You can download the example for this tutorial here.

Getting Started:

Software: I’m working with a copy of Visio 2007, and so some of the concepts might be labelled differently in older versions of the software. Consult your product documentation if need help finding the features.

Step 1: Preparing the shape

You can approach this step in one of two ways: start from scratch or attempt to modify an existing shape (as long as its not leveraging Data Graphics already).

For the purpose of this tutorial, we’ll be starting from scratch, but that doesn’t mean that you can’t skip this step and apply the later principles to your existing shapes.

Moving on…

Creating the shape

You’re going to need a shape. The most basic shape you may want to use is a rectangle to represent a page (the orientation is up to you). Start off by drawing a simple rectangle using Visio’s drawing tools. I have my page units set to inches, so a simple 1”x .7” rectangle is what I’ll make.

You can apply some basic effects to the shape such as rounded corners. For this one, I’ll use a .5pt corner radius.

Fig. 1 – The basic shape.

Now, the thing about Visio shapes is that you can automatically input text by typing while the the object is selected. This is the default behaviour for nearly all Visio stencils that I have come across.

Fig. 2 – Inputting text.

For the most part this is a good thing, but for what we want to create, it’s important we avoid this behavior. The layout of the labels is important for legibility, urging some clever designers to create complex shapes that will group a number of text fields arranged to display bits of info for the shape. This is where things tend to become unmanageable.

Moving on…

Adding Glue Points

You may not be familiar with Visio “Glue Points”, but you’re certainly familiar with how they work. “Glue Points” are those tiny dots that look like shape handles on a given shape. These dots are anchor points for objects to connect to each other.

You can add glue points to your shape by using the Connection Point tool located on your toolbar here:

Fig. 3 – The “Connection Point Tool”.

Note: Ctrl+Click anywhere within the shape to add a new glue point.

Once you’ve done that, your shape is pretty much ready to go.

Fig. 4 – The result after adding glue points.

Step 2: Adding Shape Data

As stated before, Shape Data is little more than additional information that can be dynamically added to a given shape. In this case we want to add some basic information to our shape that we would normally enter by hand.

Here are the fields:

1. ID – the numeric or text-based identifier for the shape
2. Label – the label that you want to display, e.g. “home”, “about”, “contact”, etc.
3. Type – This is something we’ll save for another tutorial, add it for now

You can access the Shape Data dialog by first selecting the shape you created in Step 1, and going to your menu under Data>Shape Data. The alternate way of accessing the interface is by right-clicking to show the context menu (on the shape) and navigating to Data>Shape Data.

You’ll be presented with a prompt if there is no Shape Data available (there shouldn’t be)

Fig. 1 – The Shape Data prompt.

Click “yes” to bring up the Shape Data interface.

Fig. 2 – The Shape Data dialog.

Now that you have the interface up, start by entering the fields (mentioned above). What you’ll notice that there are two similar fields: “Label” and “Name”. What’s the difference? The “Label” is what will be displayed on the shape (and referenced in a later step), and the “Name” is what you’ll need to use if you’re programming with Visio.

Fig. 3 – The result after adding custom properties.

This is how you can accomplish this:

1. Prefix each of the above fields with “str_”, e.g “str_id” or for “ID” use “UID”
2. Ensure that each of these items has a “Type” set to string. You can customize the format as you see fit by clicking on the button beside “Format”
3. Provide a default value in the “Value” field, e.g. “[Page Name]”
4. Provide a brief message in the “Prompt” field – remember, you’re the one that’ll be prompted, so I suggest that you not annoy yourself needlessly
5. The “Sort Key” will accept either a, b, c or 1, 2, 3 – the idea being that you set the properties in the order you’d prefer them to appear
6. Lastly, check the “Ask on drop” checkbox – this is what will force a prompt to be displayed when you add the shape to your sheet, duplicate, or when you copy/paste it
7. Hit “Okay” when you’re done

That’s it for the adding custom Shape Data to your shape. Now the trickery comes in when we’re attempting to display the data on our shape. Enter Data Graphics.

Step 3: Applying Data Graphics to a Shape

Ok. This is the point where things get a little interesting as later steps will require a little manual labour to format the data and lay it out a little better that what Visio automatically creates for you.

This is how you can accomplish this:

1. Select your shape, and go to your main menu and select Data>Display Data on Shapes”. Alternately you can right-click to bring up the context menu and select Data>Edit Data Graphic…

2. And new panel should have appeared on the right hand side of your Visio working area (default). This is the Data Graphics panel where you’ll create the labels to be displayed on your shape

3. Select “New Data Graphic…” under “Create a new data graphic”

4. A new dialog window will appear

Fig. 1 – the New Data Graphic dialog.

Now that you have the dialog up, you’ll notice that there’s nothing there. That’s what you want. Follow the instructions to “Click ‘new item’ to display data on shapes”. You’ll find that drop down menu on the top left of the dialog window.

When you display the menu, you’ll have several options that are available to you. For the purpose of what we’re creating, you’ll only want to select the first item. The rest, you can experiment with on your own.

The item will invoke a new prompt (Microsoft is obsessed with this).

This is how you can accomplish this:

1. There are several fields that are available to you, the one you’ll start with first is the “Data field”
2. If you recall earlier when you were setting the key/value pairs in the Shape Data dialog, you should notice the same items available to you when you click on the drop down menu. Select “ID”
3. Turn your attention to the “Callout” field – this is where you can specify a style for the label. I suggest that you stick with a Text callout due to the nature of what we’re building. Experiment with the other types when you have a chance
4. Next, let’s look at the “Callout position”. You’ll notice that the two drop downs: “horizontal”, and “vertical” fields are greyed out. Uncheck “Use default position”
5. You should now have access to the two fields. Set the horizontal position to “center” and leave the vertical position where it is

This next part can be a bit confusing the first time around, but follow these steps:

1. Leave the “Show Value” property as “Yes”
2. Leave the “Value Format” property as blank, it will automatically use the format you set earlier in the Shape Data dialog
3. Leave the “Label Position” property with its default
4. Delete the “[Default]” value from the “Label” property
5. Set the “Border Property” value to “None”
6. Leave both “Fill Type” and “Callout Offset” at “None”
7. Click “OK” to set your changes

You should be back to the “New Data Graphic” dialog. Now that you’ve done the first one, rinse and repeat for the other fields.

Note: When you come to the “Type” field, set the “Show Value” property as “No”.

Click the “OK” button to apply the Data Graphic to your shape.

Fig. 2 – The result after the Data Graphic fields have been set.

Step 4: Formatting Your New Labels

We now have an opportunity to adjust the layout of our new Data Graphic’s labels. If you’ve followed the steps above, you’ll have accomplished something that approximates this:

Fig. 3 – The result after formatting the fields.

If you recall the alignment we left in Step 3, you’ll see that reflected in the orientation of the labels. It’s not pretty, but if you’re partial to that, feel free to keep the alignment and move on to the last step. If however, you are like me, you’ll want to make some minor tweaks.

Click on the object until you’re able to select the text field containing one of the fields. Once you’ve selected the field, you can format it as you wish (color, fonts, font size, etc.). It’s likely that you’ll want to adjust the alignment at the very least (centered).

Rinse and repeat for the the “Label” field.

You should now have a Visio shape that you can quickly set the properties for when you add it to your pages and diagrams.

Note: There is one caveat though, and you’ll have to balance this with what you’re getting in return: you may find that having constant prompts will annoy you especially if you need to work quickly or you’re not the type of user to have your pinkie you the “esc” key. You can avoid this by not enabling an automatic prompt, I’ll leave that to you to decide.

Step 5: Adjusting the Behaviour of the Shape

This last (and final) step is the most crucial aspect of making a truly (re)usable Visio shape. It’s important because it will allow the author or designer to quickly make modifications to the Shape Data without having to manually click through the shape’s various objects.

We’re going to tackle this in two ways:

1. Enable a custom double-click behaviour to the shape that will display the shape’s Shape Data dialog.
2. Restrict the default editing and formatting features of shape to preserve the Data Graphics we’ve attached to the shape.

Restricting Editing and Formatting

All Visio shapes share common properties that you can customize in order to get the behaviour you want from it. If you recall from earlier in the article where we were first creating the shape, it was easy to simply double-click and start entering text. In this case, what we want to do is restrict some of the normal behaviour of the shape, and not allow the author to input text directly onto the shape. We also want to restrict the author from modifying the internal layout of the shape and the Data Graphics.

Follow these quick steps to accomplish the desired behaviour:

1. Right-click on your shape to bring up the context menu, and select Format>Behaviour
2. The “Behaviour” tab will contain all the common behaviour properties of the shape; turn your attention to the “Group Behaviour” options on the bottom right portion of the dialog.
3. Deselect “Edit text of group”
4. Under the “Selection” property, change the setting to “Group Only” – this will restrict the selection of nested shapes and make the overall shape appear as if it is the only selectable shape.
5. Click “OK”

Fig. 1 – Accessing the “Behaviour” dialog through the context menu.

Fig. 2 – The “Behaviour” dialog after properties have been set.

Enabling Custom Double-click Behaviour

If you took some time in the to explore the behaviour dialog, you’ll have noticed the “Double-click” tab. That particular set of properties allows you to attach some typical behaviours to the shape, but you’ll also notice that the “Custom” option is greyed out. We want to be able to set this, but Visio will not allow us to do it through the dialog.

Note: It took me about 3 days to figure this out, not having really delved too deeply into Visio’s Shape Sheet capabilities, so hopefully someone will read this post and save someone else like me a little grief.

The “Custom” option is greyed out for reason, and it appears that customization means delving into the murky depths of Visio’s “Shape Sheets”. It’s not as bad as I make it out (I’m still harbouring a little frustration), and it’s a relatively painless task to complete.

Follow these quick instructions to accomplish this time-saving behaviour:

1. Right-click on your shape and select “Show Shape Sheet”. This will bring up a new window which you will find chock full various property sheets.
2. Scroll to the bottom of the list until you find one property sheet labelled “Events” – this is crucial.
   Note: If you cannot see an “Events” sheet, that means it’s hidden. To show the “Events” sheet, simply right-click somewhere in the grey area outside of the various property sheets, and select “View Sections” from the context menu. You’ll find a collection of checkboxes that indicate the different sheets. Find the “Event” sheet and enable it by selecting the checkbox. Hit “OK” to return back to the Shape Sheet window.
3. In the “Events” sheet, locate a property labelled “EventDblClick” – this is where we instruct the shape what to do when we double-click on it. Enter the following value (case sensitive): “=DOCMD(1312)” (replace everything in the field including the equal sign, but do not include the quotes). Hit the Enter button to accept the changes.
4. Close the Shape Sheet window as we no longer need it.

Fig. 3 – The “Events” property sheet.

If you’ve followed the instructions above, you should expect to see the Shape Data dialog window pop up. Test this behaviour on your customized shape by double-clicking.

That’s it. You now have a shape that you can make your diagram work a little more productive.

Final Notes

Shape Data

There are many other purposes for which Shape Data can be leveraged. If you recall one of the properties that I specified early on was “type”. I’ll save that for a later posting, but if you search Google for the term “Visio multi-shape”, you’ll get an idea of what I’ll be covering next.

Data Graphics

The one thing I likely did not articulate in this article was that Data Graphics can be reused and re-applied to other shapes that you might want to display similar Shape Data. The caveat being that you’ll have to re-format the fields for each one again. You can create new Data Graphics as you need them, but be sure to keep your document as clean as possible of unnecessary clutter. You can do this by going to File>Remove Hidden Information. I’ll leave the rest for you to figure out.

Events & Behaviours

There are many other behaviours that you can attach to shape events, and double-click is just one of those. For more information about Visio’s DOCMD() macro, check out the MSDN documentation here.

Conclusion

This won’t make you a better UX designer by any means, but it can certainly help you save some time so you can focus on what’s important. Take some time to consider some of the other customization features you can apply to your shape, but remember: as is often the case, simplicity is the goal.

You can download the example for this tutorial here.

Strategic use of texture can help to shape the perception of a design; it can turn a simple website layout into something evocative; when delivered in context with the subject matter of the site (articles, information, etc), texture can help to communicate tone and attitude.

Texture In Web Design

Visual textures can be lumped into three relative categories:

1. Patterns
2. Photographic
3. Illustrated

Patterns as Texture

Patterns are the most common type of texture that you encounter on the web. In many cases they are tileable images that are rendered as background images in a page, or appear as textured design accents. Patterns can range from illustrated elements that can repeat endlessly, or as three dimensional (often photographic) textures that can evoke a sense of depth and dimension.

Example:

Fig. 1 – Tileable Patterns.

Resources:

• K10K Pixel Patterns
• SquidFingers Patterns
• BgPatterns

Photographs as Texture

It would be more appropriate to consider photographic texture as singular instances of texture applied to the design, rather than something that is explicitly tiled as in the case of patterns. Photographic textures tend to range in subject matter, but the most common example of photographic texture are images that can be used as backgrounds, such as walls (brick, cement, etc).

Example:

Fig. 2-4 – Light, textiles and other industrial textures.

Resources:

• ImageAfter
• iStockPhoto

Illustration as Texture

Illustrated texture is something of a trend over the past few years, where artists and designers mix various sources such as photographs, tileable patterns, and light to create unique textures.

Examples:

Fig. 5-7 – Mixed water color backgrounds.

Resources:

• iStockPhoto
• Brusheezy

Texture in WordPress Themes

Texture as a design element contributes to the overall personality of the design. When it comes to WordPress Themes, authors tend to exhibit a need to communicate an aspect of their personality through the theme they choose to employ on their blog.

If you’re thinking about using texture as part of your design, consider the following:

1. Theme: What is the theme of your theme?
2. Prominence: How prominent are the textures going to be in your design?
3. Repetition: How often and how many repeatable textures are you planning to use in the design?

Bringing it Together

Designing a successful WordPress theme is no different from designing a compelling website layout – both need to illustrate an artistic (and practical) balance of many design concept where texture may be one fundamental aspect of that balance.

When you’re considering the design of your WordPress theme, think about how your chosen texture(s) will work together with your other design elements to communicate the overall theme.

For example, if you’re out to create a theme that needs to communicate and “outdoors lifestyle” or “nature”, you may want to consider using textures that are organic. In a case like this could could mix various types of textures (tileable, photographic and illustrated).

Fig. 8 – Outdoor Italia

The Outdoor Italia site is a great example of how various types of tileable and photographic texture can be used in a design to communicate a theme. The site makes great use of photographic textures in the form of leaves, paper, and the occasional physical item to deliver a sense of depth.

Fig. 9 – Wild About Gardening

The Wild About Gardening is one of my favourite sites for two reasons: the illustration work makes subtle use of — and reference to — watercolor art, and it blends well with photographic texture. This site is a great example of Photographic and Illustrated texture working naturally together to communicate a sense of unity in the design.

The above examples aren’t WordPress themes, but the leap from content to editorial layout isn’t difficult to make.

Remember that not every WordPress design you create has to have shiny buttons and glossy blocks. Take time to experiment with texture in your design, and discover how different textures can dramatically change the tone and style of your design.

For the most part, you may be stuck with using the setup that the Theme Designer decided to adopt.

Blogs typically take one of three common approaches to displaying posts:

1. Posts are displayed as excerpts with a “read more” link.
2. Posts are displayed with the full body of the posting.
3. Only one post is displayed with pagination available.

The first approach — the most common of the three — is likely a result of the Theme Designer choosing to use the out-of-the-box functionality of the blogging software (and to be fair, it is likely the most efficient); however, not everyone wants a cookie cutter solution to displaying their posts.

The reality is such that you don’t actually need to do a lot of work to get your blog postings to appear the way you want them to. I can’t speak for other blogging software packages, but when it comes to WordPress, there are a many techniques you can apply to customize your postings.

WordPress – The Loop

The meat-and-potatoes of WordPress is “The Loop“. If you’ve ever attempted to customize a WordPress theme, it’s likely you’ve encountered this The Loop (essentially a “while” loop). This is an example of a very simple loop (taken from the WordPress codex):

   1: if (have_posts()) :

   2:    while (have_posts()) :

   3:       the_post();

   4:       the_content();

   5:    endwhile;

   6: endif;

This is a better explanation if you’re not too familiar with code:

The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags.

If you examine one of the template files of your theme you may encounter a more complicated version of the above snippet.  The Loop is where we are going to start to customize the appearance of your postings.

Postings

A post in WordPress is comprised of a number of elements such as the Title of the post, the Content of the post, and assorted information like the Date/Time, etc. In the common approaches, all of the postings share the exact same format and display identical information.

Boring.

But it doesn’t have to be this way. The developers of WordPress were smart enough to realize that while the majority of theme designers don’t mind this type of homogenous approach, there are a few Theme Designers out there who prefer not to follow this pattern. As such, WordPress is built with with the ability to modify how The Loop is applied.

There are several approaches to modifying The Loop, but the two that I prefer are:

1. Use query_posts with counter and offset.
2. Use The Loop with counter and conditions.

The Loop With query_posts(…)

It took me a while to understand what this feature did; quite simply put, it adds additional parameters in the The Loop to instruct WordPress on what to output.

   1: <?php query_posts('showposts=1'); ?>

   2: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

The snippet above was taken from one of my WordPress themes. In the theme, I use the above approach to display ONLY my most recent posting in full. Here’s a simplified version of the markup I use:

   1: <!-- set main-entry -->

   2: <?php query_posts('showposts=1'); ?>

   3: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

   4: <div class="main-entry">

   5:     <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

   6:     <?php //the post meta ?>

   7:     <ul class="meta-top">

   8:         <li><strong>Posted:</strong> <?php the_time('F j, Y'); ?></li>

   9:         <li><strong>Author:</strong>  <?php the_author(); ?></li>

  10:         <li><strong>Filed under:</strong> <?php the_category(','); ?></li>

  11:         <li><?php if( get_the_tags() != NULL ) { the_tags('<strong>Tags:</strong> ',', '); }else{ echo "<strong>Tags:</strong> No tags set for this entry."; }?></li>

  12:     </ul>

  13:     <?php

  14:         the_content('Read more...');

  15:     ?>

  16: </div>

  17: <?php endwhile; endif; ?>

  18: <!-- end main-entry -->

In this example, The Loop is executed only once and only once. The query_posts() function passes instructions to The Loop to show only one post (using query_posts(‘showposts=1′)). While The Loop is executed, it will output all of the post’s information that I’ve specified using the appropriate Post tags.

NOTE: I have set the container <div> class to “main-entry”. This references a rule in my CSS file that will style the output accordingly.

Unfortunately, you’re stuck with only one posting on your page. We need to display older postings as well, and ideally in a format that is different than the most recent.

As previously mentioned, The Loop was executed only once with the example above. This is a powerful feature of query_posts(), in that you have a tremendous amount of control over The Loop — in this case, how many times it is executed.

To render the older postings, you can do this:

   1: <!-- set past-entry -->

   2: <?php query_posts('showposts=9&offset=1'); ?>

   3: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

   4: <div class="past-entry">

   5:     <ul class="dateblock left">

   6:         <li class="top"><?php the_time('M Y'); ?></li>

   7:         <li class="bottom"><?php the_time('j'); ?></li>

   8:     </ul>

   9:     <div class="entry-content">

  10:         <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>

  11:         <?php

  12:             the_excerpt();

  13:         ?>

  14:     </div>

  15: </div>

  16: <?php endwhile; endif; ?>

  17: <!-- end past-entry -->

Aside from the simpler markup, the core difference between this second snippet and the first are the instructions/parameters in query_posts(), and the CSS class which is referenced.

   1: <?php query_posts('showposts=9&offset=1'); ?>

   2: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

   3: <div class="past-entry">

If you combine both of the examples above, what you’ll find is that you’re actually running The Loop twice — in the first instance, The Loop only outputs the most recent post. In the second instance, it skips over the most recent  post completely, and outputs as many older posts as you defined in query_posts().

NOTE: if you examine the parameters in the second query_posts() instance, you should see “showposts=9&offset=1” — this will output 10 posts in total on your page, where 9 such posts are older.

Styling The Posts

What you need now are two CSS rules which define:

1. “main-entry”
2. “past-entry”

   1: /* CSS Snippet */

   2: #post-container div.main-entry {

   3:     background-color: #CCCCCC;

   4:     color: #000000;

   5:     font-size: 1em;

   6: }

   7:

   8: #post-container div.past-entry {

   9:     background-color: #ffffff;

  10:     color:#333333;

  11:     font-size: .92em;

  12: }

The XHTML markup does not have to be different between these posts, and as you can see in the CSS snippet above, you can get away with as little as displaying a different background color, font color or a larger font size.

The Caveat

Yes, there is a downside to using query_posts(). Programmatically speaking, you should try to optimize the number of queries you execute against your database. Since WordPress is largely database driven, you can expect a high volume of requests on any given page. Using query_posts() should be done sparingly (I limit it’s use to the homepage of my blog).

Also, if you are wanting to support pagination, you will need to do a little more work to setup the query properly — you can read more about it here.

The Loop With Counter & Conditions

The simplest method to determine and style your most recent post in contrast to your older postings is a pure implementation of “The Loop”. This implementation also relies on using a counter to keep track of how many posts you’re outputting (as determined by your WordPress settings), as well as a condition to determine which class to reference when styling the output.

Here is an example of this in action:

   1: <?php

   2:     if (have_posts()) {

   3:         // the counter (initialized to 0 );

   4:         $n = 0;

   5:         // the while loop

   6:         while (have_posts()) {

   7:             // the CSS class to apply

   8:             $class = ( $n == 0 ) ? "main-entry" : "past-entry";

   9: ?>

  10:             <!-- set post -->

  11:             <div class="<?php echo $class; ?>">

  12:                 <ul class="dateblock">

  13:                     <li class="top"><?php the_time('M Y'); ?></li>

  14:                     <li class="bottom"><?php the_time('j'); ?></li>

  15:                 </ul>

  16:                 <div class="entry-content">

  17:                     <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>

  18:                     <?php

  19:                         if( $n == 0 ) {

  20:                             the_content();

  21:                         }else {

  22:                             the_excerpt();

  23:                         }

  24:                     ?>

  25:                 </div>

  26:             </div>

  27:             <!-- set post -->

  28:

  29: <?php

  30:             // incriment the counter

  31:             $n .= 1;

  32:         }

  33:

  34:     }

  35: ?>

As you can see from the example above, we’ve taken a basic instance of The Loop and added in two variables:

1. $n — this is the counter used to determine which which is the most recent (starting at “0″ — the first).
2. $class — this is the CSS class that we want to reference (“main-entry” or “past-entry”).

The method and approach to styling the post is the same as the examples in query_posts(). The XHTML markup can be re-used between new and older postings, but this is not required. With a little work you can supply The Loop with two different sets of markup to render.

The Caveat

While this implementation is rather straight forward, it can get complicated quickly if you want to include more and more variations between postings. Each variation requires a little more forethought, and the appropriate conditions to determine what to do and what to render. What you may end up with is a lot of messy markup that is difficult to read.

Conclusion

It doesn’t take a lot of work to modify your WordPress template to render your most recent posting in a unique fashion. In some cases, you can download plugins to help you style your postings; for me, having to rely on additional plugins seems more overhead than is necessary. The techniques outlined in this article are only two of many such approaches (and certainly a manual approach).

Don’t feel as if you have to select one over the other. In fact, your writing style and your choice of template play a large part in determining which method is most appropriate.

Hi Chris,

I’m really curious on how you got that quote feature on your comment section. Do you mind sharing your code?

Cheers,
[author name omitted]

While this is not a new feature by and large, it is one that I thought would bring a sense of discussion to the linear WordPress comment format much like how forums work. I’ve attempted to use threaded commenting plugins, but they are ugly and overly complicated for something that should be fairly straight forward.

In any case, this is the JavaScript snippet that I wrote (you need jQuery, but comes with the theme)

// attach a function to the quote comment link
  $('a.quote-comment').click( function() {
      var tb = $('#comment');
      var strQuote = $(this).attr('title');
      // assign the value
      tb.val('<blockquote>' + strQuote + '</blockquote>');
      return false;
   });

This is the result:

There are a couple caveats to this feature

1. You can only quote one comment at a time, as I didn’t build in concatenation.
2. It is not parameterized so you’ll have to customize it for your own theme.
3. Requires some additional styling (no big deal).

If anyone wants to improve on this, feel free to share!

In my previous article “Getting emo with color” I discussed the benefits of understanding the emotional impact of color.

…think about how certain colors can provoke a response. A combination of responses creates an experience. So when we design with color, what we’re really doing is designing an experience. So before you start mashing pixels together in your next design, ask yourself this one question: “What kind of experience do I want to create?” Source: “Getting emo with color”

When you’re designing your WordPress theme, consider what kind of experience you want your readers to have. This goes back to Part 2 of this series where I suggested asking yourself which type of blogger/writer you considered yourself. Knowing that is part of understanding how to develop an experience for your readers. If your articles are verbose then you may want to consider a color scheme that allows better readability over a longer period of time, or if you are brief, then a more flexible color scheme may be considered.

A emotional user experience

Color influences the User Experience in ways you might not immediately consider, and while color affects people in various ways, there are some generally accepted understandings:

• High-energy colors — colors that fall in the warmer part of the spectrum — tend to make readers feel restless. Certain combinations of colors can make readers feel agitated and that reflects in the amount of time they are willing to spent on a given page.
• Low-energy colors — colors which fall in the cooler part of the spectrum — tend to leave readers feeling passive. Again, this is not necessarily a good thing as you are not engaging the reader (let’s hope your content is engaging).
• Neutral colors — colors which are neither warm nor cool — make for a bland experience.

Here are some examples of color schemes to illustrate color temperature. Keep in mind that not all of these sample pallets translate well for a design, but they are a good foundation to build on.

Warm Colors:

Cool Colors:

Neutral Colors:

Note: All samples were taken from COLOURLovers.

Contrast is key

Take a look through SmashingMagazine.com’s collection of WordPress themes. What you’ll notice is that the color palettes fall equally on both sides of the spectrum (with a bare handful that are monochromatic). But what you may not immediately recognize is that each of them employs contrast to a high degree.

Contrast is a tool that works well to deliver focus add tension in a design. Developing contrast is not always as straightforward as designating a big block of white space (literally) as the content area. In order to develop a good balance between your color scheme and necessary contrast for your readers, you need to figure out a few things:

• On average, how long are your articles? The longer the article, the longer it takes for your readers to consume it. In a case like this, low contrast makes it quite difficult for a reader to maintain their attention and adds undue physiological strain.
• Is there functionality or features in your sidebar that are absolutely integral to the reading experience. I’m not only talking about ad space here, I’m also talking about search features, or a list of recent or related articles, links, etc. If the sidebar features are not integral to the reading experience, you may want to make sure they recede into the background through lower contrast.
• What is relevant in terms of content? Do you want your latest article to stand out from the rest? Consider that readers interested in your blog will be visiting through varying methods(RSS, Organic Search, Track-backs, etc.), which means you may want to ensure they get what they are looking for quickly.

Tools of the trade

In my previous article, “Getting emo with color“, I mentioned a few tools that can help you in developing color schemes. Here is a site that I personally love: COLOURLovers.

The samples generated by the community are great to experiment with and it also helps to see what others are doing as well. But be careful, these are color schemes and do not necessarily reflect a real-world application, just an aesthetic.

Fortunately, there are tools out there that can help you in terms of gauging contrast. Take a look at Jon Snook’s “Colour (color) contrast check” article. Jon provides a nifty little utility for evaluating the contrast of your color selections. The example page lists two other utilities which you can play around with as well. 456Bereastreet.com complied a list of additional utilities which are both desktop and web applications.

I can’t tell you which color schemes work best — that is for you to decide; however, I can tell you that regardless of the color scheme you end up with, it is wise to ensure that you provide contrast in the right places for the right reason. Understand your goals and design accordingly.

For this installment, I’m going to focus on another issue that tends to plague web designers — typography.

Before we get started, it’s best that we get a few misconceptions out of the way:

1. Typographic principles for Print Design cannot be applied to Web Design;
2. Good typography requires images;
3. Users only care about content;

For the most part, point three is correct; however, let’s put this into a little more context. Users care about your content — or at least you hope they do if they’re browsing your site — but that does not preclude you from developing a better reading experience for them by applying some straight-forward approaches to typography. I personally hate going to a site only to find that fonts are so tiny on my screen that I have to crank up my font settings in my browser to read it. It is equally annoying if I really want to read the content and am forced to resort to that. It doesn’t hurt to make things a little easier for your readers.

As for the second point, my response to that is typically “know your audience”. I say that because every site is different. Content on one site might require that images be used in place of text, whereas on another site, it is far more important to the audience that content be easily accessible (select, copy, paste, etc). Arguably, it is easier to share text-based content, than it is to share graphical content. Understand who your audience is, and cater to them as appropriate.

Finally, most typographic principles used in print translate beautifully to screen. We have far more advanced tools to develop a better reading experience with CSS-based layouts, which control everything from positioning to formatting. While I don’t want this to turn into an in-depth discussion about usability and web standards, I will say that applying good typographic practices enhances both web usability and accessibility efforts.

Let’s get started.

Issue: Poor reading experience for users

For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse. Source: webtypography.net

I could not have said it any better.

When it comes to developing a good reading experience for your users, typography is an important aspect that needs as much consideration as colour and layout. A good reading experience should leave your users free to do one thing: read. If you can present your content in a way that makes it both easy to read, and requires less from the user than scrolling, you’ve accomplished what many websites fail to do.

Good typography in your design opens up your layout and makes a normally “grey” page appear friendly and light.

Something to think about:

It is inevitable that you will come across older sites — and even new websites — which still seek to compact as much copywriting into a given area as possible. It is not uncommon to hear feedback along the lines of “keep the content above the fold”; every time someone must say this, a kitten dies somewhere. I counter that kind of feedback with this. With current web standards, there is no harm in scrolling a page. It is a natural browsing behaviour; again, this is a good case where it pays to know your audience.

Density or “Typographic Colour”

First off, you need to ask yourself what kind of blogger you are. Are you the type of blogger that publishes short paragraphs with a smattering of links? Are you the type of blogger that prefers to drop lots of images and media with brief explanations? Or are you a copious writer given to generous use of copy, media and links?

If you can identify what kind of writer you are, then you’re half way to understanding your audience. People visit your blog for any number of reasons, but the foremost amongst those reasons is your content. They like what you have to say, what you have to show them, and the information you can point them to.

For the purposes of this article, let’s assume you’re like me — a copious writer. You love your words and your blog is the perfect place to share them.

Given the assumption, here are a few considerations:

1. Large amounts of copy on a screen or piece of paper turn your normal white space in a big grey mass. In traditional typography we call this “typographic colour”. More specifically this is the density of your paragraphs in relation to the space you have given the paragraphs. You can lighten things up by adjusting the “leading” (line-height in CSS), and the “Kerning” (letter-spacing in CSS).
2. Colour as a tool plays a much more important (though subtle) role in good typographic design. You have many colours to choose from, but when it comes to presenting content that is intended to be read, contrast between the background and the type is essential. The better the contrast, the less work is required of the reader to focus and interpret what is on screen. Pick colours that are harmonious with your overall design, but also have a high-degree of contrast. This does not mean you have to stick to black and white; as long as the colour has enough contrast to it, you should be fine. “Cooler” colours (colour temperature, not “cool factor”) for type work best across most screens.
3. The typeface, its size, its leading and kerning all affect the readability of your content. Choose a typeface and set its properties to ensure that it is legible. I cannot stress this aspect enough. I have had one too many debates with designers who transition from Print to Web, arguing that 9pt to 10pt type is more than sufficient for on-screen legibility (this is one of those exceptions where print and web typographic principles do not marry so well). I end these long-winded debates with this consideration: in contemporary graphic design, a designer must design for the medium. The same holds true for web designers. We have to design for the medium, and in our case the medium is the screen. Here is an article that also talks about adjusting typography for the web. It also covers parts of the previous discussion in relation to the column measure.

Here are some examples of density, and how typographic control can affect the legibility of your body copy:

You can see from the thumbnails how the leading affects the density of copy on the page. The tighter the leading (and other type properties) the more dense a single paragraph appears to a reader.

Putting it into practice

Spend the time and go through the motions of playing around with typographic colour in your design application, or if you prefer to deal with your typography in CSS you can use tools like Font Tester or TypeTester. The benefit of these online tools is that you are very quickly able to see the results of your tests as they appear on screen — in a browsing environment. The more time you spend on determining your typographic styles in the design phase of creating a WordPress theme, the better off you will be later in the development process.

Design for the medium

Keep in mind that for web, it is easier to scale back than it is to scale up. We don’t have the restrictions of paper or other physical media — we do have to contend with other issues (we’ll cover that later), but for the most part you’re better off starting larger at first and scaling back if you have to.

Here are some sites that are some examples of web typography that illustrate the design principles I have been talking about in this article:

• http://www.clearleft.com/about/
• http://www.simplebits.com/
• http://www.whatdoiknow.org/
• http://slideshowpro.net/

Some Considerations:

Feedback is always nice to have. If possible, solicit some of your readers about their thoughts on your typographic choices, but remember to put your questions into the proper context:

• “Is it easier to read my articles if I do this or that?”
• “Does the page feel lighter to you if I chose this colour or that colour?”
• “Can you scan the page quickly and find what you need?”

Further Reading:

“The Elements of Typographic Style Applied to the Web” is a site that I have found infinitely useful as a reference and as a sounding board for decisions I make in terms of my typographic design. I encourage anyone who has an interest in web typography to read it — it’s not a long read — quite brief in fact. Keep in mind that as a designer, you the final call on decisions — don’t get caught up in the stress of “I have to adhere strictly to the rules or my design sucks”. Instead, think about your audience. Put yourself in their shoes and consider what works best for them in regards to your content.

The reality is that most older WordPress themes (older than v2.x) can be upgraded to be compatible with newer versions of the WordPress software, but it does take a little effort to figure out what works and what doesn’t — sometimes creating a new theme is far more attractive than having to parse through old code. I hate having to revisit old code — yes, I am one of those people — but since I’m developing a theme that I want to share with people, I want to ensure they get the best out of what I can develop. In order to do that I needed to make sure my WordPress themes are as future proof and flexible as I can make them.

For the first part in this series, I’m going to focus on the "K.I.S.S" principle.

Now, I know there are articles galore which expound on this principle, but when it comes to WordPress or most weblog systems, designers tend to throw it right out the window. Complexity does not always equate to good visual design.

To kick off this series, I’m going to focus on a fundamental design problem, which ultimately compounds other issues later on in the development process.

Issue: Inconsistent "Column Measure" and the visual "Grid":

This is a design issue which plagues the majority of designers. Column measures form the foundation for your design "grid". The implied "grid" lends harmony to your layout and an invisible structure — a framework — you can use to communicate visual priorities of content and components on a page. There is no hard and fast rule that says you should always use one, two, three or four column layouts. It really comes down to what you need to illustrate the content and functionality on your pages without pushing it to the point of clutter.

Understanding the column measure

In short, a column measure refers to the width of "continuous text". This is most evident in magazine and newspapers where the ability to flow text into multiple columns is possible. With current development standards and web-technology this is not such an easy thing to do (it’s possible with a lot of hacking). However this does not preclude you as a designer from developing a rough column measure to aid in your layout.

Note: What is also handy (and we’ll talk about this in later articles), is the typographic settings derived from this measure. Here is a good article explaining "column measure".

Designing your "Column Measure"

The old carpenter’s adage "Measure twice. Cut once" holds true for design on so many different levels. In the case of WordPress theme design — determine your column measures first.

When you first run Photoshop (or whichever program you prefer), fight the urge to start throwing pixels onto your canvas. Instead, focus on setting out your guides. Here is a sample of the column guides I typically start with all my web-layouts:

The darker grey areas indicate where content would flow and the lighter grey areas indicate margins or padding you may wish to apply. I stick to a 20px padding practice (10px on the left and right side). The space remaining provides your gutters. The pink rules between columns indicate possible borders.

In terms of designing the column measure, I tend vary my widths anywhere between 250px to 300px — this typically lends a fair amount of space for design elements and copy, as well as enough room for extra white-space where possible.

A few things you may notice about the column sample:

• Between all three columns, I allot for a 1px border (the pink rules). I do this because it is a pain to have to factor in borders in the design after you’ve committed to your column widths. This may seem odd at first because the combined column widths end up being 601px and 902px respectively — naturally these aren’t numbers you expect to see, but these numbers end up giving you better control when you want to divide the columns.
• The columns loosely follow the CSS box model. This is vitally important if you’re designing for web standards. Being able to foresee ahead of time, how the box model affects a layout is a handy tool, not to mention that it takes the guess-work out determining margins and padding for your divs. The remaining space after any margins or padding is 280px — that’s a pretty decent amount of space to put towards content or blocks of functionality like categories, bookmarks, search boxes, etc.
• I allot a minimum of 10px outside of the layout for effects like drop shadows and such. My "Lemon Twist" theme is a good example of where that extra little space comes in handy.

Your columns are just vertical spaces which you can use to flow your content into. You can bridge or merge those columns, thereby creating interesting design elements; however, don’t let the columns restrict you — the grid that is derived from this is a very helpful tool which allows you to create designs such as what you might see with the following sites:

• http://www.ndesign-studio.com/
• http://www.snook.ca/jonathan/
• http://archgfx.net/blog/2007/geek/blogging/bus-full-of-hippies-for-wordpress (see screenshot)
• http://www.lifespy.com/2007/illacrimo-theme-release/ (see screenshot)

Putting it into practice:

Once you have your columns roughed out, start playing with blocks rather than fully fleshed out designs. With building blocks you alleviate the complications of the aesthetic, giving you much better focus on of proportion, balance, flow and tension.

Bridge your columns — which design elements might benefit from doing this? What happens when you swap the position of your sidebar and your reading area. If advertising is a feature of your weblog, where is it most effective to generate clicks and views? Does your navigation work best in a sidebar or at the top?

Play around with the layouts. When you get to a point where you’ve blocked out your layout, them dive into design.

Things to consider:

Remember, the primary purpose of a weblog is for people to read — I know there are some folks out there who may feel otherwise; however, the majority of people visiting your weblog are there to find content, read it, and move on (or share it, but I’ll save that for later). Whatever you can do in your design to accommodate that most basic of requirements, the better.

Here are some questions that may help you:

1. Think about how many columns you really need to layout your content — can you simplify?
2. What are you columns being used for — articles, advertising, photos, etc.?
3. Are there going to be exceptions to the layout that might affect your column structure, such as banners, forms, long headlines, embedded media, etc.?
4. As a reader, do you prefer to have a wide reading column, or a narrow one?

Try to answer as many of those questions before hand and avoid some of the design pitfalls later.

Ultimately the content and the functionality are up to you. By keeping most of these things in mind you will make it far easier to maintain the integrity of your design as well as work to make it future-proof.

Further Reading:

• http://www.wpdesigner.com/2007/06/19/web-typography-column-widths/
• http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/