Archive for ‘css’ category

Sass For Web Designers

I’m dusting off this ol’ website to announce that, today, my fifth book has been published. It’s called Sass For Web Designers and has a familiar pink cover. The book is the 10th release from the wonderful folks at A Book Apart. They are the best team an author could hope to work with, and I was honored to follow up CSS3 For Web Designers with a book about Sass (something I was reluctant to embrace for years). And that’s why I wanted to write this book: To convince other folks like me out there that Sass can make their lives easier and more efficient when it comes to creating websites.

book

I thank Dribbble Co-Founder, Rich Thornett, for being relentless in advocating Sass’ benefits while I resisted for probably about a year. Once I discovered that I didn’t need to learn complex programming or command line shenanigans, and that it didn’t need to immediately change my workflow or interrupt the way I’ve been writing CSS for a decade, well then I was hooked. Using Sass doesn’t mean having to learn Sass in its entirety. You can start small, and slowly add more of Sass’ capabilities over time—even on large, complex, legacy stylesheets. It’s what I’ve been doing with Dribbble’s CSS for a long time now. Converting more and more of the stylesheet to Sass as needed, or as I have time to refactor things and/or learn more about what Sass can help with. You can start quickly and easily, then incrementally add more Sass power as you become more comfortable with it.

Again, my primary goal for this little pink book is to simply get more people interested in using Sass to make their lives easier. Sass is a wonderfully helpful tool with a great community behind it, in a discipline that can be complicated and frustrating. I’m hoping you give Sass, and the book, a try!

And now for a heaping pile of thank yous. To Jeffrey Zeldman, Jason Santa Maria, and Mandy Brown for creating a place that I genuinely want to write for. To Katel LeDu for being a fantastic project manager and steering things the entire way. This year has been particular rough for me personally, so it’s especially satisfying to see this thing actually released. To Erin Kissane for making me sound far better than I actually am. Thanks also to Jina Bolton for tech editing the book, as well as her work for the Sass community in general. To Chris Coyier for being smarter than all of us and agreeing to write a foreword. Also to Hampton Caitlin, Jenn Lukas, and Chris Eppstein for saying nice things about the book and letting us print those nice things on the inside cover (which Jason brilliantly selected to be Dribbble pink, naturally) among the other awesome things they do for the web. Like, I don’t know, creating Sass, building Sass, and generally being rad.

Here’s some things you could do now that you’ve reached the end of this fascinating post:

Pears

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.

Bulletproof Web Design, Third Edition

book

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.

Adapted

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.

Dribbble on the iPhone

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.

CSS3 button article at Typekit

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.

Handcrafted CSS Nashville: The Rebound Contest

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.

Ethan has all the details on how to enter: a Dribbble playoff of the beloved Baskerville italic ampersand. You don’t need to be a Dribbble member to enter! In fact, we’ll be giving away two Dribbble invitations as part of the contest.

Hit us with your best shot, and hope to see you in Nashville next month!

Handcrafted CSS Nashville

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.

Events in 2010

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:

Hope to see you at one of these events!

Carson Workshops: Handcrafted CSS in London

I’m pleased to announce the super excellent folks at Carsonified are bringing the Handcrafted CSS workshop to London! Carson Workshops will be presenting Ethan Marcotte and myself in a reprise of the one-day course we organized last month here in Salem, MA. And it’s surely going to be a blast.

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.