I hope readers of this blog who struggled all the way through the long post on screen resolution now understand why I’m so keen on being able to create paginated, multi-column content on the Web which people can read with as few distractions as possible.
If you read all of that post, you did a lot of scrolling in order to read the single-column layout. I hope – like me – you grew to resent all of the unused screen real estate either side of that single column.
Single-column layout can get tiring, and make the reader want to go elsewhere. But the Web shouldn’t be a place only for those with Attention Deficit. It should be a place where people can publish any kind of content, and where people who want to spend time reading that content should be able to do so as comfortably as possible.
If you prefer to bounce around the Web like a gadfly, spending a little time at each of a large number of different sites, that’s fine. But the Web shouldn’t force you to behave that way. It ought to be possible to take the time to absorb information, too – and feel comfortable while doing so.
I’ve been doing another set of experiments on my website, and produced a set of screenshots to illustrate what I’m trying to do, and some of the problems I’ve hit. Some of those problems arise because I’m trying to live in a “high-resolution world”, and doing both my website authoring and viewing on my new MacBook Pro laptop at 133ppi (pixels per inch).
The more I use this machine, the more I realize the future I want could be a lot closer than I thought. Let me explain…
The resolution of human vision is about 600 dpi (dots per inch). So theoretically we need 600ppi screens to make what we see on a computer as “real” as the natural world.
The problem is that to go from the ~100ppi of the average computer screen of today to 600ppi means computing 36 times as many pixels per second (n-squared, because you increase the resolution in both directions) That’s a huge mountain to climb for graphics cards, the batteries which run them – and the heat they generate.
That’s not necessary. The glossy magazines you buy are normally printed at no more than 185 lines per inch. And with ClearType – which is a resolution multiplier for text, since it has 3x the number of sub-pixels with which to work – you have gone past the equivalent of 185ppi on this 133ppi display.
It’s more than that, though. Not all high-resolution displays are created equal. I had a 133ppi Dell laptop about 12 years ago, and a 147ppi Dell laptop ten years ago. But I have to say, their displays were not in the same class as this 133ppi display from Apple. It’s stunningly bright and crisp. It seems a lot brighter running Vista than MacOSX – which probably means I’d be voraciously devouring battery charge when running without mains power. But I don’t really do that very often. And I like the brightness. Makes OSX look positively dingy…
It’s not only ClearType that looks good. I went on to Adobe’s site to try out their new DF4 rendering, and found it very crisp and readable on this screen.
It might be that 133ppi on screens of this quality is quite enough resolution – at least until there’s some kind of graphics technology breakthrough.
When it comes to Web authoring and surfing, email, FaceBook, LinkedIn, news sites etc., I still prefer the Windows versions of all the browsers.
Now I’m no longer at Microsoft, I’ve been deliberately using FireFox as my default browser to make sure there’s no lingering “you always prefer what you’re used to” bias. I also have the latest versions or betas of Chrome and Safari, and of course the shipping version of Internet Explorer 8.
Since this Mac screen is so bright, I found the white backgrounds I’d been using previously on my site to be punching out too much light, even with multicolumn text layout. So I switched to white text on a black background – same as on this blog. However, even the white text on that seemed too bright. So I ended up with light gray on black. It reads very well on this display, and feels very restful for the eyes. I’d love to get your feedback on how it looks on your screen. Here’s the link to the test page…
I included the Internet Explorer 8 screen shot at the beginning of this post because that’s exactly how I wanted my site to look. Authoring in Notepad++ gave me results in Internet Explorer which were entirely predictable. Unfortunately, the same was not true in any of the other browsers, even with absolutely Web-standards markup.
I’m not certain whether the problem is the way different browsers deal with the markup – it really shouldn’t be – or whether it relates to the high-resolution display and the way they cope with that.
In IE8, I found the 12pt text I’d been using on my site was too small at this resolution. I took it up to 17point, and changed all other text sizes to fit. I was really pleased with how the final page turned out.
Then I fired up the other browsers to check it.
- Badly positioned paragraph
- Navigation buttons have floated to wrong position
- Photo not scaled up to fit column
- One-line caption becomes two lines, changing column line-break
- This is an issue I’ve seen in Firefox for ages, and one they should fix. When you go FullScreen (F11, or Fn-F11 on the Mac) it forgets to repaint the new area of the screen created at the bottom, leaving garbage or old lines of text from the previous rendering.
Google Chrome on Windows Vista
- Headings become too big. Masthead sticks out too far; “SECRET BLOGOZINE” heading becomes two lines, busting the layout
- Paragraph sets too big, overflowing space provided
- Picture is scaled up too big, sticking out into column 2
- Pull quote takes up too many lines; so does all the body text, forcing scrolling to read all content.
- No Full Screen switch. I thought the latest beta had one – but it seems to have disappeared. So you end up having to scroll.
Safari4 on Windows Vista
- No Full Screen mode
- Headings break
- Text overflows
- Picture didn’t show up at all
- Navigation buttons got lost
- One-line caption becomes two lines
- Pull quote takes up too many lines
Now I’m still quite the newbie here. I’m sure many of you old and grizzled Web designers are shaking your heads, and saying, “Well, he should (or shouldn’t) have done X or Y, and that wouldn’t have happened”.
But why should anyone wanting to create Web content have to learn the secret handshakes? Shouldn’t Web authoring be easy and open to everyone? Shouldn’t it be democratic – and not controlled by some “priesthood” who understand the “Latin”?
Shouldn’t Web-standards markup be the lingua franca? So that if you can speak it, you can talk to anyone, anywhere?
I know I’m still using pixel dimensions on my site. And that means I’m not yet resolution-independent. But shouldn’t Web-standards markup at least mean all the browsers handle the same content the same way?
Unless we can get to that point, I don’t see a lot of hope for Web standards. If I wanted to create cross-browser, multi-column, paginated content today, I’d be forced to use Adobe’s proprietary FLEX and AIR formats and their browser plugins.