Maybe you should try LinkedIn?

As an industry, we web design-types are torpedoing into the responsively designed future while our design tools are stuck in the mockup-driven past.

We now have the know-how to serve dozens of devices, resolutions and bandwidths with one codebase and a design that adapts to its device. The old flow of designing a mockup with a 960-pixel grid, getting sign-off and coding it up is dead.

Dead, dead, dead!

We could attempt a mockup-driven approach to responsive design. Why not pick a few resolutions we want to support for an arbitrary amount of devices and then just do static mockups that address each scenario? We could, but now we’ve multiplied the amount of work we do by a factor of n, and our finished design won’t feel quite right when coded.

Not only that, but what gives you the right to only support a handful of devices? Let the user use whatever device they have in their hands to get at it.

“But everything needs to be approved by The Creative Director. That’s their job! We need to stay on-brand, on-message! Margins of exactly 12px!”

Sure, no doubt. No one wants a grumpy Creative Director. But there’s no reason why you can’t design responsively today and still please any number of stakeholders.

Design the parts, assemble the whole

What I find myself doing more and more is designing components in the browser where their context is 1:1 — no pictures of websites here, folks — where I can easily test multiple viewport sizes. (I’m not sure that component is the right word yet, but it works for now.)

For me, a component is any given idea of a thing that a good website must have:

• good typography
• a uniform set of form inputs and buttons
• navigation or chrome
• adaptive layout

Right now it’s a big, slow, dumb challenge to attempt to do all these things well in static mockups and expect the result to be pushed into code perfectly. These days, I often work on something like my header, paragraph and list styles with markup and CSS in a browser using real content, test it across multiple viewports and devices, then move on to the next component when I’m happy with the results.

You can’t do anything like this in Photoshop, Fireworks, or any other tool where the output is only vector or bitmap. The output needs to be code.

Ugh. Code?

Yeah, but just the web standards: HTML, CSS & Javascript.

Look: we create paintings with brushes and paint on canvas; we make music with things that make noises; we need to design websites with things that make web standards code, specifically good code — not too much, just for a specific component, that gracefully degrades. (This is not the article where we weigh the merits of screen designers coding their work. There are plenty out there.)

Do I smell future?

I actually started writing this article a couple days ago with no particular tool in mind, only wild fantasies of what a modern and future-forward web design app would be like.

But serendipity is a clever girl, and Gradient 1.0 was released today in the Mac App Store.

In a nut, Gradient is a remarkably intuitive tool for doing 90% of the gradients we web designers need on the regular. Just look at the first boot screen:

Gradient makes the task of designing gradients in CSS3 as easy as designing them in an image editor. With a UI like this, I might actually argue that its the most enjoyable gradient editing tool I’ve ever used.

The current problem with creating gradients using CSS3 is the boatload of vendor prefixes you need to make them work across browser, as well as having a fall-back strategy (usually a solid color) for older browsers. You can streamline this process quite a bit using SASS and especially Compass to compile your CSS, but you still have to ⌘-R your browser to see the results.

Gradient gives you a sexy interface for interactive gradient editing and outputs beautiful CSS3 instantly. With SASS support and multi-step gradients on the way, this app is a model of future web design tools. If you’re as excited about this New Way as I am, please support the Jumpzero guys by purchasing the app.

Onwards.

Preface

I am not a well-known web developer. I’ve yet to work on anything that made its way to the front page of any widely read blog or news site. I’m just a humble guy who writes a lot of code and moves a lot of pixels around all day. My voice isn’t heard by many outside of the small circles of friends, family and colleagues I interact with on a daily basis. But this isn’t stopping me from writing this post.

Reflection

Steve Jobs passed away yesterday. He was 56 years old. He built one of the world’s largest companies, selling some of the world’s most amazing and truly beautiful products.

Steve — (don’t we all feel like we’re on a first name basis with him?) — created devices that help me and millions of others get shit done every single day.

I’m part of an industry that wouldn’t be where it is today without Apple. Apple’s devices, especially the iPhone, forced competitors to catch up.

Google up operating system screenshots before and after OS X, phones that predate the iPhone vs. those that have come after, and laptops pre- and post-MacBook Air.

Steve knew we were in the future and, dammit!, the future is supposed to be shiny, sexy, and easy.

Steve broke the status quo over and over again. A rebel with a cause, practically vigilante but crazy genius for sure.

Self-Reflection

I’m trying to figure out why I feel so sad about the passing of a guy I never knew, why flowers and vigils at retail stores across the world seem so appropriate (a first of its kind, for sure).

Maybe because I never thought I had any living, breathing personal heroes.

Now I certainly have one less.

Rest in peace, Steve. And thanks for reminding everybody about the future.

When the iPad was initially release, it was touted as the ultimate digital media consumption device. Whatever you can see and hear over the Internet or on your hard drive was just going to be more enjoyable on the iPad for all sorts of reasons: form factor, ease of use, portability, etc.

It took a little while, but a few multitouch-optimized production apps started to trickle out to prove that the iPad’s unique interface makes an exceptional if not ideal digital media creation device as well, if only for certain types of media.

Djay for iPad was one of the first apps Gruber cited proving this true. Then of course came the iPad 2 and Apple’s own Garageband made its multitouch debut.

Trying to be productive

Along the way, the good folks at The Omni Group ported their much-loved diagraming app, Omnigraffle to the iPad. Being a fan of the desktop version, I sucked it up and purchased the $50 iPad app. It was probably the first productivity app for the iPad that I decided to take seriously.

Amazingly, most of the familiar Omnigraffle tools and options were there. It was impressively simple to create new objects, line them up, resize, and change their properties. Without getting too deep into it (I’m not trying to write a review here), it felt truly useful, but not robust enough to replace desktop Omnigraffle for my everyday wireframing needs.

Actually being productive

Fast-forward a year and a few months, and Omnigraffle for iPad is now at version 1.6 and has some impressive improvements. Most notably, you can import stencils from Graffletopia simply by searching and clicking. With almost zero effort, I had some of my favorite wireframing stencils ready to go.

Today I was tasked with giving the home page for HipHost a rethink for the sake of highlighting featured or seasonal tours, I decided to give Omnigraffle for iPad the old college try.

Actually using the damn thing

The goal at hand was a simple home page wireframe redesign. I usually find redesigns easier than carte blanche designing, but I wasn’t ready to jump into desktop Omnigraffle, Fireworks, or even code. I reached for the iPad and fired up Omnigraffle thinking I’d play around with a few grey boxes and figure out the big picture, then shift to the desktop.

But an hour and a half later, I had something that looked an awful lot like a complete wireframe. And I was very, very happy with the results. And very, very surprised by the time.

Single-tasking is the way to go

Multi-tasking destroys productivity. True productivity. The sort of get-shit-done productivity where you feel good, not exhausted, when its over. The single-tasking nature of the iPad means you can’t help but pour all your attention into what you set out to do.

A UI so clean, you can eat off it

When wireframing, I’m mostly doing the following:

• selecting elements
• positioning elements
• typing text
• configuring elements

Here’s how you do these things in Omnigraffle for the iPad:

• selecting elements: tap
• positioning elements: tap & hold, drag
• typing text: tap, double tap
• configuring elements: tap, tap the Inspector icon, tap a property, make changes

These are trivial examples and certain actions are more complex by nature, but they demonstrate that nothing I wanted to do ever took more time than I felt it should. I was never fumbling through menus or panels trying to figure out where some switch was that let me do what I needed to do. All the important controls just felt there.

While apps on the iPad lack power-user features like keyboard shortcuts, the right multitouch user interface at least feels efficient.

Around July 1, 2011, I left my job at a high-profile consulting firm in Boston, Massachusetts to embark, for the second time, on the path of indie web professional.

The decision wasn’t terribly hard. All the questions had really simple answers.

1. Why’d I decide to go?

   I didn’t care about the work I was doing. I never felt like I was doing cool or interesting work from both a development and business standpoint. When you don’t care about what you’re working on, you don’t do your best work.

2. What was I going to do next?

   I had a small project going with a friend. A cute little mobile-optimized, location-based tool. I wanted to put the proper amount of dev time into it to see if it really had legs. I’ll refrain from telling more about it, as I’m not sure what its current status truly is.

3. How would I find more work?

   I was getting pinged at least once a week by someone looking for someone to fill a role quickly. At least every other one of those were freelance gigs. I worked for half-a-dozen or so companies in five years as either a contractor or employee. I have a network. It’s done more for me than LinkedIn, for sure.

4. What if things didn’t pan out?

   I had enough money in the bank to last me few months and there’s a dearth of front-end developer and user experience talent in Boston. Finding a new role wouldn’t be hard.

So what finally happened and what does this have to do with writing?

Through that wonderful network (never burn bridges, folks), I connected with Mario Ricciardelli, founder of StudentCity. We met at a Meetup geared at UX for entrepreneurs where he showed me his Balsamiq wireframes for a cool social travel concept, HipHost.

In a little less than a month of working with Mario and his team, HipHost.com is up and running, at least as a soft launch. I’ve made the front-end code my baby, juiced it up with Compass and SASS and helped breath some personality into the design.

I’m working on something I care about. I’m generally happier and more satisfied at the end of the day.

You still didn’t mention anything about writing.

Sorry.

I was a huge writer throughout high school, both creative writing and journalism. The combination of writing + geekery and my general creative tendencies played a huge part in getting me to where I am today, in the (thriving) industry I’m a part of today.

But I stopped writing for a while, partly due to going through the necessary but often fun motions of growing up but also due to the lack of creative will I had at the end of a day working on stuff I didn’t care about.

I’m proud of what I’m building now and I feel like I’m ready and willing to share that process with the vibrant community I’m a part of through my writing.

I guess the lesson here is do good work and the rest will come naturally.

HipHost has a long long way to go, but we’re in a hot space and I have a ton of confidence in the team. A few more of these blog posts (but shorter!), and I’ll also have that confidence in myself to write more and maybe contribute some cool code.

Have fun out there.