Responsive design is about more than just layout; it’s about
designing for the Web, which means, mostly, for people with browsers. And
that’s just about everything we know about the people who visit our websites:
they are probably using a browser. All the rest we just don’t
know.
designing for the Web, which means, mostly, for people with browsers. And
that’s just about everything we know about the people who visit our websites:
they are probably using a browser. All the rest we just don’t
know.
Up until not so long ago, we used to base our designs on some rather general assumptions about
screen size and input type. With the rise of devices with
various screen sizes and alternative ways to interact, these assumptions have
turned out to be unreliable. We need to upgrade the defaults that we use when
we start designing our websites.
screen size and input type. With the rise of devices with
various screen sizes and alternative ways to interact, these assumptions have
turned out to be unreliable. We need to upgrade the defaults that we use when
we start designing our websites.
A Closer Look
People keep saying that the Web has
changed. But has it really? Let’s take a look at all of the things that have
actually changed.
changed. But has it really? Let’s take a look at all of the things that have
actually changed.
SCREEN SIZES
In the 1990s, the Web was 640
pixels wide. In the early 2000s, it grew to 800 pixels. A few years later, we
decided it should be 1024 pixels. But five years ago, all of a sudden,
something strange happened. A device with a very small screen entered the market.
Suddenly, our ideas about the size of the Web did not work anymore. Later on,
tablets entered the market. People hold these things however they want. Today,
the height of the view port could be bigger than the width! But is that new? Not
really.
pixels wide. In the early 2000s, it grew to 800 pixels. A few years later, we
decided it should be 1024 pixels. But five years ago, all of a sudden,
something strange happened. A device with a very small screen entered the market.
Suddenly, our ideas about the size of the Web did not work anymore. Later on,
tablets entered the market. People hold these things however they want. Today,
the height of the view port could be bigger than the width! But is that new? Not
really.
We never really knew what size the window of our visitors would
be. We just assumed it was at least the random pixel width that we felt
comfortable with. These numbers were always arbitrary, and there were always
people who could not see the entire website. We simply ignored them.
be. We just assumed it was at least the random pixel width that we felt
comfortable with. These numbers were always arbitrary, and there were always
people who could not see the entire website. We simply ignored them.
“EVERYONE HAS A
MOUSE”
We’ve always assumed that everyone uses a mouse. Even though we knew that
this was not always true, most designs completely ignored alternative ways of
interacting. People who had to use a keyboard, for whatever reason, had a very
hard time interacting with our websites.
this was not always true, most designs completely ignored alternative ways of
interacting. People who had to use a keyboard, for whatever reason, had a very
hard time interacting with our websites.
But because most people did use a mouse, and because back then
many designers thought that designing only for the majority was OK, we created
websites that were unusable for a lot of people. And this turned out to be a
growing number. Many mouse over interactions are completely dysfunctional on a
touch device. Because people love these devices, and even managers and
designers use them, they are harder to ignore.
many designers thought that designing only for the majority was OK, we created
websites that were unusable for a lot of people. And this turned out to be a
growing number. Many mouse over interactions are completely dysfunctional on a
touch device. Because people love these devices, and even managers and
designers use them, they are harder to ignore.
“EVERYONE HAS
BROADBAND INTERNET”
Another thing we always assumed was that everyone had a
super-fast Internet connection, at least as fast as our own. And if they didn’t
already have it, they’d have it soon. This was again mostly true; speeds were
increasing. But today, more and more people use crappy, unreliable 3G
connections all the time. If you’ve ever traveled on a train in The
Netherlands, you know what I mean. And if you’ve ever had to rely on the
mythical “free hotel WI-Fi
super-fast Internet connection, at least as fast as our own. And if they didn’t
already have it, they’d have it soon. This was again mostly true; speeds were
increasing. But today, more and more people use crappy, unreliable 3G
connections all the time. If you’ve ever traveled on a train in The
Netherlands, you know what I mean. And if you’ve ever had to rely on the
mythical “free hotel WI-Fi
,” then you know for sure that the assumption about
the ever-increasing speed of our Internet connections is just not true. This is
a big change in our thinking; we really should consider these users. This will
have a major impact on what our designs look like.
“EVERYONE’S
COMPUTER GETS FASTER EVERY YEAR”
It used to be true that computers would get faster and faster.
If you waited half a year before buying a computer, you would get one that was
twice as fast, for the same price. This was true of new desktop
computers, but mobile devices have priorities other than processor speed. The
most important thing for a phone, for instance, is battery life: you really
don’t want to have to charge it after every phone call.
If you waited half a year before buying a computer, you would get one that was
twice as fast, for the same price. This was true of new desktop
computers, but mobile devices have priorities other than processor speed. The
most important thing for a phone, for instance, is battery life: you really
don’t want to have to charge it after every phone call.
And there’s another trend: instead of creating ever-faster
devices, many manufacturers are starting to sell ever-cheaper devices. Many people care about price
and battery life more than about processor speed. This is also not new: what happened to
your old computers? You probably sold them or gave them away. People keep using
old stuff. Not everyone has the same hardware as we designers do.
devices, many manufacturers are starting to sell ever-cheaper devices. Many people care about price
and battery life more than about processor speed. This is also not new: what happened to
your old computers? You probably sold them or gave them away. People keep using
old stuff. Not everyone has the same hardware as we designers do.
“ALL MONITORS ARE
CALIBRATED”
Well, we always knew this to be untrue, right? Only the monitors
of visual professionals are calibrated. Most other monitors don’t display
colors accurately, and many monitors are downright crappy. Most mobile phones
that I’ve tested have pretty decent screens, until you start using them
outside, in the sunshine. If you’re lucky, you can read the content, but you
definitely cannot see the subtle gradients in low-contrast designs.
of visual professionals are calibrated. Most other monitors don’t display
colors accurately, and many monitors are downright crappy. Most mobile phones
that I’ve tested have pretty decent screens, until you start using them
outside, in the sunshine. If you’re lucky, you can read the content, but you
definitely cannot see the subtle gradients in low-contrast designs.
I haven’t even mentioned “modern” black and white screens.
These, too, are not new. People have always used crappy monitors, and people
with bad eyesight have always visited your websites. It’s just that more and
more people are seeing a sub-par color palette. Instead of buying a state of the
art monitor, buying a cheap monitor and several low-end devices to test your
work on might be a better investment.
These, too, are not new. People have always used crappy monitors, and people
with bad eyesight have always visited your websites. It’s just that more and
more people are seeing a sub-par color palette. Instead of buying a state of the
art monitor, buying a cheap monitor and several low-end devices to test your
work on might be a better investment.