Archive for ‘css’ category
“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.
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.
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!
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).
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.
There’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.
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.
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.
Chatted with Amber Mac and Leo Laporte last evening, and the resulting conversation (roughly 40 minutes) is now up and ready for consumption in the form of Inside the Net Episode 19.
It was an honor to be on the show, where topics included SimpleBits, web standards, books, current stuff that’s happening, iterative app building and other hopefully interesting things.
Apparently 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:
- 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.
- It’s so dead-simple to implement. Well, after reading this it should be.
- 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.
- 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.
I have yet to download and install an IE7 beta, but it sounds like it’s actually time to start paying attention to the latest release (Beta 2 Preview). We’re hearing reports from MIX 06 that the browser is essentially done in terms of CSS implementation:
Really interesting stuff from the above links. I’m impressed with what we’ve heard regarding the now-standards-aware IE team. On the flip-side, Roger Johansson brings up an excellent point: whether we’ll need a new way to self-clear floats in IE7.
Wow, this is a bit frightening, as I’ve been using the easy clearing method extensively, finding it to be pretty rock solid and predictable. It’s especially handy to use this to group components that use complicated floats and most importantly keeping them independent as self-contained, bulletproof “modules”. Being self-contained means they’re not dependent on subsequent elements in order to clear, and can then be moved around at will. Handy stuff.
So, it appears we’ll need a way to self-clear floats in IE7 that doesn’t use the still unsupported
:after pseudo-element and the now fixed
height: 1%; trick that previous versions of IE/Win so lovingly accepted. Here’s hoping there’s an alternative out there (aside from floating the container among others). I’m sure there will be, but even then this particular method would now feature 3 different declarations in order to work across browsers (actually add a few more in if you’d like IE5/Mac to work).
Update: Roger has posted an update, where a solution using
display: inline-block; instead of
display: inline-table; seems to do the trick for IE7. It’s a tad more complicated as to why this works, so be sure to read Claire Campbell’s informative write-up.