Responsive Interview with Mark Boulton

So everyone knows a bit of a background can you tell us a little bit about yourself, what you’re doing now and how you got into the industry?

Mark: I’ve been designing for a living since about 1995. I trained as a typographic designer, but have a degree in Graphic Design, too. I started out really wanting to be a book designer, but around the time I started looking for jobs, the web was really starting to gain traction and I had an interest in programming from when I was a kid, so it seemed to be the perfect medium for me. As the young designer in a studio, I was given the web projects to do. They were low risk, tacked onto print and branding projects, so therefore perfectly suited to someone with little experience to experiment. Browser wars and crazy front end dev aside, it was an exciting time.

I worked in a few agencies in the UK and Australia, before working at the BBC for a good few years. It was around that time I started blogging and talking about the things in editorial design that interest me: process, typography, grid systems, design systems etc. I started getting more freelance enquiries, and opportunities to speak, and I started the company in 2006.

We met towards the end of last year during one of those Web Design Workshops you mentioned as part of the Web Directions Conference. You’ve been running that kind of workshop since before the RWD buzzword, can you talk about what, if anything, you’ve had to change over the past two years?

Mark: Those workshops are really about the fundamental theory of how you design with type, space, colour, composition etc. I try to keep the approach agnostic of medium, devices or other technical implications that you can get mired in. Especially with something so new as RWD. So, no, it hasn’t really altered anything. The approach is still very practical focussed on the underlying theory of how to set type, arrange type in space, apply appropriate colour, and a million and one tips and tricks in between.

*You mentioned you worked in publishing as a designer, what are the kinds of things in the print design world do you think the new breed of responsive web designers can learn from?

Mark: Understanding workflow is a big one for me. How web sites are made is very similar to how publications are made. We have a lot to learn from how ongoing publications operate – sourcing content, editorial processes, copy deadlines, art directing. All of this is same as publishing content to the web. Understanding how this works from the largest site and organisation, down to the smallest, can really help understand how content is created. Knowing this can inform how best it is to be presented.

Now ever since I read the little yellow book “Designing for the Web” I’ve been hanging out for the follow up on “Designing Grid Systems for the Web”. Any updates on this?

Mark: Not lately. I’m still writing it. Takes a while to write a book.

Speaking of Grid Systems, your studio has produced Gridset to help people with their grid systems. Can you explain what problems this solves and how you’ve used this tool in your own responsive workflows?

Mark: Gridset was designed to make our lives easier. Firstly, it was to streamline our process of responsive prototyping without getting bogged down with maths or browser issues. Secondly, we wanted to bake into the Gridset some solid grid theory. For years, we’ve been mired in the 12 even column, 960 px wide grid. Which was good for a while – web designers were starting to use grid systems as a way of organising their content in a purposeful way. But, it’s a cookie cutter approach. A 12 even column grid might be fine for prototyping, but when it’s used for everything you see on the web, things start to look similar because the DNA of the layout is the same across all of the sites.

So, we wanted to be able to create lots of different grid systems in Gridset. Uneven columns, ratio-based grids, compound grids (where grids are overlaid). We also wanted easy ways to create breakpoints, and have different types of grid for each breakpoint. Gridset then gives you prototype CSS (providing all of the potential layout classes), PNGs for Photoshop work, a javascript overlay for designing in the browser, and Sass mixins for production code. We needed Gridset to be there wherever we needed it in our workflow: from prototyping and visual comps, to designing in the browser and production code.

Typically we use Gridset to define a set of grids for breakpoints.

Then, using the embeddable CSS, we use it for prototyping. This allows us to tweak the grid as we prototype. We can add more breakpoints, move and change column widths etc. As we progress to production code, we typically ‘freeze’ the grid, download it, and include it in the production files. We’ll then share the grid amongst team members for reference.

Are there any CSS features that you would like to see introduced to help with the layout of grids on the web, or features that are going to change the way we approach web design for the better

Mark: I wrote about this a while ago and my views haven’t really changed.

The way grids are designed, the terminology surrounding them, and how they are used, hasn’t really changed in decades. A lot of what the working groups are doing are reinventing the wheel: not only the approach, but terminology that has existed for a long time. I think this is mostly due to design being under-represented in those groups.

There is no historical expertise represented, so those tasked with refining draft proposals are approaching the problem a-fresh. Particularly with the CSS grid module, there are some big deviations from graphic design theory, and some strange assumptions. I approached the working group shortly after writing this post, and was politely told that – whilst they would listen to what I had to say – it’s a little late for sweeping changes.

The terminology changes I suggested were taken on board, but have yet to be incorporated. So, for now, we have to live with things like ‘grid tracks’. Whatever they are.

What is your favourite implementation of responsive design and why?

Mark: The best implementations for me are the ones that melt away into the background. The sites where responsive design is not the thing. For example, Gov.uk, or our work for CERN, are good examples of this. The content is so important, engaging, well presented and well-written, the fact is responsive is almost secondary.

If someone is beginning their new responsive site next week what is one piece of advice you would give them?

Mark: Don’t get hooked up on the responsiveness. It’s not the thing. Focus on good typography, content, structure and experience and when it comes to implementing the ‘responsiveness’, you’ll be considering responsive as part of a whole. As we’re all struggling with how responsive works across a range of difficult problems, I’m ever mindful of it pulling us away from core problems. Sometimes, the real problem is much larger than ‘how do I get this to look right at 400 px wide?’

Thanks for being a part of the series Mark, how can people hire you or
find out more information?

Mark: Our studio is at Mark Boulton Design. Gridset is http://www.gridsetapp.com

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

One Response to “Responsive Interview with Mark Boulton”

  1. Mathew Porter

    The biggest thing to take from that is not to get hooked on making a project responsive… Make a solution that works best for the projects user base.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>