Using Ampersands for a classier Responsive Navigation Icon

It looks like everyone’s settled on the three horizontal lines for collapsed responsive navigation menus.  It’s good, it’s a great icon, very descriptive.

However, sometimes you want something a little more classy. Let me propose a new alternative standard, using a single, solitary &.

Here’s how it looks in action:

First, the full width navigation:

Edit Room's Menu, full width

The full menu, in a straight line.

Then, on smaller screens:

Ampersand Menu, closed

Screen actions in Edit Room, collapsed into a menu.

Clicking will (as usual) reveal a vertical menu, using the same markup as the full width menu, just some different CSS and of course JavaScript.

Ampersand Menu opened.

Screen Actions revealed.

So there you have it, a classy alternative. I hope to see this in wider practice on fine hand-crafted sites everywhere.  Mine may be a simple ampersand, but you’ll be able to use whatever typeface’s characters you like, and make some really nice ones.



Posted in Interaction Design, Responsive Design | Comments Off

Does Apple have a tool for creating CSS Animations?

This is a brief response to Thomas Fuchs’ insightful article about Apple’s new CSS3-animation enhanced navigation and Mac pages, available here.

His point was to call for the ability to use arbitrary timing functions for webkit keyframes and animations via javascript to allow for easier ways to specify bounce and other programmatic eases. I agree with him that there should be that option for those who would use JavaScript to accomplish complex CSS animations, but I believe that the complexity of apple’s animations point to something else. Continue reading

Posted in CSS3, Edit Room, Motion Graphics, Visual Design | Comments Off

Site Redesign – November 2010

I thought I’d write up some background on the current Splat Collision Industries site, the recent update, some thoughts about the interaction and visual design, as well as details about the CSS3 animations and transitions that are a key part of the experience.

Continue reading

Posted in CSS3, Edit Room, Grid Systems, Interaction Design | Comments Off

Introducing Edit Room

Since the dawn of time, people have been asking the question “Where’s the editor for HTML5*?” Continue reading

Posted in Edit Room, Grid Systems, Motion Graphics | Tagged , , | Comments Off