{"id":418,"date":"2010-08-03T15:16:00","date_gmt":"2010-08-03T19:16:00","guid":{"rendered":"https:\/\/www.goer.org\/wordpress\/welcome_to_goerorg_40"},"modified":"2013-11-17T21:12:35","modified_gmt":"2013-11-17T21:12:35","slug":"welcome_to_goerorg_40","status":"publish","type":"post","link":"https:\/\/www.goer.org\/Journal\/2010\/08\/welcome_to_goerorg_40.html","title":{"rendered":"Welcome to goer.org 4.0"},"content":{"rendered":"<p>After <a href=\"\/Journal\/2007\/01\/welcome_to_goerorg_30.html\">three and a half years<\/a>, it&#8217;s about time for another redesign. Welcome to goer.org 4.0 &#8212; now with fewer features!<\/p>\n<p>For comparison and amusement, the previous three revisions are preserved in amber here:<\/p>\n<ul>\n<li><a href=\"\/Prototypes\/goer1.0\">goer.org 1.0<\/a> (2000-2003): Look at those elegant rounded corners! Clearly a site way ahead of its time.<\/li>\n<li><a href=\"\/Prototypes\/goer2.0\">goer.org 2.0<\/a> (2003-2006): We&#8217;ve made the jump from a table-based layout to an all CSS version. It turned out&#8230; awfully boxy and green. Although to be fair, I believe this layout actually worked in Netscape 4 and Internet Explorer 4.<\/li>\n<li><a href=\"\/Prototypes\/goer3.0\">goer.org 3.0<\/a> (2007-2010): Goodbye green, hello brown! This was my first attempt at a <a href=\"http:\/\/developer.yahoo.com\/yui\/grids\">YUI Grids<\/a> based layout.<\/li>\n<\/ul>\n<p>I was satisfied with version 3.0 at the time, but over the last couple of years, I became more and more unhappy with the site. Not only did it still look amateurish, it was way too hard to read. But a major overhaul seemed daunting, and I wasn&#8217;t quite sure how to fix it in the first place.<\/p>\n<h2>An Epiphany<\/h2>\n<p>Then I downloaded Safari 5, which comes with the famous <a href=\"http:\/\/lab.arc90.com\/experiments\/readability\/\">Readability plugin<\/a> built in, and tried it out on a couple of popular news sites. The effect of seeing the article without all the extra navigational crap was startling, and it jolted me into taking a hard look at my own site.<\/p>\n<ul>\n<li>Why bother listing recent posts next to every entry? Especially since the posts aren&#8217;t necessarily so recent?<\/li>\n<li>Why show the blogroll next to every entry? Giving a nod to friends and family is nice, but do all those links need to be there every time?<\/li>\n<li>Why show my <a href=\"http:\/\/delicious.com\/evangoer\">Delicious<\/a> linkroll next to every entry? Is there a reason that Javascript needs to be loaded for every entry?<\/li>\n<li>Why is the Creative Commons section so huge?<\/li>\n<li>Does the site really need a site-specific search box? (Oops, it&#8217;s broken anyway.)<\/li>\n<\/ul>\n<p>It occurred to me that just because blogs traditionally have linkrolls and tag clouds and thirty different &#8220;sharing&#8221; buttons and blog ads and God knows what else in the sidebar, doesn&#8217;t mean that&#8217;s how it has to be.<\/p>\n<p>Now inspired, I read up a little on typography for the first time, well, ever. And the good news is that some of the principles of good typography are <em>so<\/em> simple that even knucklehead non-designers like myself can understand them. For instance, I had always believed that websites should let the main content area flow as wide as the user wanted. If the user wanted a narrower or wider view, they could just stretch their browser window. Oh sure, some websites force a particular column width \u2014 websites run by <em>The Man<\/em>! Why not be freaky and free?<\/p>\n<p>However, now I realize that there <em>is<\/em> in fact an optimal range of width for English text. That&#8217;s why paperbacks are as wide as they are. That&#8217;s why newspapers and magazines have columns. And that&#8217;s why this site now uses a fixed width layout. If you don&#8217;t like it, take it up with the Commandant.<\/p>\n<h2>So What&#8217;s Changed?<\/h2>\n<p>A bunch of things:<\/p>\n<ul>\n<li>As mentioned above, the sidebar is completely gone. All the stuff that was there has been either A) miniaturized or B) moved to a separate dedicated page.<\/li>\n<li>Although the layout of the new site is actually much simpler, there are many changes to typography and general look-and-feel. The overall look I was going for was &#8220;book-like&#8221;.<\/li>\n<li>The banner at the top has been refined. The images are larger, and I&#8217;ve eliminated a couple of the picture frames. The site&#8217;s color scheme still derives from the images (browns and other warm shades).<\/li>\n<li>The comment form has been revamped according to the guidelines in Luke Wroblewski&#8217;s <cite><a href=\"http:\/\/www.rosenfeldmedia.com\/books\/webforms\/\">Web Form Design<\/a><\/cite>. That process might be worth a post all by itself.<\/li>\n<li>The backend is still <a href=\"http:\/\/www.movabletype.org\/\">Movable Type<\/a>, but upgraded from MT3 to MT5. I put a lot of thought into other options: staying on MT3 forever, migrating to <a href=\"http:\/\/www.wordpress.org\">WordPress<\/a>, and even (briefly) rolling my own system. That process might be worth a separate post as well.<\/li>\n<li>A number of performance improvements thanks to the slimmer design and some help from <a href=\"http:\/\/developer.yahoo.com\/yslow\">YSlow<\/a>. Page weight is smaller, fewer HTTP requests, static assets have far-future Expires headers, etc. Most pages now fully load in subsecond time.<\/li>\n<li>Finally, the site has migrated from HTML 4.01 Strict to HTML 5. Not that I&#8217;m using any major HTML 5 features yet, but I do like me that <a href=\"http:\/\/www.w3.org\/TR\/html5\/syntax.html#the-doctype\">HTML 5 doctype<\/a>.<\/li>\n<\/ul>\n<h2>Credits<\/h2>\n<p>This redesign probably would not have been possible without:<\/p>\n<ul>\n<li>The engineers who support <a href=\"http:\/\/developer.yahoo.com\/yslow\">YSlow<\/a>.<\/li>\n<li>Luke Wroblewski, for writing <cite><a href=\"http:\/\/www.rosenfeldmedia.com\/books\/webforms\/\">Web Form Design<\/a><\/cite>.<\/li>\n<li>The Yahoo! Search design team. I&#8217;m not a designer by any means, and my visual thinking is pretty weak. But thanks to being around some really talented people the last couple of years, I&#8217;ve managed to pick up a few tricks by osmosis. Remember, it&#8217;s not that the bear dances well, it&#8217;s that he dances at all.<\/li>\n<li>My wife Sarah, who has a much keener eye for color and layout than I do, and can spot something that&#8217;s a pixel out of line without even straining.<\/li>\n<\/ul>\n<p>And that&#8217;s about it! Here&#8217;s looking forward to goer.org 5.0, coming in 2014 to a browser near you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>However, now I realize that there *is* in fact an optimal range of width for English text. That&#8217;s why paperbacks are as wide as they are. That&#8217;s why newspapers and magazines have columns. And that&#8217;s why this site now uses a fixed width layout. If you don&#8217;t like it, take it up with the Commandant.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-418","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/posts\/418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/comments?post=418"}],"version-history":[{"count":2,"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/posts\/418\/revisions"}],"predecessor-version":[{"id":684,"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/posts\/418\/revisions\/684"}],"wp:attachment":[{"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/media?parent=418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/categories?post=418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.goer.org\/Journal\/wp-json\/wp\/v2\/tags?post=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}