I’m very pleased to announce that, yesterday, Five Simple Steps launched A Practical Guide to Web App Success from Dan Zambonini. You can buy it now in DRM-free ePub, PDF and mobi formats bundle for just £15.
Like our other Practical Guide books, Dan’s book is very useful. It’s about taking that might seem overwhelming, complex or just plain big, and breaking it down into manageable, empowering chunks. For almost anyone working on the web, but particularly for designers and developers wanting to take an idea to market, this book is a great place to get an understanding of what’s involved; starting from a scratchy beginning of a side project to a full-time venture.
Personally, what I got from Dan’s book was enough breadth to make me believe I could do the same. Not only that, but that it might just be a success.
Of course, it looks great. Our designer Nick, and particularly our new apprentice at Mark Boulton Design, Colin, have spent many weeks crafting a beautiful experience.
.Net magazine have published a sample chapter on ‘Prototypes and User Tests’, and of course, you could download the sample from the Five Simple Steps website if you wanted to see what it’s all about.
We’re thrilled to bits with it. If you pick a copy up, please let us know what you think @fivesimplesteps.
Recently at Mark Boulton Design, we’ve been working on a redesign of the global visual language for a large sports network. Like many web sites delivering news and editorial content, they rely on advertising for their revenue — either through multiple ad slots on the page, or from video pre-rolls.
Early on in the project, we discussed Responsive Web Design at length. From an editorial and product perspective, it makes perfect sense. Who wouldn’t want their content adapting to a device their reading it on? Who wants to pinch-zoom again and again? From a business and product perspective, we’ve seen this from multiple clients who want to take advantage of certain interactions on certain devices — swiping for example — for users to better engage with the content in a more native way. All good. And then advertising comes along and things get challenging.
Here’s the problem as I see it:
- A large number of sites rely on advertising for revenue. Many of those sites will benefit from a Responsive Web Design approach.
- Web advertising is a whole other industry.
- Ad units are fixed, standardised sizes.
- They are commissioned, sold and created on the basis of their size and position on the page
- Many ads are rich (including takeovers, video, pop-overs, flyouts and interactions)
Let me go through each one of these in turn:
A large number of sites rely on advertising for revenue. Many of those sites will benefit from a Responsive Web Design approach.
The content for free expectation on the web has been around since it started. Many websites — where you pay for the content in other forms, such as newspapers — had to adopt this model, but use advertising dollars to pay for it. With the absence of any other revenue stream on these sites, the only other alternative is paywalls/subscriptions, and we’re seeing a few of these start to come through in mainstream newspapers now — The Times, for example.
As I mentioned earlier, many of these websites will benefit from a responsive web design approach. The consumption of this content has changed along with the plethora of devices and viewports. As I’ve talked about before, designing a ‘best fit page’ is becoming increasingly challenging if you acknowledge how usage has changed and will continue to change in the coming years.
Web advertising is a whole other industry.
There are sub-industries within web design as a whole that generally don’t talk to each other — such as gaming, gambling, porn, seo. Web advertising is another. These sub-sets each produce technology advances that everyone else benefits from. They deeply understand their audiences and how they interact within those verticals. But they don’t talk. Generally. For an industry that is built upon open standards, sharing, communication then this can be damaging.
Ad units are fixed, standardised sizes.
Hurray for standards! Because of the inherent reuse of advertising colatoral, this stuff had to be standardised. The Internet Advertising Bureau has been documenting emerging standards in web advertising for years now.
This is all good, especially for creating grid systems. Khoi Vinh talked about deriving a grid from an ad unit (PDF slides) when I shared a stage with him in SXSW in 2007. They are a fixed content element — unchangeable and standardised across a website. They’re knowable.
They are commissioned, sold and created on the basis of their size and position on the page.
This is perhaps the biggest issue for me. For example, a sales teams basically have a page ‘template’ with ad slots. Position A, B and C. In A, you can fit a Leaderboard. In B an MMU, and C a button. Also, if an advertiser pays lots of money, they can have a takeover. A takeover includes banners down either side of the page which join up to create a wrapper. Sometimes Leaderboards in position A can be pop-overs or flyouts. Sometimes, crazy stuff can happen where someone throws a ball from ad position B to A. Yes. Seriously.
The sales team then proceeds in selling the slots to advertisers who in turn provide the ‘creative’. This could be animation, video, graphics – increasingly a combination of all three – that are embedded in the page by a scheduling application. They’re sold based on the impressions rather than clicks.
That’s a lot of variables to account for. But, web advertising is becoming an increasingly aggressive industry. Advertisers and web sites are looking to innovate to engage users through marketing campaigns that align across multiple media. And web sites need to be accommodating.
Sales teams through many industries are also largely commission-based. As a sales person, you have a basic salary (or sometimes you don’t), and then you earn more depending on what you sell in the month. And here’s the thing. A sales team need a simple model in order to sell ads: a template with slots and a list of ads that can go in then. Now, let’s introduce Responsive Web Design into this.
Let’s say, you have the minimum amount of break-points: desktop, tablet and small screen. A sales team has a template with Slot A (the primary slot) that accommodates a Leaderboard for the desktop. But then that changes to a MMU for tablet. And changes again to a thin banner for small screen. A sales person has to understand they’re selling ONE slot for this. And an advertiser has to understand they’re paying for ONE slot for this. However, they’re supplying three times the amount of creative. And this is just a very simple use case. What happens with a takeover? Everyone wants as much bang for their buck as they can muster.
Many ads are rich (including takeovers, video, pop-overs, flyouts and interactions)
Increasingly, ad units are not confined by their pixel borders. Take-overs combine multiple ad units to give an overall effect of taking over the page. Flyouts show and hide a layer on hover. Pop-over do the same but in a different way. Video autoplays. Animation completely breaks out of the ad unit and can fly around the screen: how ever annoying that might be. My point is that the notion of advertising being confined by their pixels is also becoming increasingly grey. How would you accommodate a flyout for a small screen, for example? Another type of flyout for each breakpoint? So now the advertiser has to produce three times the amount of complex creative for the same, single ad slot? In order to make this commercially viable, they’d be looking for a deal then.
Those are some of the practical logistical things I can think of to challenge the notion that you can just ‘serve a different ad for each break point’. It’s just not that simple when millions of dollars are at stake.
So what can we do to improve this?
Well, some responsive sites are incorporating ad units now. But not many.
Boston Globe has incorporated an MMU ad unit. They’ve done this by fixing the width of that column and have the ad unit occupy that space as the viewport is reduced down to a single column.
Boston Globe screenshots on multiple devices
The good news is, this is a problem a few in the industry are seeing as an opportunity. ADO published a press release just last week:
to deliver cross-media web innovation, user experience design and integrated advertising for brand, agency and publisher clients specifically around mobile full-service responsive web design.
Matthew Snyder, CEO of ADObjects adds:
We wanted to share our vision on 11.11.11 since we believe a critical part of the right digital strategy is to build a cross-media mobile strategy with complete 1-to-1 parity multi-screen design. With one recent client we were able to see 4x more traffic and 30% of the traffic to mobile via responsive design methods due to search and social link matching over conventional mobile web platforms
If these numbers are to be believed, then there is a considerable ROI for advertisers to work to adopt responsive design and an ad strategy that would match.
Now, let’s get down to brass tacks. How would approach building out a complex responsive web site that had multiple slots?
The Standard Model
The existing model is based on advertiser filling slots, as shown in this diagram. Each is sold to perfectly fit an available slot. If none are sold, the website defaults down to a stand-in.
The standard model of displaying and selling ads for the web
A Responsive Model
Firstly, I’d sell slot ‘packages’ rather than single slots. This requires an ad sales team to clearly explain what those slots and sizes are, and they’d be served on that basis. For example, an advertiser would buy a package for slot A. The creative to deliver against that package would be a Leaderboard, an MMU and a small banner for small screen.
A proposed Responsive model of serving ads
Then, of course, the templates need to be able to detect the various widths and serve the correct ad based on that width.
Complex ads such as flyouts and takeovers would require much more thought and change. How could you effectively engage with an audience across the various viewport sizes when there is rich interaction involved?
As I mentioned, of course all of this is with a caveat that the advertiser is buying a slot ‘package’, rather than a single ad to fill a single slot. And that a sales team would sell it as such. This is the crucial difference, and for me, the biggest barrier to this change – it’s cultural and not technical, that requires a lot of explaining, and they always take the longest to do.
The template > slot > ad mental model is engrained both in advertisers, planners and web sites. Providing space for ads needs to be broadened into multiple spaces for one ad concept. This requires closer collaboration between advertisers and web sites, designers and marketeers and sales teams.
Over the past six months I’ve been working on this problem: speaking to sales teams, product owners, designers and as @kerns mentioned on Twitter this morning, the one thing that is plainly lacking at the moment is demand. I’d go one step further and say that the thing that’s missing is benefit. If the benefit can be clearly shown to advertisers and websites — in terms of an increase in penetration, reach, and ultimately, revenue, then we’ll start to see some movement.
I’d love to discuss this further on Twitter, or on Google +, you can reach me on either if you have any questions
When I was 16, I was mugged. I was taking a shortcut home from a friends house. It was winter, and dark, and I passed by a man in an alley way. He asked me the time. As I looked down to my wrist, he punched me once on the side of the face, he then tried to get my wallet from my pocket. It was a horrible experience, but at least he only used his fists. It could’ve been worse, as I told myself over and over again during the following months.
From that time until about ten years ago now, I taught, and practiced Martial Arts. Specifically: freestyle karate, kick boxing and capoeira. Since then I’ve done a fair amount of other fighting styles and systems; from boxing to MMA. I’m not training at the moment, but may well return to it. In all honestly, martial art thinking (not necessarily practice) is such a part of my life now, I don’t think I’ll ever give it up.
Throughout my time teaching, I’d been involved in several self-defence courses: both in university and in the work place. Central to our teaching back then was not necessarily the tools or techniques to effectively punch someone in the face, but to give people a deeper understanding of their own awareness.
We used a system of colour codes to describe awareness that was derived from John Dean Cooper’s ‘The Cooper Color Code‘. The system does away with the notion that the best way to survive a lethal confrontation is to be a superior practitioner (in his case, a rifleman), or have better weaponry. Instead, the primary tool is that of the combat mindset. Cooper describes each state of awareness as colours starting with White:
White – Unaware and unprepared. If attacked in Condition White, the only thing that may save you is the inadequacy or ineptitude of your attacker. When confronted by something nasty, your reaction will probably be “Oh my God! This can’t be happening to me.”
Most people walk around in a pre-occupied fog for most of the day. Their mind is elsewhere: the errand they’re running, what they did last night, speaking on the phone, checking Twitter… Humans are great at giving our tasks just enough attention. The rest — looking, watching, observing, walking, breathing — is all done automatically. We also respond automatically to certain cues, questions, thoughts and external stimuli. Such as checking your watch when someone asks you the time. Don’t be in this state.
Yellow – Relaxed alert. No specific threat situation. Your mindset is that “today could be the day I may have to defend myself”. You are simply aware that the world is a potentially unfriendly place and that you are prepared to defend yourself, if necessary. You use your eyes and ears, and realize that “I may have to shoot today”. You don’t have to be armed in this state, but if you are armed you should be in Condition Yellow. You should always be in Yellow whenever you are in unfamiliar surroundings or among people you don’t know. You can remain in Yellow for long periods, as long as you are able to “Watch your six.” (In aviation 12 o’clock refers to the direction in front of the aircraft’s nose. Six o’clock is the blind spot behind the pilot). In Yellow, you are “taking in” surrounding information in a relaxed but alert manner, like a continuous 360 degree radar sweep. As Cooper put it, “I might have to shoot.”
This is about knowing what is going on around you. Engaged in your surroundings rather than dreamily ambling along checking your phone.
Orange – Specific alert. Something is not quite right and has your attention. Your radar has picked up a specific alert. You shift your primary focus to determine if there is a threat (but you do not drop your six). Your mindset shifts to “I may have to shoot that person today”, focusing on the specific target which has caused the escalation in alert status. In Condition Orange, you set a mental trigger: “If that person does “X”, I will need to stop them”. Your pistol usually remains holstered in this state. Staying in Orange can be a bit of a mental strain, but you can stay in it for as long as you need to. If the threat proves to be nothing, you shift back to Condition Yellow.
This is an elevated state. There is a specific threat — such as a small group of threatening men walking on your side of the road, coming towards you, and it’s dark. of course, this elevated state can happen in conversation, or a business meeting, or on Twitter too. Whatever can be perceived as a threat, the state you find yourself in is one where you’ve established what that threat is, and are acting upon it.
Red – Condition Red is fight. Your mental trigger (established back in Condition Orange) has been tripped. “If “X” happens I will shoot that person”.
This is the decision to engage in the threat. Either verbally or physically.
For the past fifteen years or so, I’ve been going about my day to day activities in the Yellow state. Normally I don’t recognise I’m doing it, until I’m in a new situation. This weekend was one of those.
This summer I started cycling. On the road, not mountains or footpaths. I bought a nice little bike, and we’re lucky to live in a great place to get out and explore the countryside. On Saturday, as I like to do most weekends, I wanted to get some miles in and it was an unseasonably beautiful day here in Wales. I’d been out for about an hour and was heading downhill on a main road in a residential area. As I was concentrating on the road (in my ‘Yellow’ state), suddenly a car reversed straight out into the main road without stopping for me. After slamming on the brakes I barely missed the bonnet of the car as I screeched to a halt. The driver had still not seen me. The driver was in ‘White’. And it’s my experience over the past few months, many are.
My overall point is this: be aware. Be aware of your surroundings. People around you – especially vulnerable people. Don’t think, walk — or drive — in White. It’s dangerous for you and for those around you. It’s a thoughtless state of mind.
We all know that Spec work is bad. I’ve written about it here before.
There are professional organisations that have official codes of conduct on the subject. Industry campaigns continue to educate ill-advised clients, yet the more I’m in the service industry, the more I realise the ‘not doing speculative work at all’ is not quite as cut and dry as these organisations would have us believe. And, taken to the extreme, could be damaging for the industry and your business.
First of all, let’s get grips with what ‘spec(ulative)’ in this context means. The AIGA believes:
…that professional designers should be compensated fairly for their work and should negotiate the ownership or use rights of their intellectual and creative property through an engagement with clients. To that end, AIGA strongly encourages designers to enter into client projects with full engagement to show the value of their creative endeavor, and to be aware of all potential risks before entering into speculative work.
Quite right. But what they don’t do is state what that work is. Presumably they mean design consultancy producing output, be it wireframes, user interface mockups, logos, advertising campaigns etc. What they’re failing to very clearly state here is the speculative work that goes on in securing a client that is not design related.
Good client relations begin from the very first contact. At Mark Boulton Design, we probably have a similar approach to most small studios in engaging with potential clients: we spend time trying to understand them, their needs, the business and the project — at least from a high-level perspective — before committing to working with them. Sometimes this takes the form of a formal RFP from them and a subsequent proposal from us, but more often than not it takes place over many weeks over email, phone conversations and face to face meetings. This is before any contract has been signed. Like any relationship, we’re seeing if we like each other before we commit. And just like other relationships this is speculative; you are speculating your time on a successful outcome.
You see, to my mind, some of the work we do is inherently speculative if you are charging your clients for time. Your time = your money. Every conversation you have with a perspective client spent during a project and client discovery is time you are spending.
So, when we talk about Spec Work in relation to web design, let’s be specific: we’re talking about speculative design work. Not all speculation is bad. In fact, some of it is unavoidable.
A few weeks ago, I attended the Do Lectures. Luckily, for me, it’s a quick trip from Cardiff to Cardigan in West Wales. I’d been looking forward to it for months.
As I was soon to find out, Do is a magical place. Nestled in the woods, it is an intimate affair: thirty speakers and eighty attendees. You sleep in tents, share your meals seated on benches, and pack into a twin-roofed teepee to listen to the talks. You think big thoughts, whilst quietly reflecting on a wooden deck overlooking natural meadows supping freshly brewed tea.
Do is also unlike every conference I’ve been to. I wouldn’t even describe it as such. It’s more like a retreat. The content of the lectures was also a wonderful mix of big things from small ideas and small beginnings from big ideas. Personal highlights for me was an emotional talk from a Midwife about maternal care in the developed world, and a rousing final lecture from Mickey Smith: a surf photographer who had never spoken before in public, yet his raw passion for his work made every stumbled word a vital part of his delivery, ending the lectures with a superb film. The Internets Frank Chimero also spoke. For those of you who haven’t heard Frank speak before, he’s like a poet. Like an American version of Richard Burton reciting ‘Under Milk Wood’. I could listen to him all day.
For me, Do was nourishing in a way I’ve not felt for a long time.
We all individually have to ask ourselves: ‘what nourishes us’? How do we grow? Is it grass-roots bar camps, or skipping from one web conference to another listening to the same people say similar things. Or is it just hanging out with your friends and peers discussing our work.
I’ve asked myself a question over the past few years: are there too many web design conferences; what value are we *really* getting from them? For a long while, I thought the market was getting too saturated, and we’ve seen signs of this ripple through the industry consciousness. People see the same people say similar things time and again. For conference organisers, it’s hard to find the right mix of experienced speakers – who will sell tickets – and people who are doing smart, interesting work, but don’t have the speaking experience. Andy Budd wrote a great blog post on this subject a few weeks ago going into great detail on the challenges organisers face.
Yet, more conferences appear throughout the world and more sell out. Our thirst for all getting together under one roof to share, collaborate, listen and grow is an overpowering need that will not go away. But, let’s ask ourselves: do we get the nourishment from the conference, or from simply being with our tribe. And if your answer is the latter, then are big, expensive web conferences the best place to just be together. If this is all really about community, then how can we do this better?
Since I began working with the Drupal community in 2008, I’ve attended – and spoken at – five DrupalCon events in Europe and the US. DrupalCon is different to other web conferences. It acknowledges that its primary purpose is for people who are working with Drupal to get together. And the result is infectious.
DrupalCon is managed by one of Mark Boulton Design’s clients, the not-for-profit association: The Drupal Association. They are independent of the software and work to market Drupal, in addition to arranging and planning the bi-annual DrupalCons. They receive donations and membership from all over the world to pay for such events, and because one of their core remits is to nurture and grow the Drupal community, they keep the ticket prices down and focus on community collaboration over big-name speakers (except the keynotes) and venues. And it works. In DrupalCon Chicago earlier this year, over 4000 people packed a downtown hotel for a week. A big, collaborative soup of all kinds of people. And as a direct result of DrupalCon, every year, Drupal gets better. It’s about the people, not the speakers or the glitzy conference. People speak for free. Give workshops for free. Not because they’re being nice, but because they are giving back to the community and furthering a common goal.
Remember SXSW in 2006? Remember how that felt? Right?
So what if…
What if there was a web design association? A not-for-profit organisation that was small – with elected members, funded by donation and membership – set up and operated in exactly the same way that the Drupal Assocation is run – whose core remit was to provide a twice yearly event: one in the US and one in Europe for people to attend to be and work together. Now, of course, there wouldn’t be the central goal of ‘making Drupal better’; our efforts are not open source and largely commercial (read: secretive), but there is much we share. When people get together things happen. We find common problems and solutions; ideas are born; approaches simmer and products are created.
This would not be about profit. It would be about providing a place for us to be together. It wouldn’t be expensive to attend. It would be about being inclusive, where people from all disciplines could gather round and share their work.
Now, I’m not sure this would be at all achievable, or in fact if it’s really a good idea. It would be hard work. It would be political. But what we could gain from this would be the type of nourishment I got from Do…
Nourishment that is slowly being eroded in the web industry as the volume of conferences reduce variety…
Nourishment that is lacking by speakers under pressure to give quick, practical info-talks rather than to inspire, challenge, provoke, debate or collaborate…
Nourishment that is increasingly lacking in polished, high price, high cost (for the organisers), high risk (for the organisers) professional web conferences….
Nourishment that we get from being together.
What if we could do that?
During the Do Lectures, speakers are encouraged to communicate a Big Do – a big idea, that may take a lot of hard thinking and hard graft, and a Little Do – something you can do right now. They also encouraged attendees to think of the same. So here’s my Big Do: how can we create a place or a gathering for our community that isn’t motivated by profit, but by nourishment? And my Little Do: make a conscious effort to reach outside of the community and industry to help me learn and grow as a designer. Yes, even Midwifery. Or surfing.
What are yours?
In 1992, I started using my first Macintosh when attending art classes at college. Frankly, it was a frustrating experience with tools that were not as immediate as pencils or paint. Yet, in that small dark room, surrounded by the smells of powder paints and musty paper, this large box attached to a CRT display captured my imagination. Next year, I will have been using Apple Macs for 20 years.
This morning’s news of Steve Job’s passing was shocking and saddening. Made even more poignant by the fact I’m working in Bangalore in India currently, and this week is a Hindu religious festival called Dussehra. This festival goes on for ten days, and on the ninth day in Southern India, Ayudha Puja is celebrated. On this day, people give thanks for the tools they use everyday: vehicles, spades, kitchen tools and computers.
Without these tools I use, I wouldn’t be doing what I do now. I wouldn’t have studied design, or studied at the university where I met my wife. It all started back then in that small, dusty room in the art rooms in college.
Today, I’m thankful to Steve Jobs for giving me the tools to do my work.
A wonderful story about the creation of FF Tundra on I Love Typography. Such a great insight into the design decisions, and motivations behind them, when crafting a typeface design.
Jason Santa Maria – the talented bastard – goes and redesigns his site and serves up a masterclass in understated elegance. The subtleties here are sublime. Look, absorb, learn.
Interestingly, Jason states one of the reasons he redesigned this way because he felt the weight of pressure that every post had to be a considered, designed, art-directed masterpiece.
Very interesting, simple solution to equity/share options which is similar to an annual profit share scheme. Except this example is when the company is sold or IPOs. A very elegant solution.
Off the back of this article in Net Magazine last week, and the subsequent few tweets popping up in my stream, I’ve finally managed (in no small part from the help of Nathan and Alex) to pull together some of my thoughts and concerns regarding CSS grids and how they could (or, maybe, should) be created.
What’s there at the moment?
Multi-Columns
CSS Multi-Column is really simple. Basically, you divide a element into columns. This is already well-supported in many modern browsers.
Flexible Box Layout
Flexible Box Layout is a module that automatically resizes elements within another element without having to do a lot of painful maths.
Grid Layout
Let’s concentrate on Grid Layout, as this is potentially the most designer-friendly and should match existing mental models.
The issues with Grid Layout
How grids are constructed
The underpinning unit of measurement in a grid is The Module. From that starting point, Modules are combined to create columns and fields. Grid Layout doesn’t acknowledge the existence, let alone use, of the Module. Instead it dives straight into columns and rows. Which brings me on to my second point:
Nomenclature
grids have been around for quite a while and there is established words for things like Columns, Fields, Modules and Gutters. It’s my feeling that the CSS grid module should speak the same language as designers, not that of developers.
A proposal for change
1. Start with a module
The starting point for any grid system is defining your module size. The module has also been referred to as a unit. I’m using module for reasons that will become clear.
To summarise, a module is a repeated rectangle, with gutters in-between, that, when combined, form columns and fields. A module size should rarely be defined, but derived from a fixed, knowable constant to be designed with: image sizes, ad units, video sizes, to name a few examples.
Following the Grid module’s syntax, firstly we define our container div to display as a grid:
div {
display: grid;
}
I then define my grid module with ‘grid-module’ as 50 pixels wide, and 30 pixels high:
div {
display: grid;
grid-module: 50px 30px;
}
This of course be defined in percentages, or Ems:
div {
display: grid;
grid-module: 8% 2%;
}
A new unit of measurement, defined once.
This is why I’m not using the terminology of unit for the module: in a grid system, the module is a unit of measurement. You combine and align content based on modules.
Similar to the Em, the Module becomes a user defined unit of measurement. And I’m proposing that we use that new unit of measurement to build our columns and fields.
2. Define the gutters
The next thing we need to do when building a grid is defining the gutter widths and heights. Please note, there, that gutters are also the horizontal spaces between units as well as the vertical.
For this example, I’ll stick to something simple, like 21px.
div {
display: grid;
grid-module: 50px 30px;
grid-gutter: 21px;
}
There’s a reason for the 1. Quite often, you may want to visually separate columns of content with a keyline; a line that runs vertically in the middle of a column. If your gutter is an odd number, with an even number of pixels either side of it, it means that 1px is available for the keyline. The syntax for this could be similar to border:
div {
display: grid;
grid-module: 50px 30px;
grid-gutter: 21px;
grid-gutter-keyline: 1px solid #333;
}
Of course, this keyline would be on every, single module – both horizontal and vertical. We would, of course, have to add this to columns and fields.
3. Define your x count
A module is modular. Meaning it is repeated, both on the x-axis and the y-axis. We know that the y-axis is difficult to work with on the web due to content reflow. We just can’t control that vertical height yet. But, we can, and do, define the x-axis.
We use ‘grid-x-count’ to define the width of the grid. And this is the first time we introduce our new unit of measurement; The Module, or ‘md’. In this example, our grid is 10 modules wide, or ’10md’
div {
display: grid;
grid-module: 50px 30px;
grid-gutter: 21px;
grid-x-count: 10md;
}
Now, all you need to do to see your grid is to add a background colour to the module:
div {
display: grid;
grid-module: 50px 30px #ccc;
grid-gutter: 21px;
grid-x-count: 10md;
}
4. Define your columns
Next in the process of designing a grid is defining your columns. Now, you should have a pretty good idea of these from how your derived the Module. For this, I’m using the same syntax as the existing proposed Grid CSS3 module. But, for me, the exciting thing is, I can now use the new ‘md’ unit of measurement to define the width of my columns. So, let’s say I want to create a column 2 modules wide on the left, 1 module wide on the right, and then a centre column of the rest. The ‘fr’ unit here is defined in the existing Grid Layout specification:
I add the ‘grid-columns’, with the first column as ’3md’.
div {
display: grid;
grid-module: 50px 30px;
grid-gutter: 21px;
grid-x-count: 10md;
grid-columns: 3md;
}
The second column sees the introduction of a second proposed new unit: ‘fr’ – short for ‘fraction’, which is proposed in the existing Grid Layout proposal.
div {
display: grid;
grid-module: 50px 30px;
grid-gutter: 21px;
grid-x-count: 10md;
grid-columns: 3md, 1fr;
}
Finally, I add the last column of 2md wide:
div {
display: grid;
grid-module: 50px 30px;
grid-gutter: 21px;
grid-x-count: 10md;
grid-columns: 3md, 1fr, 2md;
}
That’s my columns sorted. Now, I need to add the horizontal fields. How we might use these fields are for things like headers, content areas and footers.
5. Define your fields
We add the fields in the same was as the columns: using our new ‘md’ unit. Now, you may well ask: ‘why can’t I just use pixels for the height of my header?’. Well, you could, but then you’d have limited connectedness to the underpinning grid structure. As such, you header might not feel like it belonged to the other things on the grid. A grid, after all, is about creating unity.
div {
display: grid;
grid-module: 50px 30px;
grid-gutter: 21px;
grid-x-count: 10md;
grid-columns: 3md, 1fr, 2md;
grid-fields: 3md, auto, 1md;
}
So now we have our grid. Three columns and three fields, but all built upon a new user-defined unit of measurement: The Module.
Some nice to haves
There are other things that I would find useful for a CSS grid module to provide. How cool would it be for CSS to be able to give you pain-free baseline grid?
1. Baselines (vertical rhythm)
A baseline grid provides vertical rhythm within your grid, so that type and images align across columns. It’s possible at the moment, but fragile. Wouldn’t be great if it were a simple declaration that magically applied a baseline grid so that all elements would vertically snap to it?
I’m thinking something like this:
div {
display: grid;
grid-baseline: 1em;
}
2. Snap to grid
Speaking of snapping. Snap To Grid is a behaviour that many designers are familiar with. It’s generally a toggle on/off in layout software. You create a grid with guide lines, and then you can toggle ‘Snap to Grid’ on so that elements that you position on the canvas, ‘snap’ to the grid you created instead of float nearby.
Now, this is fine for layout software – where the behaviour is drag and drop – it’s a little different when we’re positioning things in a document. To be honest, I’ve no idea how this could work, but the goal is that instead of positioning by pixel, we could ‘snap’ to our grid. Making the grid and the tools smart, so we don’t have to do so much work manually.
3. Grid positioning
Now you have defined a new base unit of measurement, you can use it to position content relatively to the grid (instead of relatively to something arbitrary like pixels).
The benefits of a different approach:
As I discussed earlier, I feel the existing proposed Grid Module for CSS has a number of problems, and what this article aims to do is rectify those.
The process, and mental model of how a grid is constructed, is retained.
Grids are not made of columns and rows. Columns and fields are created by combining Modules. The first step in the process of creating a grid is not creating columns, but deriving and then defining your module size. Then everything else comes from that.
We have a new unit of measurement
By creating a new user-defined unit of measurement, we’re able to continually bring the designers attention back to the grid. Not pixels, or Ems or %. Designers get this. It matches their mental model. But I think it goes beyond that. Having another unit of measurement that is specifically used for layout means that we can create a consistent, underpinning connectedness throughout our design. We can create padding and margins from the module. We can position elements relatively by the module size. Very useful, I’m sure you’ll agree.
Nomenclature is retained.
Perhaps my biggest issue with the existing proposed Grid module is the words used for elements of a grid. Grid Lines, Tracks and Cells are not terms designers associate with grids.
For example, Gutters are a well understood term amongst designers for the space in between modules of a grid. They are replaced in the Grid proposal by the term Grid Lines. In my experience, the space in between a column is rarely thin enough to be called a line. In fact, quite often in layout, columns are separated by a visual keyline (as I mentioned before), with space either side.
One of the challenges for designers trying to get into web design, particularly trying to learn CSS, is the differences in terminology and also the mental models of how things are created. It’s why tables were so popular early on. It’s because the process of defining tables and rows for layout was familiar to designers. The terminology for designing grid systems has been around a long, long time. It’s taught in design schools all over the world, and baked into design software. It works. And if it ain’t broken, why fix it?
A way forward?
There are plenty of holes in this proposal. I’d love to take it forward into a proof of concept. Is this workable beyond simple three column layouts? How would this work for responsive designs? What about mobile?
But I think there’s something in this. It just makes sense to me as a designer for the CSS Grid module to be using terminology I understand; for it to support the process and mental model of creating a grid; and provide me with a new unit of measurement — the Module — so I can use it to create connectedness across my design.
There are no comments on my blog anymore, but I’d like some debate and discussion around this, so ping me on Twitter and I’ll provide an ongoing QA at the bottom of this post.
Recently, in our industry, I’ve noticed a disturbing increase of the term ‘Visual Design’. It’s often used to describe a job title, or a step in a UX design process; ‘we’ve done the strategy, the product definition, the prototyping… now, let’s make it pretty with some visual design. We need a Visual Designer to do that’. This confuses and bothers me. So, rather than have a weekly debate about it on Twitter, I thought I’d pen a few words here to make my point.
I understand that you can design things without concerning yourself with colour, type and layout. And, yes, in a UX design process the tasks of product definition, wireframing, interviewing and a whole bunch of other techniques and tasks are done before anyone thinks about typography. But, honestly, I don’t know a single good designer who would call themselves a visual designer, or what they do as ‘Visual Design’. There is simply so much more going on that making something pink or blue, bevelled or shiny.
Some people equate graphic design to visual design. You’re dealing with the surface, with the look and the layout. Now, as a trained graphic designer, I don’t think this could be further from the truth. The aesthetic aspects of graphic design are but one part of a whole bunch of necessary skills. To expand on that, here are somethings that I did whilst practicing as a graphic designer:
- Created paper prototypes of an encyclopedia
- Interviewed potential customers for a large retail organisation before working on the branding
- Audited and observed wayfinding pathways in a museum
- Worked alongside market research agencies
Those aren’t the tasks of someone who just makes things pretty. And here’s the thing: understanding, talking to and observing your audience is a fundamental part of graphic design research. In fact, it’s the first thing they teach you about communication theory: what are you trying to say, and who are you trying to say it to.
So, you see, graphic design is not Visual Design. And given that the look of something –- in my mind at least — can’t be considered holistically without the feel of it, or the use of it, then how can Visual Design be separated as not only a step in a process, but as a job title? Good graphic designers concern themselves with the What, the Who, and the How. The message, the audience and the mechanics. Which is what we do on the web.
If you feel the need to call it something, can we call it what it’s always been called? Let’s just call it graphic design.
← Older posts Newer posts →
