« Yahoo! Live empowers deaf users to chat online | Main | The seven rules of pragmatic progressive enhancement - a brown bag presentation »
May 6, 2008
Editor's note: This post by Yahoo! front-end developer Tyler Hall originally appeared on his personal blog, Click on Tyler.
It's been a long time coming, but last month I finally pushed out a new design for my personal website, Click on Tyler. I rebuilt it from the ground up using two key tools from the Yahoo! Developer Network:
The new design is really a refresh of the previous look with a focus on readability and speed. I want to take a few minutes and touch on what I learned during this go-round so (hopefully) others might benefit.
Although I really liked the darker color scheme from before, it was too hard to read. There simply wasn't enough contrast between the body text and the black background. I tried my best to make it work. I searched around for various articles about text legibility on dark backgrounds. I increased the letter spacing, the leading, narrowed the body columns, and everything else I learned in the intro graphic design class I took in college. The results were better, but my gut agreed with all the articles I read online which basically said "don't do it." So I compromised and switched to a white body background, while leaving the header mostly untouched. I find the new look much more readable -- hopefully this will encourage me to begin writing longer posts.
The old site was built piecemeal over a couple months and, quite frankly, turned into a mess font-wise. I had inconsistent headers, font-weights, and anchor styles depending on which section you were viewing. With the new design, I sat down (as I should have before) and decided explicitly on which font family, size, and color to use for each header. I spec'ed out the font sizes using YUI's percent-based scheme which helps ensure a consistent look when users adjust the size. (Go ahead, scale the font size up and down.) An added bonus was that it forced me to think more about the semantic structure of my markup. (If you have Firefox's Web Developer toolbar installed, try viewing the site with stylesheets turned off.) If there's one thing I learned working for Sitening, it's that semantic structure plays a huge part in your SERPs.
At OSCON last summer, I attended one of the first talks Steve Souders gave on YSlow -- a Firefox plugin that measures website performance. That, plus working for Yahoo!, has kept the techniques suggested by YSlow in the back of my head with every site I build. But this redesign was the first time I committed to scoring as high as I could.
As usual, I coded everything by hand, paying attention to all the typical SEO rules that I learned at Sitening. Once the initial design was complete and I had a working home page, I ran YSlow.
Ouch. A failing 56 out of 100. What did YSlow suggest I improve? And how did I fix it?
So, all of the changes above took about three hours to implement. Most of that time was spent writing my S3 deploy script and figuring out how to make Amazon serve gzipped content. Was it worth it? See for yourself.
Wow. Three short hours of work and I jumped to a near perfect 96 out of 100. The only remaining penalty is from not serving an expires header on my Mint JavaScript.
Do these optimization techniques make a difference? I think so. Visually, I can tell there's a huge decrease in page rendering time on both Firefox and Safari. (IE accounts for 6% of my traffic, so I don't bother testing there any longer.) More amazing, perhaps, is the site's performance on iPhone. The page doesn't just load -- it appears.
I've made a bunch of vague references to the S3 deploy script I'm using and how to setup gzip on Amazon. In the interest of space, I've left out the specifics. If you're interested, contact me with any questions and I'll be happy to help.
Tyler Hall
Front-end Engineer
Posted at May 6, 2008 5:57 PM
Tyler, I'd love to see a personal post about your deploy script and gzipping on S3.
Super links in this post -- much appreciated!
Posted by: Pat at May 7, 2008 10:42 PM
Also interested in how you've 'linked' your sub-domain (amz.clickontyler.com) to S3. Thanks!
Posted by: Pat at May 7, 2008 10:46 PM
BTW, http://developer.yahoo.com/amazon-php-aws/ is a dead link.
Posted by: Pat at May 7, 2008 10:51 PM
Glad you liked the post, Pat. Keep an eye on my blog (or subscribe to my RSS feed) - I'll be posting a follow up about the S3 deploy script along with the code.
Posted by: Tyler Hall at May 8, 2008 12:15 PM
Fixed that bad link (the hazards of relative links)-- thanks for the pointer Pat.
Posted by: havi hoffman at May 8, 2008 12:26 PM
"I can tell there's a huge increase in page rendering time"
You mean *decrease* in rendering time, of course ;)
Thanks for the nice writeup!
Posted by: Stoyan at May 8, 2008 4:17 PM
Comment Policy: We encourage comments and look forward to hearing from you. Please note that Yahoo! may, in our sole discretion, remove comments if they are off topic, inappropriate, or otherwise violate our Terms of Service.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings