Small viewports… and the death of the fold

Like all the best/worst B-movies, the bad guy you thought was dead and gone has summoned up his last ounce of strength for one last attack. The Fold is back. With a twist.

A short debate

The debate about whether a ‘fold’ exists on the web begins and ends with the following assertions: yes, content goes off-screen in the majority of websites and yes, users are willing to scroll to read it. Period. Note that the second point doesn’t dispense with the need for clients and designers to assign priorities within content and for the designer to create a visual hierarchy based on these priorities. These are crucial conversations in any project. And this is the very area where things are going to get interesting.

Top of the (content) pops

The current mobilisation towards responsive design is laudable, and a great many people are currently wrestling the theory towards best practice. Despite what may be pronounced from various sources across the web, it is not a one-size-fits-all solution for myriad viewport sizes. What we will likely emerge with is a toolbox of approaches for use in a variety of contexts, of which responsive design will be just one. But what ‘responsive’ highlights very effectively, in a way that designing for desktop does not, is the relative priority of content as the viewport shrinks.

Top=good, bottom=bad

Laying out web content for a desktop PC or laptop provides plenty of screen real estate to play with. We can cheat the hierarchy by placing something somewhere else in a vast 960 x [whatever] pixel canvas and create visual priorities through the use of colour, space etc. We can design within grids and columns that allow pretty much everything to get a look in. Whatever sits further down the page is somewhat less important and everything that sits towards the top of the page is more important. But this is far from the absolute scale that we are going to need.

Extreme content. Dude.

For a responsive approach we need to decide on absolute priority, not a vague, general hierarchy. A glance at any of the new breed of responsive sites on a mobile device tells you one thing: the content has a no-nonsense, top-to-bottom hierarchy. This kind of extreme prioritisation is going to form part of the new normal in designing for the web. The conversations right at the outset of the design process will need to address this. “If the user could only see one part of the site, what would it be?” is as basic a question as can be asked but it has tremendous resonance now.

All change

Further, if we are now giving something lowest priority and it will require a significant amount of swiping or scrolling to get to… is it really required at all? And if that element is removed, what about the content which is now at the bottom? These issues have massive potential to skew how we assess content and it is barely credible that the now ‘traditional’ website we have grown so accustomed to will not be affected by these shifts.

It’s what thumbs are for

And what of the fold? The old arguments used to go that if the fold existed, everything needed to be forced into the area above it for fear of users missing it. By the same logic, on a 320 x 480 viewport the user is going to miss… pretty much everything. The same logic would also suggest that those users won’t know to swipe to see more. Except we know that they will.

Web origami

The fact is there is no longer even a single fold. On a small device there are multiple folds, multiple screens to scroll through. But bizarrely the more folds exist the less they matter. Users now expect to swipe and to scroll. So sleep easy and let it be known: the fold is dead.

Late nights, passion and the creativity myth

My first professional job was in a small advertising agency. Despite knowing many fine people there who have gone on to great careers elsewhere, for a graduate designer it was, put simply, a sweatshop.

Working there taught me two important things:

1) I had to get out of advertising as soon as I could
2) Routinely working long hours reduces quality, productivity and creativity

During my time there I was involved in numerous pitches for advertising accounts that were poorly planned and executed, more often than not resulting in failure. Each had another common characteristic: a reliance on working late into the night.

Time would invariably be wasted on various approaches with no structure or purpose until with little time left, the Creative Director would pipe up dramatically “I’ve got it!”. We’d then throw the kitchen sink at it, working excessively late or over the weekend as though it were proof of creativity and commitment. It wasn’t. It was proof of poor planning and a lack of creativity.

I don’t mean to generalise; of course like all aspects of design, well practiced advertising has its best practice processes and systems. Similarly working late to finish a project based on agreed milestones and deadlines goes with the territory.

However when company culture relies on sapping the energies of junior staff members in the name of creativity then there is a problem. The agency I cut my teeth with was all about the creativity myth. The myth that says if you work late enough and throw enough time at it, great creativity will simply happen.

An over-reliance on “passion” in the marketing lexicon of design agencies further fuels the fallacy. Regardless of the intent, what something like “we’re passionate about design” says at best is that “we will work long into the night for you”. As a client I don’t think I would care how much of a flurry you whip up due to your passion, or how many all-nighters you are prepared to pull. It’s results that count. To paraphrase Joe Rinaldo, what’s the ROI on passion?

Time and again it has been proved that effective results come from careful planning, iteration and craft. Otherwise known as professionalism. Yes, you can work round the clock on a labour of love. We all do it. Can you do it on a number of projects in a row? Yes, you can. Can you sustain that pace and a reliance on late hours over a number of years, over a career? You can if you are prepared to have nothing else of value in your life.

Waiting for the creative director’s faux inspiration wasn’t for me. Despite being completely new to the workplace, I could see that it was an ineffective way of working. Although I didn’t know it at the time I was crying out for process, order and sanity.

Happily UI design provides just that, and I am proud to be working now in a discipline that increasingly values a systematic process over flamboyant showboating.

Responsive design: don’t stifle debate with dogma

The responsive design debate was set in motion around a year ago, but seems to have reached something of a crescendo of late. Some commentary borders on the totalitarian, others’ input is philosophical, while some contributions attempt to navigate a practical way forward. Fact is, there is a veritable scramble to coin the phrases that will become tomorrow’s industry-standard vocabulary.

Designers are just plain excited about responsive design, and it’s easy to see why. We have arrived at one of those industry-defining moments which precipitates huge leaps forward in practice – think HTML 3.2 & 4, CSS2. You can perhaps forgive the piousness of some commentators. As new practices bed in, you can always rely on designers to get sanctimonious about how inadequate our practices were up until a day or so ago.

Get up, stand up

Exciting as it is, there is also a huge challenge for designers to step up, not something we have always distinguished ourselves by. As the mass-market web came into being, designers (by and large) stood idly by waiting for someone to make it easy for them, instead of just getting in there, learning some basic markup and meaningfully engaging with a new communications medium.

A shared future

Things couldn’t be more different today; a new generation of designers are falling over each other to experiment, test, share and move the practice of online UI design forward into a new era. This time the catalyst is not a new markup specification, but advances in hardware: a critical mass in use of web-enabled devices has been reached. The rules of the game have changed. Mobile access is no longer an afterthought, or a box to tick, it has parity with desktop and laptop access.

Papa don’t preach

The volume of the debate is rising, but those preaching too loudly or broadcasting their opinions on who is or isn’t doing it ‘right’ are demeaning themselves, and missing the point. We are all in this together. Our internal industry dialogue will continue and something will emerge from all this, almost certainly not in the form of a single proposal or approach. Thought leaders will get us in the general vicinity, but best practice emerges from the efforts of many, and continues to evolve, as we evolve both as designers and as a community.

The new reality

Subscribing to new thinking is one thing, but deploying it on a relevant, commercial project is another. I’ll readily admit to being right at the start of the transition and pursuing a trail-and-error approach; much preferable to breathlessly following anyone who screams they have ‘the answer’. Plus, attempting to stay ahead of the curve on this issue looks like the path to madness when even the originator of the term ‘responsive design’ has identified somewhat inevitable grey areas.

In conclusion

This is as fresh a challenge as we could hope for in our industry, and these are exciting times. The least helpful contributions to a discussion tend to be the most vociferous, but we’re off and running, on the road to best practice and the community will win. Let’s enjoy the ride and look forward to what emerges on the other side.

Sometimes wireframes won’t work

Wireframes are a pillar of best practice in any interface process, but what happens when they get in the way?

What happens when say, the client has no interest in them, or doesn’t feel empowered to take decisions based on what they see, what then? Should a principled designer hold firm until the client sees the ‘error’ of their ways… or alternatively, do we graciously step down from our pedestal and move on, acknowledging that adherence to an idealistic idea of best practice can occasionally get in the way of progress?

A quick reality check: clients know their business best, and will care most about that. They are not hugely concerned with what constitutes best practice for designers; they simply want effective results. In at least one recent project, wireframes became either a barrier to progress or a literal waste of time, completely failing to elicit the responses and decisions they were designed to achieve. And yet the “client education” card is played all too often by elements of the design community as the fix-all solution to allow us to work the way we would like.

Having have long since accepted that designers are not artists, and rightly so, we should accept also that we are not surgeons, or nuclear engineers. Call it ‘agile’ if it makes you feel better, but the fact is that our processes should be mature enough to accommodate a degree of compromise, and still produce effective outputs.

If wireframes can lead to a more effective end solution, then their benefits will be apparent to all and their use a formality. If not, then maybe, just maybe, they are not appropriate or required.

Investment in design services is a huge leap of faith for so many clients. While the ROI on considered and well-executed design might be a given to those of us in the industry, it remains a significant outlay for clients who already have budgets stretched to breaking point by many other aspects of their project. Heard through that filter, the sound of a designer labouring the benefits of wireframing might easily sound like “that’s just how we do things around here, although of course you wouldn’t know this stuff, being a client and all that”.

From experience, winning confidence is the most effective path to what we sometimes rather demeaningly term client education – and has far more value than that. Ditch the designer vocabulary and pretensions and earn the trust of your client. Once achieved, rather than having made your client feel slightly patronised, any project is guaranteed to run more smoothly.

Wireframes or no wireframes.

Real life design: an imperfect process

I think I had watched one too many design conference videos on Vimeo, or read one too many utopian blog posts on perfect design practice. And something went *click*.

For developing designers the profusion of inspiring blog posts, videos, tweets and community activity can be hugely helpful, motivating… and not a little overwhelming.

The thrust of much of the material available, authored by designers for designers, appears to be polarised between near-utopian visions of how the design process should work, how we should design and the other extreme of ‘Clients from Hell’-style rants. The conference talks by the great and the good of our industry, while inspiring us to reach, to stretch ourselves and improve our practice, also tend to paint a picture of working with dream clients who ‘get’ designers and have limitless budgets to allow designers to do what they do best.

But how many projects actually go down like that? I’m guessing less than 10% for the average designer. Much less. I’ve seen enough to know that when things all go perfectly on a project then you can check in the sky for a blue moon if not a flying pig.

The fact is that bringing a design project to a successful conclusion is very, very difficult. But to be able to stand over a project, knowing that you perservered and overcame every last hurdle put in its way is a fantastic feeling. What I have yet to find is a conference presentation that tells it like it is: that being a designer can be frustrating, maddening, to the point of making you wonder why you ever got into it. But also that working through the problems is worth the effort.

So many articles and blogposts are overly academic in their approach to the practice of design. Academic, in the sense that they are abstracted from the reality of working with clients and budgets and deadlines. It is in this light that I wanted to add a little reality to the mix. This is the first in an occasional series of articles on this blog under the category of An Imperfect Process, based on experience gained in the (surprise, surprise) middle ground of the design industry.

I adore every article on A List Apart and hang on every word written by the thought leaders in the world of design. I fully subscribe the quasi-science of UI design, and thrive on the positive messaging of the big speakers. However, there is a real world out there that we all have to work in, where projects won’t necessarily be conducive to textbook design practice. Consider these posts as postcards from that other reality – real life design.

We deal with an imperfect design process, one that integrates as much as possible of the best of design thinking, both past and present, but which deals with the realities of design in the real world.

More to follow.