Wednesday, September 26, 2012

How To Be Responsively Responsible in the Modern Age, Part 1: The Quest

It's been a long time - and I mean a LONG time - since I wrote a blog post. So long that I didn't have to look up the login information for my Blogger account because it's since been swallowed by my Google account. So long that the totality of responsive web design was barely a twinkle in Ethan Marcotte's eye, just a flurry of architecture philosophy, fluid grids and handcrafted CSS.

I am, according to my current business card, a Senior UX designer. "UX" - which stands for User Experience - is a pretty hot buzzword in the industry right now. These days, just about anyone who has ever touched software or the web is probably either a UX designer, UX specialist, UX researcher, UX architect, UI/UX poobah, UE/UI Engineer, or some other algebraic combination. Basically, solve for UX.

Ummm... becoming an UXpert?

To make it more exciting, no one quite knows precisely how to define any of these roles (though there are some pretty good definitions here)

So at one company, my position might be a veritable smorgasbord: defining business requirements and strategy, running user tests and research, creating the information architecture, coming up with some form of prototype, doing visual design, and then bringing it all together in front-end code. I've been at that place. 

Somewhere else, I might sit in the middle of the waterfall, drenched, having little up-front input, getting wireframes poured down on me. Upon these I might skin a design layer, then hand off a bunch of Photoshop files to the front end coders, never to see them again until a QA pass for design consistency (I am a little too familiar with this one, and let me tell ya, this is no way to make good products). 

At yet a third place, the roles of designer/developer/IA might be all but interchangeable: multiple people all capable to some extent in all of these roles, each a generalist with a specialty, working tightly together in a super-agile, iterative fashion, strategizing, designing, coding and releasing in short cycles (now that's what I'm talking about!).

None of these is the "right" way to do it for everyone. Similar to religion, you need to find the path that works best for your own style, projects, principles and personal neuroses.

So here's the scoop: I happen to have a rare opportunity to have a chunk of dedicated time at work to do nothing other than get myself back up to speed with front-end coding: HTML/CSS/JS and the crowd of hangers-on. I used to be a pretty fair whiz-kid at it, always coding by hand, doing table-less layouts before it was cool, converting Flash sites into pixel-perfect HTML fallbacks… that was no mean feat for a site like Titleist.com, let me tell you.

ESAI Energy site redesign 2010

A whole new world...

But in the last several years I've only had a few chances to really get down 'n' dirty and hand-code a site, and I've been feeling that it's time to dive back in. Why now? Because the entire landscape of the web has changed in the last 2-3 years. Flash is all but dead. Tables have been out of favor for a good while (though there's some call for their return in certain areas, which introduces both the rising challenge of keeping data looking good across different devices, and the less common concept of common sense). HTML, CSS and JavaScript are still the kings, but their newest incarnations - HTML5, CSS3, and JS libraries like JQuery - are now being called on to replace the functionality that plug ins like Flash allowed. 

Esdaille Barrett Law site redesign 2011
This means the specs are almost always in flux (help lies here and here for that), new functionality is popping up like crazy, and every single browser out there parses things differently. At least that last aspect of web design never changes… there are now just exponentially more browsers to consider, courtesy of the mobile revolution. Ah, for the good old days.

Plus, there is a whole universe of plug-ins, pre-processors, git repositories and open-source madness that is making things both easier and more powerful, and significantly more complicated to know where to start.

...and throw in some of that Responsive stuff

The other main reason that Now Is The Time is that the web world is finally truly starting to embrace responsive web design (RWD from here on out). At its roots, this is nothing more than saying "We want our web site users to have a great experience everywhere, but we only want to code it once" -  though there's little doubt that Ethan Marcotte says it with a bit more panache. Gone are the days when we would build one site for the desk and one for the iPhone; here at last are the days where web aficionados can sit for hours resizing their browser windows to see which of their favorite sites reconfigure themselves satisfactorily!

The trend towards RWD has been brewing for years, and the philosophies behind much of it (fluid grids, a COPE philosophy - "Create Once Publish Everywhere" - separating content from structure from function, etc.) have been best arguable practices for a long time. But one major turning point was Ethan Marcotte's article on A List Apart, looking at the principles of "responsive" and "interactive" architecture and applying it to the principles of web design. It brilliantly explains the philosophy, and was quickly turned into a book of the same name that has become required reading for anyone who sets a foot on this path.

The next major cultural milestone was the redesign of the Boston Globe web site, with the help of the accessibility-focused Filament Group. This launch caused a great disturbance in The Force, and immediately everyone who cares about such things was on the site, shrinking and growing their browser to gaze upon the applied awesomeness of this new philosophy, actually live and in the wild.

Mattlaurence.com v2.5
So my path was clear - I needed to start messing around with this new paradigm. And what better way to do it than to redesign my own site (long-in-the-tooth and all Flash, but still pretty nice, I think) and start walking the talk?

Now of course, I want to try and do this site redesign "right." 

But who's got the time?

This raises the issue that there are countless flavors of "right" in the web development world as well. Do you start mobile first, desktop first, context-agnostic? Do you use a grid system, or boilerplates, or go from scratch? How much fancy and experimental stuff do you want/expect/need to use? If you decide to get fancy, how to you plan for breakage when your biggest client looks at it in IE5? Do you adopt a philosophy of graceful degradation or progressive enhancement? How do you determine your break points and media queries? Will you keep your user experience speedy and page loads small by bringing in chunks of content conditionally with AJAX, or simplify your development with a more standard site structure? What will those decisions do to your SEO results? And don't forget to use sprites!

(deep breath…)


The black-hole at the center of the Responsiverse 

As for the actual building of code, do you use a CSS preprocessor language like LESS, Sass, or Stylus? JQuery is almost a given at this point (sorry MooTools), but how much does one have to learn, how much can you use plug ins and pre-rolled code, and how much should you roll your own JS? Should I bother to learn CoffeeScript since I already know JS pretty well? Or how about a framework like Backbone, Knockout or Ember? And which environment will you code in? Dreamweaver is the heavyweight - in clout and penetration, but also in file size, bloat and price... but it is still a strong player. Lighter alternatives like Coda, Espresso, SublimeText and the new Adobe Edge Code (previously Brackets) are all excellent and problematic in their own ways, not to mention the dozens of other options for Mac and Windows. Hey, let's face it, you COULD code a web site in any old text editor if you wanted to (but don't). CMS or no CMS? If so, do I just go WordPress, or will I need more control than that? If so, which of the thousands of CMS systems will work best for you, or do you just build your own? And then there are the essentials such as Codekit (sorry, Windows folks), browser-based tools like Firebug (or Chrome/Safari's built in tools), libraries full of polyfills and resets, your FTP software… and we haven't gotten into actual coding practices, patterns, philosophies, etc.

Whoof.

This ain't my daughter's father's web design. We're a pretty long way from that first edition of Jennifer Niederst's "Web Design In a Nutshell."

So begins the grand adventure… I'll keep you posted along the way.

In the meantime, here are Just a tiny fraction of the modern web resources I've been looking at to prepare myself:

The article that started it all: http://www.alistapart.com/articles/responsive-web-design (and the book)
http://codepen.io/ (an incredibly informative - and addictive - site)

Good luck to all ye who choose to walk this path... may we pass each other along the way.

- The Grand Nabib

No comments: