Design for Everything, Everywhere.

As occurs frequently on Twitter, I was able to enjoy a conversation between two prominent figures of the design industry as they exchanged insights. This one really made me sit up and take notice. I’ll reproduce it in full here, short and sweet as it is:

@trentwalton: Lines between mobile, tablet & everything else are beginning to overlap to the extent that the terms are becoming useless.

@lukew: wrist, palm, lap, desk, wall, mall sized screens. human ergonomics won’t change. devices will.
@lukew: as illustrated in: …

To save you a tap, click or cut n’paste, Luke Wroblewski’s graphic is reproduced below.

The new device landscape by @lukew

Any given day on Twitter yields a huge number of enlightening stats, info graphics and blog posts; frequently these will be stark reminders of how the device landscape is changing. Luke’s graphic however is a statement of fact – everything is changing.

Let’s just examine the message: device sizes, interactions, input devices and resolution are at once convergent and inconsistent. Add to the mix that context and location are unpredictable and it becomes clear that there is no convenient fallback. The desktop cliché, for instance, is now archaic.

Even the popular perception of responsive web design as a requirement to accommodate different viewport sizes must go. Our new reality affects (amongst other things) tap/click area, text size, image file size, colour palette, content length… Quite simply, it affects design decisions across the board.

There is no secret formula. The future of design on the web is designing for everything. Everywhere.

Return to the garden

(or: Designers Assemble!)


I shouldn’t need to declare support (again) for the pursuit of responsive web design as the future for online design. What irks me though is not so much a sense that visual design is being compromised in order to achieve a responsive outcome, but that the fact is not being acknowledged.

For what it’s worth I’m writing from the standpoint of working in a sizeable agency on many projects where RWD is not a practical option based on such factors as functionality and user profiling. You can take much of what I offer here as my opinion only, but my firm belief is that it is not mine alone.

Yin without a yang

I’ve written before about the difficulties of implementing responsive solutions in a commercial environment. As evidenced in James Young‘s excellent collation of “problems from the coalface“, designers are having mixed experiences in the transition to RWD – a situation I feel is inadequately represented in online conversations. The overwhelmingly positive spin accompanying a responsive site launch creates a subtle (but tangible) pressure on conscientious designers to ‘step up’ and deliver RWD on their own projects. Which would be fine, but the inference that RWD is desirable at any cost.

So here is a conundrum for designers that I will pretentiously moniker ‘the RWD Paradox’:

Forced to choose, what is less desirable: a visually mundane but responsive website, or a highly engaging fixed width site?

Obviously I distort for effect, but I believe that this is the uncomfortable truth for a large proportion of designers trying to pursue a responsive approach. The underlying point of RWD is that all resolutions and viewport sizes are important; it’s not just preordained screen sizes that should be accommodated. That being the case, why do many responsive sites create visual anomalies at certain sizes that we would normally find unacceptable in any other context? And if this as a natural consequence of applying RWD, then lets at least admit it.

Think outside the box (model)

It has further been suggested by more than one industry colleague that RWD promotes ‘boxy’ design, where a facet of the site’s visual appeal – part of the ‘personality layer‘ – is sacrificed to easily scaled, easily manipulated blocks. This is clearly manifest in at least one high-profile brand’s recently launched site.

Now, this is not to suggest that RWD precludes great visual design. Not at all. There are many examples of a successful marriage of the two, but they appear to be in the minority compared to the plethora of single-column portfolios or blogs that have little relevance to large consumer-facing sites.


Suppressing these issues will only exacerbate them. And yet we resize our browser windows, ooh-ing and aah-ing at every cute little piece of javascript that animates resizing images while missing an important point – users don’t care. Users want a coherent experience relevant to their situation at any given time. Designers and developers are the only people I know who sit and accordion their browser window to see how a site will respond. We’re too in love with technique because we know that somewhere, another designer or developer is going to think it’s cool. And folks, when it gets to the point when we are designing for other designers, that should ring some pretty loud alarm bells.

Return to Eden

So what should be done? We need look no further than relatively recent history for inspiration.

Dave Shea‘s CSS Zen Garden marked a sea change in online design. The site, if you are unfamiliar with it, accepts CSS submissions and applies them to a core HTML file, demonstrating in a simple and powerful manner how separating content from presentation creates a beautiful and effective flexibility. In 2003 it enlightened many designers, myself included, and put the argument for the jump to CSS beyond debate. More than that, it coalesced the design community in a way that circulating links on Twitter does not.

“Just sowing seeds..”

We need a new garden for responsive web design. is great as an initial eye-opener for those unfamiliar with the idea of adaptive layouts, but we badly need something to give designers the opportunity to pool ideas and resources and begin raising the bar for RWD. Not a new idea I freely admit. However while it may have been hinted at, and the original Zen Garden used to illustrate adaptive potential, I have not found a straight call for a new ‘Garden’. So this is it.

We can and should learn from experience in order to forge a better future for web design. That, and be a little more open on occasions when quality has taken a back seat to technique.

Adapting to responsive

Responsive web design has reached the grand old age of two and remains the single most important shift in design and development for the web since the advent of CSS.

Broken record

I have written previously about the dangers of dogmatic approaches, emphasising that we should move in the direction of responsive design increasingly and methodically. RWD is not however a be-all-and-end-all. It is not a magic bullet for multi-device deployment. Responsive images remain a challenge, advertising doesn’t sit well with a fluid layout and, regardless of how simple the approach is pitched as, the creation of a credible responsive solution takes significantly greater time than a single-resolution site.

Here comes the future

And yet it should remain the goal. We are clearly impelled to move to responsive as an industry standard. Some of the loftier commentary recommending multiple versions of websites appears frighteningly blinkered in its naivety. We are headed only one way in the medium to long term.

One foot in front of the other

However an all or nothing stance on RWD is an equally retrograde move. Speaking as a (ahem) “seasoned” designer, shifting to an adaptive approach has been an essential stepping stone in understanding RWD as a whole. Is it better to learn responsive as standard? Of course. For any new designers starting out: take this route and don’t look back. For those who have been around the block a few times, coming to terms with full responsive as a new way of approaching projects is to put it simply, difficult. I have yet to meet a designer in industry for any amount of time with a different view.

Money, money, money

I work in a commercial organisation and to remain viable in a commercial environment, we need to deliver effective outputs that surpass expectations – within a budget. Recently we’ve committed to producing adaptive sites as standard and deviating from this only where individual projects demand it. Not committing to fully responsive for the moment, our rationale is that doing something is better than doing nothing; not letting the perfect be the enemy of the good.

It’s not what you do..?

As I have said before, we’re getting there and should enjoy the journey. But whether it is acknowledged or not (and it isn’t) there is a purist agenda at work in some corners of the industry. Challenge some of the more vociferous opinions and there is usually a conciliatory climb down, but the inference remains: if you’re not producing fully responsive work, you’re falling short. My problem with this is simply that it places technique over results. The means do not justify the end. There are a number of responsive sites featuring what I would regard as unacceptable design anomalies at certain sizes, and they should not be given a pardon simply because of the way they have been constructed. An adaptive approach may yet be more condusive to better overall design on certain projects.


To repeat myself (again), why create divisions where none exist. We’re all on our way. Those who fail to come to terms with the changing landscape in web access are condemning themselves to history. For those who are moving forward, there is more than one way to do so.

Reflections on Refresh

…or how I learned to stop worrying and love the Responsive Summit.

Apart from work itself, two industry events dominated last week for me. I was directly involved in one, but watched the other from afar with many others. As it transpired the two were not unrelated.

On Monday evening I was fortunate enough to co-host a session of RefreshBelfast with none other than Richard Weston under the title “There’s more than one way to design a cat”.

We managed to shoehorn all manner of issues under that banner, the central theme being that the middle ground of the design industry is a pretty vibrant and rewarding place to practice. We sang the praises of teams and organisations (versus the notion of the rockstar individual designer), and addressed the idea that vehement opinions put forward on the web as truisms are nothing more than that: opinions.

It was an enjoyable evening and one that we hope lived up to the standards set by previous speakers, including Jeremy Keith, The Creativity Hub and Design by Front.

Another key point Richard and I made was that no single point of view on techniques and processes is any more true than others simply because of how strongly the point is made, and attempts to dictate best practice to the wider industry is wrong. Unfortunately, that was the perception of many of an event in London later in the week.

The Responsive Summit – a tongue-in-cheek, self-aware moniker – riled a number of people on Twitter and beyond, apparently by bringing together a select group (‘select’ only in the sense that it was organised within a matter of days) to discuss the current hot topic of responsive design.

It is now almost two years since Ethan’s original post, yet RWD remains a grey area and continues to be difficult to implement on larger commercial projects. The idea behind Responsive Summit was nothing more sinister than trying to aggregate opinion on the challenges at hand and at least begin to plot a way forward. Knowing a couple of the personalities involved, I am confident that the aims of the session were true and will produce not diktats or imperatives, but something of practical benefit to our industry.

We need more honest and open discussion in this area. Early support for RWD was a touch absolutist in its fervour and more honest documentation of the difficulties in implementing RWD as a solution on large scale commercial projects is required. I believe this pragmatic viewpoint was reflected in the discussions during the day.

It may be that this one event will inspire many others either directly, or as a reaction against an unfortunate perception of ‘elitism’ surrounding it. Either way, this is what we need and positives will flow from it.

I am grateful for both of last week’s events, in different ways. Thank you to everyone involved.


For more information on the background to Responsive Summit, see Chris Armstrong’s candid summary of the build up to the event on Storify.

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.