UPDATE: 4/11/10

After exhausting every idea for finding/fixing the missing images, I’m admitting defeat. I have no clue how this happened, but my entire /uploads folder has disappeared from my WordPress installation (both locally and on the host). This of course contained all the images for everything published here since the inception of this site.

After checking with my host, scanning Time Machine and scanning for any duplicate or legacy stuff I might’ve forgotten on MAMP, I only came up with a handful of images.

The point is, recovering what’s missing does not interest me. The images would have to be recreated and frankly, most of my older entries probably don’t have much relevancy at this point anyway so I’m calling the game.

I’m working on a “reclass” of this site anyway – a major shift away from blogging as it’s currently known. A big chunk of old posts have been purged. Only a select number of posts remain now for posterity.

So, what is a theme framework really?

Most developers already have a broad sense of what a framework is but in granular terms (as it applies to WordPress theming), a framework is basically a large-scale template (or outline), which presents a way of rapidly developing themes based on common axioms. Did you catch that? It presents a way. So a WordPress framework can mean different things to different people.

It may be a collection of modularized style sheets, scripts, or plugin support files set in a distinct hierarchy. It may be a minimally styled theme with hooks, custom functions or microformats. It may be a theme devoid of styling, but with a semantically rich set of classes applied to the markup. (Technically, even this is a framework.) Regardless of what’s included or discarded, one certainty is that each framework will have a particular style of organizing, coding and referencing the components within it.

Based on this explanation, we can at least deduce that frameworks are NOT:

• a one-size-fits-all theme (such a thing doesn’t exist in my book)
• a formula that every developer/project can adhere to
• an all-encompassing solution (that kind of thinking only kills creativity)

So what’s the big deal about frameworks then?

If you can concede the points above, only then will you begin to see the potential. There is no ONE framework that will fit every developer’s style or every project’s need. The idea of a framework was never intended to be a singular answer. Those who misinterpret it as such will never realize the value therein. If you recognize there are benefits to using one but don’t quite know what they are, here’s a few things frameworks can do:

• offer a stable, methodical way to approaching projects
• expedite repetitive tasks
• reduce the margin for error
• simplify the provision of customer/client support
• provide an easy, future-proof alternative to theme customization (i.e. child themes)

Sounds great right? I can’t imagine why anyone wouldn’t want those things… but not everyone has the ambition to create a framework and of course there will always be skeptics of the whole concept. The question is, could you benefit from a ready-made templating system? Yes, if one or more of the following applies to you:

• I’m a developer in need of a remedy for the obstacles and time-sinks that come with coding from scratch
• I’m a designer searching for a way to increase productivity or streamline my workflow when it comes to post-Photoshop development
• I’m a developer looking to adapt a framework to serve my own needs, improve my product line or enhance my support system for existing products

Wait! I’m a consumer and I just want to know what this has to do with me.

Well, you’re in luck. Customers may have the most to gain from frameworks. When you use a [child] theme built on a framework (such as Thematic, just for example), the author can provide updates and/or new functionality when it becomes available – and you won’t have to worry about losing or rewriting your customizations every time! If you doubt it, jump on Twitter and ask Ian or Nathan. They’re big proponents of protecting customer modifications.

I’m interested. How do I know if a framework is reliable or suited for me?

A surge of frameworks have already been released and I’m sure there’s more to come, but only you can make that determination for yourself. That’s one drawback of frameworks. You may not really know until you work with one for a while. Unfortunately, if you must experiment with several before finding something you really like, that’s a significant investment of time and a big deterrent – especially if you fall into one of the aforementioned categories.

I’ve never been deeply set in a particular workflow and I find the concept of using a framework very interesting, so I’m willing to investigate the possibilities of someone else’s ideas. I’ll adapt what is useful, reject what is useless, and create what is specifically my own. Perhaps I’ll release the result someday. For now, I’ll refer you to the following list of framework candidates:

Sandbox – Probably the de facto of theme frameworks… or at least it used to be. In the early days particularly, Sandbox lived up to its name by being the theme that everyone tore apart to learn from and build derivative works with.

Sandbox theme by Plaintxt.org

K2 – described as an advance template, K2 is perhaps the first to support sub-templates called styles (or what is now more commonly known as child themes).

K2 theme for WordPress

Thematic – The brain child of Ian Stewart, Thematic is establishing itself as the “go-to” theme. Quite a bit of ingenuity went into the building of this framework, and it continues to improve with each release. It’s also well supported, with a growing community of enthusiasts.

Thematic by Themeshaper

Theme Hybrid – With over a dozen custom page templates and widgets galore, Hybrid is another framework making waves (so to speak). Justin Tadlock is the developer behind it and like Ian, he has also established a strong community with equal support. Additionally, Hybrid has been translated into an impressive list of languages besides English.

Theme Hybrid by Justin Tadlock

WP Framework – On par with Ian and Justin is Ptah Dunbar, who created his own version of a framework. While it hasn’t been around as long, the author has regularly released maintenance updates.

WP Framework by Ptah Dunbar

Carrington – This framework is a bit different in that it’s designed specifically for use of WordPress as a CMS. It’s developed by a small but talented company, is very well documented and has a ton of actions and filters which can be employed. It’s a bit intimidating at first but I think given the time, a developer could really run with it.

Carrington by Crowd Favorite

Vanilla – While not necessarily described as a framework, it is based on Carrington and appears to be a lot of potential behind the idea.

Starkers – Developed by Elliot J. Stocks, this is mainly just a “naked” theme, which actually stemmed from K2. For those with simple requirements, this could be all the framework you need.

Whiteboard – Within the same school of thought as Starkers, this framework is another blank theme type.

Empty Canvas – Also falling into the blank theme category is the appropriately named Empty Canvas. While not described by the author as a framework at all, it could still serve as one based on what we deemed a framework to be in this article.

Thesis – Although marketed as a framework, the fact that Thesis is 1) a full commercial theme and 2) geared mainly for the end user who doesn’t know HTML/CSS  – disqualifies it in my opinion. It’s also my understanding that it contains quite a bit of proprietary code. It would be difficult then, to determine where the framework “outline” ends and the developer specific code begins. That said, Thesis is still worth mentioning here because with it, Pearson has pushed the envelope of theme development and introduced other devs to some exciting new possibilities.

Summary

This article was not designed to advocate frameworks nor deny their usefulness. Every developer is different and has a unique way of approaching a task or completing a project. The intention was simply to inform and motivate those who seek to understand frameworks and what their cabapilities are, to debunk any misunderstandings and to showcase particular works which I feel could benefit a variety of developers who make their living with WordPress. I sincerely hope it was a helpful resource. As always, you’re invited to add your thoughts on the topic below.

Use Whitespace to your advantage

Space and proximity are very important in any form of visual communication. Without them, you just have clutter. All the care you put into creating a color scheme, typographic treatments and custom graphics won’t get more than a glance unless it can be processed. Elements with room to breathe are easier to identify, read and often give weight to their importance. Andrew Bradshaw, who has done some amazing work for Christian organizations, employs this tactic on his portfolio site. Liberal use of space and carefully balanced elements give the site a very clean appeal.

More examples with good use of whitespace and proximity:

• Oaktree Creative | Pixel Umbrella | Tunnel7

Emphasize with typography

Elements that appear larger than their surrounding counterparts stand out. Take a look at Envato’s AppStorm. They use big bold titles (supported by a subtle horizontal rule and much smaller meta data) to separate and call attention to individual articles. A brief but sizable main navigation is also prominently displayed and by keeping that simple, they’ve guided the choice visitors can initially make – but without removing any options they know people will be looking for.

More examples of this technique:

• Pixelcraft | Chama Inc. | Big Spaceship

Don’t be afraid of color

Bold or bright colors can signal importance and/or effectively set things apart, as demonstrated by Wufoo. Yes, the whole site is a feast of color but selective use of it to encase the finer points of their product indeed draws the eye and there’s no question about what you can do there. Such heavy use of color can be risky, but in many cases it’s the perfect compliment to the material being featured. Particularly in this instance, people definitely remember Wufoo by its vibrant colors.

More examples of attention-getting color in design:

• Chris Spooner | Cork’d | Silverback

Add texture or light (or both!)

Texture and light are two timeless ways to create interest in a design. Texture can signify drama, whimsy, tranquility, age… the possibilities are limitless. Light (or shadow) can add depth, create a specific mood or bring meaning to an element, as seen on Pixelight Creative. The lighting (combined with a pixelated background texture) not only illuminates the logo, but actually symbolize it.

More cool examples of light and texture

• Matt Dempsey | Junaid Hanif | Mike Precious
  

Use Geometry

Geometric shapes, lines or patterns (especially those with dramatic tones) can also give elements a distinction. Blogger and Woo Themes co-founder Adii exemplifies this on his personal site. He used dark, contrasting lines to spotlight his brand, the self-proclaimed rockstar persona. The position and directional flow of the lines also effectively lead the users’ eye on down toward the content.

More examples of geometry for emphasis or movement:

• 31Three | Mozilla.com | Line25

Iconography does wonders

Icons are to web design what garnishes are to tropical drinks. Imagine this design without them. Such a dark style would be rather lifeless without some kind of imagery. But with the right selection and placement of icons against the dark background, GoodBarry was able to highlight the features of their product while enhancing the design.

More examples of clever iconography:

• Vimeo | Coda | EventBox

Examine the overall composition

Sometimes a site can be quite engaging just because of the way information is organized and presented. One of the most attractive and unique examples I’ve seen recently that can illustrate my point is Squared Eye. The design utilizes almost every aspect covered in this article (barring icons). It’s colorful and fun, well spaced and balanced, has a terrific sense of typography and even incorporates very subtle patterns and lines for separation/emphasis. As designers we sometimes focus so intently on the details that we forget to look at the bigger picture we’re painting. Stepping back to examine your layout and whether elements are appropriately relating to one another can ensure your design gets the attention it deserves.

In Conclusion

A design must strive to accomplish two things: 1) funnel visitors toward what they want and 2) promote the site’s goals (hopefully without impeding the former). Every color, image and body of text should have a purpose and work together to form a cohesive unit… a basic concept. Remember, people come to you for a reason. Consideration of what your objective is vs. what their expectations are will help guide your design decisions, and any of the techniques above can be used to effectively communicate what you have to offer.

AI – Information Architects

iA - Information Architects

Sofa – design, interfaces and software

Sofa - Design Interfaces and Software

i love typography – typographic inspiration

i love typography

Checkout – Get a Mac. Start a store.

Checkout

p41 Studios – human centered design

P41 Studios

live.squarespace – the Squarespace team blog

Squarespace Team Blog

Garrett Dimon – designer/developer

Garrett Dimon

44Forks – From etiquette to Netiquette

44 forks

Andy Rutledge – design strategist

Andy Rutledge

Mark Boulton Design

Mark Boulton Design

The Netsetter – startups web business

The Netsetter

Konigi – user experience design

Konigi

Midmo Web Design

Midmo Design

Rodrigo Galindez – designer/author

Rodrigo Galindez

Outspoken Media – SEO, marketing and consulting

Outspoken Media

Warpspire – web design and code geekery

Warpspire

Jon Tan – creative director, Omniti

Jon Tan

Omniti – web design and development

Omniti

Phil Coffman – art director/photographer

Phil Coffman

Monday by Noon – front end developer

Monday by Noon

Chris J Davis – designer/developer

Chris J Davis

Hivelogic – lead a simpler, more mindful life

Hive Logic

Artypapers – web apps and design

Artypapers

Max Voltar – freelance interface designer

Max Voltar

Habari Project – next generation blogging

Habari Project

5thirtyone – personal blog of Derek Punsalan

5thirtyone

Upstart Blogger – guide to creating, maintaining and profiting from a blog

Upstart Blogger

Boxes and Arrows – graphic design and information architecture

Boxes and Arrows

The Grid System – the ultimate resource in grid systems

The Grid System

Additional Resources

Hungry for more? These gallery sites focus entirely on minimalist design:

• Minimal Sites
• Minimal Showcase
• Site Inspire

These artists elsewhere:

• Coldplay | @coldplay | last.fm
• Greg Laswell |@greglaswell | last.fm
• Snow Patrol | last.fm
• Sheryl Crow | @sherylcrow | last.fm
• Joe Purdy | @joepurdyrecords | last.fm
• Counting Crows | @countingcrows | last.fm
• Van Morrison | last.fm
• Ryan Adams | last.fm
• Ray Lamontagne | @raylamontagne | last.fm

There are so many others I could list. It’s hard to pick favorites because I have so many. Do we have similar musical interests? See me on last.fm! Feel free to add your favorite artist or album below. You might also want to check out Danny Outlaw’s music of design.

For coding (and sometimes writing) that usually means no lyrics. Instead I reach for the rhythm and rhapsody of movie scores. They are a great alternative to traditional classical music, which I don’t favor as much.

The Pursuit of Happyness

My first and favorite choice. This is such a delightful album, I was hooked immediately. Most of the tracks have a lively pace, but not at all frantic. With an optimistic feel to it, this is a great choice for tackling a challenging project or task you don’t exactly relish. ;)

Composer: Andrea Guerra

The Pursuit of Happyness

The Time Machine

I loved this soundtrack long before seeing the movie (which almost ruined it actually). I even selected the piece “Wish Me Luck” to play while I walked down the aisle when John and I got married. :) Overall the album has a wistful appeal. It’s great working music, though I did uncheck two of the songs in iTunes because they were very jarring to me.

Composer: Klaus Badelt

The Time Machine

Armageddon

For days when you’re feeling particularly enthused about your work. Many tracks have an upbeat, motivating tempo but never to the point of distraction. Some electric guitar compliments the piano and strings in an unexpected way. It’s edgy, in a good way.

Composer: Trevor Rabin

Armageddon

Martian Child

Perfect if you need a bit of soft music to ward off a dull silence. There’s nothing particularly engaging about it – in fact at times I don’t even notice it. That’s the best part actually. There are no sudden screeches or major crescendos. You can put it on and just work.

Composer: Aaron Zigman

Martian Child

Finding Nemo

If you prefer music with a lot of “movement” to keep the pistons in your brain firing, this will do the trick. Simultaneously happy, inspiring, soothing and energetic. I unchecked a few songs for the same reason stated above, but altogether it’s a splendid listening experience.

Composer: Thomas Newman

Finding Nemo

Gladiator

I think Hans Zimmer ranks among the most talented composers of our age, cranking out masterful scores like Pirates of Caribbean (also in my library) and The Da Vinci Code – but Gladiator is my favorite. Giving a sense of empowerment, it’s very affecting yet easy to listen to while you work. The last three tracks in particular make the album.

Composer: Hans Zimmer

Gladiator

Legends of the Fall

Both haunting and lilting, this was a tough choice to feature over two other soundtracks by James Horner that I own (Braveheart and Titanic), which are just as frequently played. But Legends is one of the first movie scores I ever bought and I’ve never grown tired of it all these years. That says something.

Composer: James Horner

Legends of the Fall

Did you like this post? Stay tuned for Music for the Designing Soul coming up next. You might also enjoy the list of music you can work to on design:related. What do you you listen to when working with code? Add your favorite in the comments!

But I’m getting ahead of myself. Lemme back up.

Built by the folks at Panic, Coda is the first web development application with which you can code, FTP and test your creations using a single, unobtrusive interface. It’s very easy to learn, and offers some extraordinarily useful features. Panic’s focus here is clear: simplify the development process by eliminating unnecessary windows, and rolling the important ones into a single tidy package. Well they pulled it off, and very well!

Highlights

The first really impressive thing about Coda is the built in browser – and we’re not just talking about a WYSIWYG type “design view”, but an actual preview for static and dynamic pages. The default engine is Safari, but you can change it to Firefox or any other browser you have installed.

On that note, Coda really shines with its document split feature. Split a file (vertically or horizontally) for simultaneous code and preview modes. Need multiple splits to work on more than one file? No problem. Use one split to preview and two more for code view.

Another useful tool is the DOM hierarchy inspector, which works like the Web Developer plugin for Firefox. Highlight, lock or unlock any element of a site you’re working on to see the associated class or ID name in a “breadcrumb” style breakdown at the bottom of the Coda window.

Once you have a section locked you can then move around by clicking any element in the trail of the DOM. There’s also a JavaScript log, which could be considered Coda’s answer to another plugin – Firebug, for finding and debugging errors.

Next up we have Clips (think Snippets in Dreamweaver). What’s useful about Clips is that you can build your own library of code snippets (with or without wildcard placeholders), then assign hotkeys for dropping them into your pages. There’s even a community Clips library to get you started.

Coda’s solitary, uncluttered window is far more appealing than Dreamweaver’s UI, which is sometimes overwhelming and irritating with all the panels that you can accidentally move or float if you get careless with the mouse. I’m not crazy about the file viewing system either.

Coda does a nice job of keeping that simple and easy to navigate. Double clicking a folder takes you into it, rather than just showing/hiding its contents. Once there, you see only the files in that folder – but navigating back up the hierarchy a step or all the way to your home folder is one click away.

Publishing is a snap too. Coda tracks the files you have modified or saved and gives you small visual cues in the sidebar. Click the “up arrow” icon to publish one file at a time, or use the ‘Publish All’ button to upload everything.

There are many more cool features in this application. I could go on but that’s Panic’s job. ;) This is a review, so I’ve got to cover the cons too…

What’s Missing

A lot of simple functionality is missing from Coda. A few of my annoyances include:

Remove Comment/Collapse Code – one of Dreamweaver’s nicest features are the one-click utilities alongside the code view panel. It’s nothing to comment/uncomment PHP, HTML and CSS. Particularly, the absence of an expand/collapse code feature is a disappointment.

Copy Files – I might feel stupid later, but I couldn’t figure out how to copy files or folders between sites! The obvious workarounds are 1: duplicate then move the file, or 2: right click a file and select “Show in Finder”, then copy/paste to a new location in Finder. Either way, these are time-wasting extra steps.

Find All – the ability to search not just documents but folders and entire sites is critical. I’m floored that’s it’s missing. Sometimes I just want to see a list of every occurrence for a particular item, without replacing anything. Unfortunately Coda only let’s you replace all without seeing all.

Shortcuts – the lack of key commands is most noticeable when working with multiple files. Reaching for the mouse to click a tab every time really slows things down. Switching tabs via key combo is must so faster, and could even extend to switching the focus between splits or views as well (i.e. Edit and Preview). If there are commands for this please set me straight.

Compare Files – you cannot view local and remote files simultaneously, and there appears to be no syncing or comparison functions.

Clips – (suggestion) opens in a floating module which lays atop the window. It would serve better if tucked into the sidebar like the Symbols feature.

Summary

Coda is still in its infancy (v1.1 at this time, with 1.5 in limited private beta), but it has the potential to become killer development software. Even now what makes Coda so attractive is not just the pretty interface but the price tag – a mere $79. It’s a solid app, without a significant investment, and has a great many enthusiasts to talk shop with.

Good actions give strength to ourselves and inspire good actions in others. ~Plato

Cultured Code ran with that concept and worked it into a sweet little app called Things. I picked it up about a month ago when I saw that it was available for beta. I was hooked right away. Quite honestly, it’s been more useful than any other project or task management software I’ve tried so far, because I actually use it!

The problem with most project oriented apps is that they’re hard to learn or adjust to. They also seem counterproductive at times, eating time instead of freeing it. Navigating can be cumbersome, and of those I’ve tested – the overviews left much to be desired. I often spent more time in the app than working on tasks, or never bothered to add them in the first place because it took too long. With Things there’s almost no learning curve, so you can add (and get moving on) your projects very quickly.

Right away you get a sense that it’s easy to manage – and it actually is. I dare say it’s even fun. ;) The interface is sleek, uncluttered and almost too simple, but not to the point that it compromises functionality. Things puts your tasks in front of your nose in a way that you don’t have to wander around the app to find what it is you really need to do.

Create multiple Projects or Areas of Responsibility and add multiple items to them without losing sight of anything or having to endlessly drill down. This app really shines when it comes to overviews, in my opinion. Switch between several views with just a click – Today, Next, Someday and Scheduled. Things will show you the info you need and not what you don’t. To access details for individual items simply click on the folder for that Project or Area. Don’t have details yet? Use the Someday feature to drop in something you have no specifics for, then move or edit it accordingly later.

Like tags? Things is on board. Add tags to dynamically group items, or use the search filter to find items by tag, title or note. That’s right, you can add notes (of course!) to any task. Things will keep them out of your way too – but never out of reach. Notes are neatly tucked into each task’s module. Just double-click to see associated notes and tags, set a due date or make a task repeatable.

Quickly add, edit, delete or reorder your tasks or Projects. Color coding and highlighting lets you know immediately what is done, what needs done, what has been updated today… the works. Best of all, Things keeps your lists tidy! Via preference setting, you can have it automatically move completed items to a Logbook each day, week or month.

I am really impressed with this software considering it’s only in beta. There are a few minor usability issues (the drag/drop capability and repeatable tasks are still somewhat limited), but the developers are working on them. I have to wonder how Things would hold up to large team usage as well. It seems targeted mostly toward small agencies or freelance types. Then again I don’t work in a team so I can’t comment on that. Overall, I think Things is already well worth the reasonable $50 price tag for the final release.

First, some Diagnostics

One quick way to figure out how many queries your blog is making is to insert this little snippet somewhere in your footer:

<!-- <?php echo get_num_queries(); ?> queries -->

After uploading, refresh and view source on whichever page(s) you want to check. The number of queries will be variable. My homepage has 41 queries for example, while most other pages have 10-17. That at least indicates where I need to make improvements.

For a more comprehensive look at your site, get YSlow. It’s is a terrific little Firefox add-on which runs analysis checks and reports back with suggestions for improvements. Also ties right in with Firebug.

Purging Code

There’s always some new blog thingamajiggy being released. If you get excited about widgets and plugins, then just as quickly get bored and uninstall them – don’t forget to remove the snippets which call the functionality!

Do you use multiple stats programs? You might consider picking one or two, then removing the excess javascript for the metrics you abandon. The header.php and footer.php files are the two biggest culprits for user added, load-bearing code… and they’re easy to forget about. Deleting unnecessary tags from your header may also be beneficial.

Maintaining a Healthy Database

How long has it been since you opened up phpMyAdmin or took a gander at your database? If you install/uninstall a lot of plugins, it might be in need of a tune-up. Clean Options can help with that task. Basically, it sweeps up orphaned data from the Options table. It has limitations, but it’s a great start.

Out With the Old

One word – Categories. Do you have way too many? How about reeeeeally old posts which are not only irrelevant now but possibly riddled with broken links? And what about plugins you were using prior to the release of 2.5 which are now (or will be) deprecated? Things like Search Everything, Click Tags and most Avatar plugins come to mind, because the functionality for each is now supported in the WP core. Remember, even deactivated plugins just sitting on your server can bog down load times!

A Need for Speed

Geekery is a wonderful thing (especially the WordPress flavor), and thanks to people way smarter than me there are plugins like WP Super Cache, which will help tremendously if you have a large database, or take a Digg hit.