21/08/2012 · Penarth, Wales · Web design has always been hard work, and with each new year we find a new set of best practices and advancements to squeeze into our already tight deadlines. Every clued-up web designer wants to make their sites responsive, utilize all of the latest CSS3 typographic features, while keeping a mind on accessibility; making sure to take full advantage of every HTML5 attribute, serve Retina-ready imagery, and be certain that all of this will degrade gracefully down to an HTC device on a weak signal on the edge of the Sahara.

Alas, our market will always bear downward on project prices and timelines, with little concern for how much precious sleep is lost.

We are reaching the limits of what we can do within the boundaries of a reasonable project duration. At this rate – given our current resources and processes – a standard web project will price itself right out of the professional market. This creeping threshold will give us two options: start delivering less than what we know to be best, or start searching for better tools to help us achieve our goals in less time and on budget.

Considering most of you would never opt for the former, you might find it fortunate that there is an entire arsenal of new web design-centric tools being released to carve some breathing room into your overcrowded days.

Embracing the Machine

I craft my HTML. I scrutinize my CSS, refactoring until the cascade falls just right. Given the space, I would release nothing until it is impeccable. I’d also be shaking a can on the corner to pay my ISP.

Machines have a notorious history with front-end development. Frontpage. Dreamweaver. As much as they served a purpose, they spat out rage-inducing garbage that was hell to parse and rarely worked as designed. These applications were built by programmers, though, for generating what they thought of as “code”. More than a decade later, there are now enough web workers straddling the worlds of design, front-end, and development to begin building HTML/CSS tools that apply the same level of craft and detail to their generated output as any of us would give to our own hand-crafted markup. Or, at least, they have the sense to keep out of a savvy developer’s way.

Therein lies the difference between these new tools and those earlier apps: they are tools, not applications. They do one thing well, and leave the rest to your no-doubt considerable dev chops (or maybe to another tool).

For years there have been whispers of “The One Web Design App”: a Fireworks/In-Design/Dreamweaver monster that will allow us to work exactly as we think best, with impeccable front-end output. It is a beautiful idea, but I’m not sure such an app would be helpful to anyone.

Take a look at the aforementioned features we are already trying to cram into our processes. Most of them have cropped up within the last two years. Such volatility and complexity of execution presents a forever receding goal line to any application developer. An all-inclusive approach to the many needs of contemporary web design would bear an app burdened both by bloat and an enormous price tag to support its maintenance. Plus many veterans of the web would have a hard time finding a way to fit it within their current, battle-hardened processes.

Instead of looking for one app with one reactive approach to an onslaught of problems, we need a continual array of smart, focused tools that can be developed so quick as to almost anticipate the industry’s needs.

The web is not in want of quick fixes. If you have trouble building your latest web project, a quick Google search will offer up an army of scripts, hacks or advice to get you on to the next problem. This magazine is stuffed with such ingenious little solutions, but most probably fall short of what I would call “Power Tools”.

A “Power Tool,” as I define it, combines the following qualities:

1. It solves one problem really well. Or, it could solve one set of related problems well, so long as it retains efficiency and focus in its task.
2. It fits into a wide array of workflows. Integrating into a professional’s process is difficult. A good tool will not dictate its context, but slide right in and immediately provide an obvious benefit.
3. It is affordable, but not free. A “power” tool – as opposed to many quick fixes found on the web – provides lasting value, and should supported or guaranteed by its maker. Its focus on one problem, though, should inevitably keep its margins narrow.

Power tools, by necessity, are relatively quick and cheap to develop when compared with full-featured applications, allowing many inexpensive solutions to crop up for any industry need. Having options empowers web designers and developers to find the exact tool that works within their process, and low prices will encourage further experimentation. Ultimately, the most useful tools will bubble up giving us all what we need, rather than trying to predict what we want with top-down application mandates from software corporations.

The right tool cannot be predicted. When I began working at Mark Boulton Design, we were all swirling in Responsive Web Design’s wake. Big clients were asking for responsiveness by name in their next projects, and we had to find ways of wrapping our heads around this new approach to layout. We threw together a web-based form that quickly generated responsive, grid-based CSS in custom configurations.

Over the past year, we have refined this tool, named it Gridset, and are now selling it to our peers at what we feel is a reasonable price. We feel it embodies all of the above requirements for a web-based power tool: it is focused solely on responsive grid output (and management), it works within our process of sketching, prototyping and UI refinement without prescribing it as the only process, and it has allowed us to keep our heads around a responsive approach for all stages of development.

As we continue to use Gridset in our projects, we are finding that by eliminating much of the difficulty of working with responsive grid systems, we have the freedom to experiment with layouts we never thought possible on the web (or maybe even in print). We can now plan asymmetric, golden ratio-based, or even compound grid systems, specified per device width and calculated with extreme accuracy… all within minutes!

Gridset would not have had a market two years ago; the benefits would not have fit the needs of the industry at that time. It was born for the needs of right now, and will grow to continue to support these needs as they mature. No full-blown application developed by a dedicated software company could understand the problem as deeply and solve it as keenly as our team.

Powering the Future Web

A tool extends the abilities of its user. I could try to push a nail into wood with my soft, designerly hands, but there are thankfully better ways. Likewise, hand-coding every obscure corner of a large web project is a romantic notion, but it is not sustainable, and will lead to arrested development in our products.

The web design process of the next five years does not have to share the frustrations of the last fifteen. Web design Power Tools can be bootstrapped by small groups and individuals willing to invest their own time and money – rather than chasing funding – to forge simple, tested solutions from their own processes. The market may flood with these fine solutions, but competition will push each to its best, and niches will give every new entry a foothold. The time and budgets loosened by this wave will give us all space to contemplate the next iteration of what constitutes the web, and how we can construct even better bridges between the needs of both our clients and their users.