By Will Novosedlik
To create truly responsive web design, designers have to take into account the different demands of computer, tablet and smartphone screens
There are times when the randomness of life can lead to wonderful discoveries.
Earlier this week, while blogging about a company called Ethical Ocean, I came across the work of another company called Playground Inc, the Toronto digital and design shop that created its identity and website. Both companies are examples of innovation in action, for entirely different reasons.
I was writing about Ethical Ocean’s status as a ‘B’ corporation. B corporations are companies that must have an explicit social or environmental mission, and a legally binding fiduciary responsibility to take into account the interests of workers, the community and the environment as well as their shareholders. In other words, they are legally bound to adhere to a triple bottom line.
A Google image search served up the company’s visual identity. I was impressed. The mark is clean, simple and scalable. Semiotically speaking, it makes an unmistakable reference to concepts of both infinity and cradle-to-cradle (the idea of a waste-free world in which everything we make can be recycled, reshaped, and re-used), while at the same time conveying the notion of a closed-loop system – a metaphor for the geophysical envelope we call home. All this made out of the intials ‘e’ and ‘o.’
I decided to look more closely at Playground. What I encountered at their website was a user experience not unlike that of an iPad or iPhone. It is a UX based on the principles of responsive web design – an approach to front-end development which uses fluid widths, scalable images and adjustable layouts so that the same site can adapt on the fly to different screens.
The beauty of this approach is that the size constraints of the mobile screen force the design to be as simple as possible. Which means that on a laptop, you get lovely, open space. These sites can breathe. So refreshing, especially for anyone who craves ‘white’ space and doesn’t see a lot of it online.
The most distinctive attribute of this approach is its use of the scroll and sweep. Up until now, so-called "best practices" (god, how I loathe that term) insist that you get the most important stuff “above the fold.” That of course opens up a debate on how much, and what kind of information is important. "How much" usually wins the argument, (insert trepidatious client here) and brands end up jamming as much stuff as they can above the fold in the belief that no one wants to scroll down for it.
Wrong. Tablets and mobile are reshaping our UX expectations. The scrolling and sweeping functionality they demand completely evaporates the need to cram too much above the fold. So on a laptop screen, this kind of fluidity is sheer delight.
I am put in mind of a related topic: the fact that the iPad and iPhone UX is so intuitively simple and responsive that one- and two-year-olds can use these devices. That’s no joke: there is growing anecdotal evidence that toddlers are learning to interact with information on the touchscreen before they have learnt to talk – or in some cases, even before they have learnt to walk. This has huge implications for learning and for the structure of information in the future.
Playground Inc. is one of a growing number of firms that has embraced the challenge of all three screens with gusto, and more importantly, with design chops. They are demonstrating that good information design and good UX can be uttered in the same sentence without a fight breaking out. They are proving that the underlying principles of design we all learned in pre-interactive days can be brought to life online. And I am very, very encouraged by that.
—Will Novosedlik has worked on brands both as a consultant and as a client in Canada, the U.S. and Europe. These brands include Nestlé Canada, Corby Distilleries, Swiss Chalet, Harvey’s, RSA Security, Bata International, Deutsche Telecom, Butterfield and Robinson, Telus Business Solutions, Vodafone and The Reitman Group. Recently, Will led the brand communications and customer experience teams that launched the WIND Mobile brand in Canada. He currently works as the VP Design Thinking & Brand at Idea Couture.