Global Moxie - Full Feed

Big Medium T-Shirts

Josh Clark — Tue, 01 Apr 2008 10:44:36 UT

For kicks, I made a few genie tees last month for me and some friends. No URL, no slogan, no company name, just a small genie logo on the front.

Go figure, people seem to like it, and several have asked how they might get one, too. The good folks at CafePress.com make this kind of thing easy, and I've put a selection of genie shirts online at my new CafePress shop. I'm not making a profit on these, just putting them online for the basic cost that CafePress charges. Prices range from $16 to $24, depending on the style of shirt.

So go ahead, slap a genie on your chest, and be a Big Medium superhero.

Tags: art, bigmedium, design, marketing, self-publishing

Big Medium 2.0.1

Josh Clark — Tue, 01 Apr 2008 09:23:30 UT

Big Medium 2.0.1 is now ready for your enjoyment and delectation, offering a bevy of bug fixes for your favorite content management system. The update addresses control-panel compatibility problems with Firefox 3 and Safari 3.1, funky navigation issues in Internet Explorer 7, and several other issues.

Go get it

Download the latest version of Big Medium here.

The download package includes complete installation instructions, including notes for upgrading from previous versions of Big Medium.

Shortcut instructions for upgrading from 2.0 are provided below. (If you’re upgrading from a version prior to 2.0, please follow the full installation instructions in the download package; along the way, those instructions include special notes for upgrading.)

The nitty gritty

Here’s what’s new in this update:

Fixed a bug that prevented content edit fields from appearing in Firefox 3 and Safari 3.1.
Fixed a bug that made it impossible to delete sections from the “section structure” page in Firefox 3 and Safari 3.1.
Fixed a bug that sometimes caused navigation bars to prevent nearby text from being clicked or selected in Internet Explorer 7; the same bug also occasionally caused the horizontal scroll bar to appear in Internet Explorer.
Link images now correctly open a new window for external links when the new-window preference is selected in the site’s HTML preferences.
Fixed a bug that prevented site search from returning any results if the path_info plugin was installed.
After deleting items from the image, document, media or people libraries, any pages that contained those items are now rebuilt automatically.
Fixed a bug that prevented some site preferences from being copied when cloning a site.
Fixed a bug that sometimes caused a page’s list of version edits to appear in non-chronological order on the edit screen.
Fixed a bug that allowed sections to be displayed in <%sections%> widget even when the “suppress content in parent sections” option is checked.
The <%images%> widget now properly returns nothing at all if no images to display (previously returned an empty div).
When displaying a library image in the control panel, a link to the original image size is now always displayed; this was inconsistent in previous versions.
Fixed a crashing bug when displaying search results on servers running Perl 5.8.0.
Fixed a crashing bug that occurred when you tried to copy a website to the server’s root directory from the “Site URLs & Directories” page.
Fixed a crashing bug for servers that do not have Perl’s URI module installed.
When deleting custom display preferences in the section properties screen, the confirmation dialog now reminds you to rebuild pages.

Upgrading from Big Medium 2.0?

If you’re upgrading from v2.0, you can update to the new version by following the instructions below. (If you’re upgrading from a version prior to 2.0, please follow the full installation instructions in the download package; along the way, those instructions include special notes for upgrading.)

To upgrade from v2.0:

1. Set your FTP client to “plain text” or “ascii” mode.

2. Upload to `moxiebin/Modules` directory:

BigMed (directory and all contents)
BigMed.pm
HTML (directory and all contents)
URI (directory and all contents)
`URI.pm

3. Upload to `moxiedata/support/assets` directory:

bm-ie.js

4. Upload to `moxiedata/templates/cp_templates` directory:

wi_prompt_slider.tmpl

5. Upload to `moxiedata/templates/site_templates` directory:

base.css

6. Upload to `moxiedata/templates/site_templates/HTML` directory:

wi_links_generic.tmpl
wi_search.tmpl

7. Update the `bmadmin/index.html` file with your site’s `moxiebin` URL.

Open bmadmin/index.html in a text editor and follow the instructions in the file to update the two marked URLs with the full URL to your server’s moxiebin directory.

8. Upload to `bmadmin` directory:

index.html
js (directory and all contents)

9. Run the updater

Browse to the bm-update.cgi file in your site’s moxiebin directory. For example:

http://www.example.com/cgi-bin/moxiebin/bm-update.cgi

10. Clear your browser cache, and ask other Big Medium editors to do the same.

This completes the update from v2.0.

Tags: bigmedium

Updated: Big Medium 2: The Complete Guide

Josh Clark — Tue, 01 Apr 2008 09:09:17 UT

I’ve just updated the Big Medium 2 book with some minor changes and clarifications.

Big Medium 2: The Complete Guide is a comprehensive guide for writers, editors, designers and administrators. The new edition includes these changes:

There’s a new “Quick Start” section in Appendix A, “Installing Big Medium,” that provides a compressed set of installation instructions. It’s a useful quick reference for old hands who have installed Big Medium before and just need a checklist to get going.
The diagram of the <%navigation%> widget’s HTML structure and styles has been updated and corrected in Chapter 10, “Widgets.”
The PDF book has always been thoroughly cross-referenced with links to related sections; alas, those links had no visual cues, so they weren’t obvious. All links are now colored and underlined, web-style. One exception: The book’s table of contents is not underlined, but you can still click any item to go directly to that page.

Go get it

Big Medium 2: The Complete Guide: Download the free PDF

Tags: bigmedium, pdf

Image Editing for the Rest of Us

Josh Clark — Sun, 30 Mar 2008 14:05:21 UT

Photo by Chris (archi3d).

Once upon a time, dealing with digital images and photos was a black art, practiced only by an elite group of geeks sporting pricey software called Photoshop. Now, of course, the whole world has a digital camera, and it's common practice for regular folks to sling digital images across the web and through e-mail.

Editing those images has nevertheless remained a relatively rarified task. I'm frequently asked by designers how they might make it easier for their clients to crop, reduce or improve photos before adding them to their Big Medium image library. After all, few individuals (or even organizations for that matter) can afford a full-blown image editor like Photoshop; even when they can, the complexity of the software is more than most folks can grok.

A new crop of web applications is turning up to fill the gap, and web designers might consider pointing clients to these tools for easy image editing. Photoshop Express (launched in beta just last week) and Picnik are two sites that provide free, easy image editing for the rest of us.

Cropping an image in Photoshop Express. (Click to enlarge.)

Both sites let you edit your images in the browser and offer a similar tool set: crop or rotate images, adjust color and exposure, remove red eye, and apply effects. The free versions of both sites offer a similar set of one-click editing tools, but Picnik also offers a pro version for $25/year with a bevy of advanced editing tools.

The biggest difference between the two is how they deal with your photo archive. Photoshop Express gives you space (2GB with the free version) to store your photos. Picnik does not hang onto your images but instead emphasizes integration with third-party galleries, letting you edit images directly from your online gallery at Flickr, Picasa, Facebook, MySpace, Photobucket or Webshots. (You can also load/save images directly from your hard drive for editing during a single session).

Picnik offers more options for saving an image. (Click to enlarge.)

Picnik has been around for a few months longer than the new Photoshop Express site, and it shows. Picnik offers a few more editing options while still remaining easy to use. In particular, Picnik has better options for resizing images and adjusting compression quality, which is useful if you're interested in editing images to prepare them for the web. Photoshop Express, meanwhile, allows you to save your edited images in only one of three sizes: original, thumbnail or one reduced size somewhere in between.

I recommend Picnik if you simply need an easy, free way to clean up or prepare images for your Big Medium site or an external gallery. But if you need a site that also lets you store, share and publish your photos, the new Photoshop Express is worth a look.

Tags: photos, workflow

Time Check

Josh Clark — Sun, 30 Mar 2008 12:06:51 UT

Photo by The Rocketeer.

Last night, Europe and several other countries kicked off Daylight Saving Time, joining the North American countries that made the leap a few weeks ago. (Just like water down the drain, the clocks swirled in the opposite direction last night for our pals in Australia and a handful of other southern-hemisphere countries.)

Just a reminder: Don't leave Big Medium behind. Your Big Medium-powered site needs a little nudge to make the Daylight Saving Time adjustment, too.

To change the time in Big Medium 2 for an individual site, update the "Time Zone Offset" setting in the "Settings>Site Properties" screen.

I know, I know, it sure would be handy if Big Medium did this for you automatically. Alas, time-zone programming is crazy-complicated and your humble developer has punted on that. Maybe one day, but not this week... I just lost an hour after all.

Tags: bigmedium, time, timezones

Updated: PDF Documentation for Prototype 1.6.0

Josh Clark — Tue, 25 Mar 2008 15:06:34 UT

Updated: PDF Documentation for Prototype 1.6.0

Attention JavaScript developers: I've just updated the PDF of the official Prototype.js API documentation to include all of the new features in version 1.6. Be sure to check out the introductory chapter that highlights the additions and changes since Prototype 1.5.

Tags: javascript, pdf, prototype

Paper Cup? Five Bucks, Please

Josh Clark — Tue, 25 Mar 2008 13:30:03 UT

Photo by macten.

Overheard in the line for coffee at the Austin Convention Center at SXSW earlier this month...

Customer: Could I just get an empty cup?

Cashier: Yeah, but I have to charge you for a coffee. That’s $2.75.

Customer: For a paper cup?

Cashier: (Embarrassed.) I know, but they count the cups, so we have to sell the cups at full price. Basically, we sell cups.

Customer: (Sighs.) Okay, fine, I’ll pay for it. I’ll take the small cup.

Cashier: (Uncomfortable. Glances back at the manager.) The small cup is for our specialty coffees, so that one is $4.75.

Customer: The small cup costs $2 more than the large cup? $4.75, just for an empty paper cup?

Cashier: (In obvious pain.) I know. Sorry, there’s nothing I can do.

Trapped

Both the cashier and customer were trapped by the coffee stand’s dubious accounting system (the number of cups apparently have to match up with the amount of cash in the till). Want a cup? Five bucks.

“We sell cups.” Well, no, they don’t; that’s just how the (coffee) bean counters see it. To customers, they sell coffee, and the cup is just an incidental vehicle, zero value. The imposition of this lame internal system on the actual transaction allowed no flexibility or judgment on the part of the cashier, and turned the real-world expectations of the customer upside down. Frustration on both sides of the counter.

It struck me as a useful reminder for interactive designers and developers: For customers, the end experience is way more important than how things work under the hood. How does my code-based view of software and site design seep into my interfaces to conflict with users’ goals or expectations? What kind of dopey trade-offs or ridiculous conundrums do I unintentionally impose?

Experiences should be tailored to the customer’s understanding of the task at hand. How it actually works behind the scenes should be invisible. It’s about the coffee, not the accounting.

Tags: business, customerservice, design, psychology, sxsw, usability

Will Work for Magic: Creativity and Play at SXSW

Josh Clark — Thu, 20 Mar 2008 14:47:53 UT

Photo by phitar.

My latest scheme to improve productivity and creative flow: Screw around. Waste time. Make stuff. Banter. Play.

I’m fresh from my first trip to the South by Southwest Interactive Festival, where I did all of those things. I’ve never played so hard for work before. Fire dancers, live music, barbecue, a magic act, battledecks, margaritas at the Austin City Limits studio, stupid-hot tacos, and okay, yeah... five days of mind-bending ideas and a chance to hang with the brightest in the creative tech industry.

So, um, not your usual tech conference. Instead, South by Southwest itself embodied a theme that I traced through lots of the SXSW sessions this year: The power of play to spark passion, forge new ideas, and create new connections. Stuff that looked dangerously like goofing off at SXSW was, on the contrary, inspiring, energizing and entirely productive. I learned as much at the many SXSW parties as I did at the excellent panel sessions.

Folks who work on their own, as I do, tend to grapple with work/life-balance issues; we work either too much or too little. Either way, we beat ourselves up for maintaining a lousy balance between work and play. The answer, I think, is to stop trying to separate the two, to coax work into play. Give yourself permission to screw around and explore.

Sensational side projects

The Chicago design firm Coudal Partners is a great example. It sometimes seems like these guys do anything and everything except design work. They make short films. They organize craft barter exchanges. They launch side businesses. They run an independent ad network. They burn vast amounts of brain cells on clever wordplay, like their game “Booking Bands” (Quick! Mash together a band name and a book title. E.g. “Megadeth of a Salesman,” or my own tepid offering, “For Whom the Belle and Sebastian Tolls”). Some of this stuff generates revenue, but most doesn’t, at least not directly.

Hobbies, a short film by Steve Delahoyde of Coudal Partners. Jim Coudal showed it during his talk as an example of short attention span that “must not be denied.”

In his talk at SXSW, Jim Coudal admitted that this buzz of creative activity is a kind of career-level attention deficit disorder. But it’s the excitement of launching odd little side projects that keeps his crew creatively productive. “That short attention span must not be denied,” he said. “That initial moment of passion, this is the amplification of the creative moment. You want to engender that feeling.…You’re going to do more satisfying and quality work when you’re happy.

“That’s why we do what we do,” he said. “So that we can actually do the work.”

This isn’t play as procrastination, although it might look that way. It’s not about playing solitaire on your PC to dodge work. Friends, this is goofing off as bonafide professional development. By engaging in a regular diet of activities that simply give you pleasure, you hurl yourself into your “regular” work with new energy. Play gives your brain a new set of problems to solve, a dose of delight to jerk you out of your rut and see your work in a new light.

Handily enough, there just happen to be a jillion creative playgrounds springing up everywhere. Any of us can be directors, photographers, authors, t-shirt makers, you name it.”There are a lot of people out there who have an artist inside them and don’t know how to express it,” Derek Powazek said in his SXSW talk about mushrooming creative communities. “You have no excuse anymore for not using the talent you have.”

Or, put another way by Henry Jenkins in his thought-provoking opening remarks at SXSW: “What’s wrong with America that people don’t have the opportunity to express this level of intellect and creativity in the workplace?”

Me, I plan to continue adding little side projects to learn stuff, experiment with fresh techniques, and re-experience the thrill of the new. Diversions? For sure. But these little deviations from the day job help to fuel enthusiasm for my main gig, developing Big Medium. While some of these projects may actually be productive, possibly even related to Big Medium, I hope to see more than a few that are just goofy fun. Y’know, for kids.

“Be interesting”

The gang at 37signals (they happen to share office space with Coudal) are actually institutionalizing this kind of play, as CEO Jason Fried explained in a recent blog entry titled Workplace Experiments:

We decided that 37signals would help people pay for their passions, interests, or other curiosities. We want our people to experience new things, discover new hobbies, and generally be interesting people.

For example, Mark has recently taken up flight lessons. 37signals is helping him pay for those. If someone wants to take cooking lessons, we’ll help pay for those. If someone wants to take a woodworking class, we’ll help pay for that.

Part of the deal is that if 37signals helps you pay, you have to share what you’ve learned with everyone. Not just everyone at 37signals, but everyone who reads our blog. So expect to see some blog posts about these experiences.

“Be interesting people.” What could be more important, not only as creative professionals but as human beings? Very cool that the company not only encourages these side projects but actually underwrites them.

I believe it was the beloved author Jack Torrance who wrote (more than a few times), “All work and no play makes Jack a dull boy.” Ain’t it the truth. Periods of nose-to-the-grindstone work, with long days of nothing but code, tend to leave me listless and, my long-suffering wife will agree, vaguely anti-social. A week or two of crunch mode drains both energy and enthusiasm. Fresh ideas come more slowly; it’s harder to pull myself to the keyboard.

Photo by B Tal.

By contrast, a varied mix of extra-curricular activities keeps me charged up. Get out of the office, learn something new, get fresh perspective. New pursuits and little distractions give my work fresh life. As an added bonus, my friends are relieved to discover that I can actually offer more to conversation than what I’m doing to refactor my codebase. (“Refactor? Codebase?”) Stuff that I do when I’m supposed to be working: museum visits, afternoon runs, cooking experiments, writing this blog, matinee screenings of classic films, café downtime with friends, wandering unfamiliar neighborhoods of Paris.

A relentless work ethic dies hard, though. Although the benefits of getting away from my keyboard are obvious and have been demonstrated many times over, guilt lingers. It feels like hooky, which of course it is. For me, at least, it requires discipline to be undisciplined. It’s tough to accept that the best route to a goal isn’t always a straight line, but I’ve found that fresh angles allow for serendipity and new inspiration.

“The beautiful mistake”

Web designer Nazim Hamid gave an engaging talk at SXSW about his work process. Although the talk was titled “Design Is in the Details,” some of Naz’s best material focused instead on escaping the details, pulling back from your work to get fresh perspective. Naz described his own personal strategies for doing this, and three particularly resonated:

Mix and match. “You have this constant desire to fall back on things you’ve done before,” Naz said. To avoid this staleness, experiment with mixing past techniques to generate new hybrids and create something unexpected. “I call this the beautiful mistake.…If it’s not working, open up something else and play with it. Mix and match.”
Take seven days before starting a new design. “You don’t have to start working on it right away,” Naz said. Instead of diving straight into a new project, let it percolate so that you can gradually develop the full idea for the project instead of winging it as you go. “That’s the time when I’m waiting for inspiration to strike,” he said. “And then you know how it is: When you have the idea, you put it down on paper, and it’s done in a day.”
Let the design rest. Before calling a project finished, put it aside so that you can come back to it with fresh eyes and recapture the power of the first impression. “I sometimes take two days off from a design. You know, forget it,” he said. “When you go back, take notes on what jumps back at you.”

I’m going to incorporate these practices into my own work discipline, and we’ll see how it goes. Whether or note these particular tactics work for me (or for you), the worthiness of the goal seems evident: Pull back from your work to find new approaches. Ultimately that means finding surprise and delight in your own work, and why not? If you can no longer delight yourself, how can you expect to delight your customers and colleagues?

I’m reminded of a 1964 documentary interview with Robert Rauschenberg when the artist was asked if he liked to be surprised by his work. “Yes, it wouldn’t work any other way,” he said. “Otherwise, it’s just dry manipulation.” When you’re no longer surprised by your own work, you’re simply in the business of mass production, of factory work. Most of us aspire to something more.

I wrote about how to capture this moment of surprise a while back in Magic Boxes, Canned Chaos and Creative Totems: “The process of creation depends on flashes of inspiration, moments where you manage to leap out of your usual groove and see things from a new perspective. Whatever knowledge and expertise you may bring to your craft, it’s these moments of fleeting mystery that actually manage to kiss your work with an instant of virtuosity.”

As I wrote there, these moments of mystery can be prodded through familiar rituals and escapes; Naz’s rituals fit the bill nicely.

Ingredients of happiness

Play, delight, mystery and surprise. Hell, I’ll take that in a workday. Mix in community, skill, and a job well done, and you have all of the ingredients of happiness. Or so say the researchers.

Jane McGonigal is a game designer who gave a terrific keynote at SXSW about happiness and the role games might play to “embed happiness engines in everyday life,” including our work lives. She noted recent psychology research into the sources of happiness, which apparently boil down to four factors:

Satisfying work to do
The experience of being good at something
Time spent with people you like
The chance to be part of something bigger

These also happen to be the essential ingredients of our favorite games, and Jane suggested that making our lives more game-like could also make them happier. “Instead of making games more realistic, with better graphics or better [artificial intelligence], I’m trying to make the real world more like games,” she said.

“When I join a game in a virtual world,” she said, “the first thing I have are legions of collaborators and allies who want to help me. Most of us, when you get out of bed, you’re not exactly walking into that same environment.”

Chore Wars: Finally, you can earn experience points for housework.

Her idea: By introducing game-like systems into our work and home lives, we can imbue otherwise tedious tasks with the spirit of reward and collaboration that makes gameplay fun. Jane pointed to a game called Chore Wars which turns housework into gameplay for families. (“Finally you can get experience points for housework!”) She also pointed to the Nike+iPod gizmo that transforms running into a community video game.

In his talk, Henry Jenkins called for a similar investigation into how we might introduce the compelling mechanisms of video games into education, endowing schools with the characteristics that glue kids to their game consoles: Solving complex problems, learning that it’s not fatal to make a mistake, strong roles, clear goals.

Most of us have figured out how to introduce at least some degree of gameplay into our work. Even the humble checklist is an essential game-like ingredient, a primitive “point system” for tracking success and satisfaction with our own progress. In that vein, productivity geek Merlin Mann comes up with endless game-like ways to fake out your brain and do an end-run around procrastination and constipated work processes (e.g. the procrastination dash, cringe-busting, etc.).

For folks like me who build systems intended to be used in people’s work, the idea of introducing gameplay into the workplace presents both a challenge and an opportunity. As screen interfaces increasingly define our working life, those interfaces logically shape our environment, hopefully for the better. As Jane said, “More and more of us will be in the business of producing happiness engines.” Me, I’ve tried from the get-go to make Big Medium fun to use; I strive to give it a personality, a voice, and flourishes that surprise and delight. But SXSW challenged me to consider how I might make this interaction even more playful and satisfying... more magical.

Uh oh, it’s magic

Photo by Chris (archi3d).

Usability guru Jared Spool gave an inspired talk at SXSW about what magicians can teach interface designers about the power of illusion: making complexity evaporate, making the mundane delightful. “People want magic in their lives,” Jared said. “It brings a certain level of delight that we don’t see in other places.”

He pointed out that it’s more than efficiency and functionality, though those are crucial, that make an interface a pleasure to use. Mixing in whimsy and playfulness can introduce genuine joy. (Magic tricks sprinkled throughout his talk underscored the point.) Jared pointed to the playful language at Flickr (the “Flickr is having a massage” error message; “Embiggen small photos” in an option dialog), and to Apple’s faithful representation of your iPod’s physical color in iTunes (“They actually used valuable ROM space in the iPod just to communicate the color!” he enthused).

The message: As software designers, we’re solving interface puzzles, not world famine. Lighten up.

A little deviousness helps, too. Like magicians, our role as designers is to make the complex or impossible seem effortless through well-placed misdirection and willful trickery. When you’re using Big Medium, you shouldn’t have to think about what’s happening under the hood or how the software organizes its data. That tedium is my headache, not yours. If I do my job right, adding content to your site should actually be fun; it should make you smile, maybe even scratch your head in a “how’d they do that” moment. Sure, it’s just a content management system -- what could be more dry? -- but that doesn’t mean that it can’t offer genuine moments of pleasure and even magic. It’s my responsibility not to bore my customers, and it’s my challenge to make their work feel like play.

It’s a theme that the wonderful Kathy Sierra has pushed for years, and she picked up on in it in her SXSW talk, too. She noted the crucial connection of joy and play leading to learning and skill. Making a product fun means that you’re providing incentives to explore its every corner. “Make it all about how the user feels,” she said. “Nobody’s passionate about something they suck at.”

And likewise, it’s all too easy to suck at something you’re not passionate about. For me, the play, camaraderie, and seeming downtime of SXSW made me even more passionate about my work. I’m tickled to put goofy playfulness front and center in my office, my work and my products.

Tags: business, conference, creativity, inspiration, life, manifesto, motivation, productivity, psychology, sxsw, work

Messin’ with Texas

Josh Clark — Thu, 06 Mar 2008 19:59:04 UT

Photo by Lee Steffen.

If you’ll be in Austin for the SXSW Interactive Festival over the next several days, be sure to say howdy. I’m attending the geekfest/party/conference for the first time. I’ll be there with my chum, the inimitable and mysterious Dr. VanEsselstyn, soaking up ideas, trends and an alarming number of tacos. I’m looking forward to meeting you and a bevy of other creative folks along the way.

You can stalk me on Twitter or chase me down during the daytime panels by following my picks on Sched.org. (Winnowing the 150 panels is daunting. How to choose John Gruber versus Jason Fried? Jim Coudal versus Andy Baio? Between superhero-themed panels “How Manga Explains the World” versus “Scope Creep and Other Villains”?) At nights, I’ll be roaming the parties, both official and unofficial.

And seriously: If you see me, say hello. Would love to share a few words about content management, design, or even better, where to find Austin’s best barbecue. Don’t be shy; if we find ourselves together at an open bar, the beer’s on me.

Tags: conference, sxsw

"Chief Scientist" Business Cards

Josh Clark — Sat, 01 Mar 2008 17:58:13 UT

This week, I finally got around to printing a new set of business cards. I get painfully shy when I'm designing something for myself. Go figure: I shoot off my mouth about other people’s brands and, when I have the time, enjoy churning out designs to match. But to make something that describes me... Impossible. Vaguely terrifying.

As a result, I treat my own marketing materials with benign neglect, deferring design work until some event thumps its shoe on the table and demands action.

This time around, that event is the South by Southwest (SXSW) interactive festival in Austin, Texas, where I’m headed on Friday. SXSW is the premier rendezvous for interactive designers and web nerds. It’s five days with lots of smart people, lots of fresh ideas, and lots of beer. The idea of showing up at this fandango with a fistful of my dreary old cards made me shudder. And so, here we go... new cards.

Here’s what I came up with, along with some of the thoughts that informed the design.

The brand

There are a lot of vibes that I’ve tried to distill in the Global Moxie brand, most recently in this site’s redesign. I wanted these elements to be reflected in the business card, too. It turns out to be a lot of message to pack into 7.5 square inches of card stock. The rundown:

Global Moxie = Josh Clark

Business card, circa 1895. From SSA History Archives by way of Wikipedia.

Once upon a time, I was purposely vague about the fact that I’m a one-man show. I worried that customers might get cold feet about signing up with something less than a corporate monolith. I was wrong. I’ve discovered that lots of people like the accountability associated with dealing directly with the guy who makes the software. Like me, they enjoy the personal nature of the transaction and the relationship that follows.

For better or worse, my ugly mug is the face of Global Moxie. From a brand perspective, the identification between me and the company is important.

Creative, playful

I make stuff for people who make stuff. You, me, we’re all creative here. Sure, we’re serious about our work, but we like to have a little fun along the way. I aim to make humane, friendly interfaces, and the brand should be equally friendly.

Technical

Behind the play, I’d like to think that there’s also a wealth of expertise, even science, in the work that I do. The brand needs to emphasize knowledge, experimentation and new ideas.

Non-corporate

Happily, my little world never involves sales calls. I give out cards almost exclusively at conferences, or to folks I meet socially who happen to be desperate for easy web-publishing software. That means that the people who see my cards are almost always from my own tribe: designers, coders, artists and other assorted nerds. These cards are not for suits. They need not be “safe.”

Main offering = Big Medium

Finally, there’s what I actually do. My main gig these days is developing and supporting Big Medium, and that’s generally the topic when I hand someone a card. The card needs to be a big fat reminder about Big Medium and what it does.

The design

To identify myself with the brand, I decided to actually picture myself on the card, or at least the cartoon version of me. Picking up on the “hypertext laboratory of Josh Clark” copy from the site, I went with the scientist image from the Projects page in an attempt to marry the playful with the technical.

That image also has the benefit of including the fist and test tube from the Global Moxie logo. I decided not to include that logo at all on the card, letting my mad scientist carry the brand instead.

The scientist also informed my job title. When you’re the only guy in the company, you can have pretty much any title you like, so I went with “chief scientist.” (It’s a little kitschy, I know, but my friend Richard points out that it’s at least better than “catalyst,” which some of his hapless architect friends have on their cards.)

For contact info, I just have my web URL and e-mail. No mailing address or phone. A couple of reasons: First, address and phone can change, and leaving them off gives the cards a longer shelf life. Second, color me 19th-century, but I’m not a fan of the telephone; I prefer to do business with the written word. In rare moments when I’m feeling generous with my phone number, there’s always room on the card to draw a speech bubble with my digits.

I selected Gill Sans for the font, a clean and friendly typeface with historical connotations of communication and connection -- it’s the typeface of the BBC and was patterned on the London Underground font.

And finally, I gave over the entire back of the card to Big Medium and its genie icon, with a full-bleed, dark green field.

The process

Printing full-color business cards is lots easier than it was just a few years ago. I went with VistaPrint, a digital-printing outfit that lets you upload a single Photoshop image to their website; no fussing with spot colors or four-color separation. Just make sure that it’s a CMYK image, and you’re done. The cards turned up in my mailbox seven days later.

And baby, it’s cheap. With a first-timer promotion, I got 500 cards for $35 plus tax and shipping, and that includes springing for their heavyweight paper stock. (VistaPrint does have a French site, but even with international shipping, the US site proved to be cheaper.)

The end result

The print quality could have been a bit better, but hey, at this price, I can’t really complain. Some of the cards have a few flecks of toner spatter on the front. The dark-green background on the back prints ever-so-slightly unevenly on the back, with some white specks of paper showing through.

This probably isn’t stuff that others would notice, but I did. If I were doing it all over again, I’d probably either ditch the background color on the back or choose a lighter color.

All in all, though, I’m tickled by the result. My pal Brad tells me that the cards are “daringly non-corporate,” which suits me just fine.

Tags: conference, design, josh, marketing, sxsw

Turn Your Tables into Spiffy Charts

Josh Clark — Sat, 16 Feb 2008 14:57:59 UT

In December, Google unveiled a nifty way to generate slick chart graphics. The Google Charts API lets you fetch custom images from Google by using image URLs containing your chart data.

For example, requesting the image at this URL:
http://chart.apis.google.com/chart?cht=p3&chd=t:70,30&chs=500x200&chl=Hello|World

...returns this image:

Cool huh? Cram your data into a URL and you get a png image back. No muss, no fuss.

Well, okay... there is in fact some muss and just a touch of fuss. Building these URLs by hand is a clunky process. Also complicating matters is that you need to encode your data values into one of three systems to help keep URLs short. As a result, a variety of tools have sprung up to provide friendly interfaces for generating these chart URLs.

My personal favorite has been the table-to-chart script by Christian Heilmann, which replaces data tables in your HTML pages with 3D pie charts like the one above. This clever approach makes creating chart graphics as simple as creating a two-column HTML table. Even better, because the data lives in the page as a table, the info remains accessible to vision-impaired users and search engines, two important audiences for whom chart images offer little informational value.

Introducing bm-table2chart.js

I've adapted and expanded Christian's script for easy use with Big Medium. I also added support for bar charts, line charts and two-dimensional pie charts.

After you install the script, all you have to do is add a two-column table with class "tochart" to your Big Medium page. In the table, each row represents one value: the first column contains the value's text label, and the second column contains the numeric value to chart:

<table class="tochart size500x200" width="300" border="1"
       cellpadding="3" align="center"
       summary="Josh's most-listened artists at Last.fm">
  <tr>
    <td>Wilco</td> <td>1360</td>
  </tr>
  <tr>
    <td>Beastie Boys</td> <td>1001</td>
  </tr>
  <tr>
    <td>Fatboy Slim</td> <td>925</td>
  </tr>
  <tr>
    <td>Bob Dylan</td> <td>802</td>
  </tr>
  <tr>
    <td>Herman Dune</td> <td>636</td>
  </tr>
  <tr>
    <td>Calexico</td> <td>509</td>
  </tr>
</table>

Normally, this HTML markup would look like this:

Wilco	1360
Beastie Boys	1001
Fatboy Slim	925
Bob Dylan	802
Herman Dune	636
Calexico	509

But with the bm-table2chart.js script installed, the table is replaced by this 3D pie chart:

Wilco	1360
Beastie Boys	1001
Fatboy Slim	925
Bob Dylan	802
Herman Dune	636
Calexico	509

The script builds 3D pie charts by default, but by adding "piechart" to the table's class attribute, we get a traditional two-dimensional pie chart:

Wilco	1360
Beastie Boys	1001
Fatboy Slim	925
Bob Dylan	802
Herman Dune	636
Calexico	509

...or use "barchart" instead:

Wilco	1360
Beastie Boys	1001
Fatboy Slim	925
Bob Dylan	802
Herman Dune	636
Calexico	509

...or "linechart":

Wilco	1360
Beastie Boys	1001
Fatboy Slim	925
Bob Dylan	802
Herman Dune	636
Calexico	509

Installation

These instructions describe how to use the script with the Big Medium content management system. (Want to use it outside of Big Medium?)

bm-table2chart (2 KB)

Download the zip file.

Download the zip file.
Unzip the file to get bm-table2chart.js.
Upload bm-table2chart.js to your server. For example, to this location:
http://www.example.com/scripts/bm-table2chart.js
In Big Medium, select "Settings>HTML Preferences," and go to the "Document and Page Header" screen.
In the "Additional HTML to include in the page header" field, add this script tag, updating the URL to reflect the location of bm-table2chart.js on your server:
```
<script src="http://www.example.com/scripts/bm-table2chart.js"
type="text/javascript"></script>
```
Save the settings, and follow the link on the next screen to rebuild all pages.

Add the following styles to your theme style sheet ("Layout>Edit Theme Style Sheet"):

table.hidden {
    position:absolute;
    height:1px;
    width:1px;
    overflow:hidden;
    top:0;
    left:-99999em;
}
div.chartfromtable{
    margin:1em auto;
    text-align:center;
}
div.chartfromtable img {
    border:1px solid #ccc;  
    padding:5px;
}

Usage

Add your data table(s) to a page

Any table with class "tochart" will be converted to a Google chart.

If you're using Big Medium's rich-text editor, you can add a table by clicking the table icon in the tool bar. To add the class, you'll need to edit the source code; click the "source" button in the tool bar, and find the <table> tag to edit, adding class="tochart" to the table.

If you're entering your content in the Markdown or Rich Text tab, just enter the HTML for your table, including the "tochart" class in the opening <table> tag.

Chart type

By default, tables are converted to 3D pie charts. To customize the chart type, add any of the following to the table's class:

3dpiechart
piechart
barchart
linechart

For example: <table class="tochart piechart">

Chart size

By default, charts are 350x150 pixels. You can specify another size by adding a "size" class to the table. For example: <table class="tochart barchart size400x300">

That "size400x300" class generates a chart 400 pixels wide and 200 pixels high.

Google recommends that pie charts be at least twice as wide as they are tall to avoid clipping the text labels. For 3D pie charts, the width should be at least 2.5 times the height. For other charts, you may find that you need to tweak the size depending on the length of your text labels.

The maximum height or width of a chart is 1000 pixels, and the maximum area for a chart is 300,000 pixels. For example, a few maximum sizes include: 1000x300, 300x1000, 600x500, 500x600, 800x375, and 375x800.

Chart color

By default, charts are green (#339933). You can specify another hexadecimal color by adding a "color" class o the table. For example: <table class="tochart colorCC3333">

That "colorCC3333" class generates a chart with a #cc3333 (red) color.

Keeping the table

By default, the data table is replaced by the chart. If you prefer to keep the chart visible, add a "nohide" class to the table. For example: <table class="tochart nohide">

With that "nohide" class, the table will continue to be displayed, immediately below the chart graphic.

Using bm-table2chart.js outside of Big Medium

You can use this script for pages that are not managed by Big Medium, but a couple of minor changes are required:

In the bm2-table2chart.js file, change the first line of code:
```
BM.onDOM.addEvent(function(){
```
to...
```
(function(){
```
Change the last line of code:
```
});
```
to...
```
})();
```
The code requires the prototype.js library. Download it from the Prototype site, and place the file to your server.
Add the following to the page to include the script, as the very last element just before the closing </body> tag (update the URL to point to the prototype.js and bm2-table2chart.js files on your server).
```
<script src="prototype.js" type="text/javascript"></script>
<script src="bm2-table2chart.js" type="text/javascript"></script>
```

Add the following to your CSS styles:

table.hidden {
    position:absolute;
    height:1px;
    width:1px;
    overflow:hidden;
    top:0;
    left:-99999em;
}       
div.chartfromtable{
    margin:1em auto;
    text-align:center;
}
div.chartfromtable img {
    border:1px solid #ccc;  
    padding:5px;
}

License

bm-table2chart.js is distributed under the Creative Commons Attribution 3.0 license. You're free to use it, distribute it, and adapt it provided you maintain the author credits in the bm-table2chart.js file.

Tags: accessibility, bigmedium, charts, design, google, usability, webservices

Books, Faith and Rock ’n’ Roll

Josh Clark — Fri, 08 Feb 2008 15:05:48 UT

Several customers wrote in this week to let me know about their freshly launched Big Medium-powered sites. Lots of new sites going up out there. Congrats to all!

Three sites particularly stood out, putting Big Medium’s features to good use within clean and elegant designs.

Rock ’n’ Roll

The Field: thefield.ca

The Field is a Canadian music-video production company representing an eclectic roster of award-winning directors.

Designed by Lorena Barrera and Scott Jordison of Room 101, The Field’s new site sports a bright, whimsical design, cleverly bringing in a hint of nature to call out the company’s brand.

Check it out, and while you’re there, have a peek at the directors’ video clips for bands including Zero 7, The Tragically Hip, Stars, and others.

Faith

Beth Chai: bethchai.org

Big Medium has proven popular with churches, temples, and volunteer-powered non-profits that need an easy way for non-technical staff to update their sites.

Beth Chai is the latest example. Karin Tracy of little b design created the new site for this Jewish congregation in Washington, DC.

The site incorporates a wealth of information, news and events in a clear design infused with an open sense of community.

Books

Boomerang Books Info Bank: boomerangbooks.com/content/

Boomerang Books is an Australian bookseller whose new site demonstrates how well Big Medium can “play nice” with other applications. Big Medium is the engine for Boomerang’s “info bank” of book news and reviews, a complement to the e-commerce system that handles sales.

It’s two separate apps powering one seamless experience within a design that is, appropriately, very readable. The site provides a bright and well-lit place to browse for the next read.

Tags: bigmedium, bmsites, video

A Subtle Nose for Coffee, a Taste for Good Design

Josh Clark — Thu, 07 Feb 2008 21:01:34 UT

Soluna Cafés: 52, rue de l’Hotel de Ville in Paris.

Last week, my food-critic pal Rosa invited me and a friend to a coffee tasting at Soluna Cafés, a “caféothèque” here in Paris. Along with a high-pitched caffeine buzz, I left the tasting with a strong impression that applies as much to interactive design as it does to coffee: In matters of taste, subtlety is everything.

The goal of the event was to introduce we three coffee dabblers to top-flight “grand cru” coffees. I had never attended such a thing for coffee, but it turned out to be much like a wine tasting. Our host walked us through ideal growing conditions, the factors that cause taste variations in coffee, the role of the coffee tree’s berries in the flavor.

Then, to exercise our noses, we were given a box of 30 or 40 vials of scented oils, each representing an aroma found in various coffees. Our task was to identify the scent of these unmarked bottles. Vanilla, cucumber, smoke, cherry, green pea, pepper, jasmine... I learned, one, that coffee has a whole range of underlying scents and flavors that I had never considered or detected; and two, that I’m lousy at guessing the smells of scented oils.

My wine-smart friends Rich and Kristen have a similar case of vials, tuned to the aromas you find in wine. Unlike me, they’re actually terrific at identifying the scents, which is also why they’re so much better at discerning (and appreciating) fine wine than I am. Turns out that the vials are more than a quirky olfactory game; they’re a tool for sharpening your palate, for training you to detect subtle shifts in scent and flavor. The better you become at the game, the more sensitive you become to the good, bad and unusual in your vino.

Sensitivity to subtlety serves us well in arenas well beyond the coffee cup and wine glass. For designers, an appreciation for the subtle, understated use of color and visual effects lends elegance and confident grace to graphic work. Jeff Croft offered some examples recently at the Blue Flavor blog:

High-quality, professional work usually bears a distinct ability to be subtle — to show restraint, and avoid garishness. That’s not to say, of course, that this work is boring. Instead, it is impactful and compelling without being overt.

Take a popular visual effect, for example: the gradient. Both professional and hobbyist designers love them some gradients. But look closely, and you’ll probably find that great designers tend to use them in moderation, and with great care. You’ll find blends between two very similar — almost indistinguishable — shades, rather than gradients that go from, say, a dark green to a light green. The result is an effect you can feel moreso than see.

The same thing is seen with the drop shadow. Whereas amateurs often make the mistake of using very heavy shadows, more experienced designers are likely to produce barely-noticeable effects that create a sense of depth and dimension without drawing attention to themselves.

The subtlety seen in great design work doesn’t just apply to fancy effects, either. Subtle differences in text color can be very effective at conveying meaning and hierarchy. Every-other-row stripes in the background of tables and charts are often times barely noticeable when employed by great designers. Rules and other lines make [sic] be used in very subtle ways. All of these elements are important and functional — but they don’t need to be overt in order to do their job well.

It sounds simple, but it’s difficult in practice. For practitioners, subtlety in design means soft-pedaling individual flourishes for the improvement of the whole. It means submerging your id to enable the finished work to surface, allowing individual elements to blend organically and in balance. It’s not always easy to step back to allow your work to take center stage. Restraint in the face of enthusiasm.

It’s not a new challenge. I’ve lately been re-reading Edward Tufte’s stunning series of books on information design. In Envisioning Information, Tufte cautions against the designer’s temptation to put one's art above the informational mission, offering up the example of solar-system models circa 1800:

Narratives of the universe were impressively cranked up in orreries, simulations of our solar system (as known in 1800), with planets and their satellites rotating and orbiting. Although a triumph of gear ratios, the machines did commit a grave sin of information design—Pridefully Obvious Presentation—by direction attention more toward miraculous contraptionary display than to planetary motion.

An overwrought model of the solar system, circa 1800. Reprinted in Tufte's Envisioning Information

The inner show-off threatens to overwhelm the entire purpose of the design, distracting from its actual content. Bold flavors overwhelm the balance of a subtle blend.

Alas, like savoring a rich coffee or a well balanced wine, it takes practice and training to develop sensitivity to and appreciation for design subtleties. The web is full of loud and lurid designs for the same reason that most people drink bad coffee and lousy wine. Friends, we lack taste. We lack subtlety.

Me, I’m working on it. I’d like to think that I’m becoming more discerning of wine, of coffee, and of design. For the latter, I spend time studying sites, advertisements, book designs and art installations that move me, dissecting their elements to understand the techniques that make them tick. I study the history of graphic design, of typography. And I tinker. I play around with designs, layouts, colors.

These efforts are my vials of scented oil, and I’ve gradually become aware of distinctions that were previously invisible to me. I don’t pretend that I am a master designer, but I’m confident that I can at least appreciate and identify the elements of good design in the work of others, to try to incorporate them into my own work. I am slowly becoming a gourmand if not yet a gourmet.

And hey, whattya know: Just this morning, thanks to my new friends at Soluna Cafés, I could actually taste the distinct flavor of cherry undertones in my espresso. In the coffee cup or on the web, it turns out that patience, practice and a little thoughtful attention make a difference.

Tags: creativity, design, food, paris

Designers, I Want You

Josh Clark — Mon, 04 Feb 2008 17:15:11 UT

I frequently receive inquiries from customers who need a designer to create a new design and implement it in Big Medium. Although I offer a simple service to convert existing designs into templates, I don't offer soup-to-nuts custom design services.

That's where you come in. I'm looking for Big Medium-savvy designers (individuals or firms) to whom I can refer inquiries from customers looking for design help. I already have a tidy referral list of go-to designers, but I'm looking for more.

If you're interested, please feel free to e-mail your details to jclark@globalmoxie.com. In particular, I'm looking for designers who:

Demonstrate a unique and polished design sense for creating exceptional sites
Have designed at least a few Big Medium-powered sites from scratch (please send links)
Use CSS-based layouts and standards-compliant HTML or XHTML

All submissions are welcome. In fact, I'm always happy to hear from all Big Medium designers (seriously, drop me a line to share the sites you've designed). For the referral list, however, I'm really looking for the cream of the crop; High standards apply here, so please don't feel slighted if you don't make the cut. (The few, the proud, et cetera, et cetera.)

And thanks!

Tags: bigmedium, design

World Radio Switzerland

Josh Clark — Mon, 04 Feb 2008 15:33:01 UT

Web editor Julie Varnau of World Radio Switzerland wrote to share the news that the public broadcaster “relaunched our newly Big Medium-powered site today to rave reviews.”

www.worldradio.ch

WRS is the English-language arm of Switzerland’s national public radio outfit, the Swiss Broadcasting Corporation. The site’s clean and clear design puts Big Medium’s multimedia features through its paces, featuring podcasts of World Radio programs, photo galleries of related topics and an inline radio player for individual stories.

Congrats to the World Radio Switzerland team on the launch.

Tags: bigmedium, bmsites, radio

Global Moxie - Full Feed

Big Medium T-Shirts

Big Medium 2.0.1

Go get it

The nitty gritty

Upgrading from Big Medium 2.0?

1. Set your FTP client to “plain text” or “ascii” mode.

2. Upload to moxiebin/Modules directory:

3. Upload to moxiedata/support/assets directory:

4. Upload to moxiedata/templates/cp_templates directory:

5. Upload to moxiedata/templates/site_templates directory:

6. Upload to moxiedata/templates/site_templates/HTML directory:

7. Update the bmadmin/index.html file with your site’s moxiebin URL.

8. Upload to bmadmin directory:

9. Run the updater

10. Clear your browser cache, and ask other Big Medium editors to do the same.

Updated: Big Medium 2: The Complete Guide

Go get it

Image Editing for the Rest of Us

Time Check

Updated: PDF Documentation for Prototype 1.6.0

Paper Cup? Five Bucks, Please

Trapped

Will Work for Magic: Creativity and Play at SXSW

Sensational side projects

“Be interesting”

“The beautiful mistake”

Ingredients of happiness

Uh oh, it’s magic

Messin’ with Texas

"Chief Scientist" Business Cards

The brand

Global Moxie = Josh Clark

Creative, playful

Technical

Non-corporate

Main offering = Big Medium

The design

The process

The end result

Turn Your Tables into Spiffy Charts

Introducing bm-table2chart.js

Installation

Usage

Add your data table(s) to a page

Chart type

Chart size

Chart color

Keeping the table

Using bm-table2chart.js outside of Big Medium

License

Books, Faith and Rock ’n’ Roll

Rock ’n’ Roll

Faith

Books

A Subtle Nose for Coffee, a Taste for Good Design

Designers, I Want You

World Radio Switzerland

2. Upload to `moxiebin/Modules` directory:

3. Upload to `moxiedata/support/assets` directory:

4. Upload to `moxiedata/templates/cp_templates` directory:

5. Upload to `moxiedata/templates/site_templates` directory:

6. Upload to `moxiedata/templates/site_templates/HTML` directory:

7. Update the `bmadmin/index.html` file with your site’s `moxiebin` URL.

8. Upload to `bmadmin` directory: