From the desk of Alasdair Monk

The infinite canvas problem

The web is a very different world now. Flash fell from grace years ago and those still burdened by the dying platform are incessantly apologetic for it. "We did a great new site!" your friends at a large digital agency will say, "but it's in Flash!" they will add quickly when you reach for your phone to check it out.

"Oh well, I'm sure it'll be ok" you say, with an arm on their shoulder to comfort them as if some painful, tragic event has only recently passed, and put your phone back in your pocket.

It's great we don't have Flash anymore. We've gone back to the building blocks of the web and improved them: HTML & CSS. Now we can make beautiful experiences without having to rely on proprietary software.

But, there's a big but. In the last couple of years we've seen the 'mobile web' finally realised by the iPhone and the iPad. Responsive design is at the tip of our collective tongues when it comes to discussing new builds. Everyone who wants a website needs it to work on the iPhone now, so now you have consider that users will be interacting with their thumbs, not a mouse cursor; how will the design compensate for this?

The problem that a lot of designers, especially those who don't work with the web as their primary medium, fail to recognise is that the browser is a flexible viewport on an infinite canvas.

Web design is more about proportions and the relative position, hierarchy and importance of objects than their specific pixel placement. If you know your HTML you already understand this, because at the markup layer objects have hierarchy and importance in a non visual way.

This is why Photoshop is increasingly becoming an awkward tool to design in, because designing in it is essentially the same as designing for a finite canvas (i.e. print design). As of yet though, no one really has come up with a solution that fits all scenarios. Tools like Illustrator might be more useful for quickly concepting responsive sites, but you don't get the image editing capabilities that you do with Photoshop.

It's not fair to just blame designers though because clients have a lot to do with this as well. If you want a website that works in practically every thinkable scenario as a customer, you are going to pay more for it than a site that just works perfectly on the laptop you own. If you're commissioning a responsive website, you are effectively paying for several different designs, not just one that changes width (unless your site is incredibly simple).

To complicate matters further, Apple are expected to release retina monitors soon and by doing so, vastly increase the resolution of a good percent of people who are viewing our designs. On a retina screen, your images will look blurry or your design will look comically small (even if you own a 27" iMac you'll know how this feels). Even if your design is 'fluid', unless you've compensated for relative font sizes and you've got high resolution images then it's still going to look stupid. Yet another plane has been added to the seemingly endless dimensions for consideration when it comes to designing for the web.

This leaves digital designers like me with a bit of a conundrum. Naturally, I want my work to look beautiful wherever it is but considering all these scenarios and allowing for them takes a lot more time than it did before these other dimensions existed (you'll notice this blog isn't 'responsive' due to time constraints when building it). Of course, if it takes more time then it's going to cost more but my feeling is that many aren't aware of the nuances for designing for the infinite canvas but are then surprised when the site that they only commissioned 'desktop' designs for, doesn't work in a way they imagined on their iPhone.

This isn't their fault, the onus is on us to substantiate the value of the work involved.

Now read The iOSification of OSX