About 1 minute after launching my new site just over a month ago, I had opened Photoshop and was working on version 1.1 of the design. I didn’t want to rebuild the site, but knew there were aspects of the design that could use improvement.

I began working on those improvements in whatever short periods of free time I could find over the past month. As the month went on and I was able to see how people were interacting with the site, I could see even more places where a bit more thought would make the experience much more enjoyable for everyone.

While the look of the site now is pretty different from the previous version, what’s under the hood is pretty much exactly the same. Testifying to the power of CSS, the majority of the changes were purely aesthetic. The blog was the one area where major layout and semantic changes were made, as well as the addition of the Photography page.

I want to highlight some of the changes, and explain why those changes were necessary.

Simplified Homepage

Not a major change, but one that I believe adds much needed clarity. When visitors arrive to the site, I want them to see what I do. Before, there were 7 possible options to accomplish this:

• the featured project
• two calls to action in the copy
• four recent projects

As we all know, when presented with too many options to choose from people generally choose not to choose at all. By limiting the calls to action to three (featured project, two calls in the copy) I am making that decision decidedly easier for visitors.

Better Project Navigation

When a visitor was finished viewing a project, they were presented with a simple “Previous/Next” navigation scheme. There was no indication about what type of project they would be seeing next, or how many projects were left to go through.

With the new design, I’ve opted for clarity over simplicity. Under each project study is a list of all of the possible projects that can be viewed, including the name of the project and the type of work that was done. Now visitors who are only interested in my web work won’t need to sift through any print or other work, or vice versa.

Better Blog Layout

As I mentioned above, the blog saw the greatest changes in layout, semantics, and aesthetics. As well as updating the look and layout of the blog, I also added proper commenting support on the site.

For those who have been following me for a while, you know I got rid of comments a couple of years ago. While it was nice not having to fight through the spam, I believe quite a bit was lost by not having your voice in the mix. Now, you are more than welcome to comment away on any post you’d like.

Just above the comment section I have updated the post navigation. Reading more about web usability, I realized that a simple “previous/next” link structure isn’t sufficient enough for users. With the new navigation, visitors can see the title of the post they will be going to, and make an informed decision of wether it’s worth their time to investigate.

Better Contact Form

When I launched the new site last month, my friend Chris Wallace made the comment that my contact form was, well, boring. At first I defended the form, as it was simple and clear and minimal. But as the site has been launched for a month now I have seen how right Chris was.

What the contact form truly lacked was affordance. Affordance, as defined by the book “Universal Principles of Design” (affiliate link), is “a property in which the physical characteristics of an object or environment influence its function.”

While the original form had normal web form-like elements, it lacked any sense of affordance. Plain form elements on a plain white background. When people would visit the contact page, there was nothing there enticing them to use the form.

With the new design, I made sure to create a form design that clearly identified the form’s purpose, as well as brought a little bit of fun to the design. The new form looks like an envelope—an identifiable element that communicates “contact— and includes a button that looks ready to be pushed once the form is filled out.

Overall, I’m really happy with this iteration of my site. I believe it builds on the strategy and though that went into the first version, and improves on some of the areas that weren’t quite right the first time around.

And of course, I would love to hear what you think!

※ Permalink for “Redesign: Highlights” published on date_to_rfc822

When I was getting started in my first job as a creative professional, I told my manager that I needed him to criticize me. If I was doing something that didn’t align with the ethos, mission, or structure of the organization, I needed him to let me know as soon as he could. I did this not because I was a glutton for hearing how poorly I performed my duties, but because I wanted to improve. Chances were that the decisions I made and the actions I took were what I felt were the best option. If they were indeed the best option, then great. But if they weren’t, I wanted to know so that I could improve the next time around.

I grew a lot both as a creative professional and as a leader in my year in this position. I was grateful to have established a solid friendship with my superior, one that was based entirely on trust and honesty and one which I still cherish to this day. When my friend had to address an issue he saw in my performance, I never felt any judgement about my character or worth as a person. It was strictly a criticism of my performance, given with more grace and humility than one could ask for in a person in a superior role.

As I moved into the design industry, I gave the same instruction to the owner of the studio I started at. If I had any chance at growing in my craft, I would need complete honesty when it came to the critique of my work.

Since leaving the studio this past May to go out on my own, I have had to find and build relationships with other designers whom I respect. Every once in a while I will email one of these people a design I am working on, and feedback will vary from “this looks great” to an itemized list of suggestions for improvements.

The key element in any of these relationships is trust. I trust each of these people to be honest with me. I respect who they are as professionals and as people.

Criticism in Product Development

Criticism is an important element of design. In order to effectively define a strategy, solve a problem, or build a product, one has to be able to criticize decisions made at various stages of the project. As John Siracusa wrote a year ago, the real talent that Steve Jobs has is that of a critic.

He is Apple’s [critic]: one man to pare a torrent of creativity and expertise down to a handful of truly great products by picking apart every prototype, challenging every idea, and finding the flaws that no one else can see.

The reason Jobs can act as the head curator of what Apple produces? He’s in charge, yes, but most importantly he has a track record of producing great products. There is no way the engineers and designers of Apple would subject themselves to Jobs’s scrutiny if it weren’t for their profound trust in his ability to criticize effectively.

A Sour Attitude

Which brings me to several incidents that have taken place in the design industry over the past year or so.¹ Starting with Dustin Curtis’s redesign of the homepage of American Airlines’ website, then progressing to the redesign of the Zappos homepage by Metalab Design, and most recently a redesign of the Instagram iPhone app by Tapmates, the trend of publicly criticizing the design work of others seems to have taken a nasty turn. What these designers have done is taken the work of an organization and, completely ignoring the research, strategy, or thought that went into the original designs, maligned not only the design itself but the people behind each individual design.

The issue here isn’t that the targets of these attacks aren’t deserving of criticism. Even beacons of good design such as Apple, Braun, or BMW are not guarded from public scrutiny. The issue with the aforementioned situations is the attitude that each of the antagonists took in their criticisms: “we are smarter/hipper/cooler than you, therefore what you know is of little to no value.”

On The Other Hand

In comparison, Andy Rutledge has, on numerous occasions, brought to light the design problems of other websites. He has called out giants like Amazon, eBay, Google, and even the White House. He compared the colour palette of the Wall Street Journal’s website to that of a “third grade art project.”

The difference in Andy’s approach to that of those designers mentioned above is that Andy doesn’t simply write off the entire design each of these organizations have produced and replaced it with a totally different design. Instead, Andy goes in depth to explain why certain design decisions should have been made differently. He takes great pain in pointing out the details of the design, explaining in technical detail why certain decisions are wrong and why others are right.

The biggest difference, though, is that Andy approaches these criticisms with respect and humility. As far as I can tell, he does not malign the companies he has offered criticism to. His intention is educate, not humiliate.

A Redux of Design Criticism

I don’t for a second believe that we should stop criticizing the work of others. Holding up our own and each other’s work to a higher standard is important to the further development of our craft. What I don’t believe needs to be a part the process, however, is an attitude of superiority. We should seek to lift one another up, not drag one another down.

※ Permalink for “On Criticism” published on date_to_rfc822

I launched my new site yesterday.

If you stop by, you’ll see that it’s entirely different from anything I’ve done before. It’s a whole new design, built on a whole new system, with entirely new features.

By way of showing you around the new digs, here are some highlights:

The Work

My main goal in launching the new site was to begin marketing my services as a designer. The front page now focuses entirely on communicating what I do. The new Work section highlights some of my recent work. I’ve decided to use brief descriptions of what the goals of each project were, followed by a large screenshot of the design. The new work section also comes with its own RSS feed. More details on that to follow.

The Blog

I love to write and I love to share. For a while now, my blog has consisted of both original content, as well as links to what other people are creating. The blog, then, is still a major part of the site. I’ve created a clean, light layout for my writing, while also allowing for big, bold photographic posts as well. I also want to experiment with a more art-directed approach with some of the posts I write, but I first want to let myself settle into my new surroundings.

The Feeds

With the move to ExpressionEngine, I made the decision to introduce a new RSS feed structure. The main feed — the one you’re subscribed to now — will behave as it always has, as a combination of my writing and the things I share.

However, if you prefer to subscribe to just my writing or just the things I share, or would like the two split in your RSS reader, then you can subscribe to the dedicated Blog or Aside feed. There is also a Work feed for my projects, which will remain separate from all other feeds.

When I made the decision to go this route, I was looking at how others were handling the way their RSS feeds behaved. I’ve always liked how John Gruber handles his link posts: the title of the RSS feed item links to the page he is sharing, not to his own site. When Shawn Blanc introduced a similar approach to his feed, I knew I wanted to eventually head down that path myself.

When either Shawn or John posts a link to another site, the title that appears in your RSS reader looks no different than any other feed item. However, when either of these gentlemen write original content, those posts are marked with a unique symbol — John uses a star while Shawn uses a large plus sign.

As I was working on my own feed structure, I started to wonder whether this approach should be reversed; original content should look and behave like original content from other sites’ feeds, while links to other pages should be differentiated in some manner. With this thought in mind I made the decision to include an infinity symbol ∞ with the link posts, to differentiate them from posts that have normal behaviour.

The Switch

As I wrote last week, there has been a major change under the hood of the site. Previous versions have run on WordPress or Tumblr. This new site runs on ExpressionEngine. While I still plan to use the other systems I have learned, I have fallen in love with ExpressionEngine and wish to do more with it.

Every Good Launch Needs a Cause

It is amazing that I have the opportunity to communicate to you over a shared network connection, to share what I have created and what I’m thinking. However, for a billion people in this world, the main question on their mind is not “I wonder what’s happening on Twitter today,” but “where will I get my next drink of water?”

With that in mind, I have launched a Charity:Water campaign called “Every Good Launch Needs a Cause.” The goal is to raise $500 to help bring clean water to those in need.

To raise awareness, I’m giving away 3 photograph prints from my friend Jorge Quinteros. Here’s how to enter the contest:

1. Commit to giving a minimum donation of $20 to the campaign. I don’t have a way of tracking who gives, but I know I can trust you.
2. Send a tweet declaring your commitment with the hashtag #everygoodlaunch and a link pointing to the campaign page at http://mycharitywater.org/patdryburgh

Everyone who commits to giving and tweets their intentions will be added to the draw. The contest will close on December 3, 2010. Winners will be announced on Twitter that day.

The goal is to raise $500, which will provide clean drinking water for 25 people.

Thank You

Thank you so much for joining me on this journey. I’m so proud of the new site, and excited for the opportunities that are coming my way. I’m looking forward to sharing them with you all.

※ Permalink for “The Launch, The Switch, and The Contest” published on date_to_rfc822

I’ve heard it said that when giving a presentation, one should first tell the audience what you are about to share, then share it, and finally tell them what you’ve just shared. The best presenters are the people who have the ability to direct every member of the audience from point A to point B without leaving anyone behind.

If I look at my blog as a presentation, looking back I can see that I haven’t done the best job at ensuring you were following along with the journey. I’ve jumped from platform to platform to platform, changed the design numerous times in between each jump, and have changed the focus too many times to count. In hindsight, I can see how I have disrespected you, not because of the changes, but because I did not clearly communicating change before it happened.

Looking Forward

There’s no better time to self-correct than on the eve of a big change, and so with that in mind I want to let you know that I am overhauling my website. In its current state, PatDryburgh.com serves as a personal blog where I share what I’m interested in and try to create content that is interesting to you. I don’t ever want that to change.

With my move to freelance last May, I have been fortunate enough to find work from referrals and through work I have done for others. I am still encountering many amazing opportunities, but I know that at any point that well could dry up and I will need to be proactive about marketing myself and my services.

With this in mind, I have designed and built an entirely new website for myself. Those following me on Twitter or Dribbble may have seen snips of the work I have been doing.

New Digs

The front page of the site will be a place to highlight some of my recent work and introduce myself to visitors. This is obviously very different from the approach I’m currently taking, which is to display a long list of possibly confusing blog posts.

The new site will be very image heavy, with big displays of the work I’ve completed as a freelance designer. I believe my work is my brand, and is the strongest selling tool I have.

I will still have a blog, and will still post links to other sites and articles. My new blog has been built to allow for a more art-directed approach, should a particular post call for that type of treatment. I have gone through my blog and removed old posts that didn’t serve the site. This process was an excellent opportunity to see how I’ve grown as a writer, and also a reminder that I do love to write. Expect more as the new site is launched.

More changes will be coming to how the blog functions, including additional RSS feeds for particular post types. These changes will be explained in a post announcing the launch of the new site.

The Engine Under The Hood

Probably the biggest yet least noticeable change to come is the change of what’s under the hood of this site. You are probably aware that this current site is powered by WordPress. I still plan on developing client sites with WordPress for the foreseeable future.

As a challenge to myself to learn a new platform, I made the decision to give ExpressionEngine a try after seeing many designers I respect use it to power their own sites. I still love WP, but now feel comfortable enough with ExpressionEngine to offer it as an additional option to clients.

Pencil It In

Next Tuesday, November 23 is the date I’ve set to launch. I’m very excited to for you to see the new site, and can’t wait to hear what you think of it. However, I didn’t want to go ahead with the change without letting you know ahead of time.

The next time you hear from me, this whole site will be different. But please, be sure to stop by. You might even find yourself leaving with a little gift.

※ Permalink for “What I’m About to Do” published on date_to_rfc822

An interesting meme has been developing over on Dribbble, a community of designers who share the things they are working on at the moment. Started by Geof Crowl, designers have been creating postcards for the states and cities in which they live. Some places are well represented, while others may only have one or two graphics representing their location.

Given that I live in a small municipality of just over 13,000, I guessed that few fellow Dribbblers would share my locale.¹

So, I took the opportunity to represent my small region:

Other designers I admire have been creating beautiful postcards for their locales. Below are some of my favourites:

Of course, the Godfather of Dribbble Mr. Cederholm, has created one of the nicest postcards for the city of Salem, Massachusetts. Perhaps a few years older than Thames Centre; where they have witches, we’ve got soccer moms.

Few people have the creative talent that Kyle Steed has. This beautiful postcard for his home in Dallas is part hand drawn and part Poloroid photograph; truly a perfect combination.

I do not know much about Norway, but from this by postcard by Troy Bergland, it’s easy to tell that at least part of it is breathtaking.

One of my dreams has been to own a Volkswagen camper, and one of the places I would love to venture to in it is Arizona. The muted colours in this postcard by Matthew Spiel are just perfect.

I have no real draw to go to France, but the mix of photography and type in this shot by Stéphane Reverdy are beautiful.

Several times in the recent past I have tried to set type within a scene, only to have it not quite fit within the overall landscape. In this postcard, however, Jess Brown has nailed the perspective and concept.

One of my favourite design agencies, Paravel, calls Austin, Texas home. One of Paravel’s partners, Trent Walton, designed this antique-looking card featuring a photo of his hometown, and of course that classic Texas star.

---

I love when designers take the time to flex their creative muscles outside of the bounds of their daily work. Good design should result in action; I think I may have some travelling to do this coming year.

※ Permalink for “Postttcards” published on date_to_rfc822

Last week I had the amazing opportunity to document the process of the filming of my friend Joel Geleynse’s newest music video. With a mix of live performance, acting sequences, and dance set in an old, run down machine shop, there was so much to capture in just a single day. It was definitely my biggest photo shoot to date with over 1000+ photos taken.

Below are some of my favourites from the day.

※ Permalink for “Joel Geleynse Music Video Shoot” published on date_to_rfc822

On August 14, 2010 a group of 40+ dancers ages 6 & up participated in a flashmob dance in front of City Hall in Stratford, Ontario. My friend Meghan Seaman, owner of On Stage Dance Studio, and her friend Tori Sutton of the Festival City Twirlers organized the event as a way to give back to the community.

I was in attendance both as a friend and as a photographer. Below are some of the shots taken that day. More can be found over on Flickr.

A full video of the performance can be seen on YouTube.

※ Permalink for “Flashmob in Stratford, Ontario” published on date_to_rfc822

I am new at writing posts that are instructional in nature, so I hope that you can forgive me for going back and making corrections and additions as I find them. I also hope that these posts are helpful, and if so, please don’t hesitate to let me know or share them with your friends!

I received an email this afternoon asking about my post about using high resolution images in a Tumblr photo post. They had included the {PhotoURL-HighRes} tag in their theme, but still the photos weren’t high resolution.

Tumblr has added an extra (confusing) step to having high-res photos on your blog. To include high-res photos on your blog:

1. Go to the Customize screen for your blog.
2. Select the “Advanced” menu.
3. Select “Enable high-res photos.”

From what I’ve read, any high-res photo you have uploaded since October 2008 has still been stored on Tumblr’s servers, so this step really just allows your theme access to those photos. However, if I’m wrong you will need to re-upload all of the photos so that Tumblr has a high-res version on their site.

Again, any questions or comments are always welcome!

※ Permalink for “High-Res Images in Tumblr: Addendum” published on date_to_rfc822

I hadn’t planned on writing so soon on another Tumblr theme development topic, but I have noticed a problem on several Tumblr sites that is really easy to fix and has benefits both for your readers and search engines as well.

What’s In A Name?

The manner in which Tumblr allows you to name your website pages in the <title> html tag is rather confusing. In the custom theme docs, the only Tumblr code used to describe the page’s title is {Title} which only displays the blog’s title, not the title of the actual page your reader may be on.¹

This is how Tumblr indicates a page’s title in each of its examples in the custom theme docs:

<title>{Title}</title>

A Little Bit Closer

Later on in the theme docs, Tumblr indicates that in order to display a post’s title on a page, you use the combination of the {block:PostTitle} tag (to determine if there is in fact a post title) and the {PostTitle} tags.

{block:PostTitle}
    <h2>{PostTitle}</h2>
{/block:PostTitle}

What they don’t indicate is that this combination of tags can also be used in the <title> HTML tag, as follows:

<title>{block:PostTitle}{PostTitle} | {/block:PostTitle}{Title}</title>

While this format is better than what we started with, it unfortunately only covers one specific type of Tumblr post: an article with a title. This means that the following still go without descriptive page titles:

• photo posts
• quote posts
• link posts
• chat posts
• audio posts
• video posts

The Solution

So what is the solution to this problem? You want a descriptive title for your blog, but the {PostTitle} tag isn’t cutting it.

Enter: {PostSummary}

Somewhat ambiguously, Tumblr includes a tag that will generate a title if one exists, and will fall back on a short summary of the post’s content if a title does not exist. This is perfect for all of the post types listed above, as well as articles which do not have a specified title.

On my blog, my <title> tag looks like this:

<title>{block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>

If you look around my blog (which I hope you do!) you will see that every page on this blog has a descriptive title in the browser title bar. This also translates into more descriptive titles for Google and other search engines when they index my website.

I hope this post helps you create a more pleasing reading experience for your readers. If you have any questions or any other feedback don’t hesitate to hit me up on Twitter or via email.

Addendum

I have written an addendum to this post, which includes Garrett Murray’s argument against using the method I’ve described above to title Tumblr pages. I have to say, it made me rethink using this method. I strongly suggest checking out the addendum and making your own informed decision from there.

※ Permalink for “Descriptive Page Titles in Tumblr” published on date_to_rfc822

One of my favourite elements of my current blog design is the large images used for photo posts. When I post a photo that I or a friend has taken, I like that the photo will span the width of the site’s content, giving the photo priority in the content.

This morning my friend Phil Bowell emailed asking how I achieved this affect, when Tumblr limits photos to 500px wide when displayed in their themes. I thought the answer to be helpful enough to share with everyone.

When designing a Tumblr theme, Tumblr allows the designer to set the width of an image in a photo post to a certain width, using the tags {PhotoURL-500}, {PhotoURL-400}, {PhotoURL-250}, {PhotoURL-100}, or {PhotoURL-75sq}. This, in essence, limits designers to a maximum width of 500px wide.

However, they also include another tag, which is {PhotoURL-HighRes}. This produces the largest possible file that was uploaded when posting the photo blog post.

Using this tag, along with the css declaration:

.photo img { max-width: 100%; height: auto }

I can have the photo span exactly the width of the content container.

With these two bits of Tumblr code and CSS in place, I usually post the URL of a Flickr photo using the 1024px version. This way, it will span the full length of my current design, and should I make my layout any wider, I shouldn’t have to go back and change all of my photo posts to accommodate a wider image layout.

I hope this helps you break free of the implied 500px width limit in Tumblr’s theme designs, and allows you to decide for yourself how you wish to display your photos and images.

Addendum

I missed a very important step in getting your site to display your high-res photos:

1. Go to the Customize screen for your blog.
2. Select the “Advanced” menu.
3. Select “Enable high-res photos.”

Hope that helps!

※ Permalink for “High-Res Images in Tumblr” published on date_to_rfc822