I love comics. I love comic books; I the funnies in newspapers; I love mainstream comic books, but most of all, I love indie comics. It’s true that there is a lot of crap out there, but now and then you come across a title that not only delivers an interesting storyline, but backs it up with a great style.

What I really like about Aaron’s style is the paradox and sheer quirkiness of his work: a little rugged and unpolished, but refined at the same time. The subtleties in his work are great — everything from little background details in his pages, to the character designs.

There was so much to take in on the first read that I found myself coming back a few times just to appreciate the aesthetic and story. Reading through the archives and even perusing some of the commissioned work, you begin to really sense how much of Aaron’s personality and sense of humour comes through.

Aaron’s work reminds me of the grittiness of Kevin Eastman and Peter Laird’s early work on TMNT (before it was “kiddie-fied”), as well as animation influences from artists like Jeff Matsuda.

Here are some more samples of his work:

I won’t say too much more about Aaron’s work — check it out for yourself.

Understandably, this is a touchy standpoint to take depending on who you talk to. From a design and creative perspective, one could argue that it’s all about the ideas; and from a development perspective, one could argue, equally, that the technology drives the creative.

I don’t see that either argument is truly wrong; rather, it has been my experience that creative ideas that steam ahead without regard for the technology required to execute the idea, have typically run amok. This is a lesson that I’m forced to re-iterate whenever I start on a new project.

The road to project hell

When I’m involved in any sort of discussion around creative for online media, one of my first questions is always, “how is it supposed to work?”

Depending on how that question is answered, three typical scenarios arise:

1. People will hedge around the issue of technology and gloss over it with a dismissive, “let’s address that later — this is creative discussion,” response.
2. The “build it and they will come” syndrome rears its ugly head once again (this is, by far, my personal favourite and one that I’d put money on if the occasion presents itself).
3. Technical members of a team are conveniently uninvited from the next few meetings until the concept is baked, and only once it’s ready to go into development are they brought back into the mix.

Follow any of the above scenarios — unimpeded — to their natural conclusion, and the result is an uncomfortable, awkward discussion with the client about how the concept needs to be revisited.

This is the not-so-fun part where I usually get dragged back into the mix to help sort things out. For some reason — and despite my best efforts — the same issues come up time and again.

(At this point I usually excuse myself for a sanity check.)

Seriously, how many awkward client conversations does it take for folks to realize the pattern? How much more of a projects’ profit margin need to be consumed before the red flags start to go up? What about the impact to public/client perception of the creative company as a whole?

Rock the boat

When it comes to online media, it is naive to foster the notion that separating the creative from the technical is sound practice.

If you find yourself in a scenario such as the ones I mentioned earlier, consider the following:

1. Challenge the assumptions and address the issue head-on. There are solid technical solutions to creative challenges, and just because the problem cannot be solved one way does not immediately discount the possibility of it being solved in some other manner. Engage the creative process with a healthy amount of pragmatism.
2. Web-projects need strategy, planning, and enough time to execute effectively. Very few online experiences/applications are instant hits. The rare ones that are (Twitter, FaceBook, BaseCamp, etc), have strategy and planning behind them, each with enough time to evolve. Do not be afraid to play the devil’s advocate and ask the tough questions.
3. Designing and conceptualizing in a silo is rarely ever effective. External input (partial or impartial) can be the difference between having to call a client and tell them you can’t execute on what you proposed, and taking the kernel of an idea and pushing it in a direction previously not considered. Keep your technical team involved as much as possible — they are the last ones who have to execute the concept.

When asked, this is how I consider being able to “do better work”:

If a creative team can accept the notion that separating the creative from the technical is folly, the possibility of conceptualizing better ideas and solutions (stronger creative) is all the more tangible.

Perhaps I am over-simplifying the issue (clients do play a big role in contributing to the issue as well), and there are many other considerations, but all of that aside, at some point common sense needs to prevail.

So what’s new?

A lot of things I suppose, but mostly I’ve been busy as hell. There have been some recent changes in my company that have left me running a little ragged here; and while I sense there is much change on the horizon — the horizon is still quite a ways off.

I’ve been toying around with a new Blog Theme, a dramatic departure from this current theme. At some point this summer I will block off a few days to finish the design and development of the theme and incorporate some new features into it. I’ve also been toying around with the idea of turning my blog into a sketch-blog and posting up my portfolio once and for all (it’s been in development for nearly a year). It might sound a little ambitious, but I will get to it one way or another.

I have not forgotten about farfromfearless.com. I’ll be around.

Oh, I’ve been doing stuff like this when the occasion presents itself:

The creative industry has seen an incredible upsurge in companies adding “interactive” to their service offering, and along with that we have a number of other vendor companies which bill themselves as agencies with similar services.

If you are a student, you may want to consider that the idea of “working for the best” is more of a matter of determining where you can best hone your craft — in this case, web design or development.

Is there a difference?

Yes. But let’s take a step back for a moment and take a look at the question holistically.

The creative industry is comprised of many players, but you can draw a clean line right down the middle — I can say this because I’ve been on both side of that industry line.

The players fall into two distinct categories: the traditional Advertising Agency, and the Boutique Shops (vendors).

In the past, it was possible to make a distinction based on their portfolios, but given the current state of the creative industry, we need to consider what makes an ad agency versus what makes a boutique shop.

For the most part, ad agencies have a much broader service offering than a boutique shop. A traditional ad agency will typically offer their clients such services as: branding, messaging, conceptualization, and design. These types of agencies bill themselves as a “full service” agency as most of them include additional services like “media buying”. A full service agency also has the added benefit of several organization layers — management specifically designed to handle a large volume of projects.

The service offering of a Boutique Shop is considerably less. In most cases, a Boutique Shop will offer only a fraction of the services which an ad agency supports. The services are typically design, development, broadcast, post-production, etc. Companies like this have chosen to specialize in one field or another and offer their specializations to larger companies who outsource to them. A Boutique Shop does not [always] have the organizational layers to handle volume.

When it comes to Interactive Services such as web design and development — this includes flash, application programming, etc, — ad agencies typically rely on outsource partners to provide that specialization.

At this point I can already see the emails coming in to argue this particular point, but let me say this much: ad agencies can often provide “Interactive Services” through internal web-teams, but most of them do not. This as more to do with their particular focus in the industry (traditional media, print, etc).

Why the distinction?

The distinction has less to do with size than it does with capabilities. More specifically, it’s about the creative.

Advertising agencies want to own the creative on every level. Quality is obviously important, but the execution is not something they want to concern themselves with most times. The capabilities of an advertising agency are quite considerable, but again, this all relies upon their outsourcing relationships — printers, media, etc. An ad agency relies on the specializations of a vendor to help them execute a concept.

Boutique shops typically do not have the capability to execute a fully integrated campaign on a national level let alone a global scale. That is not to say that they can’t leverage serious partnerships to allow them to do that, but even then the campaigns are limited in scope — mostly online with limited if any offline components.

Interactive boutique shops know this. Quite honestly, most of them appear to be quite happy with this distinction. There are certain financial and client-related constraints which boutique shops do not have to worry about simply because they typically will not encounter them. On the flip side, you get the few who attempt to bill themselves as a full service “agency”. Well, nobody is being fooled, least of all the client (if they’re smart).

Don’t get me wrong — a boutique shop can be creative and have great ideas. Sometimes those ideas resonate so strongly that they propagate into a campaign idea or platform, which may or may not turn into a national or global campaign. But you get the idea.

Suffice it to say that what a boutique shop does is execute on components of a campaign. A boutique shop can do this quickly where ad agencies with internal web development teams might take longer — specializations remember?

Which is better?

Neither is better … or worse.

Ad agencies offer tremendous opportunity for creative development, where as a boutique shop might offer better opportunity for technical development. For students, an internship is an opportunity to challenge the way you think and work, and ultimately what you’ve learned. If you are a student, you may want to consider the company which offers you the best experience in terms of professional growth and opportunity, and not necessarily what looks best on a resume.

When it comes to interactive — web design and development — I strongly suggest interning with a creative company which will challenge the skills and theories you’ve learned in school. The work you may encounter as an intern is a direct reflection of the capabilities of a creative company (ad agency or boutique shop), so make the determination based on what you might end up working on, and what you can walk away with.

I fully intend to release it as open source.

The problem isn’t so much that I don’t have the skill to do it my self, it is that this application requires a level of artistry with code that I have not yet accomplished with one language (C++). And so, finding a developer with the level of skill has proven to be quite a task.

Sure, I’ve considered using online services like RentACoder, or GoFreelance and their like — but the problem with services such as those, is that you inevitably find a whole world full of ambitious developers eager to bid on your work, get the job done, and move on. That does not mean the work is top-notch, or that they are remotely interested in why I want to have the application developed.

Who can blame them? They are, after all, trying to eck out a living. And in the grand scheme of things, my application is just another grain of sand on the beach. But not to me.

So I am left with two choices: the first is to develop it myself, and through much trial and error, create something that modestly resembles what I had in mind; the second is to keep waiting, be patient, and hope that I stumble across a developer willing to work with me.

I can do it. I can be patient. But I don’t want to be, so I am asking for some help.

If you are a developer who, like me, sees the beauty in code. If you have no reservations about releasing the product of our collaboration to the world (the world in this case being creative writers), with no intentions of profit — contact me. I want to work with you

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.

This is not a good thing considering I the external drive was both my external storage and "backup" device. I use the term "backup" loosely as I don’t actually have a consistent backup policy. You would think I would have a policy considering I’m quite diligent about backups and redundancy for my professional work. But I don’t.

So now I am left with the dilemma of choosing between a very expensive data recovery service of which there is only a marginal chance of retrieving any of my data intact, or walking away from this small catastrophe and chalking it all up to a lesson learned. This is not enjoyable at all.

While I have yet to come to a resolution on that particular dilemma, I thought I might take a little time to expound (a little) on the benefits of developing a backup and redundancy policy. This is just a fancy way of me trying to encourage other writers to take the time to backup their work and ensure it is somewhere relatively safe.

So first off let’s consider offsite storage:

Don’t take your work for granted. If you’re a writer, a creative professional, or just have work that you do in your spare time which you value — don’t take it for granted that where you store your files locally is ever safe. As experience has recently taught me, anything can happen. In my case it was a simple mistake of plugging in the wrong power adapter to my external hard drive. I can only imagine other scenarios where data might be lost through carelessness, neglect, or by accident/design.

Second, if you value your work or value the time you invest into your work, consider investing a little bit of cash into offsite (typically online) data storage. Here is a brief list of services which others have recommended and which I am currently investigating (descriptions lifted from their sites):

1. SyncToy by MicroSoft - a free PowerToy that provides an easy to use, highly customizable program that helps users to do the heavy lifting involved with the copying, moving, and synchronization of different directories. Most common operations can be performed with just a few clicks of the mouse, and additional customization is available without added complexity.
2. Mozy - a simple and safe way to back up all the important stuff on your computer. A copy of your data is stored in a secure, remote location for safekeeping, so that in the event of disaster your data is still retrievable.
3. XDrive - the best alternative to other storage devices. Get easy backup and more secure storage with protection for your precious files. And all of this without the worry of losing or damaging a piece of hardware.

Caveat emptor: As always, be sure to read the EULA (end user licence agreement) or the terms of service and privacy policy before agreeing to use any online service. This is important as you need to ensure the rights of your work remain yours while sitting on some remote server. Understand what you or the service provider are responsible for and work accordingly.

Let’s also consider a version control system:

For those who do not get that warm and fuzzy feeling about offline storage services, you may want to consider developing your own backup service. This isn’t particularly easy — as most things to do with backup — but it is not impossible and in the long run, this will go a long way to developing a better sense of security when it comes to your work.

Here’s what you may want to consider when developing a personalized backup system:

A hosting package: The monthly cost of hosting is minimal these days and you can get away with setting up a decent hosting package for the price of a Starbucks Latté and cookie (not including initial setup fees). Here are a couple hosting providers that I have dealt with in the past:

• BlueHost.com
• DreamHost.com

A version control system: Okay, I know I’m on shaky ground here and many of you might be thinking this is overkill or way too technical for you — to be honest, you may be right. But this might also be exactly what you might need.

A version control system like "Subversion" is used by developers (and creative professionals), to create incremental versions of files they are currently working on. The most typical use is for code files (HTML, CSS, PHP, etc,). But this does not preclude you from using the system for other files (images, text, word docs, etc,). The beauty of a version control system is that is is both offsite and automatically creates versions for you. Not only that, but with most version control systems you can roll-back to earlier versions of a file (or group of files).

Developer services: setting up a version control system is not as easy as installing software on your computer, but in most cases you can hire the services of a local developer or alternately ask your service provider to help you set it up. Connecting with the system may require you to install a client, but once you get those components set up (and with some basic training), you should have little problem with backing up your files.

Things to consider

Though I’ve discussed — in general — a couple methods for backing up your files and handling version control, it is nothing without diligence. The lack of diligence is what landed me in this pickle in the first place, and I should know better consider the work I do professionally. It is not an easy thing to develop new habits, but if you are serious about protecting the integrity of your work, it is time well spent. I won’t go into detail about how you should accomplish this — that is up to you — but I can tell you that even if you haven’t lost work recently, you should consider it a dangerous probability. In the end, there are no true guarantees with ephemeral things such as digital files, but you can work to ensure that you minimize the risk of loss or damage.

Further reading

Matt Jadud discusses the topic of backups at length on his blog, which covers some of the more complex issues surrounding backups than I am disposed to exploring at this moment. Most of this was written a few years ago, but the principles there are still valuable.

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/

Perhaps the most visible addition to the theme is the sidebar where I’ve added box-toggling features through jQuery, as well as reformatted the "Recent Comments" box so the whole item is clickable.

Also, I’ve incorporated a simple feature into the comments display which allows you to quote any of the comments — there are some minor tweaks I am thinking of making to it, but it is functional and I’d like to hear what others may think of it.

I’m sure there are a half dozen other features that I’m probably forgetting to mention, but then again, most of the updates are code-based rather than design-based. I will release a build of this theme when I feel that I’ve tested it out with a live audience and tweaked the new features.

Let me know what you think!

UPDATE: As promised, I’m releasing Lemon Twist v2.0.36 theme. This is a significant update to the 1.5 and the 2.0 versions, the most current of which you see here. I’ve handled the majority of critical fixes and tweaked a number of IE6 specific bugs (not including [its lack of decent] PNG support). Here are some of the features that are available with this theme release:

• Code refactoring – I’ve made some significant improvements over how portions of the page are structure, as well as cleaning up the directory structure. You will find the root directory of this theme free of all the extraneous files such as the sidebar includes. All of the sidebar includes, style sheets, images, and JavaScript libraries are now contained in an include directory.
• Sidebar boxes now include a toggle feature to expand and collapse them — this is intended to give users some basic, temporary control over the layout. Future updates will include some persistence for the last state of each box.
• Comments — the comments portion of this theme has been modified to display the comment form at the bottom of the comments stack rather than as a sidebar box. An additional feature — the "Commentors on this Post" box — was created as a means to quickly jump to a particular comment on the page or see who has commented at a glance. Also, as I’ve mentioned earlier, there is now a feature to allow you to quote a particular comment; the implementation is rudimentary at the moment, but I will extend it further if it proves useful.

Please let me know if you find bugs and such — leave a report on this post — and I will add it to my todo list

I hope that everyone finds this new theme fun to work with as much as I have enjoyed creating it!

Download Lemon Twist v2.0.36 here.

Not surprisingly, the WordPress community was already developing methods to handle the browsing experience on the iPod/iPhone, resulting in a number of plug-ins such as: iWPhone and WPhone.

I chose to go with iWPhone as my plug-in of choice as it was pretty straight forward to implement and I took the liberty of making one small mod to it. iWPhone allows iPod/iPhone visitors to see an optimized version of your blog theme which is better suited for the kind of browsing experience it delivers. Here are some screenshots from my dev site (you will need to view my blog through your iPod/iPhone in order to see what it looks like live.

There are a few caveats when it comes to creating content for a iPod/iPhone WordPress theme, and two of the biggest gottachs are:

• Length of your content;
• Size of your images/media;

The first point isn’t an issue if you’re not the type to write copious content; however the second point is a stickler for all writers. When it comes to including media in your blog such as images and embedded video (that’s another issue), you have to have a method for dealing with the sizes intended for larger screens. Ideally, you have about 320px to work with, less if you like to use margins like I do. the iWPhone theme comes with a nifty little bit of JavaScript that goes through your markup and resizes all of your images. I have yet to extend it for other media (hopefully future-proofing it for when the flash plug-in becomes available). But other than those two points, there really isn’t all that much to hold you back from creating decent themes for the iPod/iPhone.

For some further reading on creating content for the iPod/iPhone, check out the Apple Developer Connection - iPhone Dev Center, and a little bi of “light” reading at the iPhone Human Interface Guidelines wiki.

This theme is quite dear to me as it’s been something I’ve tweaked and adjusted until it’s as perfect as I can manage — I hope that you can all enjoy using it as much as I have enjoyed putting it together. I’ve gotten quite a few compliments for this theme and it’s been listed a few times on sites like SmashingMagazine.com.

I’ve also released the Photoshop source files (*.PSD) for the main theme along with a handful of the additional components you might need for other pages such as the search results (which has a slightly different style for the results). Also, I’ve released the template for the comments area — this will give you the opportunity to modify it as you see if.

For details about the theme and instructions on installing it, check out the readme file. Also, please consult the plug-ins list before posting support requests. Here are some direct links to the theme and source files:

Download farfromfearless Lemon Twist v1.5 Theme
Download farfromfearless Lemon Twist v1.5 Source Files
View the ReadMe file here.

In any case, please feel free to use this theme for your blogs; as always, if you choose to modify this theme in any way, I would appreciate it if you could keep my credits in the stylesheet and a link in the footer. I still have plans to release my own colour modifications of the theme, and if you beat me to it, I would love to see what you come up with!

Merry Christmas everyone!

I’ll post more as I develop the series. Let me know what you think!

Edit:

Here are a couple new freakies that I created earlier — I thought I’d update this post rather than generate a new one. I may end up creating a new page altogether for these, but well see.

Mischief abound.

And for no apparent reason it seems. Between last night and this morning, I’ve done nothing to the settings and now that I’ve stopped in, all hell has broken loose. thankfully the mischief was manageable and the problems have been corrected. But that still leaves me puzzled as to what went on between then and now.

I’ve just now backed up my database, changed my admin password, and exported all of my postings and bookmarks etc., which I have been dreadfully complacent in. Lesson learned. I’m going to start backing up my postings on a more regular basis.

In any case, I hope this is an isolated event, otherwise I might have some serious issues (related or unrelated to the software — I hope never to find out).

For the most part, niche applications  like PowerWriter attempted to capitalize on the "more is better" syndrome that affect applications at the time. For the experienced writer, this wasn’t an issue. Most professional writers had their own tools and process for writing and needed little in the way of gadgets and gimmicks to be productive. What gimmicky applications did however, was to instill aspiring writers with the perception that they needed expensive, complex tools to be a successful writer.

It’s nearing the end of 2007 and while I still see many of those applications kicking around, there are also a handful of applications that forsake complexity in favour of minimalism — "less is more…".

Not surprisingly, most of these applications tend to be developed for the Mac OS. Perhaps this is simply and example of inspiration (Apple is well known for their minimalist approach to hardware and software), but whatever the case, the trend seems to have caught on, and there seems to be more applications out there that shirk complexity.

Mac OS Applications for the Creative Writer:

Here are some examples of Mac applications that follow a "less is more" philosophy (in comparison to MS Word and other word processors):

Avenir

What they say: Avenir is a new kind of software for writers. Part word processor, part database, completely focused on the creative process. Whether you are brainstorming for your first short story or putting the finishing touches on your latest best-seller Avenir provides the tools you need to manage the creative process from inception to publication.

Scrivener

What they say: Scrivener is a word processor and project management tool created specifically for writers of long texts such as novels and research papers. It won’t try to tell you how to write - it just makes all the tools you have scattered around your desk available in one application.

Ulysses

What they say: Ulysses was developed mainly for writers who work creatively with text and want or need to realize large amounts of text. With traditional word processors and text editors, the user is either being promoted to the job of a type setter or needs to bother himself with other inadequacies those applications have.

Writeroom

What they say: WriteRoom is not Microsoft Word. It won’t generate a table of contents, it won’t place borders around your documents, and it doesn’t have an animated paper-clip looking over your shoulder. Instead WriteRoom just provides the essential features required to get words on the page. Stay focused with WriteRoom’s distraction free environment. Stay on track with word count. Stay safe with autosave. You just type, and WriteRoom will do its best to stay out of your way.

Z-Write

What they say: Z-Write is a unique word processor designed for creative writers. In the process of writing a story, writers tend to create dozens or even hundreds of pages of notes, character bios, rewrites, reminders, and bits of research info. Organizing all that material within the linear structure of a traditional word processor is awkward at best… Z-Write changes all that. It allows you to create an unlimited number of Sections and each Section can have as much or as little text as you’d like.

Windows Applications for the Creative Writer:

Here are some examples of Windows applications that follow a "less is more" philosophy (in comparison to MS Word and other word processors):

PageFour

What they say: PageFour is a tabbed word processor and outliner for writers. It has a simple structure based around Notebooks. Each Notebook contains as many Folders and Pages as you wish, and is structured in whichever manner best suits YOU. Every writer works differently, and PageFour recognizes this.

JDarkRoom

What they say: JDarkRoom is a popular, simple full-screen text file editor with none of the usual bells and whistles that might distract you from the job in hand. If you are writing a novel, essay, thesis or just need to be able to concentrate on your writing, then JDarkRoom may help you.

DarkRoom

What they say: Dark Room is a full screen, distraction free, writing environment. Unlike standard word processors that focus on features, Dark Room is just about you and your text.

…

That’s it in my opinion. Sad isn’t it?

Windows continues to foster bloated applications, and when it comes to software for Creative Writers, it becomes increasingly frustrating to find anything that’s remotely productive. Recent versions of windows haven’t overcome that hurdle. Keep in mind however that this does not really take into account text editors.

I love text editors simply for the fact that most of them claim to do only one simple thing, and that is to edit text.

Software developers seem to overlook the fundamental task of a writer: to write. And really, if you think about it, what more does a writer need than something to capture their ideas and thoughts. In the publishing world, they have typesetters who specialize in formatting. It’s what they are paid to do, and it is what they excel at doing. Writers need not deal with formatting to the extent of becoming typesetters. About the only time that writers can legitimately (and successfully) attempt typesetting, is when they’re ready to submit and so, must follow some basic (very basic) formatting guidelines for their finished pieces.

While it’s true, some text editors overstep their bounds — most of these text editors are aimed at developers (see: Text Editors on 43Folders) — there are a handful that do what they’re intended to (I’m not going to promote MS NotePad — it’s just a P.O.S in my opinion).

Examples of Windows-based text editors:

Here are some examples of text editors that I use for various purposes, but have at one point or another been my tool of choice when writing.

MetaPad

What the developer says: Once upon a time, one of the most useful programs for everyday use was known as Microsoft Notepad. I realized that Notepad was quite powerful and did a lot of what I wanted in a simple text editor. Yet I found the user interface to be unlike most 32-bit Windows applications and actually quite poor…

MetaPad is a small, fast (and completely free) text editor for Windows 9x/NT/XP with similar features to Microsoft Notepad but with many extra (and rather useful) features. It was designed to completely replace Notepad since it includes all of Notepad’s features and much, much more.

Phrasis

What the developers say: Phrasis is a is a stripped down text editor. We want to remove any feature that might hinder the productivity of a professional (or serious amateur) writer and add any feature that would increase the efficiency (of must our users). Therefore, we’ve created an interface with only the bare essentials, no menus, no formatting features and no nonsense.

The right tool for the job

I leave it up the individual writer to select their tool of choice; I’ve worked with almost all of these packages at one point or another, and many of them have great features and strengths. I continually find myself coming back to text editors. If you’re sick of both word processors and text editors, you can always fall back onto older methods — hello, DOS applications!

If you have come across applications that you feel meet the task of a writer, please feel free to comment. I would love to compile a more comprehensive list of applications that other users have experienced and are satisfied with, rather than trolling Google and reading dubious reviews.