Dusting off front-end skills: CSS Venn Diagram
It's like I've been dozing, and when I woke up, the world had changed almost beyond recognition. Since I made the switch to UX, the web has gone doolally for HTML5, embedding fonts & swanking it up with CSS3. Hey guys, wait for meeeeeee!
In an effort to do something about it, I'm trying some HTML experiments / training exercises.
First time out: some CSS 3. I'm a fan of Dan Saffer's Disciplines of UX Diagram (PDF), so decided to redo it in pure HTML (with permission).
Here's the HTML & CSS version. (Chrome, FF, Safari should be ok - not tested in IE)
It's pretty close to the original, plus has a handy draggable wee man so you can decide your UX niche.
Things I learned:
- Dreamweaver is a horrible tool, and it's time to switch to Coda or similar;
- You can make line drawings using the :after pseudo element (hat tip - this speech bubble article);
- Repeating the border-radius command 3 times is annoying, sort it out browser-makers;
- jQuery is great but doesn't always play nicely with iOS - drag events, for instance, do not connect to iPad touch events unless you poke at it (which I didn't).
I thought I could make this semantic somehow, perhaps by using an unordered list, but in the end couldn't figure out how to pad things nicely without divs.
What shall I try next? Maybe some of that newfangled CSS animation stuff the kids love.
Thanks to Dan for the use of his diagramme.
