Design on — not for — multiple devices.

How new web aesthetics are forgetting small laptops. 


I mean, I’ll be the first to admit it. I use a gorgeous 27" at work. I f*in love that iMac. It’s big. It’s powerful. It makes everything beautiful.

Why would anyone want to design on anything less big, shiny and beautiful?

But then I get home. To my not-so-shiny but trustworthy little 13" macbook. This fella took me through university. I laid out an entire book on his tiny familiar screen. Tapped out dissertations on the beat-up keyboard. He’s portable. He’s been around the world with me. 90% of the time I’m at home, he’s how I view the web.

I feel pretty confident saying that there are a significant group of users that have screens of a similar size — If I look at a cross-section of my friends, a majority have laptops as their primary computer, and these generally come in sizes between 11 — 17".

But the internet is beginning to look pretty shit at that size.

But “hey”, you say “we’re hip to the jive, we do responsive, we even have a custom mediaquery for your small-ass screen.” If this is really true, if you break out the buffet of laptops for your device testing, I salute you. You have a foresight and wisdom that I did not possess until just now.

You see, the way I’d test for smaller screens would be resizing the browser window. There’s a nifty chrome extension for it.

So what’s the problem, I tested it didn’t I?

Not quite.

I’ll resize my browser window to 1378 * 700 (the alleged size of my laptop) and wonder how anyone can actually view the web at such a measly size. Then I go home and wonder why web designers make sites that are so crappy on my screen size. And why do I keep getting the god damn tablet navigation?

Because this is how I really use my laptop, actual window size = 992 * 547.
Do you even know what that looks like on an imac?
Decent window size on a laptop.

It’s not that I don’t think about the fact that I never have my browser window full screen. It’s because when resized to that point, the proportional difference between your desktop and your browser window seems so ridiculous that you refuse to believe that it is really the same browsing experience.

Same window size on an iMac

On the iMac it looks…wrong. Like you’ve squished the majestic galaxy that is the internet into the viewport equivalent of an airplane window an aisle away from you.

So I never really think about it as a real contender for my layout testing. It feels like a joke-size.

Adding to this is the recent trend in web aesthetics. You know what I’m talking about — scrolly scrolly, lots of white space, full-size backgrounds, 1 column layouts — With the dawn of responsive design, designers moved away from cramped up multicolumn layouts and “the dreaded fold” to create vertically generous, minimal, typographically striking compositions that scale to the narrow screens of phones and tablets.

The biggest problem about this trend is that websites can seem overwhelmingly big on laptop screens. Browsing can feel like like looking at the world through a tele lens — everything is always too zoomed in and out of frame.

I’m not going to turn this into a shaming article.
We’re all guilty. But this is a really good example:
I’m sorry, Fitness First. But you did make me realise I needed to write this article.

Here are some of the brutal truths we all need to remember:

  1. Plenty of whitespace is a great way to create sections on larger screens and great big deadzones on smaller ones.
  2. Your 600px inspirational image is cute but it’s annoying to scroll past and makes me lose all sense of context.
  3. On small screens, fonts that are too big make text harder, not easier to read.
  4. One column layouts are great for reading and for mobile— but does it suit the goal of your site? Most small screens have width but very little height. Make sure your layout is the best one for the job.
  5. There is such a thing as screen real estate, and a chunky fixed navbar turns 30% of your website into hallway space.
  6. You should be allowed to go for wow. You should be using space and experimenting and pushing the boundaries of what is possible with a website. But don’t make it unusable, don’t make it impenetrable, and please don’t make me feel lost.

Will I ever willingly relinquish the iMac and do all my work on a laptop?

…….No.

But It is important to recognise the power of proportion. If we’re REALLY going for the “responsive web”, it’s time to admit that resizing our browser window won’t cut it. The only way to be sure we have created websites that work well on multiple devices is to design them, use them, test them, and adjust them on all of those devices.