Design Beyond Device

As the number and range of internet enabled devices
on the market continues to grow, designing fixed dimension websites just
doesn’t seem to make sense anymore.

If you really want to communicate with your audience you need to have
a more adaptable website. Building one is the easy part. Changing our
preconceptions about websites—that’s the hard part.

Mobile Strategy

So you know you need to expand the reach of your online presence, but
how do you do it? We have a lot of clients that approach us and ask us
for recommendations on developing a mobile strategy. Most of the time,
the questions we get are pretty similar:

• Do we need a mobile website or an app?
• How would a mobile site fit into our ongoing web strategy?
• If we can’t afford a mobile site now, can we add one later?

These are all sensible questions, and although the answer to them
will vary from client to client, I can’t help but feeling that we are
asking (and answering) the wrong questions.

Preconceptions About Websites

When we conduct design workshops with clients, one technique we use
is to give each person in the room the opportunity to sketch out their
ideas for redesigning the website. In almost every case, the sketches
match the conventions associated with a fixed width desktop site. This
reveals a common preconception. Most of us, clients and designers alike,
hold a default (and outdated) mental model of what a website looks
like. We think of sites in two separate contexts:

• Primary context: This is the website you see when you’re at your main computer, workstation or laptop.
• Secondary context: This is the companion or add-on
  mobile version of the site. It’s what your audience will see if they
  view the primary (desktop) site on a smartphone.

There are two big problems I have with this
model. The first is that it suggests a clear division between both
contexts. The second is the assumption that the desktop context is the
primary one.

The danger is that when we consider the desktop version of the site
to be the default, all criticism of the design is framed within that
context. Design decisions are made based on how the elements on the page
will interact and appear within one specific context. Designers often
receive feedback like:

• Can you tighten space up so that we can get those elements above the fold?
• The fonts looks too small, can you make then bigger?
• The site is getting cut off, can you make it smaller?

These types of comments precisely articulate the problem! They even
go one step further. They are the result of not only judging the design
in one broad context (such as the desktop), but in an even narrower one
(the individual screen it’s being preview with).

And so begins the futile quest to achieve perfection of display on an intangible canvas.

“A little bit to the left, a
little to the right, up a tiny bit...right there... no wait, up a bit
more, ok...perfect! Can you make the logo 12% larger?”

The next day:

“We were showing the site to one of our colleagues and it’s still doesn’t look right. Can you...”

This Is Not the Way

There is no one standard size. There is no primary or secondary
context. The definitions used to classify a device as being “mobile” are too ambiguous. There are simply too many variables in play to draw a line:

Screen Size

Your website might be viewed on a 200px wide screen. Or it might be viewed on a 2400px wide screen. Theoretically there is no limit to the potential size of the display.

Resolution

Resolution is independent from a screen’s physical dimensions. It’s
how big everything looks on the screen. For some reason, a lot of people
who use Internet Explorer also love to keep low resolution settings,
making all sites appear double or triple the intended size¹.
Many handheld devices make up for a small screen size by increasing the
pixel density. This makes elements on the screen look much sharper and
smaller than they would on a larger display.

Browser frame

Most web browsers have their own interfaces that have to be taken
into account. This includes the browser controls, scrollbars, and my
favorite: toolbars. People who love Internet Explorer often also love
stacking up lots of toolbars in their browser window². The amount of space the browser interface takes up directly affects how much screen space is left over for site viewing.

Device orientation

Orientation is which way a device is being held...vertically or
horizontally. Because of their high resolution, some Android phones in
landscape (horizontal) view register 800px wide, compared to an iPad
(which is bigger) registering at 768px. There is little consistency in
how devices report their screen size, and this creates a lot of
complications about what exactly constitutes a “mobile” display.

Capabilities

The capabilities of a device depend on the hardware of the device,
it’s operating system and it’s default browser just to name a few. Many
devices also allow users to install a browser of their choice.

There is no default

When you consider all of these factors, there is a nearly infinite
combination of variables in play that can affect how a site renders.
800px, 960px, 1024px wide...these are illusions. They are ranges that
exist, yet meaningless in the sense that none of them is a default we
can design for.

Which devices classify as mobile? Where does the desktop experience begin and end?

Let Go

Let go of this idea of dichotomy

A website cannot be cleanly split into two distinctly separate
contexts: the desktop and the mobile version. Let your design elegantly
address the grey area between the two.

Let go of convention

We need to drop our preconceptions about what works. Too often we
blindly model sites off of our competitors and other popular sites. The biggest sites are often the hardest and slowest to change. We should not assume that they have gotten it right.
All this serves to do is to perpetuate outdated design patterns. I
don’t mean to suggest ignoring convention – simply to release yourself
from it’s hold. Open your mind to new approaches.

Embrace fluidity

You can’t hold water in a fist, only in a cup. From the onset of a
project allow flexibility to be a guiding principle of the design. Do
not impose rigid constraints. Do not try to force the design to respond
(or display) identically across each browser and device. Accept that
differences are not imperfections. The beauty of the design is not in
how it appears when it’s still, but rather how it reacts and interacts
when things change.

Let go of assumptions

Come to peace with the fact that we can’t make assumptions about
context. Five years ago we assumed that 99% of our audience would have
Flash player installed. And they did, then. Now look how things have
changed. Replacing Flash with another technology, even an open language
like JavaScript, is short-sighted. We must not assume screen size,
environmental context (on the go, or on the couch), connection speed, or
device capabilities. We should allow our awareness of context to guide
the design, but not to dictate it.

The iPad Sucks Syndrome

We have an iPad at home. I always know when my wife is using it, because I can overhear her cursing it.

“Ugggh, this stupid thing... When are they going to get Flash on here? I
hate this thing. I can’t click on this link. The menu doesn’t even
work. [insert expletives] It probably doesn’t work because I’m on the iPad. Can I watch Vimeo videos on here?”

As someone who designs and develops I get frustrated by this. I try
to explain that’s not the iPad...that the iPad itself isn’t the problem.
Flash shouldn't have been used, or the site should have been programmed
to be more accessible.

New devices will continue to arrive in the marketplace. We can’t
retrofit our designs to work on every new gadget that becomes
mainstream. What devices will we be using three years from now? Probably
something entirely unexpected. It doesn’t matter. If we can change the
way we think, we can anticipate the unknown and design for it. Designing for the popular devices of today is not a long term strategy, it’s a short sighted tactic. Given how quickly technology advances I think we really need to be thinking beyond any specific device.

Move Forward with Courage and Conviction

I think we will be surprised and delighted to see what can happen if
both designers and clients alike are able to change their models about
what a website should be. Designing with multiple contexts in mind does
not have to mean designing for the lowest common denominator. But it
does mean questioning the things we take for granted. I’m sure that
taking an unconventional approach is not something that everyone will be
comfortable with. So be it. You can build a perfectly adequate and
functional site by sticking to current trends and clinging to existing
preconceptions. On the other hand, if you are the kind of person that is
truly concerned about reaching more of your audience, and aren’t afraid
to do things a bit differently from the pack, then congratulations:

You, and others like you, are the ones helping to shape a better, more universal web.

Let's work together.

¹ I'm not judging...it's just an innocent observation.
² Again, totally not judging here, I'm just sayin'...

Further Reading

1. Mark Boulton"A Richer Canvas"
2. John Allsopp"A Dao of Web Design"