The Personal Disquiet of

Mark Boulton

Blog Category: personal

Adventures with Plex

I’ve written before about going completely digital for our home entertainment. To recap: I have a big, shared hard drive attached to an iMac that two Apple TVs share to using ATV Flash This was fine for a while, but, frankly, ATV Flash is a little buggy over our network and the Apple TV struggled with any transcoding (converting one file type to another) and streaming – especially in HD. So, we needed something better. In steps a few things: Netflix, Plex and a Mac Mini.

Plex has been on my radar for a few years and up until recently didn’t really make much sense for me. But as ATV Flash was becoming more unstable as Apple updated their OS, then Plex started to look like a good alternative.

The hardware

As you may have read from my older post, I did have shared hard drive with all the media on hooked up to an iMac which the Apple TVs shared into to browse the media. The issue here became network and sharing reliability. Quite often, the shared hard drive was invisible because the iMac was asleep, or the network had dropped. Sometimes this happened in the middle of a movie. Not ideal.

The new setup is almost identical, but instead of using the Apple TVs as hardware to browse the library, they are now being used just as a device to Airplay to. I barely use the Apple TV UI at all. Browsing from my iPad and then air playing to the Apple TV. What’s cool here is that the iPad just acts as a remote, the file itself is being transcoded on the server and just pushed to the Apple TV directly.

What about a standalone NAS (Network Attached Storage)?

Plex does run on a NAS , but the issue there is most consumer NAS boxes don’t have the hardware grunt to do the on-the-fly transcoding. So, I finally decided to ditch my iMac in favour of a headless Mac Mini to run as a decent media box, running Plex.

Getting started with Plex

  1. Download it. Get the Media Server on your computer or NAS of choice (Plex has huge device support). Also, get hold of the mobile apps. Once you’re done there, download Plex for your connected apps: from Chromecast, Amazon Fire TV, Roku, Google TV or native Samsung apps and, now, the Xbox One, too. The app support is really quite incredible.

  2. Plex Pass. Even though the software for Plex is free, there are some additional things that are left for a subscription that you have to buy. The good thing is, you can get a lifetime subscription and the cost is very reasonable at $149.99. For that, you get early access to new builds, syncing content remotely, things like playlists and trailers. But the killer feature of the Plex Pass is the ability to create user accounts for your content. Now this is something I’ve been after for ages on the Apple TV, and even more important now my eldest daughter regularly watches films on it. I need the ability to filter the content appropriately for her.

  3. Setting up a server is a breeze. Once you’ve installed the server software, get yourself a user account on the Plex website and set up a server. This launches some web software for you to start adding files to your libraries and fiddle away to your hearts content with all the settings.

  4. If you did get the Plex Pass, I’d recommend creating multiple user accounts and playlists with the features Plex Pass gives you. The way I did this was to have email addresses and user accounts for server-plex, parents-plex and kids-plex. server-plex is for administering the account and has all the libraries shared with it. ‘parents’ for Emma and I, and ‘kids’ just has the ‘children’s’ library shared with it. Now, by simply signing in and out of the iPad, I can access the appropriate content for each user group.

Next up: streaming, or ‘How do I watch the film on my telly!?’

There are a few options:

  1. Native apps (Samsung, XBox One etc) These are apps installed directly on your TV or Xbox. To watch your content, simply fire up the app and away you go. Yesterday, I installed the Xbox One app and was up and running in less than three minutes.

  2. iOS and Airplay This is what I described earlier. Simply download the iOS apps and hook up to your plex server. Once you’re done, browse your library, press play and then airplay to your Apple TV.

  3. iOS and Chromecast Exactly the same as above!

Now, there are some disadvantages and advantages to streaming.

Disadvantages: From what I understand, adding Airplay into the mix does have a slight performance hit. Not that I’ve seen it, though. I’m only generally streaming 720 rather 1080 resolution, so the file sizes are coming up against network limitations. I do expect this to change in the coming years as resolution increases. Advantages: It’s a breeze. I use my Plex app on my iPad, choose a film or TV show I want to watch and then just stream it via Airplay. When I’m travelling, I take a Chromecast with me to plug into the TV and stream to that (more on that in another post).

‘Hacking’ the Apple TV

Currently there is no native app for the Apple TV, but there is a way to get around this by ‘hacking’ the Trailers app to directly browse your content on your plex server using PlexConnect or OpenPlex. Now, there’s a lot to read to get up to speed on this, so I’d recommend a good look through the plex forums. I followed the instructions here to install the OSX app, add an IP address to the Apple TV (to point to the plex server) and, so far, so good.

To be honest, though, I tend to just Airplay these days. The iPad remote / Apple TV combination is quite hard to beat. It’s fast, flexible and stable.

Is this it for my digital home needs?

For a good few years now I’ve been looking for the optimum solution to this problem. My home media centre needed the following:

  • Multi-user accounts
  • Full-featured remote
  • Large file format support
  • Manage music, photos and movies
  • Fast transcoding and streaming (minimum 720)

Both iTunes, ATV Flash, Drobo (in fact, any domestic NAS) fail on all or most of these points. Plex not only ticks every single box (if it’s run on a decent machine for transcoding), but provides very broad device support, an active developer community and a really good UX for the interface.

Who knows how long I’ll stick with Plex as I do have a habit of switching this around as often as I change my email client (quite often!). But, for now, it’s working just fine!

Filed in: Personal, Media home. on October 10th, 2014

A Purple Princess

When I told my eldest daughter, Alys, about Rebecca Meyer passing away, she wanted to draw her a purple picture. Rebecca was the same age as Alys and she knew ‘exactly what she’d like’. So, here it is:

A purple princess for Rebecca Meyer from Alys Boulton

A Purple Princess for Rebecca Meyer from Alys Boulton, Age 6

In memory of Rebecca, whose favourite colour was purple.

Filed in: Personal. on June 12th, 2014

Conference speakers, what are you worth?

Over the past couple of days, there have been rumblings and grumblings about speaking at conferences. How, if you’re a speaker, you should be compensated for your time and efforts. My question to this is: does this just mean money?

I’ve been lucky enough to speak at quite a few conferences over the years. Some of them paid me for my time, some of them didn’t. All of them – with the exception of any DrupalCon – paid for my travel and expenses.

When I get asked to speak at a conference, I try to gauge what type of conference is it. Is it an event with a high ticket price with a potential for large corporate attendance? A middle sized conference with a notable lineup. Or, is it a grassroots event organised by a single person. In other words, is it ‘for-lots-of-profit’, ‘for-profit’, or ‘barely-breaking-even’. This will not only determine any speaker fee I may have charged, but also other opportunities that I could take for compensation instead of cash.

Back to bartering

When I ran a design studio, speaking at conferences brought us work. It was our sales activity. In all honesty, every conference I’ve spoken at brought project leads, which sometimes led to projects, which more than compensated me for my time and effort if it kept my company afloat and food on the table for myself and my team. The time away from my family and team was a risk I speculated against this. Conference spec-work, if you will.

In addition to speculative project leads for getting on stage and talking about what I do, I also bartered for other things instead of cash for myself or my company. Maybe a stand so we could sell some books, or a sponsorship deal for Gridset. Maybe the opportunity to sponsor the speaker dinner at a reduced rate. There was always a deal to be done where I felt I wasn’t being undervalued, I could benefit my company, product or team, but still get the benefit of speaking, sharing, hanging out with peers and being at a conference together.

It’s about sharing

If every speaker I knew insisted on charging $5000 per gig, there will be a lot less conferences in the future apart from the big, corporate, bland pizza-huts of the web design conference world.

My advice to anyone starting out speaking, or maybe a year or so in, is have a think about why you do it. If you’re a freelancer, let me ask you: is speaking at a conference time away from your work, and therefore should be calculated as to how much you should charge based on your hourly rate? Or, is it an investment in yourself, your new business opportunities, and the opportunity to share. Of course, the answer to this is personal, and – for me – depends on what type of conference it is.

This community is unique. We share everything we do. We organise conferences to do just that. Most of the conference organisers I know come from that starting point, but then the business gets in the way. Most speakers I know, get on stage from that starting point, but then the business gets in the way.

There’s nothing wrong with valuing yourself and your work. If speaking is part of your work, then you should be compensated. But next time you’re asked to speak by a conference, just stop for a moment and think about what that compensation should be.

Filed in: Conferences, Personal. on May 2nd, 2014

Why?

Just like most two year olds, my daughter likes to ask ‘why?’ Recently, I’ve tried responding to every ‘why’ to see where it leads. It’s like a cross between improv and some perverse version of Mallet’s Mallet. Here’s a transcript of a conversation I recorded in the car earlier today:

  • Me: We’re going into Cardiff today.
  • Two year old: Why?
  • Me: To go to the castle
  • Two year old: Why?
  • Me: Because it’s better than watching TV, and it’s a nice day!
  • Two year old: Why?
  • Me: That’s what happens when the sun shines
  • Two year old: Why?
  • Me: Because there are no clouds
  • Two year old: Why?
  • Me: It’s due to high pressure
  • Two year old: Why?
  • Me: Because that’s how weather works
  • Two year old: Why?
  • Me: There’s lots to it: solar radiation, air movement, global warming…
  • Two year old: Why?
  • Me: Weather is complicated
  • Two year old: Why?
  • Me: Lots of factors. That’s why we have people telling us what the weather will be.
  • Two year old: Why?
  • Me: So we know when to wear a coat
  • Two year old: Why?
  • Me: So we don’t get wet
  • Two year old: Why?
  • Me: Because wearing wet clothes is miserable, and it’ll give you a cold.
  • Two year old: Why?
  • Me: Because, apparently, it can make you more at risk of infection.
  • Two year old: Why?
  • Me: Maybe your immune system. Everyone has one.
  • Two year old: Why?
  • Me: To stop you getting sick.
  • Two year old: Why?
  • Me: So you can continue living.
  • Two year old: Why?
  • Me: To procreate.
  • Two year old: Why?
  • Me: To continue the human race.
  • Two year old: Why?
  • Me: You know, i’ve no idea.
  • Two year old: OK.

A conversation like that has happened almost every day for the past few weeks. This was the longest. And deepest.

Filed in: Personal. on April 24th, 2014

I'm not a Craftsman

My uncle is a quiet man. He smokes a pipe with a wry smile. Like he knows something you don’t. For years he restored traction engines; huge, victorian, steam-driven machines. He did it for the love of it. I have wondered if he did to escape. Like a lot of men that age, he spent a lot of time in his shed on his own, surrounded by the smell of oil, grease and pipe tobacco. A dusty pile of tabloid newspapers in the corner. Slowly whittling away on a small piece of metal, making some grommet or flange or something.

Sounds romantic doesn’t it?

Now, how many times have you heard web designers and developers talk this way about their work? For me, it’s been increasingly. And personally I find it concerning. For starters, it’s a designer-centric way of working. It’s a selfish exploit to pour love into your work. If you’re working commercially, who pays for that time? You? Well, that’s bad. The client? Well, that’s ok if they see the value. But many don’t.

Giving your work love is not just about giving it time. But, time can often be better spent than whittling away on some nubbin’ or grommet just because you think that’s where you can give the work your love. Your craft.

Over the past few years, I’ve spent more time on projects not whittling. Whittling happens in the very latter stages of work and I really don’t find myself in that place very often. Mostly that’s because the clients I work for have a myriad of big, sticky problems that need working out before you start ‘crafting a user interface’, whatever that means. I’m more often than not in a place where my own job, as a designer, is to not make something I love. But to make something appropriate. Something that does the job well. Something that responds to a hypothesis and serves a need. Not necessarily something loved and beautiful. And that’s ok.

Craft is an emotional word not appropriate to describe the job of designing. It’s too self-centred. Too mired in arts and crafts and puts a difficult-to-measure parameter into the minds of clients.

‘I want a beautifully crafted interface from a passionate designer’

Translates to:

‘I want a self-centred designer to spend way too long on the shiny than actually solving the problem or having the difficult discussions’.

If my uncle was restoring traction engines for a living, he would’ve been out of business. Craft is love. And love takes time. And time is scarce and probably best spent elsewhere.

Filed in: Design, Personal, Work. on July 16th, 2013

Change your mind

My four year old daughter attends a rural primary school in the Vale of Glamorgan in Wales. The school performs in the top 3% in Wales. Consistently. It’s over-subscribed with waiting lists to attend. The head teacher greets every pupil – by name – at the school gates in the morning. She even knows my name. It’s a school you feel part of. And the government wants to close it.

We learnt this week that, as parts of plans to change catchment areas for secondary schools, that my daughter’s wonderful school is in a list of a few schools that are pencilled in for closure. The pupils will be sent to other, under-performing, under-subscribed, urban schools. We have a small window to fight these changes, but it seems that once this process gets started, it’s difficult to reverse.

When I picked my daughter up yesterday, she told that the head teacher had told them in assembly that everyone is going to fight for their school. That mummy’s and daddy’s should write letters, they should too, and we should make posters. A wonderfully simple attitude to a dreadful situation. I gave her a hug.

As soon as we got through the house door, my daughter went straight to her desk and asked me if she could write a letter to the men in charge. This is it:

Change. I love my school. Please don’t close it. Change your mind. Love, Alys Boulton.

This is what the men in suits don’t see. They don’t have to sit there and explain it to a four year old that thinks it’s all going to be stopped with a couple of posters. They don’t think about the illogical idiocy of closing a top, over-subscribed primary school. They think about numbers and averages. They don’t think about rural communities, or try to understand why this school is doing so well. No. Thinking about averages leads to average. And who wants that?

So, we’re going to fight. With every last breath, I’m sure this school is not going down without a fight.

Filed in: personal. on February 8th, 2013

Shorter Long Form

I started this blog in 2004. Nearly a decade later, I’d like to think my motivations for writing this blog are are same: it’s a diary, first and foremost. A place where I can document my thoughts, observations, theories, design critique and more. It’s also a place where I can engage in a wider discussion. My blog post responds to yours – or your tweet – and so we go around.

Over the past couple of years, we’ve seen more and more great industry-focussed magazines that publish online and off, but the flip side to this is I’m noticing more people writing for these magazines and less so on their own blogs. Why is this a problem?

Considered, well-written, edited, and produced content is hard – and time-consuming – to do. Writing an article for one of these successful publications is not an easy thing (well, for me it’s not). Not only do you have to have something notable and interesting to say, but you have to stick with it through the editorial process. You get pushed, prodded and cajoled along the way – mostly for the good, I should say. But sometimes, you may begin with a pithy throw-away idea that wouldn’t amount to a couple of paragraphs on a blog (kind of like this blog post, really), but through the process it gathers weight – and in some cases bloat – to fit the requirements of ‘an article’. And articles are different to blog posts.

In traditional news journalism, this is the difference between a feature and a piece of news. A feature is a story. It has a beginning, a middle and an end. It’s designed to have a less time-sensitive, longer shelf-life. But ‘news’ is transitory – documenting a period in time. It doesn’t have a structure like a feature does, and probably doesn’t have to adhere to the same editorial workflow. What we’re seeing on this increasing number of publications are features. And because the authors are writing these pieces, we’re seeing less shorter form writing because that type of content has no-where to live, other than blogs and everyone’s busy.

I’d like to see more balance again. More short, scrappy blog posts (like this one), written off the cuff and in the moment. Sometimes, I’d like to read the author’s actual voice, instead of a homogenised edited one. There has to be a space between 140 characters and 3000 word feature. We all need to blog more, I reckon. Roll on March.

Filed in: personal. on January 7th, 2013

Two Thousand and Twelve

Every couple of years I write a short post to document the year before. This was my Two Thousand and Twelve.

The year started with me taking a month off client work to finish writing my book. It went well, but one year on and i’ve still not finished it. It’ll be done soon.

I blogged more in 2012! Hurray! I redesigned this blog and took it back to how I wanted it: simple, designed for long-form content. Most importantly, it now runs on Statamic and is designed for how I write. I’m really rather enjoying it so far.

2012 saw Emma, Alys, Nansi and I take a holiday in Portugal for a couple of weeks well-earned rest. Alys started school and in September, we all moved house. Going from a relatively new house that we’d spent ten years getting exactly how we wanted it, to a two hundred year old cottage that we’re currently ripping to bits. It’s been interesting and 2013 will be the year I skill-up on DIY. From plumbing to plastering, I plan on doing it all myself, starting with the bathroom.

The summer was amazing. Non-stop sport for three months: from Le Tour, to Wimbledon, to Euro 2012, to the Olympics. I’m still suffering withdrawal.

…working

This year has been a great one for Mark Boulton Design. We’ve worked with some great clients, and continue to work with them into 2013 on some really exciting projects.

We launched a product in 2012, too! Gridset continues to thrive helping people make responsive grid systems for the web in a jiffy without miring themselves in all the difficult maths.

Five Simple Steps released A Practical Guide to Managing Web Projects, and announced a series of smaller books coming up in the next couple of months. We’re really rather excited about it. Five Simple Steps continues to be a heap of work for Emma and the team, but ultimately rewarding despite the late nights!

…travelling

I travelled quite a lot in 2012 with conferences and business trips. All in all, I was away 80 days and visited nine countries: United States, Doha, Dubai, Australia, Germany, Netherlands, France, Switzerland and Portugal. I spoke, and taught workshops, at some fantastic conferences this year – a great mix of local, small single-track events and larger multi-track events: IA Summit, UX Bootcamp, Future of Web Design, Reasons to be Appy, DrupalCon Munich, Reasons to be Creative, Smashing Conference, Refresh LX, Fronteers conference, Web Directions South, and Beyond Tellerand.

I’ll still be speaking next year, with a couple of events already lined up in the first half of the year that I’m very excited to be part of.

…2013

What does the new year hold? I’m not a big one for predictions or a follower of trends, but this is where my focus will be:

  1. Writing, speaking, teaching. As I said a few weeks ago, speaking and teaching is an important part of our work and I’m honoured to participate of a community where we (largely) welcome it.

  2. Balance and Focus. I’m reading a lot, recently, about people ditching social networks, over-sharing, spending more time making axes and keeping bees etc. But this is happening to a certain age of person who’s been doing this web-thing a while. This reactionary behaviour is something socialogists have been seeing for a couple of decades now in the general public in the UK with regards to technology. What it represents is a desire for balance. I’ve spent the last two years working on balance, and up until the last few months of this year, I’ve been better at it. And that doesn’t mean using Twitter less. It means making sure I give myself, my family and my work equal amounts of time and attention. I’ll be spending 2013 getting even better at doing that.

On to work stuff…

  1. Community. I hope it’s a more considerate year. I’ve had a gut-full of embarrassing, unconsidered discourse on Twitter and I hope we see a lot less of it this year in favour of responses in blog posts or in person. I hope it’s a year of respect.

  2. Web Design. I don’t think responsive web design will be the defacto method of web design. Not yet. As long as advertising revenue models exist, and platform channels (eg. m.sites with their own profit and loss), there will be difficulties getting that to work responsively. As I talked about at the end of this year, designing responsively impacts many parts of organisations. But, I do think responsive web design is no longer a trend. It’s a bunch of techniques that have proved themselves useful and relevant, and will probably continue to be so.

I hope it’s a year of a CMS shake-up. I hope it’s a year in which open source CMS communities break out of their IRC bubbles and start working with writers, editors and designers. I hope they become less feature-focussed, and more human and organisation-focussed. I hope we see as much effort going into the design of our back-end systems and work flows as we put into our web site designs and user flows.

I hope it’s a year where we stop Defining The Damn Thing. Design is design. I hope the term ‘visual design’ stops getting used. It’s not a thing.

I hope Google stops giving us great, free, cool things and then deprecating them. I’ll pay from the off.

I hope Twitter starts behaving like a media platform instead of a product. I’ll pay for flexibility, freedom and content.

I hope Adobe stops acquiring everything. They need a big, scary, great competitor.

I hope it’s a year we have a more balanced industry view. I think we need more publications, more voices, more speakers, more blogging, better journalism, better reportage, broader guidance, better conferences, more meet-ups. We rely too much on a small set of voices that guide the industry one way and another.

I hope we all take a moment, every day, and think about the importance of what we do. We’re defining, designing, launching, and iterating upon a medium. It’s big. And important. But… if you have a bad day, nobody died, right? That’s important to remember.

So. That’s that. I can but hope.

Oh. And, in 2013 I hope I stop starting sentences with the word ‘so’. I’m British, and we don’t do that.

I hope everyone has a successful, fruitful, happy 2013. Thanks for reading.

Filed in: personal. on January 1st, 2013

A New Canon

The evolution of the grid from geometric form and canons of page construction is quite clear. In no other period of history was the grid used as a core aesthetic as was in the 1950s and 60s where it emerged – almost simultaneously – from several design schools in Europe. From then, the grid system’s influence has been pervasive.

Today, the grid is viewed by many designers with equal amounts of distain and fervore. Its detractors – and there are many – claim a grid system is visual straight-jacket, designed to inhibit creativity and that using one produces dull work. Of course, I think that’s rubbish; there are no bad grids, just bad designers. In the hands of a competent designer, a well-constructed, considered grid system is the frame on which the fabric of the design is hung. It should create balance, provide landmarks and visual cues. It should allow the designer to exercise just the right amount of creativity and provide immediate answers to layout problems.

Canvas In

For the past 800 years, the printed page has been constructed in pretty much the same way; from the edges. The desire to create the most aesthetically pleasing book always starts with the size of the physical page. That page is subdivided to give us the optimum place to put our text and images.

Fast-forward 800 or so years to 1997.

The web is just about hitting the mainstream. I was working as a junior designer in a small firm in Manchester, UK. Typically, as the young guy in the studio, it was my job to create the websites for clients whilst the ‘serious’ designers looked after the large fee-paying clients on their branding, print design and advertising and what not. Remember, this is the early days of the web.

Designers who were exclusively designing for medium back then were doing what they knew; applying the rules of print design to the screen. We used tables for layout, shim-gifs and all manner of terrible ways to achieve our goal of ordered, controlled layout. And it drove us all crazy. And you know what? Despite all the great progress made in the last 15 years – web standards, inclusive design, UX, semantic thinking etc. – when you really think about it, as designers we haven’t really grown that much. Or rather, we’re still trying to force what we know into a medium that it doesn’t quite fit. Our practice of creating designs for the web is still mired in the great thinking that was done over the last 800 years. But who can blame us? 800 years of baggage is hard to get rid of! But that’s what we need to start doing; we need to start thinking in a new, and different way.

‘There is no spoon’

For print design, the ‘page’ is the starting point for creating your layout. The proportions define the grid within. The content is bound the book for pleasing effect. The ratio of the page is repeated in the smaller bodies of text for a feeling of connectedness when the reader moves from one page to another. For print design, the process of designing grids, and the layouts that sit on top of them, is a process with one fixed and knowable constraint: the Page. On the web, however, there is no page.

Consider the browser for a moment. The browser is a flexible window into the web. It grows and shrinks to the users screen size. The user can move it, stretch it, scroll it. The edges are not fixed. It is not a page, but a viewport.

Let us pop back to 1997 again. I’ve just been asked to design a website for a new art & architecture gallery in Manchester. The project is an exciting one, with some great potential for some really creative design and layout work. Typographically, it was a bit of a dream project. I’d been involved in the branding, the logotype design and the design work for the publications. I’d designed a grid system that would work across all of the media from flyers to signage – a kind of universal grid with the proportions of the logo as its starting point.

The time came when I had to knuckle down and design the web site. I started the design, as I usually did, on paper. Then Photoshop. Then Dreamweaver (trying to avoid looking at the code it produced – not because I was purist, but because it scared me to death!). The website design I created was based on a fixed width, fixed height modular grid. It had it all: ambiguous navigation, hidden content, images instead of text, all created with tables. It was cutting edge. But I know now, I hadn’t created a website, I’d created a brochure that happened to be on screen. I knew then, as I do know, that it was wrong. What I’d created had no place on screen at all – the wrong design for the medium. Instead of trying to understand the web, and the browser, I’d taken my existing thinking and shoe-horned my controlled design into it.

Now, let me ask you a question. If you replace Photoshop with Fireworks, Dreamweaver with Textmate, and tables for layout with Web Standards, how many of you are still designing this way? How many of you are still thinking of pages and edges? It’s ok. I am still, too.

800 years of baggage is hard to shed. There’s a lot of engrained thinking. Thinking that is, in fact, really great design and compositional theory. But, because of the attachment to the fixed page, we’ve not accepted the web for what it really is: fluid, chaotic, unordered, open. On the web, there is no page.

Content Out

If there’s no page, no thing with edges, then how can we begin to define a grid? One of the goals – as described by Jan Tschichold – was to create a layout that is bound to the book. How can we bind anything on the web if there is no page from which to start? I propose we stop trying to find the browser’s edge. We stop trying to create a page where there isn’t one, and we welcome what makes the web, weblike: fluidity. We start creating the connectedness Tschichold talked about by looking at what is knowable; our content.

It has been said that as web designers, we’re not designing around content, but rather we’re designing places for content to flow into. Particularly in large organisations, it was commonplace for designers not to know what the content is, or would be, but rather, at best, they’d have some idea of how the content would break down. At worst, they wouldn’t have a clue and basically guess. ‘Oh, this is an article page, so it must have a bunch of headings, some body copy, some lists’. Feel familiar?

Separation of content and presentation is the mantra of the Web Standards movement. So you may think this disconnect started when the web standards movement was in full flow, but it started way before then. I look back at when I worked in web design agencies in the early 2000’s and, as a designer, I was off in my little corner designing the three templates that the client was paying for, and that the Information Architect had defined. I had wireframes of these exemplar templates and was pretty much following them the number. What I was doing was designing in the dark. I had my blinkers on. I had no idea what the content would be in 6 months, 1 year, 2 years time. In fact, I’m pretty sure the client didn’t, either.

What I was doing was designing a box. A straight-edged, inflexible box that couldn’t grow with the content as it didn’t take into account existing graphical assets, either. Thankfully, skip 10 years to the present day and things are getting better. We have content strategy. We have a relatively mature UX industry. As designers, we’re in a much better position to know, not just what the content will be right now, but what it will be in 1,2 ,3 years time. Now we have this knowledge, we can use it to our advantage: by using it to create our grid system.

A NEW CANON

I’ve talked about baggage. Hundreds of years of thinking in the same way: canvas-in. We’ve taken grid design theory from the world of the physical page and tried to make work in a medium where there are pages with no edges. A medium where the user is able to manipulate the viewport. Where context matters – is the reader sitting at the TV, a desk, using an iPad or hurredley walking from one meeting to another snatching some news on the way on their mobile device. Where do we begin to design on these shifting sands and still retain the reason for using a grid system? Before I get on to that, let’s remind ourselves what those reasons are:

  1. Creates connectedness Grid systems help connect or disconnect content. They help people read and aid comprehension by chunking together similar types of content, or by regular positioning of content, they can help people navigate the content. Connectedness helps brands tell a consistent story in layout.

  2. Help solve layout problems We all need answers to layout problems. How wide should a table be? What should the whitespace be around this boxout? Grid systems help us with that with predefined alignment points.

  3. Provides visual pathways for the readers eye to follow A well-designed grid system will help use whitespace dynamically and in a powerful way. By filling a space with negative space instead of content, we can force the direction of the readers eye more effectively than anything else.

As with the printed word, the word on screen would benefit from some rules of form; a new canon of page construction for the web. A way of constructing harmonious layouts that is true to the nature of the web, and doesn’t try to take constraints from one medium into another. That starts with the content and works out, instead of an imaginary fixed page and working inwards. I’m going to repeat that, because it’s important: we start with the content and work out. Instead of starting with an imaginary fixed page and work in.

Design Principles

The new canon can be best described as an approach. A series of guidelines, rather than a single diagram to be applied to all. This first part of the canon are a series of design principles to adhere to. These design principles were created to provide a simple thought framework, an Idea Space; a set of guiding principles to be creative with.

  1. Define a relationships from your content. If none exist, create some. A grid for the web should be defined by the content, not the edge of an imaginary page. Look to your content to find fixed sizes. These could be elements of content that is out of your control: syndicated content, advertising units, video or, more commonly, legacy content (usually images). If none of those exist, you must define some. Make some up. You have to start somewhere, and by doing it at a content level means you are drawing content and presentation closer together.

  2. Use ratios or relational measurements above fixed measurements. Ratios and relational measurements such as pixels of percentages can change size. Fixed measurements, like pixels, can’t.

  3. Bind the content to the device. Use CSS media queries, and techniques such as responsive web design, to create layouts that respond to the viewport. Be sympathetic to the not only the viewport, but to the context of use. For example, a grid system designed for a small screen should be different to that intended to be viewed on a laptop.

By using these principles to design to, we’re drawing closer relationships between our layout, content and device. Tschichold would be proud.

– This blog post is an excerpt from my upcoming book on designing grid systems for the web, published by Five Simple Steps.

Filed in: personal, design, Five Simple Steps. on December 9th, 2012

Participation

Last week, there was an argument on the internet.

As usual, it started on Twitter and a flurry of blog posts are cropping up this week to fill in the nuances that 140 characters will not allow. So, here’s mine…

[Aside: I did actually make a promise to myself that I wouldn’t get involved, but, I find that cranking out a quick blog post, gets my head in the space for writing generally.]

I started speaking at web conferences in 2006. After attending SXSW the year before, I proposed a panel discussion (with the lofty title: Traditional Design and New Technology) with some design friends of mine: Khoi Vinh, Jason Santa Maria and Toni Greaves and moderated by Liz Danzico. I was terrified. But, in the end, it was fun – there was some lively debate.

I wanted to do a panel at SXSW since seeing Dave Shea, Doug Bowman and Dan Cederholm sit on a CSS panel at SXSW in 2004. Not because I saw the adulation, but because I saw – for the first time – what it was like to contribute to this community. To be part of it. To give back: be it code, techniques, thoughts, debate or discussion. And I wanted a part of it. So, that’s what I did. I started blogging – I felt I had some things to say, about typography, grids, colour theory. All of the traditional graphic design stuff that mattered to me. Not because of some egotistical trip, but because I genuinely wanted to make things better. Trite, I know.

Fast forward a couple of years and I’m speaking at the inaugural New Adventures conference in Nottingham for my friend Simon Collison. On that day, every speaker up on stage was trying to give the best talk they could. Not because of the audience, not because of who they were, but because of Simon. It was personal.

The talk I gave at new Adventures took about two years to write. Yes, it took me that long to write a twenty five minute talk. You throw that into the equation, a high-risk personal favour for a good friend, plus my family and best friend in the audience, and you’ve got a recipe for bad nerves and vomit. And I did vomit.

But, I got up there. Cast aside the nerves and held my head up and spoke for twenty minutes on things I’ve been thinking about for years. It was received well. Afterwards, all I did was sit in the green room for about two hours and didn’t really speak to anyone.

My natural preference

It may surprise you that most speakers I know are not extroverts. I don’t mean extroverts in the way you may think, either. I mean it in the Myers Briggs type: they are not the type of people who gain energy from other people, they gain that energy from themselves. I’m one of these people, too.

Being on stage is firmly out of my comfort zone. Firmly. I’ve had to learn to harness the nerves and put them to good use. A good friend of mine calls this ‘peak performance’ – the nerves help you bring your ‘A’ game.

My natural preference is to be on my own, working. Either thinking, sketching, writing, building, exercising… whatever. All through my life, I’ve enjoyed solitary sports and pastimes, from angling to cycling. Now, that’s not to say I’m a hermit. I’m not. I’m pretty sociable when I need to be, but it’s not my preference. So being on stage – sticking my head above the parapet – takes incredible effort, and then afterwards, I generally want to go and hide in a corner for a bit. It wipes me out.

So, why do I do it? Why does anyone do it in this community? If you’re a regular speaker, or your first time? Almost everyone I know does it because they want to give back. They have something they’d like to share in the hope it may help someone else in a similar position.

This brings me full circle to my opening sentence. Why, then, knowing all of this, is there a general feeling of discontent in a vocal minority that speakers who do this regularly are:

  • In it for the ego
  • Not doing any real work
  • Not leaving room for new speakers

I’d like to address these points from my own experience.

In it for the ego

Why would someone get up on stage and speak to hundreds of people? Sure, some may get a kick out of that. People applauding you feels nice. But, let’s be clear: that’s not egotistical. That’s being rewarded, and there’s nothing wrong with that.

Not doing any real work

I wrote about defining ‘work’ last week. I see speaking as part of my work as a graphic designer. If you’ve studied graphic designers, art directors, ad copywriters and the like, you’ll know that a lot of them speak to their peers – either at conferences or through publications. Writing and talking about what we do with each other is work. Not only that, it’s fucking important work too. Without it, there would be no web standards, no open source, no progression.

Not leaving room for new speakers

Experienced speakers leave room for everyone. Experienced speakers do not run conferences: conference organisers do. And conference organisers need to put bums on seats. Just like a big music festival, you need the draw, but also you need the confidence that a speaker will deliver to the audience. Every experienced speaker I know works damned hard to make sure they deliver the best they can, every single time. They’re professional. They don’t screw it up, or spring surprises. They deliver. And that’s why you may see their faces at one or two conferences.

A couple of months ago, I saw Heather Champ talk at Web Directions South in Sydney. Amongst many hilarious – and equally terrifying - stories of how she’s managed and curated communities over the years, she came out with the nugget:

“What you tolerate defines your community” — Heather Champ

At this point, I’d like to ask you this:

What will you tolerate in this community?

Will you tolerate a conference circuit swamped by supposedly the same speakers and vote with your wallet? Or will you tolerate conference organisers being continually beaten up for genuinely trying to do the right thing? Will you tolerate speakers being abused for getting on stage and sharing their experiences?

Will you tolerate harassment, bullying and exclusion?

As I’ve said before, Twitter is like a verbal drive-by. It’s fast, efficient, impersonal and you don’t stick around for the consequences. Let’s stop it.

Filed in: personal. on December 8th, 2012

Next