Launching Onceupon.io in private alpha

Onceupon.io

We threw caution to the wind, and built a quick site to test our ideas. Onceupon.io is available only for a limited group of about 80 users, friends of ours, including many writers.

We built it quickly, in a couple of weeks, using Drupal7, a powerful CMS. We’re going to see if we can motivate anyone to write for us. That will be step one.

How to fake 3D and more with CSS3 box-shadow

CSS3 box-shadow fake 3D

Box-shadow is a powerful property in CSS3. It’s more than just for drop-shadows. Think of it as a multi-purpose 3D styling tool. That’s because you can stack multiple drop shadows.

Today I’m going to show you how to make, out of a simple DIV, this:

CSS 3D button effect

Continue Reading…

Fun with CSS text-shadow

I’ve been playing with the text-shadow property in CSS3, and having a lot of fun with it. Did you know that modern browsers allow you to stack multiple drop shadows? Used creatively, this allows for all sorts of pure-css fun.

Here’s what we’re going to build today:

3D  shaded  

Continue Reading…

DRD v3 is live!

Thumbnail of the DRD websiteThird version of the Department of Redundancy Department’s website, this time using WordPress. WordPress is a beautiful piece of software, highly discoverable… of course, it’s targeted at geeks, but I think it broadens the target a bit.

For the DRD’s site, I chose a simple theme, and tweaked the typography. Videos will be hosted on YouTube, which will keep things simple as well.

If you have a high opinion of me, and a strict sense of appropriateness, please don’t look at these crazy, NSFW videos. Thanks!

BT DiamondIP is live!

BT DiamondIP WebsiteA whopper of a project!

I was able to set a good direction on the information architecture, and to keep everyone committed to a more-or-less standard navigation scheme. There was little I could do to influence the tone and tenor of the copy, but I did help cut down the marketese to a manageable level. In terms of the visual design and branding, I got to work again with my good friend Peter Alexander, who took in the strict constraints that I was imposing and provided me with just the clean look and photo-graphics I was looking for.

I was committed to building a good modern website, with as little compromise as possible in the quality of the code, design, and trying to stick close to semantic HTML. Noble goals. But I didn’t get a choice in CMS packages. EktronCMS it would be. Ektron is an ASP.NET CMS package with all the features you could want. Smell a rat yet?

It was a constant struggle to get it to work, to get it to work as it should, to get it to work well with clean code. I based the site’s HTML structure on the BluePrint CSS Framework, but that got partially butchered by the junk code ASP.NET wants to inject, and the spaghetti code that Ektron gleefully injects everywhere.

Of course, as a CMS package, Ektron fails as many do: by making GUI editing as complex and counter-intuitive, if not more, than HTML itself. Which means, of course, that the webmaster will have to do the updates anyway… and I could do them faster in Notepad! Also, as a typical ASP.NET application, it breaks all the time. And as a typical enterprise application, it’s also very slow, and ugly as a pig farmer in a cocktail dress.

Nevertheless, I soldiered on through. I used an XML sitemap to drive the navigation dynamically, Ektron collection controls and content placeholders and other god-awful components to put together a site that looks good and doesn’t suck. And custom-coded a bunch of tools and forms. I worked through my Christmas vacation in Paris to get it done. And now it’s done.

I’m proud of the result, yet I can’t say that the process made a lot of sense. I’m an excellent swimmer, but I don’t like to be forced to swim with a backpack full of rocks, especially when nobody needs the rocks or the backpack.

Back to my roots…

Well, it’s official! After seven years in the consulting business, I’m returning to my roots in the marketing department: I’ve switched positions at BT INS, and will be maintaining all our corporate websites. My new title: Internet Marketing Manager…

It’s going to be fun to get back to creative work, and to service. Most of all, what I’m looking forward to is being able to work in depth on a single project, for the long haul. And a whole lot of creative freedom, as long as I deliver the goods.

It’s also an exciting time to be a corporate webmaster: With blogging and podcasting coming of age, there’s a big strategic difference to be made in how this company communicates. That’s something, isn’t it? Best part, though: I get to work from home again!

Extranet with secure webmail

Extranet with SafeMailSometimes all a complex problem needs is a better metaphor.

This higher-ed consultancy, client of ours, has been struggling for years with transfers of large data files to and from their clients. Statistical analysis works best on large data sets, and in this case, the files reach in the dozens of megs, and they usually are burnt on CDs and sent in the mail.

Some more courageous institutions had been uploading files through a web interface, but that was fraught with problems, mostly with dropped connections and uploads. Also, there was a lot of back-and-forth on the phone with clients, trying to determine which uploaded file was which, which was outdated, which had changed.

We had finally come up with a semi-reliable way to allow web upload, and decided to revisit the whole user experience before we implemented it. The developers had a clear vision of an online file manager, but I insisted we look at the actors, context, and goals.

It turns out that these files are always exchanged in the context of customer service, always accompanied with conversation and clarifications. And there is a better metaphor for this kind of file exchange: Email attachments.

I proposed a prototype of “Safe Mail”, a new set of pages on the extranet where clients can check their mailbox for messages and announcements, send messages with secure multi-meg attachments, and keep track of the entire process. I made sure to include thumbnail photos of the client’s consultants with their email, and to demo an announcement from the big boss, to highlight the customer service, marketing and sales value of this relational tool. 

The client loved it. The entire office has been abuzz about it since the demo, and the developers are working hard to make it real. It’s going to simplify a whole lot of things around here, and everybody’s very busy trying to find the right photo to use on their profile.

I love it when looking at context and personal goals allows for a complete mind-shift into a better metaphor. We’ve done more than solve an issue here; we’ve changed the nature and tenor of customer service, making it both more rational and more personal.

Clean and simple…

Clean, clear UI for a questionnaire app.Finished building a nice clean UI for a college counseling questionnaire app. This was an exercise in using CSS to deliver a clear design across browsers, including the dreaded IE 6, with only a couple of days to test and deliver.

White space, use of Lucida Sans Unicode on Windows and Lucida Grande on the Mac, and attention to type spacing and layout made this a winner. The client was delighted, and requested no changes.

Another one in the bag. Moving on…