Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Tweaking sites for readability

Jeffrey Zeldman’s new design continues to develop, but remains virtually unreadable on my monitor (without extensive tweaking of the settings). I’m not griping though as this was an ideal opportunity to play with Mozilla’s DOM inspector. This handy tool allows you to load up a page and browser through the DOM of the page, tweaking as you go. More importantly, it lets you modify the CSS rules for each individual element. It took a matter of seconds to fire up the inspector, browse down to the CSS rules for the body element and change the colour setting to rgb(255, 255, 255)—not particularly pretty but a lot more readable on this monitor than the default black. Of course, a bookmarklet to do the same thing would be much more convenient...

Posted 24th October 2002 at 3:10 pm

This is Tweaking sites for readability by Simon Willison, posted on 24th October 2002.

View blog reactions

Next: Micropayments on the way

Previous: Uzilla

5 comments

  1. javascript:a=document.getElementsByTagName("body") ;void(a[0].style.background="#FFF");

    Marcus - 24th October 2002 15:57 - #

  2. I see the problem Simon, I used to have a very dark monitor too (and no amount of gamma tweaking was enough). For example, it's only recently when I changed my monitor that I noticed Blogdex's background wasn't #000 :p

    michel v - 24th October 2002 21:59 - #

  3. There's a great bookmarklet that allows you to tweak the CSS styles of the current site on the fly. Not exactly ideal for this but it's great for trying out CSS tweaks on the fly (no uploading/saving necessary!). I haven't got a web link for it off-hand but you'll be able to find it in the wiki Simon :).

    Tim - 24th October 2002 23:24 - #

  4. I think it was: javascript:(function(){function update(){if(!x || x.closed){ta.style.backgroundColor="#ddd";return;} try { x.bookmarkletStyleSheet; } catch (er){ta.style.backgroundColor="#fdc";setTimeout(up date, 150);dead=true;return;}if(dead){dead=false;ta.styl e.backgroundColor="";oldCSS=null;}if(!x.bookmarkle tStyleSheet){var newSS;newSS=x.document.createElement("link");newSS .rel="stylesheet";newSS.type="text/css";x.document .documentElement.childNodes[0].appendChild(newSS); x.bookmarkletStyleSheet=newSS;oldCSS=null;x.bookma rkletStyleWindow=window;}if(oldCSS!=ta.value){oldC SS=ta.value;x.bookmarkletStyleSheet.href="data:tex t/css,"+ta.value;}setTimeout(update, 150);}if(window.bookmarkletStyleWindow && !bookmarkletStyleWindow.closed) {bookmarkletStyleWindow.focus();} else { var y;y=window.open('','','resizable,width=400,height= 300');y.document.write('<title>New CSS Style Sheet</title><body style="margin: 0px;"><form name="f" style="margin: 0px;"><textarea name="ta" wrap="soft" style="margin: 0px; border: 0px; width:100%; height:100%;">div { border: 1px solid }</textarea><script>'+update+'dead=false; oldCSS=null; x=opener; ta=document.f.ta; if(x.bookmarkletStyleSheet)ta.value=x.bookmarkletS tyleSheet.href.slice(14); ta.select(); update();<'+'/script>');y.document.close();}})();

    alastc - 12th November 2002 15:02 - #

  5. Oops, didn't realise it was that big, otherwiae I'd have given you the address: http://www.squarefree.com/bookmarklets/webdevel.ht ml Sorry!

    alastc - 12th November 2002 15:05 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2002/10/24/tweakingSitesForReadability

A django site