I’ve noticed that just about every year or so I favor larger type for body / paragraph text. A while back I moved from 16px (100%) to 18px (112.5%) and today I decided to increase that to 20px (125%) for screens larger than 900px. I’ve been hesitant to worry too much about extra-large responsive views on this blog because I didn’t want to completely blowout the ideal range for characters-per-line, but the larger font-size keeps things nice and proportional.

This is why, typographically speaking, fluid layouts fail without the power of media queries. Increasing your font-size as a column widens can keep you within that safe 45 to 75 characters per line range, and keep readers happy.

Mark Boulton on the challenges we face when incorporating traditional ad spaces into responsive layouts:

The template > slot > ad mental model is engrained both in advertisers, planners and web sites. Providing space for ads needs to be broadened into multiple spaces for one ad concept. This requires closer collaboration between advertisers and web sites, designers and marketeers and sales teams.

It’s clear that Mark has gotten his hands dirty working on a solution, and I like his idea for selling slot packages rather than single spaces. I could even see that instead of sending out the typical PDF diagram of ad slots and sizes, sales teams could point people to an actual responsive layout/template so they could see how their ad resizes and relocates within the site hierarchy at various widths.

What happens if ads become fluid and text is designed into the images or movies? Readability will certainly suffer, as will clicks. I wonder if advocating a similar image + HTML text approach much like The Deck or Fusion Ads would be a possibility. That may be a lot to ask, but if things need to be redefined, let us not be short-sighted.

I recently wrote a tutorial on texturizing web type for .Net magazine (Issue 221). One of my favorite CSS properties for text, mask-image, is covered in-depth from creating a semi-transparent texture in Photoshop to implementing it with HTML & CSS.

To take things further, I added in a CSS transform to get that skew, then dropped in FitText to make it all scalable for use in your fluid/responsive layout. Get a copy of Issue 221 & check it out for yourself!

I love what the power of the Internet can do for small businesses, especially when those businesses belong to friends and industry cohorts. Bob & Kris Galmarini run a fantastic shop called Neve Inspired that sells handmade kids’ clothes. We recently bought my 9 month old, Henry, their Ahoy! and Super Hero shirts, and we think they’re great. As cool as it is that people I know start these enterprises, it’s even better when you love the stuff they’re making or doing. The goods become reminders of both the friends who made them and my own participation in a very personal local economy, even if that economy stretches halfway across the country (or globe). Support your friends, and if you’ve got kiddos, visit Neve Inspired!

“I want ____ to be as simple as my iPod/iPhone.” I’ve said this about lots of things: my car’s dashboard, my washer & dryer, and yes, my thermostat. Meet Nest, a learning thermostat launched by a team lead by Tony Fadell, who also lead the iPod & early iPhone teams at Apple. I just may pre-order one and test it out here in the office.

I wish there were more conferences like Brooklyn Beta, or more accurately, I wish there were more conference organizers like Cameron Koczon and Chris Shiflett. I’d like to think I know how to be kind and hospitable to a few people at a time, but these fellas have mastered the art of making 250+ attendees not just welcomed, but truly valued. This was reflected in every aspect of the conference: the way they built the schedule, the way they conducted themselves, the way they set the stage, even in the name tags.

This wondrous artifact did more than identify who I was, it provided a backstory, though that backstory wasn’t written by me. Rather than using Twitter bios, Cameron and Chris took to handcrafting bios for people they knew well and for people they’ve only ever interacted with online. This process was neither quick or automated, but it made attendees feel like they belonged which, I’d argue, is the best feeling one can have at the beginning of a conference. It set the stage for a fantastic week, and though that week is over I believe we’ll begin to see its true value as relationships and ideas initiated at that conference grow.

Also, I gave a brief talk on longevity that focused on the hazards of sitting in one spot all day. My random collection of research links can be found over at Gimme Bar.

Gene Crawford from UnmatchedStyle asked Paravel to design a page for this year’s CSS Off competition. Over 5,000 front-end developers have entered to show off their skills by taking a PSD we designed and coding it out. Entries will be judged and prizes will be awarded. Awesome!

After a morning of team planning and intensive YouTube research, we settled on building a page for a fictitious gameshow on the Knuckleodeon Network called Triple Dare. Reagan put together some fantastic illustrations, and I designed them into a layout that I hope leaves lots of room for code-out interpretation. There are quite a few places where interesting animations, transitions, transforms, and interactions could be built in. Heck, this thing could also be built responsibly… I mean responsively… I mean both ;)

Be sure to read Reagan’s post to get the low down on his illustration process. We’re all very excited to see what people come up with. Happy front-ending!

I was driving through Bastrop, TX, with the family on Sunday and decided to pull over to see the devastation caused by the Central Texas wildfires firsthand. The scene in Bastrop was similar to what I’d seen closer to home with the Spicewood fires: scorched acres as far as the eye could see.

If you’d like to help, check out txwildfirerelief.org or grab a a t-shirt from centraltxfires.org. 100% of the proceeds go to help (FAQs), and they’ve got some fantastic designs.

This extended drought has me concerned about the future out here. It’s amazing how small climate shifts can have such a massive impact. I found this video (via The Butler Bros) both interesting and alarming. Check it out.

After reading this Fontdeck Blog post a few of weeks ago, I dropped an exciting new CSS property into the stylesheet for this blog. Wanting to test hyphenation on all my posts and pages, I applied CSS hyphenation to all paragraphs:

p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

During a day or so of road testing I noticed some pretty funky widows, so I fine-tuned my stylesheet to only target narrow columns, like the ones on my info page, which is a scenario where CSS hyphenation really comes in handy. Overall, I’m not sure what to think about fluid columns and widows—they’re bound to show up at varying widths. I try to avoid them at my defined max-width, but have plans to test the wp-Typography plugin in a responsive setting once we perform some server upgrades for the blog (taking our old Media Temple DV from php 4 to 5). I’ll be sure to report back when we get there.

Update (9/21/11): I’m happily using the wp-Typography plugin to prevent widows now that our servers have been upgraded. Things seem to be reflowing smoothly in my responsive layout. This plugin has loads of features, hyphenation, spacing control, character replacement, etc., that I’ll be experimenting with further soon.