Yesterday, on stage at An Event Apart Atlanta, I announced Pears: an open source WordPress theme for creating your own markup & style pattern library.
I wanted to create my own database repository of commonly used patterns and figured the tool might be useful for others as well. Breaking interfaces down into patterns has been immensely helpful in learning and re-evaluating the best possible code to implement them. I’ve just gotten started and will be adding more as I create them.
But Pears isn’t about how I code these patterns—it’s a tool for creating your own.
The theme is available on GitHub for those that want to chip in and make it even better. Admittedly, the code is a little rough here and there, but it works.
Looking forward to seeing others’ takes on the patterns that power flexible web interfaces.
Yesterday, a copy of my latest book arrived in the mail, the Third Edition of Bulletproof Web Design. The first edition came out back in 2005, and I’ve been revising it every few years. This latest edit was a bit larger than the 2nd because so much has changed. HTML5, CSS3, Responsive Web Design—all of these things dovetail nicely into the core bulletproof concepts from the original book.
If you have the 2nd edition, the new version is likely not a necessary upgrade (New Riders probably loves me for saying that). Meaning, the guidelines for building flexible websites are still there, but a lot of the code and some of the examples have been brought up to speed. I’m most happy that the book has been updated for those that haven’t read it before. And as always, I think it’s a great book for those getting started in building flexible websites with semantic markup and style.
The final chapter was rewritten from scratch to include a new fictional case study that follows a very simple example of Responsive Web Design, which I think is a natural extension of the previous chapters.
If you haven’t read the previous editions, I hope you enjoy it. It should be available by the end of the week.
There’s no doubt that employing a mobile first, responsive design approach to a new project is a wonderful way forward for many sites. I think the most exciting thing about seeing these best practices develop over the last few years is that it finally feels like web design. Finally. That we’re not designing sheets of paper that happen to be on screen.
So yes, for new projects under the right circumstances a responsive plan is often the ideal. But what about existing sites? The ones that were designed before browsers supported media queries and before smart people started stitching things together into cohesive battle plans for building flexible websites? Ideally, the move to responsive design with device-agnostic-layout-hotness is one that starts from scratch. That is, it’s likely best to rethink it all.
For existing sites (particularly ones that are also businesses) teams don’t always have the luxury of tossing everything aside and building anew. We found ourselves in this position with Dribbble, a bootstrapped operation still run by 1.5 people (Rich Thornett and half of myself, plus wonderkid intern Bruce Spang).
Up until now we haven’t had an official offering that made the experience of using Dribbble bearable on small screens. If time was plentiful, we’d have a few options:
We could’ve created a separate mobile version of the site. This would’ve been a lot of work up front, and even more work to maintain. Not to mention loss of full functionality. There are times when I welcome a stripped-down UI for quick tasks, but more often than not, I’m missing the features found in the “full” versions of sites when I’m browsing on the phone.
We could’ve tossed everything aside and redesigned the entire app with responsive design in mind. Fun! But with a growing to-do list, the day-to-day work of managing a large, thriving community, and the business of generating enough money so that everything can keep humming along, it wasn’t an option for us right now.
That left a third option, and it was after a few (decaf) lattes and advice from Ethan, that I decided the best thing to do was compromise for now. Let’s keep the same content and code that’s been powering the large-screened version that Dribbble has always been, and then let’s do something adaptive to it—using media queries to effectively make the site fluid and as vertical as possible when rendered at 480px wide and smaller. In other words, let’s take a step towards a responsive design by crafting an adaptive stylesheet that overrides the master to make things usable and readable on phones and small-screened things. Our tiny team can continue to maintain just one codebase.
And so that’s what we did. Baby steps.
The process in making this a reality turned out to be very interesting. Much is written and talked about in terms of ideals when it comes to designing for any-and-all screen sizes, but not a lot is talked about in regards to the decisions one has to make when retro-fitting existing fixed-width sites. Sites with loads of interaction elements that need to adapt when it’s squeezed down skinny.
What happens to wide, horizontal navigation? Does search have to take up all that room? What about our form patterns? Where does advertising fit? How can we avoid modifying the markup for this section? I did my best to avoid using display: none; to simply hide things that didn’t quite fit. And not much is hidden, thankfully. But you do need to get creative in terms of how certain UI patterns are handled. Items that were previously rendered horizontally may possibly be stacked vertically. Items that were stacked vertically in tight spaces (short tag names) may be set side-by-side in columns to save vertical space (CSS3′s mutli-column layout proves very useful for spreading out lists of short links). We’re all still figuring this stuff out of course, and there’s so much more I want to write and talk about regarding these (sometimes) ad-hoc solutions. More soon, hopefully.
For now, I’m happy with this initial stab at a small screen experience for Dribbble. When time, resources and funds are more abundant, I’d love us to rethink things in a more holistic manner, but for now incremental improvements will keep us moving. And that’s the priority.
I wrote an article about creating an animated, image-free button with CSS3 and Typekit type and it’s been published today over at the Typekit Blog. Thanks to Mandy Brown for coordinating and editing it.
In a way, the article is an extension to a lot of the stuff I talk about in CSS3 For Web Designers: using the experience layer as a place to fully embrace the pieces of CSS3 that have decent support today amongst modern browsers. Buttons are a perfect place to experiment that way—and embedded type makes them all the better, while remaining flexible.
The entries were incredibly creative—thanks to all who entered. And we look forward to seeing you in Nashville next month. Just a reminder: early bird pricing ends in a little over a week from now, so book a ticket soon!
With early bird pricing for Handcrafted CSS Nashville (a full-day workshop presented by myself and Mr. Ethan Marcotte) winding down, we thought we’d run a little contest to giveaway two free tickets to the event on June 21st and other prizes.
I’m pleased to announce Ethan and I are bringing the Handcrafted CSS workshop to Nashville! We’ll reprise of the one-day course we organized last September here in Salem, Massachusetts and again last November in London with Carsonified.
As always, each attendee will get a copy of the book (Handcrafted CSS: Video Edition including the DVD) and we’ll spend the day walking through much of its content and more. This event was a great success in New England and Old England, and we’re thrilled to bring it south, to Tennessee.
So join us on June 21st at the historic Hermitage Hotel right smack in downtown Nashville (steps away from the famed Ryman Auditorium and other sights). For more info on the event and to book a place (there’s a max of 100 spots), visit the Handcrafted CSS Workshop site.
This year will be a busy one in terms of speaking events. I’m currently crafting a brand new talk titled, “The CSS3 Experience”. It’ll focus on enriching the experience layer with advanced CSS and CSS3. Everyone can easily add enhancements to to their designs when focusing on the interactions and events that happen on the page. And by targeting the user experience with these new and evolving standards, you can start using these flexible techniques now, on any site, with less worry.
Well damn, that sounded rather pitchy, didn’t it? That’s partially because the talk may very well also turn into a new book/DVD bundle, and the details of that are being worked out. Simply writing this blog post is helping hone the focus.
Several conference dates have already been set for 2010, including all five (gulp!) An Event Apart shows:
An Event Apart: Seattle — April 5-7, 2010. I’ll also be splitting a full-day seminar with Jeremy Keith after the conference proper. I’ll cover CSS3, while Mr. Keith covers all things HTML5. It will be most excellent. You can save $100 off the ticket price by using the code AEACEDE when registering for the two-day or three-day event.
Just like last time, each attendee will get a copy of the book (Video Edition including the DVD) and we’ll spend the day walking through much of its content and more. This event was a great success here in New England, and we’re thrilled to bring it to the UK. Thanks to Carson Workshops for making this happen!
So join us on November 23rd at Wallspace St Pancras in London. For more info on the event and to book a place (there’s a max of 70 spots), visit the Carson Workshops site.
Winner #1 is @wilto, waxing poetic about a place we’ve all been, surely:
IE6 lives on.
Box model—and heart—broken. position: fetal;
And Winner #2 is @squaregirl , who in three perfectly penned lines reminds us of the importance of validation during development:
Curly braces sound cute.
Until you leave one out. Oops!
I fracked my stylesheet.
Congrats to the winners! And thanks again to the fine folks at Campaign Monitor for sending them to the workshop. Which, by the way, is only a little over two weeks away. Spaces are being filled up, so grab a ticket and join us in Salem, won’t you?
SimpleBits is the tiny creative studio of designer, author, and speaker, Dan Cederholm. I make websites and things for people like you. Occasionally, I also talk about them here. More →