Resolution Independence!

One of my thoughts for Web Design: 2012 and Beyond concerned the issues of screen resolution and the necessity for scalable graphics on the web. As part of that thinking I’ve written a piece for Smashing Magazine entitled Resolution Independence with SVG:

When we look at the breadth of Web-enabled devices, responsive design is sure to provide a better user experience. Scrolling horizontally, panning and zooming the viewport have their place in user interface design, but forcing the user to do these things just to navigate a website quickly becomes tedious. Fitting the website to the viewport is about more than just layout: it’s also about resolution. In this article, I’ll demonstrate why SVG is a perfect addition to future-friendly Web development.

I go on to demonstrate how SVG can be used in place of normal image techniques. I first experimented with using SVG logos in 2010 but browser support was very limiting back then. Towards the end of 2011 I had another look at SVG logos and was surprised by the progress — that led to this article!

Of course, I’m not the only one considering these challenges. It’s great to see other designers/developers like Laura Kalbag realising the same potential (check out her site for Future Insights for SVG icons). I expect such practice will become common place soon. Other techniques also exist for scalable graphics, many using CSS alone (I’ve listed a few in my article). 300 pixel-per-inch tablets and laptops within a year or two? Make sure your websites are ready.

*** Update 19th Jan:** I’m honoured! My article was featured in Peter Cooper’s HTML Weekly and received a shout out from Paul Irish in the brilliant new ShopTalk podcast.