Hopefully, things will slow down enough in the next 3 months so I can get more writing done.  In fact, I’ve got about 50 draft posts sitting here in WordPress, but I haven’t even had the time to proofread and finalize them.

This January I turn 30 years old.  Here’s to the new year—see you again in 2012.

Since this site is built on the WordPress platform, it was my expectation that updating work on-going would become a trivial task.  That has not been the case. It almost goes without saying that no matter how powerful the tool is that runs your front-end, if you don’t have the time resources allocated for maintaining such a tool, it’s going to fall behind without fail.

I’m a pretty busy guy these days, so add to that my on-going responsibilities to my clients, and it becomes much clearer how I have lagged behind so easily. I also ventured into yet another start-up company three months ago, so that has been eating up free time too. There’s also those other super important factors in life like personal time for myself, and family time with my fiancée and our dogs. All of that combines for one busy person, who at the end of the day, wants nothing to do with updating his portfolio of work.

Alas, here’s the point that I do want to make. What has really kept me from eliding my ambitious vision of my portfolio with reality comes down to the laundry list of updates I have slowly hooked up to the back-end over the last ten months. And since this journal is supposed to be about user interface design and discussion on user experience, I figured today’s iota of free time makes for a great opportunity to shed light on a UI/UX change I made recently.

For years, I have always been confused by the semantics of using the “Next” and “Previous” terminology in a blog’s structure. Should I happen upon the home page of a blog, then these semantics have a stronger chance of ringing true to their intent. Think about it like this: If I am on the front page of a blog, then the only logical meaning for “Previous” must be that it is referring to content that is previous in time to what I am currently viewing. There is no newer page than a landing page, which is—most often—intended to carry the most recent content. Simple enough, for a home page at least.

What is the user experience though, should someone land smack in the middle of your blog archive, reading a post that is several months or years old? At that point, I feel like the navigational compass storms into a tailspin. In this case, what exactly is “Next”, and what exactly is “Previous”?  Is “Next” forward in time, or backwards in time? Each person will have their own personal interpretation of these semantics.

In order to remove the likely chance for this confusion on my own journal, I stripped out the anonymity, and opted instead to use “Older” and “Newer.” Now, regardless of what archive page of my journal someone lands on, they can at least assume an obvious indication of which direction in time they are navigating with my buttons. If you’re using WordPress, or some other similar world-class blogging engine, the good news is that this is a simple tweak to make. Read the article in the WordPress Codex here to find out more.

Far be it from me to tell anyone how to run their blog, but I would urge website owners everywhere to at least take a moment and consider the usability implications your semantics convey on your site. Something as simple as these text changes could be the difference between converting a user, and a user clicking away from your site out of timeline frustrations.

After reading a long and informative—but damning—post on Quora about the origins of the Internet Explorer browser, I was motivated to write this post on what I love about Internet Explorer.  I’ve used the infographic above for the sake of simplicity and straightforwardness.

Ok, I have a bit of a confession to make. This year, 2011, marks the first year I have owned a smartphone. Although keenly interested in technology, I am by no means an obsessive gadget freak. I still hold on to the belief that there is no good substitute for old-fashioned human interaction and, being a bit of a stubborn pollack, did not previously see the benefit of having a smartphone. Yet when my mobile service contract expired earlier this year, I found myself in the market for a new mobile phone. Long story short, I ended up purchasing an HTC EVO 4G on a whim. And let me tell you, I have never been so thoroughly impressed with a device. However, one thing that became apparent after a few weeks of ownership was that the selection of quality apps for Android devices is quite meager in comparison to its major competitor, iOS.

Now I don’t consider myself App obsessive, but I was on the hunt for any useful App that didn’t completely offend my aesthetic sensibilities (which for Android users can be a heck of a challenge). Enter Springpad, a simple—yet powerful—task management app available for Android and iOS devices.

Features
At it’s core Springpad is an exceptionally easy-to-use task management App. The fine folks over at Spring Partners have crafted a finely tuned task-management experience which allows you to quickly and easily create & organize tasks via either an elegant mobile App, or the distinct web interface. Adding a task is as simple as clicking a button and labeling the task. You can also add extra notes in the form of text, audio, video or bookmarks. For advanced users who like to micromanage their tasks you can add dates and categorize them.

All of this comes packaged up in a beautiful, simple-yet-elegant user interface which makes performing something so mundane as creating a task-list attractive and painless. Before you know it you’ll have multiple lists for all the things in your life that well, require a list!

Summary
I have never found myself so task-oriented since utilizing Springpad’s free task management services. The App works like a charm on my Android phone: it synchronizes seamlessly to a linked web account (for those of you who hate using mobile keyboards you can enter all of your tasks using the web UI), has an intuitive and beautiful interface, and is just plain useful. And, having started using Springpad to organize tasks for both my professional and personal life, I fear that I am becoming just a slightly more efficient human being (*gasp!*).

I really can’t say enough good things about Springpad. Should it happen to turn into a paid App I would gladly dole out some cash for it. All other Apps take note: Springpad is elegant and powerful in it’s simplicity, and most importantly, useful.

Derek Kapa is a graphic designer living and working in Southeast Michigan—the best state in the Union—and bides his time between work, freelancing, lifting heavy objects, and video games. You can click the following link to view his graphic design portfolio.

Last week I had the supreme pleasure of accidentally happening upon Soles for the Soul, an ecologically-minded handmade footwear business. A week later—after some minor back and forth with the owner—I submitted my order for a pair of Ares shoes from Soles for the Soul (rest assured that the delay in getting my order was my own fault). I found Soles via Facebook through a friend, of a friend, of a friend—I guess that’s just how things work these days, huh? My friend-twice-removed posted a really classy looking shoe design on his profile, announcing he had just received his order. I clicked through to the photo to get better details in the larger photo, and I knew right away that I needed to get myself in a pair. The photo caption (and product design) spoke to the sustainable materials used, which got me burning to do whatever I could to get an order in and talk to the people behind this operation. So I did just that. After a brief back and forth on Facebook, I had a direct line to Soles for the Soul, and its sole proprietor, William Conklin. So I picked up the phone to talk about the shoes, the materials, the vision. Here’s what Mr. Conklin had to say for himself.

Dylan Mullins: Good morning, William. I’m at work right now, but I’m a multi-tasking fiend and I don’t want to lose the chance to talk to you. Let’s talk a bit about you and what you’re doing with Soles for the Soul.

William Conklin: Thanks for calling me, man. It’s really exciting that you’re so into what I’m doing here with Soles for the Soul.

DM: Talk a little bit the vision of Soles for the Soul in general. How did you get started doing this?

WC: This is a one man show that got started about 4 years ago with me making shoes for myself. Like my current customers, I was dissatisfied with the shoe designs I was finding out in the market. I was still in design school at the time, so I was not leashed to anyone else’s design demands. It wasn’t until last November that I even thought to do this as a business. Once I was in that mind frame though, I began experimenting with form and function, and learned more about the craft in general to develop my first product line carte blanche. Now I definitely see myself as a vehicle for creating what people want out of footwear. I have customers who are very frustrated that they too are looking for something in particular, but no one is making it. It makes me happy as the product creator, because I can not only make what they’re looking for, but I get to do what makes me happy as well—creating this sustainable business, which is what I am most passionate about.

DM: How did you get to where you are now with your current offering of footwear designs?

WC: It started off with the Wonderboy and Deluxe designs. Then people said they liked the Deluxe, but they wanted something that was a little more summery feeling, and not so old-school. Based on the demand of that, I’m being rewarded by being able to create the Ares design.

DM: The Ares is definitely the style I want. I’m thinking a dark grey on black will look real fresh and classy. Speaking of orders, what kind of volume are you doing right now?

WC: It depends. Orders are kind of random at the moment, especially with the website being in the unfinished state it is. My girlfriend and I are working closely on the new website. She’s a graduate from UNCG in the design program there and is working freelance right now, so I have been developing the Soles for the Soul brand closely with her. We have developed an interactive shoe builder for the website, but it is not live yet because we are still working on the payment processing aspects of the site. Production wise, if I have a four order week, I’ll try to work on two at a time constantly so that I can have free time to work on these other piece parts of the overall vision. Recently things have picked up a bit and I’ve doubled my orders, so orders are rolling in quickly.

DM: What about the process and the tools you use?

WC: I’m experimenting with a new process a little bit right now. Since my business model is a sustainable one, all of my tools and other equipment I have made myself from existing materials. The process as well has been invented from scratch—everything from the patterns, the shoe designs, and the materials that go into a pair of shoes. Every time I pick up a shoe I try to do something a little different: my pace, my technique, etcetera. I like the idea that [my customers] can have a shoe that literally no one else in the world has.

DM: What about the materials that specifically go into a shoe? How sustainable are those?

WC: I’ll be real honest with you and say that it’s very hard to get a business to play out 100% ecological and sustainable. Sometimes you have to draw a line in the sand on what is most sensible versus what is ecologically responsible. That doesn’t mean I don’t try my hardest to get to 99%. Shoelaces for example are a really tough one for me right now. The laces I get currently are from a manufacturer: they’re not cotton, they’re synthetic lace. The reason I chose the company I did to supply the laces is that they are based locally here in North Carolina, and I want to help support the local business community. My utmost priority all along has been reducing the global footprint (no pun intended) of my customers, myself, and my business practices. My materials are natural where they can be, the resources I put into the work are natural (no electricity necessary), and it’s a one man operation so I walk to my studio space and I’m at work.

To improve the sustainability of Soles for the Soul, I want to bring hemp into the materials I am using, but it’s an illegal material at the moment for manufacturing. The state of California is working toward bringing it back into production lines currently, so as soon as that goes through hemp will be my #1 choice for laces. It’s more important to me to have an all-natural lace versus a synthetic option. But at the point at which I made the decision to go with synthetic laces I had to put the realistic financials first to get the business off the ground. Now that things are picking up, I should be able to bring things full circle soon.

DM: I’ve been a freelance designer off and on for a number of years, but in the service industry specifically. What is it like being your own boss in the product-based market?

WC: It’s kind of weird being your own boss sometimes. For me, I play inventor, editor, accountant, and production monkey on any given day. Sometimes there’s a new scenario that pops up and I have to put on a hat I’ve never worn before. It keeps things interesting for sure, but I wouldn’t have it any other way. In the corporate world, you just fill your own spot where you fit into the big picture. In my own company, I get to see things through from start to the end.

DM: William, I really appreciate you taking the time to talk real quick about my order and about what you’re doing with Soles for the Soul. I’ll definitely do a follow-up post once my order is received. I feel certain I am going to go nuts for my shoes when they arrive.

WC: Thank you so much for calling me, Dylan, and for featuring Soles for the Soul here.

Tiny Fluid Grid is a web development tool that helps developers build grid-based layouts with laser-guides and a shiny, simple interface. It was featured by Joy Engine, Abduzeedo, and Smashing Magazine, and now I’m featuring it too.  I just used it on a side project to quickly bang out some CSS grid awesomeness, and I was more than happy with the output it supplied.

I have no clue how much Wikipedia permeates your life, but for me it is an information consumable that I could not survive without.  Wikipedia has become a part of our modern lexicon: much like White Out is synonymous for correction fluid; Xerox to a photocopy; search to “Google it”; the word research almost certainly results in an immediate need to “Wikipedia it.”  Wikipedia is a nearly infinite information wellspring, serving as one part media outlet, and more recently, one part social dialogue.

You see, I spend a lot of time researching new things online.  Most often it begins at Wikipedia.  That research leads to information and data discoveries that are being hyper-evolved in real-time, all around the world, by real people, each with opinions of their own.  That sole fact has persisted as the crux of a heated debate against Wikipedia since its inception.  Many people have gone out of their way to debase Wikipedia, claiming it is more “truthiness” than factual information.  This changed somewhat a few years back when the Wikimedia Board was founded, and contributions started seeing a lot more scrutiny by the internal Wikipedia team’s certified moderators.  In addition, I personally feel like Jimmy Wales has always done a great job of keeping his “Trust Us” face on, and being the respectable figurehead of this organization.  To me, he personifies transparency about issues concerning Wikipedia, and I have never once felt like my donations were going to anything other than improving the service Wikipedia provides to me as an end-user.

This weekend I was doing more digital clean up, and stumbled across a tag in Delicious labeled “Knowledge.”  Inside, I found a virtual treasure chest of gems (Wikipedia articles) that I had never found time to read.  Clicking through them, I eventually landed at the anchor-linked footer of the article, “Door”.  I can’t for the life of me remember why I was looking at an informational page on doors (perhaps when researching archways for The Ronin Agency identity project), but in that footer I saw a neat new feature I had not seen before called “Rate this page.”  I did some digging around and it turned up almost nothing.  One thing I am sure of though is that it’s very cool to see Wikipedia engaging users in this new way.  It appears that in an attempt to be more “open,” and more transparent about the validity of their content, Wikipedia has added this social voting feature to a large number of pages throughout their database.  Correct me if I’m wrong, but I’ve been using Wikipedia since it first kicked off publicly, and I don’t ever remember seeing this device.  Not all of the articles on Wikipedia have this feature, but I have quickly gotten into the habit of looking for it on pages I visit, and filling in the information when I do stumble across it.

You might be asking yourself, “Why does this matter at all?” Well, there is a lot of important information out there on Wikipedia, not just fun lists like “List of films that most frequently use the word ‘Fuck’”.  These more important informational articles have to be monitored and revised constantly, as facts change or evolve.  On a similar side of that coin, a lot of articles on Wikipedia are closed for public editing or commentary.  Since these articles are closed to the public, this leaves a majority of us users without any way to positively contribute to the content we come across on Wikipedia.  This tool puts a little bit more power back in the hands of the average reader.  As much as I hate to sound “buzzwordy,” that’s pretty Web 2.0 and I like it.  A few years late, yes, but a great leap forward nonetheless.

If you think Wikipedia is already a big deal, try to think for a moment how much more important it could become as more features like this are added.  I believe Wikipedia could help bridge the technological generation chasm (can we honestly call it a “gap” anymore when the divide continues to grow exponentially by the day?) between people my age and younger, and our respective parents and grandparents.

It’s not clear yet what these new tools will accomplish in the long run—there is scarce information out there about the new social voting tools, quietly rolled out in September of 2010.  If you have more info on this, please prove me wrong.  I searched for a good 30 minutes before giving up.

Unfortunately, the “Rate this page” module exists only in the footer of article pages, so I have a strong feeling most users won’t notice it unless they read articles in full.  It is my hope that this post makes at least a few other people aware of the new feature, and we can start seeing what effect social voting has on Wikipedia content as more users begin to interact with it.

To see an example of the page rating feature, you can visit this deeply enthralling article on doors (</sarcasm>).  And if you’re not already keyed in to what’s going on in the Wikipedia world, here are some Twitter feeds that might pique your interest:

Rather than try to explain the concept of what a bookmarklet is for those not already familiar, I’ll just lift the citation from Wikipedia: “A bookmarklet is an applet, a small computer application, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. The term is a portmanteau of the terms bookmark and applet. Whether bookmarklet utilities are stored as bookmarks or hyperlinks, they are designed to add one-click functionality to a browser or web page. When clicked, a bookmarklet performs some function, one of a wide variety such as a search query or data extraction. Usually the applet is a JavaScript program.”

Below are some of the great bookmarklets available out there that I have used extensively on web design and development projects:

1—FFFOUND: FFFOUND.com is an image bookmarking website that I use heavily to catalogue all of the great work other designers are creating as I come across it. It’s a handy way to keep this type of “inspiration box” imagery in one place. Unfortunately, FFFOUND is an invite-only community, but there are bookmarklets available for other popular sites out there that offer similar services, such as YAYEveryday and Imagespark. Image bookmarking can be an indispensable tool for designers in a variety of service fields.

2—Delicious: Here’s another service that is less development oriented, and more utilitarian. Delicious is a simple bookmarking tool that I use as my primary way to keep synchronize links between multiple computers and devices.  I prefer it over Google Bookmarks, mainly because Google Bookmarks didn’t have a bookmarklet for a while, which meant it took several clicks to save new links. Now the only thing really holding me back is migrating all of my bookmarks over to Google.  Hopefully, I’ll get some time to complete that today. There are also some cool tools for Delicious available, but I don’t use them, so I can’t speak to them as product differentiators.  Originally an independent development effort, Delicious was eventually bought out by Yahoo! last year, and has since been the topic of much discussion regarding its future.  Yahoo! is reportedly phasing out unprofitable services to unify their offering going forward, and as a result, the entire Delicious team has been laid off.  For now it appears as if the large community outcry over the imminent death of Delicious has at least put a stay of execution on its head.

3—960 Griddr: Andree Hansson’s 960 Griddr tool has been irreplaceable for me since I first found out about it: a 960-pixel grid framework that is simple to use, and gets out of the way to let you do your job.  If you use 960.gs or Blueprint CSS to framework your development process, there’s nothing wrong with those either.  I simply prefer the lightweight, out-of-my-hair approach that 960 Griddr takes.

4—WhatFont: If you’re anything like me, you love web typography and the advances we’ve seen in recent years. I used to find myself wasting tons of time digging through a site’s CSS mark-up to find out what awesome font it was that they were using, and sometimes pulling my hair out trying to replicate a certain font stack.  That all ended when I found Chengyin Liu’s WhatFont bookmarklet. One might argue that the same features can be achieved with Firebug or some other Webkit Inspector, but as Liu indicates on his website, “…that’s too complicated.”  And I agree. With one click of the bookmarklet you can quickly see the font styling for any selector on a page.

5—Wirify: Sometimes you have to get rid of the fancy bells and whistles to find what you need to see.  Wirify is a bookmarklet that helps you reduce any front-end design skin.  With just one click, you can quickly remove the aesthetic design layer of a website, reducing it to its simplest layout blocks. I have used this tool only a couple of times at the onset of a project during research and discovery. In those few uses, Wirify was immensely helpful in evaluating the logic behind a content-heavy website’s information architecture.

6—W3C HTML Validator: Although it’s coming in at the #6 spot, don’t believe for a second that this list is in any prioritized order.  The HTML Validator bookmarklet from the Favelets community is one that I could not live without in my workflow! It has easily saved me several ten’s of hours since I’ve started using it, cutting down on browser lag from switching windows/tabs, opening new windows/tabs, or refreshing pages. I use this bookmarklet on every single web project I touch, as well as the CSS Validator (also found on Favelets).

7—Browser Resize: Sometimes you don’t always have your resolution testing machine near you to check your layout in all the common browsers, and at all of the standard display sizes.  I often run into this problem myself, and use some simple lines of Javascript to circumvent this obstacle when I need to resize my browser to an exact size. The sample bookmarklet below is for the gold standard 1024 x 768 screen size, but you can easily edit the bookmarklet to whatever size you wish.  You could also make a bunch of them so you have a variety of sizes available one click away.

Some other bookmarklets that I use less frequently are XRAY (for inspecting CSS selectors on the fly), BuiltWith (to get a list of all the juicy behind-the-scenes technology that are making a specific website run), and Color List (often helpful for quickly getting the hexadecimal code for a color that catches my eye). If you are looking for a certain bookmarklet to accomplish a task that wasn’t mentioned here, don’t worry.  Several bookmarklet communities have sprouted up in recent years that bring together new and time-tested bookmarklets for a variety of needs. Marklets.com is one site that covers a broader range of subjects, and Favelets (mentioned above) is another that is rooted more deeply in the web development field.

Well, it’s Easter Sunday, so I guess I should get back to relaxing and start tearing through my digital clean up. Check out all of the bookmarklets and links above, and let me know if any of these were helpful for speeding up your own workflow! Cheers!

In the two(-ish) years that have passed since Typekit was announced there has been a massive unveiling of similar competitive products—fonts as a service, not just as a tool.  At first, this left a lot designers and developers wondering who would embrace these new technologies if marketing and standardization became so fragmented by the myriad providers.  In fact, I recall a post I read last year—from one of our industry’s “rock stars,” who seemed almost gleeful in ripping it apart—positing that web font licensing would be shot down by font creators faster than it could gain any remarkable traction.  A likely argument, but it turns out everyone involved is playing pretty well together.  Font foundries have paired up with providers to make available a large chunk of their fonts for web work, leaving the discussion centered (mostly) around, “Who has the best font collection for my need?”  That’s a pretty subjective question, so I’ll leave that for someone else to delve into.  In fact, new web font technologies have become so popular a topic that a search for “web fonts” no longer takes you to Wikipedia as the first result.  Instead, Google’s own open source solution—Google Web Fonts—teeters back and forth between the #1 and #2 search result on any given day.

Are fonts quickly becoming the new razor/razorblade model of the web design and development industry?  If  you analyze the metaphor, it’s not unlike how the iPod and MP3′s worked together to forge the success of iTunes and the App Store.  The competition is just as stiff for companies trying to lure in designers and developers in search of great fonts as it was for music when the digital tidal wave first overtook the brick-and-mortar behemoths like Tower Records.  To use licensed fonts on a website is the same thing as Apple controlling how many devices you can listen to your purchased content on.  But just like iTunes, why pay $1500 for a font, if you only want to use it on a single website, or if you only want a certain weight of a font?  In support of that argument, why pay for a whole album, if you simply want that song you heard on the radio?  That’s the approach taken by providers like Typekit and Font Squirrel—pay for what you need with no questions asked.  We now have a deep set of options for online fonts without having to rely on the kludgy techniques of yesteryear (primarily, images and Flash).  We’re in a semantic web now, and to rely on images or rich media to serve up your content is simply not a best practice anymore (was it ever really, or was it just a standard use case?).

Through all of this rumination, I became a Typekit convert, using it on my design portfolio and on this journal.  (If you’re curious, I’m currently using FF Netto Web for the headline stacks throughout.)  With Typekit, I was able to quickly register as a new user and get into the system, making my yearly subscription payment and getting out in just a few mouse clicks and some quick edits to my site headers within Coda.  Which brings me back to the original thought behind the post I have summarily disposed of… If these techniques are so easy to use, why did it take so long to populate them?

To help understand why, it’s important to understand the history of font replacement and where the fragmentation began.  Here’s a small recap of the sequence of events that led us to where we are today, and why it is increasingly plausible that font options like Typekit and Font Squirrel are drawing the line in the sand for better days ahead:

As far as technological advances, that’s pretty much where we’ve left things for now.  Google and Typekit are working together a bit on some improvements, I believe, and the competition in this arena continues to grow.  The dust will continue to settle for a while—this isn’t the coda, by far—and it’s certainly much too early to suggest that these web font replacement technologies are the end-all, be-all of using an array of dynamic fonts online.  More accurately, no one is complaining very loudly because we’re no longer trapped behind the confines of our previous go-to fonts: Arial, Verdana, Georgia and Times New Roman.  That’s something I feel really good about, and I know I’m not the only one.

I realize that I mostly covered Typekit here, and didn’t mention any of the numerous other providers out there.  If this topic is of interest to you, below are some alternates (in no particular order) that you could research.  Do your due diligence and find the one that best suits your need and your client’s budget:

Many designers and developers have applauded these advancements as brave, innovative and creative.  Personally, I just think it’s “smart for business” for the font foundries, and “about time” for the web at-large.  For this reason, I think we owe the Typekit team a lot of gratitude for bringing stiff competition to market and breeding competitive pricing.  I showed my gratitude by happily dishing out $30 a year to use the Typekit service.

This is an exciting era for a web designer like myself.  Both seasoned and junior practitioners alike are reaping the benefits of a growing appreciation and understanding of typography on the web.  Font replacement offers fresh opportunities to create innovative new designs that can be realized in practical ways without breaking copyright laws, or causing major compatibility hurdles.  It won’t be long before we’re all on browsers that support HTML5 and CSS3 techniques.  So for now, use these tools as your please, but be cautious.  Always provide fallbacks for deprecated browsers, and use the tools in logical ways that improve your customer’s communication channels.  Which is to say, just because you can embed Comic Sans or Papyrus with ease now, doesn’t mean that you should.