Mark Boulton on designing websites using 'content out'

Mark Boulton, creative director at Mark Boulton Design and co-founder of Five Simple Steps, recently complained on Twitter:

"Reading through a bunch of new responsive web design frameworks over the weekend confirms to me that we're still thinking 'canvas in'."

This prompted discussions about the pros and cons of so-called 'optimal' designs, fluidity and fragility. With tomes on responsive and adaptive design topping our Top 25 books for web designers and developers feature, we spoke to Boulton, to get him to elaborate on his thoughts.

We started by asking what Boulton meant by 'canvas in' and why the approach was prevalent in web design. "To me, 'canvas in' means the approach by which you derive a layout. Traditionally, the composition of content on a page has the same starting point: the page. A page is a fixed starting point to subdivide the page to create a grid. Every designer designs layouts this way: they subdivide space," he said. Boulton believes the adoption of responsive web design, which "aims to acknowledge the web is a fluid place, where a layout may need to work on everything from a large display to the smallest of mobile devices," indicates the 'canvas in' approach is flawed, because it still relies on a page to begin. And yet responsive web design frameworks he's seen recently do the same: "They create breakpoints for mobile, tablet and desktop. Three 'pages'. To me, that's not progress, but applying old thinking to a new technique."

Boulton told us that designers should rethink how they approach creating such layouts: "I'd like to see more focus on what's happening in between the breakpoints, because that's where the true nature of the web is at work: unpredictable, fluid, fragile. The sooner we embrace this and stop trying to enforce fixed control on something that [the web] isn't, the sooner we'll progress this conversation." For Boulton, the argument isn't so much about the elimination of a canvas – he said there will always be a canvas, but it just won't be fixed. It's more about designers asking new questions appropriate to the fragility and fluidity of the medium: How can you create beautiful layouts if you don't know the constraints? How can you create meaningful negative space if that space is so fragile?

"The questions have always been asked on the web, and we've mitigated them by creating fixed pages to optimum widths from the data we have," he continued, suggesting designers should reverse their mental models of how to create layouts: "Instead of creating them from the edges in, create them from the content out. For example, derive columns of a grid from elements of your content: the type size, or a fixed image size or advertising unit."

At present, Boulton told us that there are scenarios that contradict this argument and favour fixed designs, such as iOS apps. "We know the screen sizes and we can fix the layout. In fact, some of the behaviours of touchscreen devices help us in that regard – swiping whole screens rather than scrolling." But, he added that as the delivery of content via web technology increases, the more fractured the display of that content will become: "Your TV, refrigerator or watch all would have a different 'canvas', and responsive web design starts us on a path to shed some thinking of how we create flexible, adaptive layouts. But this only works if we start thinking of responsive web design as a shift in thinking,and not as a few tools to allow us to create websites for iPhones and iPads. It's more than that."

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.