the 200ok weblog

We talk about connection a lot. We talk about social objects, social networks... technology to connect people.

But for all that, a lot of the time we remain distracted by the tools we're using. The experience is often "using the service" rather than "connecting with friends".

Then there are some moments which show us what connection really means.

I'm talking about those moments when the technology falls away from notice, and we simply experience the warmth and emotion of human connection.

Human stuff. Like many things it defies definition, but we know it when we see it... and we know it when we feel it.

Derek Featherstone's "Connection" post describes just such a moment, browsing Flickr photos on his TV in his lounge room. You should read the whole post but I'll borrow a little:

As the photos play, I see my friends. I see Ben. I see Chaals. Lisa and Lisa and Lachlan, John and Maxine, Scott and Cheryl. My head and heart both started racing.

...

Next up was Jeremy Keith. Scrolling through his sets I see dConstruct 2008 and push play. I see photos of speakers, attendees, conference organizers — and friends in each category. It starts happening again. I see Jessica, Paul Duncan, Andy Budd, James Box and more. Heart racing, fitting with the music. What is happening?

Connection » box of chocolates

These moments are what truly excite me about the web; and about the potential of the internet as a whole.

These moments are what I want my less tech-savvy friends to tap into.

the net keeps me connected

Twitter has kept me in touch with friends from web events. Flickr lets me share photos with friends and family. Skype lets me video call my family (I live in a different city). Facebook, for all its faults, has kept me in touch with friends from college.

My friends are split to the four winds. We revel in the moments when we're in the same room, but in between those golden moments we use the net to keep in touch. Online connection is real and important to me, not the ersatz connection many people still assume it must be.

connected moments

Moments don't need to be big or complex to make an impression. One of my favourites was my "twitter moment". It was essentially the moment when I decided I'd keep using Twitter.

One night back in March 2007 I was enjoying a few drinks here in Sydney with Chaals, who was visiting from Oslo. I used my phone to twitter our location, with our view of the Sydney Harbour Bridge. Moments later I got a direct message from Derek, in Ottawa, asking me to say "hi" to Chaals for him.

It was a very simple thing. But in that moment technology had connected three friends in real time, away from the computer and in fact on opposite sides of the planet... and that's pretty cool!

Sure, I know it's all just mobile towers and servers and satellites and data. But every once in a while I think we should just appreciate the joy of the magic of it all.

[Cartoon: Three Panel Soul :: Archive 2008-11-05]

I'm not saying that a text message was as good as having Derek there with us. But it was nice to be able to share the moment so casually. Without Twitter it wouldn't have happened.

Moments of connection like these help build friendships, despite great distances... and this year, on my 30th birthday no less, this moment happened:

L-R: me, Derek, Chaals.

And that's the really good stuff :)

...and you?

So, has there ever been a moment where—for all your web savvy—you were able to simply enjoy the magic?

What's your moment of connection?

Labels: human stuff, web connections

The old rules for supporting screen resolutions were simple. Monitors were basically all the same shape and new ones just got a little bigger... so all you really had to do was support the standard resolution of new monitors, plus one resolution "back". Easy!

But these days the rules aren't so simple. Desktop monitors are generally bigger, but they come in a variety of sizes and ratios; and users don't always maximise their browser windows anyway. People are browsing on tiny mobile phones that weren't really designed for anything longer than a text message. Devices like the iPhone, Nintendo Wii and Asus Eee PC are new and shiny, yet their resolution is retro.

All of these displays are new. We don't have a situation where the major differences are divided between new and old, nor is there a linear increase in size as new displays come out.

To really see what this means, let's compare a selection of new device resolutions side by side:

(Statistics from TheCounter.com November 2008 resolution data)

So what difference does it all make? Didn't fluid layouts solve all our problems? Well, unfortunately, no they didn't.

bigger and... broken?!

There's nothing like a real-life demonstration to illustrate how much your monitor can change your browsing experience.

A few months ago I finally upgraded to a 22 inch widescreen LCD from my trusty old 17 inch Sony Trinitron CRT (which lasted ten years). At work I use twin 1280×1024 LCDs, so widescreen is a new frontier for me. I still occasionally feel like I'm watching tennis.

One reason I lingered at 1024×768 was the reality check - amazingly it's still the most popular screen resolution out there. The share is falling, but having dropped just 5% in the past year (from 50% to 45%), it's not going anywhere just yet.

So we keep supporting 1024×768 and I had generally thought that larger monitors wouldn't have any problems. But when I switched over, I was surprised to discover that many sites which work nicely at 1024×768 effectively "break" at 1680×1050.

what's bad at high resolution?

• Fixed width + left-aligned sites
• 100% width + fluid layout
• Tiny text

The single biggest annoyance for me is sites that are left-aligned and fixed-width. That means they're way off to the side on a widescreen monitor, so I'm either looking off to one side or I have to start messing around resizing my browser.

Fluid layouts don't solve everything, since line lengths can get completely out of control. Would you set a line length of 19 inches in print? Not for body copy, I'm sure. But that's basically what happens on my screen at 100% width - and it's incredibly hard to read.

The other major issue at higher resolution is text size - it's just too damn small! I'm forever zooming the page or even disabling styles completely. Designers, please, set larger text!

what's ok at high resolution?

• Elastic layouts
• Fixed width + center aligned

Elastic layouts do fare quite well, so long as they have intelligent minimum and maximum widths set up to preserve line length. Some go too far and end up being as bad as a fully fluid layout, but the good ones subtly adjust to use some more space. Bonus points for bumping up the text size for very wide screens (and I can only think of one here: props to nickcowie.com).

Fixed width, center-aligned sites are great, since they put the content front and centre and keep line lengths readable. At smaller resolutions it looks basically the same as left-aligned sites, so centre-aligned design adds a nice experience for people viewing at wide resolutions without causing any trouble on smaller screens.

so how do you choose a resolution?

With all this in mind, how do you decide on a base resolution to support? Even if everybody browsed with maximised windows it's not a straight call. You end up having to choose a middle ground - no resolution is perfect for every last screen.

Besides that, what does it even mean to "support" a resolution these days? So let's start by defining what we mean by "supporting a resolution".

define support levels

I'm suggesting a graded support system, the same way most of us treat browsers:

Direct support

A resolution where the user can view the default rendering of the site without horizontal scrolling, loading alternative stylesheets or some other form of modification. The design does not have excessive whitespace. Something that works at both 1024×768 and 1280×1024 would mean direct support for both.

Oversize support

A resolution where the design works even if it has a large amount of whitespace, eg. a fixed width, centred design.

Cut down support

A resolution where the primary content is on screen without scrolling, but the user scrolls to see secondary content (eg. having your main content area fit at 800px wide, but the sidebar etc requires scrolling).

Alternative support

A resolution supported via an alternative stylesheet, resolution detection, alternate template, device detection or some other modification from the default.

No support

You leave it to the user (or their device) to sort it out if they are using that resolution.

I'm sure we all have something like this in our heads anyway, but it's better to be precise and definite - particularly when the boss asks you to explain why the site was cut off on his Wii.

use your own stats to make decisions

Nobody's statistics are as relevant as your own, so you should always pay attention to them. Look to global statistics for trends, then apply those trends to your current state.

When I redesigned this blog I found that about 5.8% of visits were at 800×600, 18.6% on 1024×768, 23.5% on 1280×1024. The other 52.1% were at various large and widescreen resolutions above 1280px wide.

I set the minimum cutoff point for direct support at 1024×768 (minimum width 950px). At 800×600 you see the main content and middle column, but have to scroll for the third column.

Then I decided to use oversize support for large screens, capping max width at 1200px.

There's only 250px play between the min and max width; so the line length doesn't change by too much. I could just as easily have set a fixed width, but I prefer to let the design breathe a little.

I currently don't have extra stylesheets for mobiles and other small screen devices. Some random testing shows the site seems to hold up ok anyway. Essentially I'm leaving them in the "no support" category (I might be more interested if mobiles supported the handheld media type).

the process

So basically the process I suggest for choosing a resolution is this:

1. Look at global stats for trends
2. Look at your own stats for current numbers
3. Consider what the trends mean for your stats
4. Allocate major resolution market shares to support categories (create a support matrix)
5. Build to meet the requirements of your support matrix
   • Build your default site to suit the min and max widths of your Direct Support resolutions
   • Support slightly-smaller resolutions with Cut Down Support
   • Support massive resolutions with Oversize Support
   • Where there's a need, build niche stylesheets or templates for Alternative Support resolutions
6. Periodically review your support matrix

That's a very formal way to describe the process, of course. Really what it boils down to is making some conscious decisions; and considering what you want to happen at all the potential resolutions out there.

conclusion

There are a lot devices out there with a crazy array of resolutions. The good news is you don't have to support every last resolution directly.

There's no imperative to fill up the entire screen at massive resolutions; and it's not the end of the world if someone needs to scroll a lot on a tiny-screened device.

Statistically speaking, the majority of people are still using a reasonably standard size monitor to view your content. Widescreen monitors just mean there's more real estate than you actually need to present your content.

So, create a coherent, legible design and don't be scared of whitespace. A good design sitting in the middle of a big space is a better experience than a clever-but-unreadable fluid design.

Of course, next thing you know someone will bring out some new device that changes the whole situation...

Labels: mobile device, screen resolution, widescreen