It’s hard to read large amounts of text in a browser window. Columns end up being too wide, and the processes of scrolling tends to encourage skimming.

I’m trying to design a better way to present large amounts of plain text online. At the moment I’m experimenting with narrow columns and a strong page metaphor in lieu of scrolling - things that would have been unthinkably difficult until recently. jQuery allows us to do these things, and more.

I should point out that this is very experimental at the moment. I’m pretty sure it won’t work in IE yet, and there are a number of known issues I intend to work on.

You can take a sneak peak at my progress here. Make sure you play around with resizing the window, and flipping pages.

Screenshot:

jBook (is very experimental at this stage).

A recent link on Hacker News pointed to research at Stanford establishing guidlines for Web Credibility.

I would recommend it to anybody who deals with communication, marketing or design of corporate websites.

Particularly interesting (to me) are those guidelines that deal solely with design, rather than content:

6. Design your site so it looks professional (or is appropriate for your purpose).

We find that people quickly evaluate a site by visual design alone. When designing your site, pay attention to layout, typography, images, consistency issues, and more…

7. Make your site easy to use — and useful.

… Our research shows that sites win credibility points by being both easy to use and useful. Some site operators forget about users when they cater to their own company’s ego or try to show the dazzling things they can do with web technology…

10. Avoid errors of all types, no matter how small.

Typographical errors and broken links hurt a site’s credibility more than most people imagine. It’s also important to keep your site up and running.

Obviously there are a number of other recommendation that aren’t design-based, but I pulled these out as a reminder that web design is intimately connected to communications and credibility-building. It’s something that all designers should be mindful of.

P.S. For those with a deep interest in web credibility, there are some great resources at the Stanford Web Credibility Research site.

A day after I “finished” the design for this blog, I checked to make sure that everything was working as intended in browsers that I don’t have installed.

Perhaps unsurprisingly, the layout breaks in Internet Explorer versions 6 and below, presumably due to a bizarre bug in IE which causes float margins to be doubled.

For a few days, I considered what the best approach would be to resolve the issue. On one hand, I want my blog to be universally accessible. For instance I made sure that users with flash, javascript or even images disabled would still see full functionality. In the past I’ve even chastised designers for creating menus that disappear behind flash animations on Ubuntu Firefox. Around 25% of internet users still use IE6, so surely it would be in my interests to support the browser fully.

On the other hand, supporting old IE versions isn’t entirely straightforward. They’re difficult to debug for (particularly on a mac) and standards non-compliance means that otherwise simple fixes become unpredictable. The expense was enough, for instance, for 37signals to cease supporting IE6. Furthermore, I believe that non-compliant browsers should be opposed as a matter of principle, as many others have argued before me.

So, to fix, or ignore?

Ultimately I decided not to support old IE versions, to allow old IE users access the site, but to provide a warning message and upgrade recommendation. This is the best compromise I could come up with between accessibility and standards-compliance principles. Show up to my blog with IE6 or lower, and this is what you see:

There are a few different ways to do this, but I elected to use conditional comments and a bit of php. For anyone interested in the code, this is what I threw together:

<?php if (($_GET['overrideIEblock']!=”true”) && (!stristr($_SERVER["HTTP_REFERER"], “ozanonay.com”))) { ?>
<!–[if lte IE 6]>
<div id=”IEblock”>Some text. <a href=”http://<?php echo $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];?>?overrideIEblock=true”>continue to blog</a></div>
<![endif]–>
<?php } ?>

… then obviously I styled #IEblock to be large and absolutely positioned with high z-index.

This is not the approach for everyone, but if your intended audience is tech-saavy or standards-conscious, it may be an appropriate compromise.

UPDATE: Since switching to the Headless theme, the design no longer breaks in IE, so I have taken down the shame-screen.