Chicago-based entrepreneur and web developer Sean Fioritto has been programming since he was 12, and makes cool things for web designers. He's currently bootstrapping his own small business. We caught up with him to talk CSS.
You've written a book called Sketching with CSS. Sketching? Surely that's what Photoshop is for?
I don't want to rag on Photoshop too much, because it has its place, but I think most of us know it would be ideal if we were working in code more and Photoshop less. This is a daunting shift in thinking and workflow for many designers and agencies.
It's one thing to sit down and recreate a completed Photoshop comp with HTML and CSS, but to create the design, in the browser, from the beginning? Many designers feel like they can't be creative when they try to write code and design at the same time.
But what if writing CSS was as easy as sketching? You can get pretty close with the right tools and the right technique, and that's what I cover in the book.
When it comes to designing in the browser, what's the secret of success?
For years the mantra has been 'design in the browser', but plenty of web designers aren't comfortable diving right into code. Writing code kills their creativity. In the past, if you wrote code at all, it was a separate task in your workflow. When you design in the browser, all of the sudden floats and divs and forms are mixed into your creative process.
There have always been people who always go straight to the browser and have no problems, so how do they do it? The secret is to not think about the implementation, so when you wonder 'what would three columns look like here?', you can just do it and not have to switch into puzzle solving mode.
Web designers who are successful with designing in the browser have an arsenal of tools for creating the effects they are looking for in the browser. They don't have to ask Google how to do something every time, so they can get into a flow: have idea, write code, refresh browser, repeat.
What's key to creating very complex layouts?
The key is to have a set of patterns that you can mix and match to create whatever layout you want. If you want to get really advanced, you can stuff these patterns into something like your own, custom grid system, which is something I cover in the book. This works for two reasons: the more familiar you are with a pattern, the less you have to think about it, so [you'll spend] less time puzzling over how it will work. Also, when you use patterns you avoid entire classes of bugs. You know it'll just work and you won't be stuck asking Google or a coworker to help you figure out why it's broken.
Looking at CSS and how it's developing, what's get you most excited?
Flexbox. Layout in the browser sucks, but Flexbox fixes it. I devoted a chapter to it in the book and I also have a series of free video tutorials.
Browser support isn't completely there yet, so you can't use Flexbox on every project. But for me at least, Flexbox is so easy to use I'll use it to mock up a layout and then go back and reimplement it with floats or whatever when I'm done. So I think Flexbox should have a spot in your CSS toolbox right now, and for a lucky few with customers using modern browsers, it could even make its way into production.
Have you heard any good CSS jokes recently?
There's a Twitter account I think is pretty funny: @CSSHumor. Here's an example: .bus > .wheel { -webkit-animation: spin; } .
Words: Martin Cooper
This article originally appeared in net magazine issue 252.
