So, I found myself mulling over the html5 spec, and wondering if I was the only guy around who is scared to death of the <canvas> tag? Not that I don't appreciate the power and capability of a new drawing api for the web, particularly one that is open, accessible and blah blah blah.. Oh, and that many may finally cheer the "death of flash". No, what really terrifies me is that in another ten years (once we have enough penetration of IE browsers that can support it) we are going to, once again, see the abuse of yet another display technology. (Remember the flash intro? Remember the full flash site?) And particularly, the fact that it is called "canvas". It makes me think of a parallel in the world before computers.
I would go on a limb and say that since the dawn of time, there have always been a couple of types of dudes. Those that draw pictures, and those that build shit. You had your bloke in the cave drawing pictures of sabre-toothed lolcats and the other guy outside trying to find a way to get that big ass rock from point A to B. At some point in history these people had to start working together. Not going to speculate why.. ok, maybe the caravan was not matching the war paint - and we were having brand confusion amongst the warriors. Whatever. Anyways, the point being that both people had a vision, a task, and some constraints on how they could accomplish it.
The constraints on the guys building things with rocks, be it wheels, walls or buildings are rooted in the physical world. Breaking these rules result in epic failure. The constraints on the person with the brush is their own imagination, and the capability of the medium. The consequences for the painter are far less, and they are prone to experimentation because of that. (and the nature of the creative process).
Fundamentally, the mason has always had to mitigate larger risk, and that has led to standards. Ways of doing things that have been proven to work. Patterns of building that can save time and resources. The painter has usually been tasked with creating something unique. They have some standard techniques, naturally, but to play the pun - they always start with a blank canvas.
Skip back to present day, and we take the Graphic Artist and the Web Developer. Another gem I learned at DrupalCon 2011 in Chicago was this: the gap between developers and creative people is real and it is universal. If you have ever worked at an agency or studio or development shop and heard "if the bloody designers would design something that actually makes sense…" or "why can't the damn developers make it look like my photoshop file?", you are not alone. This is my 15th year of building websites, and amazingly, these conversations still persist.
When the process gets sticky, is that often, clients will sign off (i.e. my signature denotes no deviation from my agreement to said article…) on flat artwork. In some rare instances the process is more iterative - build to browser and skin, but for many cases, websites are constructed on a blank canvas, in Photoshop and presented, without any constraints, to the excited and happy client.
All of a sudden, we are catapulted from what can be a fascinating, co-operative process of creating a website to an adversarial situation where we spend time managing expectations. Ugly hacks, workarounds and ill suited solutions are sometimes implemented to realize a design. And even worse, we sometimes start to commit the ultimate crime on the web - ignoring the learned behaviours of users and creating unintuitive experiences.
So, how can we "solve" this problem? If designers are from Mars and developers are from Venus, then just as with the communication patterns of the genders, we need to realize there are fundamental differences and learn to live with them. We must move on from the adversarial roles, and appreciate that both people are coming at their jobs from a very different place. Once we have done that, we can actually focus on bridging the gap by teaching each other what is important and constantly negotiating and finding compromise when the solution favours intuitive user experience.
Developers need to explain why the position of a curve, or where a particular shadow overlaps some html text will add extra time and effort and potentially make a site less accessible or more fragile. Encouraging designers to adjust the design slightly and to offer suggestions where comparable templates, controls and widgets that already exist is key. Often times a tiny adjustment can make worlds of difference to a themer or developer, but does not impact the overall design.
Designers need to engage developers early on in their design process, and find out if there is a jQuery widget, or a module, or a theme out there that pretty much does exactly what they want. They need to ensure that consistency exists between templates as much as possible. If a font is just "a little different", is it supposed to be the same as a font in another flat? Use styles, smart objects, or whatever tools exist for keeping elements re-useable within the source photoshop (or fireworks) files. Do not treat every single page like a blank canvas! Each deviation from commonality across pages is expensive, and should be meaningful, not accidental.
And for developers, recognize that many designers already feel very limited by what they can do in web design. Many entered the profession because they really want to make something unique, super cool and break the boundaries. Often a small thing like making a single pixel line fade out at the bottom instead of ending like a border normally would mean the world to them in that particular design. Then other times, it's not a big deal.. they just copy pasted from the last comp and thought it looked a bit nicer than a regular line.
And final point to designers out there. Given the chance to express yourself artistically, please do it with images, with textures, with layout first. Try not to lean so heavily on typography, even though there are now @font-face solutions and if you wish to do rocking out big ass type, choose fonts that are well supported by a font service, and has less risk of variance across browsers. And if it's not completely essential, customizing complex ui controls like scrollbars, radio buttons and checkboxes ought not to be the first thing you start with in your comps. There are some nice jQuery widgets to customize controls these days, but still - it introduces extra time and risk to a project that likely is already short on time and budget.
And finally, do we agree that progressive enhancement should be the norm? Just like we stopped using tables to hack layout, can we stop using images to create rounded corners and accept that IE users will see square boxes, and that ain't the end of the world? Just sayin'
Enough of that rant, and back to the canvas tag. The thing I worry about is mostly, is when things that have semantic meaning begin to fall off the map again - like paragraphs, headers, links. That once a bunch of 3D libraries pop up for use within canvas, that we will see websites trying to look like video games, trying to look like magazines, trying to behave in any number of "non-boring" ways that go against the norm of how the web works. See, I don't think the problem with flash ever was being a plug-in. I think the problem with flash is that it gives the impression learned behaviours and usability standards can be bypassed for the sake of cool. It gives a blank canvas and encourages design from ground up. Re-inventing the wheel, as it were. For the painter, a playground of bliss, but to the mason, a nightmare of untested procedures and devastating pitfalls.
And we stand poised to do it all over again in html5.