Blog

Posts about CSS

Responsive design is a bit like a toddler

Why? Because it’s a pain in the butt but ultimately well worth it. And it’s a real pain if you go about it like I did.

Screen shot of this website on three different devices

Requisite showoff-y composite of this site on three different Apple devices

I started out very inspired by the approach Andy Clarke took with his well known 320 and up framework: Design primarily for mobile and add CSS via media queries as you need it for larger screen sizes. Brilliant. Makes so much sense. Unfortunately, I found designing only for mobile takes a lot of discipline: I found myself constantly widening the browser window “just to see” what the design was looking like beyond mobile. Next thing I knew I was having flashes of debatable layout inspiration and quickly adding styles to the main “mobile only” section of my style sheet because I couldn’t be bothered to scroll down to the appropriate media query.

Long story short, I gave up and designed the site for the desktop. Then when I was done, I had to go back through each selector and figure out what declarations were needed for each screen size. This editing took at least a couple of evenings of my life I will never get back — and by flitting around between screen sizes while designing in the browser (constantly second guessing myself as I flitted), I’m pretty sure I added a substantial amount of development time to the project. Fortunately, I was the only client, and next time I’m going to exercise a lot more self control when I’m designing in the browser.

Fitter, happier, more responsive

The site has three layout states: Under 555px, it’s a single column. At 555px, it expands to a flexible multi-column grid, until the screen size reaches 992px, at which point it snaps to a fixed-width grid with a maximum width of 960px. Why the specific widths? The single column layout is obviously for smartphones, while the flexible grid between 556px and 992px was my attempt to accommodate various tablet sizes in both horizontal and vertical states. Despite the fact it’s been a standard of sorts a while now, I feel like 960px is still my happy place for desktop site width. Super-wide sites are fun to look at, but I find them a bit overwhelming and not super usable.

Or maybe I’m the toddler

So I ended up with a 320 and up-inspired site, but I got there the hard way. And maybe if I hadn’t gone about the CSS like a 2 year-old with the attention span of a gnat, it wouldn’t have been such a pain. That responsive design is worth the extra effort isn’t even a question for me anymore. I was sold the second I pulled up this site’s homepage on a germ-infested iPad at the Maine Mall Apple Store. It’s up to me to adapt the way I work to make it happen efficiently — just like I did when I weaned myself off table-based layouts five or so years ago.

Happy browser window resizing!

In the Beauty of the Lilies

Unless you’re using IE8 or below or you’re on a smartphone, you’re probably looking at 2-4 bright lily pads right now. Why? It’s really a lesson in self-editing.

Screen shot from Illustrator with flower shapes from this site design

Drunk on the heady possibilities of CSS3 and jQuery, my original vision for this site was to have no main navigation. It sounds great already, right? And it gets even better: Each corner of the screen was going to feature a lily pad that was going to serve as a link to a main content section (Blog, Work, etc.). If the user were to click on a lily pad, the requested content would appear to rise up from the depths of the pond (through animating the box-shadow property via a sketchy plugin I found), after which — wait for it — a jQuery-powered carp would appear from beneath said lily pad, elegantly fading out as it reached the middle of the screen.

I think if I’d written out the concept like I just did, I might have realized it was fundamentally uh, not good. But, of course, I didn’t. Instead, I saw the idea through to completion in a WordPress theme — and thus ensued many of the classic stages of grief as I clicked around my painstakingly created masterpiece: denial, as I tried to convince myself it was fun, different and even intuitive to use lily pads for a site navigation; anger, as I rued the precious hours I’d spent putting it all together; and finally, acceptance, as I came to terms with my site’s fundamental flaws: it wasn’t very usable (users want to navigate a web site, not a pond), and it wasn’t at all scalable (what if I wanted to add another main content section?). It was basically an awful Flash site from the early 2000s, just done in semantic html and javascript.

As you will read in my About section, I pride myself on keeping content top of mind when I’m working on a design. It’s not rocket science, but I’m of the opinion that design template of any kind — print, web, whatever — should never, within reason, dictate the content. It should always be the other way around. You know what I’m talking about — those websites you have to work on early in your career where “you can only add five lines of copy to the I Love My Cat section, otherwise the layout will break”. This I believe, so realizing that I’d got so carried away with some minor design garnish that I hadn’t given much thought to the greater goals of the site was a hard pill to swallow.

Anyway, this is a very long-winded way of saying that I had to suck it up and go back to square 1. Or actually, square 2, because I found myself with a bunch of very nice lily pads and other pond-themed PSDs I’d spent hours creating for the non-starter version. And so this site design was born – I kept the lily pads, but went with a more conventional, scalable navigation. I scrapped stupid gratuitous stuff like content sections rising from the watery depths. The carp is no longer jQuery-powered, but if you’re reading this at over 768px, you might see him make an appearance. What can I say? I like carp. No, really, I do.

Browse by topic

Browse by date