Archive for ‘css’ category

AIGA Redesign

This morning, AIGA (the professional association for design) relaunched with a shiny new design by Happy Cog. I had the pleasure of taking Jason Santa Maria‘s brilliant designs and turning them into semantic XHTML and CSS templates that could be plugged into a custom CMS built by Thirdwave (AIGA’s technical partner). Magic and fun ensued.

Every project is a learning experience. But working with Jeffrey and Jason for a client like AIGA, well that’s a whole new level of awesomeness. One could (and should) study Jason’s molecule-level of detail in typography (using just two web fonts and a splash of Interstate via the venerable sIFR). It was a fun challenge getting things _right_ using CSS. I hope I’ve come close.
Congrats to AIGA for renewing their digs with a smart, readable, beautiful design — and a big thank you to Jeffrey, Jason and Happy Cog for allowing me to pitch in and help with this.

Read more about the redesign:
* Jeffrey Zeldman: Happy Cog redesigns AIGA
* Jason Santa Maria: AIGA Redesign
* Happy Cog: AIGA Website Redesign

And a special geek note: events listed on AIGA’s homepage are marked up with hCalendar.

Do the Collapse

“Pretty soon you’ll be using your iPhone”, said the attorney in the elevator just five minutes ago. He’d glanced at me checking things on my (now terribly outdated) Blackberry Pearl. Everyone’s talking about the iPhone. No, _everyone_ is talking about it. Just goes to show how big an announcement it really was.

There are so many thoughts about this thing, but rather than add to the noise, here’s one I hadn’t yet seen mentioned: with a _reliable_ browser on the iPhone (Safari) and all that it brings in terms of standards support, JS, DOM, etc., will we start looking closer at resolution dependent layouts (Clagnut: Variable fixed width layout) (or other methods) for sites that _would or could_ function as well as their larger screen counterparts?

We’re essentially talking about a fully-browsable web and everything that comes along with that in Safari. Just on a smaller screen. I realize that already exists to a certain extent with Webkit on the Nokia, Opera, and probably others, but the typical screen dimensions on a mobile phone are tiny. Seeing Steve Jobs turn the device and browse “widescreen” was eye-opening. That extra horizontal space could really increase the readability of non-mobile-specific sites as is.

The vulcan-death-pinch-squeezy thing for zooming looks great, mind you. Fluid layout for screens this small isn’t optimal, while multiple columns could just get too narrow (in the absence of min-width) — but I could see where leveraging the browser to adjust layout based on screen resolution could make things interesting in certain situations. And it’ll of course be fun to find out what this all means.

Free vintage SimpleBits sticker to the first person who names (without Googling) the band for which the title of this post is named after.

Way #24

For the second year in-a-row, Drew McLellan has put together another excellent 24 Ways — an advent calendar of helpful web articles written by fine folks from all over the web.

To cap off this year’s set, I’ve contributed Gravity-Defying Page Corners, a simple little trick for adding dimension to a plain ol’ box. It also might the first (and after reading you’ll probably be thinking “hopefully last“) web tutorial written in verse. It’s corny for sure, but fun to write and hopefully read. Many thanks to Drew for wrapping up 48 presents to us all.

Microformats for Designers

In a little less than two months, I’ll be heading to Vancouver to speak about “microformats for designers” at Web Directions North. It’ll be a fun topic, and I’m starting to put together the material. I’m looking forward to talking about microformats from a designer’s perspective, including a little bit about the logo development, the implementations over at Cork’d (and the unexpected cool things that came out of that), as well as applying CSS to microformats.

But I’m also looking for help. What are some interesting things happening with microformats and design? Know of any great examples, visual experiments, etc.? Here are a few to get started:

I know there’s a lot happening out there, so let’s hear about it. And thanks!

Re-Brand New

For the first time ever, SimpleBits has a logo! Roughly six years ago, I took a stab at creating an isometric set of three boxes (cardboard, to be specific). It was really an icon — and one that sat in the header alongside my personal site at the time, the now-defunct cederholm.org. Over the years, it’s always been there, and I’ve probably overdone it in terms of branding: I put the boxes everywhere. It became the brand. But it was always awkward, and highly inflexible. It worked terrible in print, where at small sizes, the pixelated blocks looked more like botched clip art.

Several months ago, I finally started on a new logo design — something I’d been meaning to do for years. It went rather quickly, playing with four curly brackets set in Avenir that created a frame around a hand-drawn cube (vector this time!). I finally had something I didn’t hate the next day. I’m excited to have a mark that’ll be flexible going forward, and it was crucial for me to create one that could be any size, or color (even looking intact using a single color).

(fig). old and new logos
I owe Greg Storey (Airbag Industries) thanks for suggesting Whitney for the logo’s type, after I realized that the previously-utilized Triplex just wasn’t working.

It was the logo refresh that forced me to rework the site design as well. I’m not one to change things for the sake of changing things, but the new logo was a good excuse to update the templates as well. And what you see now is the result of several weeks of tinkering.

Much of the structure and layout of the site remain the same. Nothing earth-shattering here. This time around, I’m trying out an elastic (Elastic Design) em-based layout. If you’re unfamiliar, try resizing the text in your browser to see what happens. For this particular site, I think it works well. If I had the need/desire/requirement for an additional column, then I would’ve explored other fluid or variable fixed-width (clagnut: Variable fixed width layout) options. But for this simple, two-column set-up, I thought it’d be interesting to try something with ems.

I’m hoping the revised logo will help swing the rest of the company forward. I have a lot of ideas and things in mind for the future, and this is merely step #1. Here goes nothing. But first, new business cards need ordering.

Educated

CDIA Boston UniversityThere’s a myth that colleges and universities are teaching antiquated web design skills: table-and -spacer-gif-ness, FrontPage 98, etc. Actually, I don’t think it’s a myth — it’s actually happening out there. So after touring Boston University’s Center for Digital Imaging Arts yesterday, I was completely surprised. CDIA offers an interactive design program with an emphasis on CSS, web standards and hand-coding — and it’s right in my own backyard.

Jeremy Osborn, the program’s Director, mentioned that, while BU offers the resources and infastructure of a large university, CDIA is largely independent and run much like a startup — adapting and changing the curriculum as the techniques and methods out in the real world do. I found this approach pretty fascinating, and it’ll be interesting to see how their program evolves along with the web itself.

I’m hopeful there are other programs out there in other states and countries that are offering modern skills for budding designers of the web. Leave a comment if you know of any.

Also, if you’re in (or planning to be in) the Boston area, have an interest in teaching web design, and have the skills to guide the next generation of standardistas, contact _jeremy [at] cdiabu dot com_. They’re expanding fast.

London(e)

About an hour into the flight to London from Boston, I spilled a full glass of cranberry juice in my lap. There are several reasons why this was unpleasant, and they all include the words “embarrassed”, “sticky” and “no, I didn’t just pee my pants”.

I’ve now returned from @media on Father’s Day. It was a great trip despite the soggy flight out, and it’s really good to be back home with the family.

Many thanks to Patrick for inviting me to speak. I think it went just fine, and I especially enjoyed the questions at the end of the talk. We watched England win the World Cup match the previous night, so I knew there’d at least be smiling faces in the audience. For those that attended the session, I’ve posted the presentation slides (20MB PDF). Warning: they won’t be of much use without the commentary.

It’s always fun meeting new faces for the first time at these conferences, and @media was no exception. It’s the genuine friendliness of the people in this community that never seems to wear out. Fun times are a given. Wish I had the time/energy to list them all here, but it’s late. I also wish I had taken more photos, but what I did take are now up on Flickr.

*Update:* I forgot to mention, I successfully spent the torn note at a hotel pub after the @media party. Either my taping job was superb, or it was dark enough to go unnoticeable. Whew.

Pairing Wine and Microformats

While working on Cork’d, I realized this was a perfectly fine excuse to implement some microformats. What goes great with a nice 2003 Pinot Noir? Meaningful markup, naturally.

We’re currently using three microformats on Cork’d:

  • hCard (for member profiles)
  • hReview (for wine reviews or “tasting notes”)
  • rel-tag (for indicating tag links)

Our implementations aren’t perfect, but it’s a start. The rest of this article will talk about how we implemented hReview for member-entered tasting notes (example) and specifically how I used CSS to style the markup.


(more…)

Fence Riding Once Again

screenshotApparently the fixed/fluid-width toggle feature here at SimpleBits was a popular one. The latest realign bid farewell to the option, instead settling on a centered, fluid-width layout with a conservative max-width applied. For those that requested it, the ability to toggle between fixed and fluid is now back. There are a few reasons I decided to add it back in:

  1. Well, you asked. Actually, I don’t usually cave in to reader demands, hence my recent useless-but-riveting articles regarding oatmeal cookies and (of all things) the weather.
  2. It’s so dead-simple to implement. Well, after reading this it should be.
  3. Choice can be nice. Since max-width isn’t currently supported by all browsers, giving those readers an easy option for readable line-length seems to me a Good Thing.
  4. It’s fun to play with. Along the same lines as twirling a pencil in your fingers like the drumstick of a spandex-wearing drummer from the 80s.