Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Page Readability Bookmarks

I’ve long been a proponent of flexible web pages rather than restricting sites to a hard coded width in pixels, but now that I’ve started surfing at 1280x1024 I’m beginning to realise how true the statements about an optimum width for readable text really are. The simple solution would be to surf with my browser window resized to a sensible size, but old habits die hard. Instead, I made myself the following bookmarklet:

Narrow

It resizes the current page to be 500 pixels wide, which for most flexible designs makes the text much easier to read. It’s only tested on Firebird. I also find Verdana to be the most readable of the web fonts, so I’ve created the following bookmarklet which alters the default text style for the page—ideal for reading Slashdot ;)

Verdana

Both bookmarklets are extremely simple, but I have been using them all day and have found them very useful.

Posted 2nd August 2003 at 9:26 pm

This is Page Readability Bookmarks by Simon Willison, posted on 2nd August 2003.

View blog reactions

Next: Marketing Firebird

Previous: The Doomsday Algorithm

23 comments

  1. That's useful, thanks. Wonder what it'll mean in the longer term for web designers, though, since this is hardly a solution for the layman. I also surf with maximised browser windows at high resolution, and know that while I believe in flexible layouts in principle, narrow-width web pages are much easier to read. (E.g. the BBC's.) So I think if you do liquid layouts (e.g. this site), ensure your margins are also liquid, to keep sane line lengths in large windows.

    francois - 2nd August 2003 22:07 - #

  2. I read a remark over at Dave Shea yesterday about how text is easier to read when it's about 70 characters wide, and that would make pixel-based designs alright, as it's okay to define the width of your main column with text. I know I have been browsing with 1280 x 1024 for quite some time now, and I really feel text is easier to read if it's not so wide.

    Manuzhai - 2nd August 2003 22:16 - #

  3. Hmmm, I've found that I rarely have any application maximised any more. Occasionally, I come across some feature that really wants all the screen estate it can grab. That's when F11 (full screen / theatre mode) comes in real handy!

    But on the whole, I find I can't live without my mail window side by side with my browser.

    -Dom

    Dominic Mitchell - 2nd August 2003 22:24 - #

  4. Isn't the ideal solution the min-width and max-width rules (unforunately not supported by IE at this stage). This allows you to set columns within the optimal rage but also allows a degree of flexibility depending on screen size.

    Russ Weakly - 2nd August 2003 23:45 - #

  5. I rarely use apps full screen so it's not really a problem for me although I think its more to do with the way I'm used to working on macs than any conscious preference. Come to think of it the only thing I have full screen is Word, but I'm not sure why.

    I've just made the browser full screen @ 1280x1024 to try it out. Hehe, it's a little overwelming thats for sure.

    pete - 3rd August 2003 00:13 - #

  6. This begs the question: Do you use the Verdana one while reading your own site?

    Al - 3rd August 2003 01:26 - #

  7. Unless it's just me (or my browser, to be precise), your bookmarklets don't work on your site - something to do with your content type not being text/html? Apparently your document.body has no properties.

    So unless it's just Mozilla 1.3, then you obviously don't view your own site in verdana at 500px width.

    PS: Your preview lost my comment again - hadn't filled in all the fields, apparently, and on coming back, it would seem that I hadn't filled in any of them! Note to self - copy comment to clipboard when posting to Simon.

    Andrew - 3rd August 2003 01:34 - #

  8. Actually it is Mozilla 1.3. Later versions of Mozilla use the HTML DOM when dealing with XHTML documents, but with 1.3 and earlier, the XML DOM is used, hence no document.body

    Xiven - 3rd August 2003 02:41 - #

  9. This discussion has got me thinking: It seems like the CSS media types available are a bit too broadly defined.

    From: http://www.w3.org/TR/REC-CSS2/media.html

    screen: Intended primarily for color computer screens.

    tv: Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

    handheld: Intended for handheld devices (typically small screen, monochrome, limited bandwidth).

    Now the assumption is made that different types of devices will have different screen resolutions. However, given how varied the area of computer monitors is (640X480 all the way up to cinema-wide apple monitors), perhaps there should be sub-media types for "screen" considering that a 1280X1024 monitors is about as different from a 640X480 as it is from a TV device...just some thoughts...

    MikeyC - 3rd August 2003 04:22 - #

  10. "Database connection failed... please wait a few seconds and refresh the page." Too many comments being eaten. sigh. Why are the forms blank upon a hit of the back button anyway? I don't see any scripting or SSL happening here, so I'm mystified.

    Dave S. - 3rd August 2003 05:52 - #

  11. Any chance its that the pages are being served up with a mime type of application/xhtml+xml?

    MikeyC - 3rd August 2003 06:21 - #

  12. (that's what I secretly wondered, but I didn't want to be the one starting rumours...) Oh, nevermind. Bugzilla's got it covered. Yep, it's app/x alright, and we're not the first Willison commenters to encounter it either ;)

    Dave S. - 3rd August 2003 06:54 - #

  13. The mime-type is also preventing me from opening links in new tabs by middle-clicking in Firebird...which I find quite annoying. I'm not pointing any fingers... but just one more reason why XHTML is not ready for prime time IMHO.

    MikeyC - 3rd August 2003 07:25 - #

  14. MikeyC, worksforme in Firebird/20030711/WinXP.

    Simon, why don't you just set Verdana to your default font? Slashdot doesn't specify a font, and the QuickPrefs extension gives you a convinient menu item to disable custom fonts and a lot of other annoyances.

    While it's been predicted as coming for a long time, we will eventually have to deal with all sorts of displays of varying resolutions, shapes and sizes, so everyone will have to get used to resizing their windows eventually.

    Maybe the CSS3 multi-column layout module will provide a better solution...

    Jan S. - 3rd August 2003 09:30 - #

  15. I use Georgia on this site mainly because I got bored of using Verdana on everything I created; I find it perfectly readable and don't sue the Verdana bookmarklet on this site but for making other sites instantly more readable Verdana seemed like a more logical choice.

    The bookmarklets (and opening a link in a new tab) work fine in Firebird 0.6.1, which is based on the most recent Mozilla code-base.

    Russ Weakly got it spot on when he said the ideal solution is min-width and max-width properties; it's a shame IE doesn't support them yet (and won't for several years). I wonder if it's possible to replicate their effects using javascript?

    Simon Willison - 3rd August 2003 09:50 - #

  16. Oh, and by the way: the bookmarklets seem to work just about fine in IE 6.

    Manuzhai - 3rd August 2003 10:26 - #

  17. Indeed it is possible to do with javascript... we did just that for a Sporting Life site when I used to work there. It's also possible to achieve a min-width with geometric scaling (eg browserwidth = minwidth + (screenwidth-minwidth)*0.3) with tables, <ahem>

    Tim Parkin - 3rd August 2003 11:04 - #

  18. One (tho silly) solution would perhaps be to use javascript to find the width of the window, and use the appropriate style sheet for that resolution.. But it's quite far from ideal.. Btw, the bookmarklets works fine in Safari

    Eivind Lie Nitter - 3rd August 2003 12:17 - #

  19. Very nice idea, certainly makes a lot of sites much easier to read now. It's a shame you cant encompass the javascript and location change into one bookmark, so that my slashdot link automatically changed the width and font for example. I gave it a go but the javascript executes before the page has loaded, anyone know of a way around this? I wonder what the implications of this would be if you could build a bookmark that loaded the site but stripped all irrelevant areas you didnt want. Probably too much hassle to be used by many but interesting none the less.

    Daniel Nolan - 3rd August 2003 13:43 - #

  20. I think there is a way of executing a custom bit of javascript for certain sites you visit. You'd have to use a user stylesheet and a bit of XBL - the XBL script would be assigned to the body element in the user stylesheet and would check the current URL and apply a certain set of extra styles / javascript conversions based on the site. I don't know if there's some kind of security model to stop you doing that but if it's possible it could be pretty interesting.

    Alternatively, the ability to apply custom stylesheets to specific sites would make a great Firebird extensions.

    Simon Willison - 3rd August 2003 16:29 - #

  21. Simon, http://www.doxdesk.com/software/js/minmax.html is a good script which makes the css minmax properties work.

    Martijn - 3rd August 2003 21:49 - #

  22. Surely the way forward is to specify the column width in ems, thereby resizing as the text size is changed. You get to keep roughly the same number of words per line no matter what size the text is...e.g. at Brainjar

    Tim - 14th August 2003 16:56 - #

  23. It thought there was a name for "the whole page scales", it's called Jello no? Ice (fixed widths) liquid (flowing text) jello (the whloe thing streaches)

    John E. - 9th November 2003 09:33 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/08/02/readabilityBookmarklets

A django site