The personal disquiet of
Some proof that I’m actually working on the book. Here’s a little screeny of one of the example projects in Chapter 5.
It’s a compound grid: 6 column and 4 column combined, but on this layout using the asymmetric 5 column arrangement. The grid is a reworking and adaptation of Karl Gerstner’s compound grid used on Capital magazine.
In December last year, Five Simple Steps was very proud to publish Jon Hicks’ new book: The Icon Handbook. A practical, beautiful book that’s available in both pre-order paperback and digital editions.
No surprise that it’s a beautiful book. Jon (and the contributors he managed to snag) have provided us with some stunning iconography, all displayed big, bold and in full colour. We are very proud of the layout work that went into this book and the printed version is bound to look spectacular printed on uncoated stock. As I’m writing this, the team are preparing the final artwork and getting it ready for the printer.
The content of the book is light in tone but deep in value. Lots of really great, practical design information that you can take away and use today. But enough talk. You can buy it now from £16 from Five Simple Steps.
But before you head over there, just look at this thing!
Since I’ve been using computers, I’ve been unfortunate enough to have quite a few of them to fail on me. Usually mechanical failures. Failures that start with a ‘can you smell that smoke?’, or ‘Can you hear that rattling noise?’. You know the kind? The kind of failures that never end well.
Over the years, I’ve had the following either blow up, splutter and die, melt, catch fire, or just simply stop working:
It’s the last in the list that has caused me the most pain and anguish. Since then, I’ve been paranoid about finding a good, sensible, relatively cost-effective way of ensuring that when hard drives die — and they do — that I won’t lose any data. Losing work is bad enough, but losing precious photographs, or your entire music collection is worse.
In 2005, Emma and I made the decision to sell our DVD and CD players, digitise all of our DVDs, tapes, CDs, records and stuff. Declutter our shelves from all this crap and go completely digital. To do this we needed a few things:
I went back and forth on several solutions, but opted for Apple TV in the end. Simply because we can buy shows and music, rent films and it’s easy. For a while, I used a Lacie RAID server (2TB storage) that doubled up as my work backup when I started freelancing. It was a decent bit of kit and has lasted very well (we still use it at Mark Boulton Design now). What was lacking in all of this was a backup. The NAS was expensive, so I couldn’t afford two. It was RAID, which eased my fears somewhat (until the controller actually went a few months ago).
So, I did without backup. Luckily for me, there’s no bad ending to this little story. There could have been. The drive lasted well but our media was outgrowing our storage, and I needed a way of expanding it, plus the nagging in my head that I could have some kind of hardware failure and lose everything.
Last year, I reorganised our storage. I bought a 4TB RAID G-Technology drive (they’re excellent), which was hooked up to my iMac and I kept my iTunes and iPhoto libraries on there. I had an old Airport Express which I put in the kitchen attached to a B&W Mini Zeppelin (which have to be heard to be believed: stunningly rich sound for a small unit), and an Apple TV in both the living room and the bedroom. These have both been ‘flashed’ with aTV Flash.
I’ve been using aTV flash for a few years, ever since using it on my first gen Apple TV. It provides a bunch of additional features, but by far the most useful to me is the media player which plays different file formats and also has an automatic hook into IMDB for importing meta data.
Still the nagging in my head continued. We have all of our digital files sitting on one drive. Movies, music, TV shows, but most importantly our photographs. Photographs of the moments both of our children were born, our wedding, holidays, of people no longer with us. Photos I just couldn’t lose.
Last year, I sat down and had a good think about the best way to back all of this up that wouldn’t cost me an arm and a leg. I opted for buying another 4TB drive which mirrored my library and would backup daily using SuperDuper. That took care of drive failure in the primary drive. But, what about if there was a double drive failure, or a fire or flood? I decided that the photos were most precious and I would back these up to Amazon S3 nightly using Arq. Of course, with the addition of iTunes Match late last year, my music also now had a cloud backup option. Work and documents are backed up to Dropbox, and I have Backblaze on continueous backup.
There we have it. Paranoid? Probably.
Of course, for the backups, you could opt for something simpler; like a Time Machine and Capsule. Or you could buy a DAT tape drive. Or backup everything to Amazon S3. or just use iCloud for all your documents and photos. That’s the thing; there are so many bewildering choices out there for such an important aspect of consuming all your media in digital form. It’s so bewildering, the size of the data in question is so large, that most people don’t bother. Until it’s too late.
For playing media in your home, there are an increasingly wide range of devices available: from Boxee to Sony’s new player. There’s a lot of choice for the consumer.
After six years the nagging in my head is slightly reduced. As I said at the beginning of this post, I’ve had hardware fail many times before. I’ve lost data. I’ve lost work in the many tens of thousands of pounds that had to be recreated. If your media is primarily digital, spending a few hundred pounds, and putting in place a good scheduled backup solution, could save you the heartache of losing data in the future.
I’m very excited to be running a Bootcamp again for UX Bootcamps in April next year. This year, it was great fun working alongside some talented UX-ers up their graphic design skills. And, considerable progress was made in just two days.
Alongside the Visual Design Bootcamp, there will be a Cognitive Psychology bootcamp in February with Joe Leech from CX Partners, and Information Architecture UX Bootcamp with Mags Hanley. Both of which, I’m sure, will be superb.
So, if you fancy any of them, tickets will be on sale from midday on 5th January 2012.
Joe Clark with a superb idea; a series of podcast interviews with the focus on the person, not their work, projects or how successful and wonderful they are. Joe: please make this happen.
My friend Andy Rutledge runs a weekly video podcast called The Design Pro Show in which he talks through his take — as a ‘Design Professional’ (in quotes because it’s a thing) — on a number of subjects; from ‘Process‘, to the latest show yesterday ‘On Compromise‘.
Yesterday Andy asked for thoughts over Twitter:
Where in your work have you found benefits in compromise?
As you’d expect, opinion was polarised. Andy Budd perhaps encapsulated how I feel:
If you compromise on nothing, you’re a dictator. A lack of compromise weakens the chance of discovering that you could actually be wrong.
And Oliver Reichenstein today:
Web design is engineering. Engineering is all about making the right compromises. Case closed.
My thoughts are this: design is an exercise in considered compromise.
Firstly, let me define what I mean by compromise. I mean reaching a mutually agreeable decision based on subjective demands, conditions or variables otherwise unaccounted for.
The type of design I do is, ultimately, about people. Designing websites for people means you need to try and understand how they will behave on the website you’re designing, and people are complicated things. Commercial design means doing work for money. Stakeholders are also people (yes, they are), and are subject to the same complicated thought processes as the rest of us with the added commercial complexity of generally knowing their business (and sometimes their audience) better than you do.
Throughout a design process a myriad of potential conditions may present data that results in a compromise; a point in time where you need to course-correct to take into account new information. My understanding is that a designer will take this information and steer the ship whilst still producing an optimum solution. This is through no fault of the designer or the process. New information can surface at any time throughout a process; for example, user interviewing or usability testing may bring to light information that fundamentally changes an approach. This has happened to me on numerous occasions.
If you’re unable, or unwilling, to take on-board this new data — to course-correct — to compromise what you thought was the right thing, this is will result in a compromise to the design solution. Because you’re ignoring critical information. Your desire to not compromise will actually compromise the end-result. Ironically.
Someone who knew a lot about uncompromising systems was Bruce Lee. As you may know, Bruce Lee was an martial artist film star in the 60s and 70s. He was also a philosophy major and had a deep interest in understanding the physiological and psychological effects of combat. He had a deep interest in challenging the traditional martial arts styles of the time: Shotokan Karate, Taekwondo, Judo etc. despite training in a traditional style himself: Wing Chun. His problem was they are not grounded in reality. They exist as a system devoid of adapting to external data. This, of course, can be particular damaging when faced with an opponent. You rely on the system to provide you with the right tools, rather than adapting and accepting the fluid dynamics of a combat situation.
Design is like this.
Adhering to an inflexible system, that is incapable of reacting to new external data, or the fluid dynamics of a complicated project, generally results in failure. This is why methodologies such as Agile exist: they are designed to effectively accommodate change.
My experience in design is that there’s a lot of grey. Nothing is ever cut and dry. People are complicated. Perception and behaviour is difficult to account for, and using a design process that welcomes new data, can course-correct effectively, is a process every designer should be working to create.
I had the pleasure of speaking with Jen Simmons (@jensimmons) on her show on 5by5: A Web Ahead..
For a whole 100 minutes (!) I harped on about responsive design, grids, design process, news, advertising and a few other things. Despite my dodgy sore throat, I had a great time discussing some of the nuances of adopting new and challenging approaches to design and build the web sites and services we do.
Great piece from 10,000 Words on the natural growth of news.
Having done a ton of thinking about this over the last year, this resonates so much with my thoughts and conclusions. This particularly struck me:
Unlike a blog like TechCrunch, for example, a newspaper is publishing to multiple platforms. TechCrunch has one platform, one story type: blog posts. Newspapers are the only type of publishing company to have the distinct differentiation of “print stories” (which are posted to the web) vs. “blog posts” vs. “web updates” (to the print stories). The different platforms, web CMS and print CMS, have different workflows associated with them.
So many news publishers are hand-tied by their own mental-models of perfectly manicured journalism similar to TV or Print. One to many, final-state publishing. The web’s different, but what’s crucial is how we show the change of the story for the user. How do we do that?
Estimated reading time: 10 minutes.
What a presumptuous statement. How do you know how long it will take me? Do you know my first language isn’t English? Do you know that have learning difficulties? Do you know I’m sitting in a public place and will likely be interrupted frequently? Do you know I’ve forgotten my glasses today?
I’m seeing this small bit of meta-data associated with more and more blog posts. Just next to the post title, designed to help me make a judgement as to whether to read it, not read it, or read it later on using Instapaper or something.
I’ve got a problem with them. They’re trying to answer a question I don’t have.
The question they’re trying to answer is: ‘do I have time for this?’. In my experience, time is very rarely a deciding factor on reading an article. The deciding factor for me is generally the content itself: does it interest me? Is it well written? The only time that time is a factor is when I’m in the middle of something else. Is this always the case? Absolutely not.
The other problem I have with these little nuggets of fallacy is that I feel they devalue the content. Being so prominently placed — generally next to a title — implies they are a major deciding factor, and therefore they are a value statement you place on your own content. In this busy, busy world, ‘short = good’. ‘Long = I don’t have time for that, I’m too busy’
The final thing is they assume too much. As I described at the start of this post, this UI device assumes an awful lot of the user. It also assumes a lot about the design and legibility of the presentation of the content.
What I’d like to see is this type of device being closely associated with ‘read later’ functionality. Don’t have the time now? Read it later. In its current form and positioning, it leads me nowhere.
What we’re really after here is trying to show length. How long is an article so I know if I want to read it. Many people on Twitter thought a scroll bar was fine. But as some pointed out, that’s inaccurate as there could be a whole lot of page guff at the bottom of the page. Would word count suffice? I’m not sure.
Document length is an important data point. Decisions about reading are based on it. Sometimes based on time, but other times on context, ability, comprehension or language. How could we better measure ‘length’ on the web that makes sense for people?
So, how long did it take you to read this post?
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:
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 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
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
Designing Grid Systems for the web
Designing for the Web
Web Standards Creativity