A few months ago, I developed some simple CSS tabs and shared them over at the silverorange labs. Ever since, I've wanted to re-engineer them to improve upon them. Then, last night someone posted over on the labs site encouraging me to nest the secondary menu in the primary list. I stayed up until four in the morning refining the tabs with a much better method of laying them out and then cleaned things up this morning so they're in better shape to share.
The new tabs are much more browser compatible, flexible, and semantically correct. Anyhow, if you're interested there's a slightly more in-depth explanation of what's new and how they work and a ZIP file for you to download over on the other site. Or go right for it and see them in action. I'd love to hear from you if you make improvements on them yourself.
At lunch today, our roommate Peter Rukavina made a point that it was a Maritime Canadian trait to pronouce 'aunt' with an O sound like 'want'. According to Peter, everyone else in North America pronounces the word insect-like as 'ant'. I've always thought that the pronounciation like 'ont' was a more general Canadian-ism based on our British heritage. At the risk of starting a potayto-or-potatto thread, where are you from and how do your pronounce your Aunt Josephine's title?
Over the past few months, I've been working with a friend on the branding of his fledgling company. It's been a fun and challenging experience: one that refutes my earlier belief that working with people you know only leads to disaster. Although my expertise is certainly not in the skill of brand identity, undertaking a company identity project has been a ton of fun.
Originally Scott approached me with the idea of working with him on a basic brand and website under the imaginative name ASM Technologies — his initials. After toying around with some promising logos and wordmarks in this theme, I challenged him to explore other names. One key was obtaining a suitable domain as his website is going to be his primary marketing tool. Names flew back and forth across the wires for over a month, friend and family were enlisted for input, and we finally settled on Swiftradius, which we both felt had nice connotations for his company without limiting him to doing one particular thing.
I won't go into the nitpicking details of the logo, but we eventually came to a simple wordmark with a symbolic radius on the right. Then, we worked on a website for the company. It's been particularly interesting working with a programmer who primarily develops back-end systems often involving XML and showing him the ins and outs of semantic XHTML. In an especially geeky moment Scott excitedly showed me how he's validating the site using his normal XML parser tool and how cool that was.
For any CSS geeks out there, the menu along the top of the site is an unordered list using relative positioning of each element to push it over the item before it. I'm also using the background image hover technique where both states of the menu graphic are in one file and the background simply moves up or down as you hover over an item.
The website itself is really in a beta state at the moment. Scott needed the site live for a proposal, so it was launched a little prematurely, so expect content to be added and existing content to be altered over the coming months.
The amazingly talented illustrator and animator James Patterson, of Presstube, is being featured on CBC Radio 3. The piece shows an excerpt from his upcoming DVD (albeit in fairly grainy display), which I'll have to try to get a copy of. Look for the link at the bottom of the page that mentions Presstube. James is also responsible for the fantastic artwork associated with the Canadian musician Buck 65 including album art and I believe the website as well. Nice work.
This morning the friendly Fedex man delivered The Living End's new disc Modern Artillery right to my desk. When I was living in New Zealand, I became aware of The Living End as they were played on the radio in Christchurch all of the time. They're a fantastic punk band from Australia who broke through opening for Green Day in their country. You might describe them as a cross between Bad Religion, Green Day, and The Clash.
The new album comes after a few years' hiatus following lead singer Chris Cheney's involvement in a serious car accident. They've come back with a strong album, which I've been listening to all day. Hmm, and aparently they're playing in Portland, Maine at the end of the month. Maybe a road trip is in order. Too bad there aren't any Canadian tour dates posted.
A bunch of silveroranges got out on Saturday to play a round of very breezy disc golf at Strathgartney Provincial Park. Upon our return to headquarters, I wrote a bit of a review of our Flathead Cyclone Discs over at silverorange stuff (our reviews site).
I may be missing something here, but I've been thinking lately that mixing some basic algebra and arithmetic into CSS could offer some really powerful options and solve some common design problems. Maybe this stuff is part of the CSS3 spec, which I'm not too aware of, but if not it might be something to consider.
The main instance I'd love to use algebraic quantities is for displaying a set of floating containers on a page. In my photo gallery, for instance, each of the containers (containing a photo, title link, and number of photos) floats to the left, so as your page gets wider, they slide into longer rows to maximize the use of the page. Try it by going to the gallery and making your browser wider and narrower. However, this runs into problems when one of the containers has an extra long title and disrupts the wrapping. What if I could set a value of x to the height of all of the containers so they didn't have a fixed height but all of their heights were equal? The same could go for making a square element on the page. I could set the width and height both to n and they would be equal no matter what content was in the box. Yet another example might be a set of tabs for a menu. I don't know how long each title will be, but I want each of the tabs to be the same width. Set the width of the tabs to w and they'll all be equal no matter what.
Sprinkling in some basic arithmetic could be useful as well. Say, I want an element to be a percentage of the width of the page minus a fixed number of pixels. In several instances lately, I've wanted to set a table of data to be the full width of the page but it has a menu to its left that is 300 pixels wide. If I set the table to have 100% width in my CSS, it causes horizontal scrolling because it's assumed that I want it to be 100% of the whole page. What if I could determine the width to be 100% - 300px? This is just one example, but there are numerous instances where this comes into play.
Has this been considered before and rejected for good reasons? Or is it in the works? Although, obviously it may add much more complexity to the rendering of CSS, it seems at first glance like a powerful layout addition.
The weirdest thing just happened fifteen seconds ago at work. The phone rings. I answer with my full name to distinguish myself from the other Dan at silverorange. The guy on the other end asks if I paged him. Confused, I tell him I haven't. Then, he introduces himself and he turns out to be someone I went to elementary school with. He's in obstetrics and his pager was goofing up. Then he jokingly asks if we need someone to deliver a baby. We laugh, say goodbye, and he hangs up. Strange times.
