Category: gridset

Mark Boulton Design and Monotype

Today is a big day for me. One of the biggest of days. I’m delighted to announce that Mark Boulton Design has been acquired by Monotype. You can read the full press release here, but before you do, I’d like to take you back a few years…

Eight years ago, Emma and I were driving down from visiting my parents near Manchester. It was a sunny, blustery day in June 2006.

During this time, we both worked for the BBC – Emma in Audience Research, and me in, what was then called, New Media. As a lot of designers do, I was working some freelance work on the side. A couple of weeks prior to that car trip, however, I’d been offered a freelance project that was too good to turn down, but it was big. Bigger than a few hours a night when I got home from the day job. On that car trip, we decided that one of those jobs had to go: my freelance work, or the job at the BBC. I chose the latter, and the very next day, handed in my resignation at the BBC. It was time to head out alone.

Eight years later and it’s time for another change.

Running a design studio has been a fabulously rewarding experience. I’ve worked with some talented people on some great projects for wonderful clients. But, all through this time, there has been a niggling problem, one that I’ve talked about at a couple of design conferences this year. When we’re hired by a company to work on their project, just by the nature of the engagement, we’re not as close to the problem as we need to be. We’re not in-house. We’re not experiencing them day by day. And, quite often, we’re not in the position to help fix the problems in the organisation as we uncover them. Having the opportunity to be closer to the problem really excites me, and that's why this change is such an important decision for me at this time in my career.

We know the web is going through an interesting time right now. This is not so much being felt by us in the industry, but by the myriad of companies who publish content that are struggling to cope with the changes and demands their readership and customers put on their services. Being close to that problem excites me, and that’s just what this opportunity with Monotype represents. We’re going to be working with some of smartest people I’ve met on a broad range of tools and services that cross the boundaries of two fields of design I hold dear: web design and typography. What could be better than that?

Five Simple Steps will also be closing its doors. For five years, Emma and I have been accidental publishers and, together with the team here, and some talented authors, have produced many practical and influential books. Those books aren’t going away, though. As of today, Five Simple Steps is ceasing to trade, but is giving those books back to the authors to distribute as they see fit. We’re also freely distributing our ePub template and process, to help people self-publish just like I did five years ago. And, today, I'm also giving away my book, Designing for the Web. You can freely download it in PDF, ePub and Kindle (.mobi) formats.

Our responsive grid application, Gridset, is currently being considered as how it can sit alongside Monotype’s Typecast product. Since both services launched, I’ve lost count of the amount of people who use the two together and asked us to integrate somehow.

The last eight years has been quite a ride, but as I said, it’s time for a change. And, for me, a great change at that. The team here at Mark Boulton Design will still be working with me. We’ll still be contributing to the community the best way we can. I’ll still be harping on about something or other on Twitter.

Today marks the closing of one chapter and the beginning of another. It's the part in any story that I love the most, because, to my mind, it's the best bit.

Open letter to W3C CSS Working Group re CSS Grids.

Since I'm knee-deep in grids at the moment – both the book and Gridset – the theory, and thoughts on how it could and should apply on the web, is very much at the front of my mind. Last night I had a reminder on Twitter of the upcoming CSS3 Grid Layout draft. I recalled I wrote about it last year proposing some slight amendments regarding the addition of the module attribute. This would be a big change. It'd be great if it were considered, but I'm not hopeful.

However, that change not withstanding, one thing that really needs to change in this draft is the terminology used. Terminology (with some slight interchangeable differences) that has not really changed for many years in grid and layout design. Why reinvent it? Why define existing terminology to that more suited to spreadsheets and tables?

So, this morning, I emailed the working group to consider these changes. I'm posting this here for those who are not on the working group who may have opinions on this who can get in touch with me. I'd love to hear your thoughts, concerns and questions regarding this draft and how it fits with the established graphic design theory. I am of course on Twitter, or you can email me on this site.

In reference to:

I'm confused as to the need to invent new terminology with regards to grids that have existed for centuries. I'm also a little concerned that the mental model this terminology builds is one more similar to tables and spreadsheets (where these terms could be interchangeable) than to grids and layout.

Specifically on the terminology:

  • Grid Lines are known as Gutters.
  • Grid Cells are known as Modules (or Units – the term is interchangeable). They represent the smallest building block of the grid.
  • Combinations of modules vertically are Columns *if* they run the full height of the grid.
  • Combinations of modules horizontally are Rows *if* they run the full width of the grid
  • Combinations of modules both vertically and horizontally are Fields.

There's a lot of great stuff in this draft, but some of the theory of designing grids has been around for centuries. If we could start to align CSS with existing terminology, and existing mental models of how layout is designed, then all the better.

Just a thought…

For more information on this, I wrote a blog post last year that expands on some of this thinking:

Thanks for your time and consideration,

Mark Boulton


The Gridset Logo Last Friday, Mark Boulton Design announced something we've been working on for the past six months or so: Gridset. A tool for creating advanced grid systems on the web.

For a long while now, we've been designing tools and frameworks to help us create grids from HTML and CSS. Some of these frameworks give us a lot of flexibility, and some of them tie us down quite closely with the type of HTML markup we have to use. Since about 2007, this has all been very helpful is giving us some code structure to help us understand, and then build, fairly simple grids.

But, then something happened.

Building responsive grids has forcefully jolted us from our 12-column comfort zone. Now, we're having to think about appropriate grids for different device widths. This in turn is having the effect of making us readdress our needs for desktop. It's certainly my experience over the past year or so, that this rather cookie cutter approach for designing grids needs re-evaluating, but we're lacking good tools to help us with the sometimes painful maths and advanced CSS chops.

Gridset will help with this. And more.

I've had a few questions since Friday around some of the features we announced. I'd like to address some of those here:

Gridset is a tool, not a generator.

Nothing is prescribed… you build a bespoke grid system for your project.

Gridset is not a bunch of code you download from Github. It's a browser-based tool to create grid systems.

Create advanced grid systems.

It can create asymmetric grids, golden ratio grids, or completely bespoke arrangements, not just a row of columns. It allows for fine-tuning of column widths.

For the past few years, the grid systems we've seem on the web have all been evenly spaced columns (usually either 12 or 16), and that thinking is now being applied to the latest crop of responsive grids. There is simply more to grids than 12 or 16 columns and Gridset is designed to allow the creation of many, many types of grid.

Generate smart CSS.

There is no need to add lots of classes for offsets and margins. It anticipates every possible configuration and styles accordingly, allowing you to focus on layout.

CSS grid frameworks are great if you're flexible enough to not worry about an extra div here or there, or a particular class syntax in your CSS. If, however, you care about the semantic structure of your markup then this is a problem. We care. So Gridset has been designed to anticipate every column, margin and padding column configuration of your grid and give you the appropriate classes to use.

Designed for your workflow.

Tinker, save, return. Iterate and publish. Your grids are there whenever you need them.

I'm of the opinion that good grid system design can be abstracted from layout design. Layout gets built on a grid. Most good design systems work this way: the grid is designed, locked down and then layouts are used on top of it. Think of Gridset as your library of grids in one place. There for you to create, iterate and publish. To be used with simply the addition of a single line of CSS.

What next?

Gridset is currently in a pre-alpha stage: working with a few people in the industry that represent what we think our core audience will be. We'll be quickly moving into a closed Alpha and then a semi-closed Beta selected from the people who sign up to the list on the site. We're shooting for a summer launch.

In the coming weeks, we'll be talking more and more about what we're doing. Follow @Gridset on Twitter for more updates.