Hey, here’s a thing that’s fun to say: Happy tenth birthday, responsive web design! That’s right: the original “Responsive Web Design” Article Turns Ten today. It feels odd to think the article’s been online for a decade; odder still to think of everything that’s happened since it was published. To commemorate things, I’m working on a few blog entries that’ll be looking at different parts of responsive design: what’s changed in the last ten years, what hasn’t, and where the idea might be going next. If that sounds appealing to you, feel free to sign up to have new blog entries emailed to you. But those are still in progress. Today, I’d like to talk about how responsive design came to be. It’s a story of a talk, and then an article. It’s also the story of the people who helped make those things happen. …okay, so, yeah, look. Technically speaking, today’s not really responsive design’s tenth birthday. The article turns ten today, but the concept turned ten in early April. I coined the phrase for the first time at An Event Apart (AEA) Seattle on April 6, 2010, in a talk titled “A Dao of Flexibility.” (If you’re a glutton for punishment, you can watch a video of “A Dao of Flexibility” recorded later that year. Here’s AEA’s write-up from when they posted it.) In that talk, I showed folks how I created a flexible, device-agnostic layout using fluid grids, flexible images, and media queries: the three ingredients of a responsive design. If you watch the talk, you’ll see the title’s taken to resonate with John Allsopp’s “A Dao of Web Design”. That article was an enormous influence on me as a young designer. And honestly, it still is: it really shaped the way I think about the web’s potential as a design medium. But I didn’t start the talk with a title. In the years leading up to the talk, I’d been working on more design projects that’d asked me to work on separate, standalone mobile websites. Heck, not even that: frequently, they’d ask for an “iPhone website.” And something about that didn’t quite feel right to me. And it definitely didn’t feel sustainable—were we going to create separate websites for every new device that came along? Besides, I’d always been interested in creating layouts that were flexible and beautiful. So I thought I’d use my AEA talk to suggest an alternative. Before I started working on the presentation itself, I designed a fluid, grid-based layout for a simple web page, and started looking for ways to adapt it for differently-sized screens. There’d been JavaScript-driven approaches in the past, sure, but I wanted to see if there was a way of adapting the design where I’d defined it: inside my CSS. After poking around a bit, Craig Hockenberry’s “Put Your Content In My Pocket” set me on to media queries as the solution. I had a fluid layout that, thanks to a sprinkling of media queries layered on top, could look good on my phone, on my desktop monitor, or on anything in between. But I still didn’t know what to call it. Around that time, my partner Elizabeth visited the High Line in New York City shortly after it opened.  » Read More

The post Color Ninja for Mac, Your New Color Schemer and Palette Manager appeared first on Fresh For Designers..