Peeling Back the Interface of the Yahoo! Home Page Beta

By Nate KoechleyMay 15th, 2006

To celebrate the launch of the public beta of the new Yahoo! home page, I want to peel back the interface and point out a few things of interest to developers.

First of all, I’m very proud that the new Yahoo! home page uses the open-source Yahoo! User Interface Library extensively. To be clear, the exact lines of code available to the world for free are used by Yahoo!’s new flagship page. The Library’s a la carte design lets them use just the components they need: Connection, DOM, Animation, and Event, as well as CSS Fonts and CSS Reset. This illustrates several things, including the industrial-grade functionality of the YUI Library, the validity of an a la carte approach, and our commitment to continued development and support of this library.

Now, notice how the page is optimized with “download-on-demand.” If a JavaScript, CSS, HTML or JSON file isn’t absolutely and immediately necessary, it is not loaded until after the onLoad event fires. Many of the features that Bill Scott discusses in his design patterns coverage of this launch, such as In Context Configuration and Dynamic Local Content, aren’t used by each user on each visit. By downloading the code for these pieces of functionality either automatically post-load or strictly on-demand, unnecessary overhead is reduced and the page is much faster.

Download-on-demand takes at least two forms. Script nodes are used to get JavaScript Libraries after page load. The JS for the Traffic and Local sections are an example of this technique. In other cases, for example the Personal Assistant module’s inbox preview, HTML is retrieved directly via YUI’s Connection utility (which wraps the XMLHttpRequest object).

JSON, (the light-weight data interchange format well suited to Ajax applications and championed by our own Douglas Crockford), is used extensively on the new home page. JSON has many advantages, as Douglas most-recently spoke about at The Ajax Experience conference last week. Of the many advantages of JSON, three were quoted repeatedly in my talks with the home page team. First, it’s a native JS data structure so no extensive parsing is required (like there is when using XML). Second, there is less data to transport compared to XML. And finally, since it is so readable, development and debugging are more pleasant and efficient.

On the CSS side, notice the extensive use of CSS Sprites. Though not new, this technique is one of the best ways to optimize a site. By using sprites instead of individual images, 15 separate home page image calls are combined into a single HTTP request. Every HTTP request has a significant negative effect on performance — therefore reducing requests should always be a priority.

As you can imagine, the home page team has been hard at work. The hard work continues as they continue improving the beta, rolling out enhancements, and expanding to more countries. If you have technical questions, please feel free to leave a comment and I’ll do my best to get answers from the team for a followup in-depth article here.

Thanks,
Nate

  • 18 Comments

    1. Is there any reason SeaMonkey (another Gecko based browser like FF) is not upto scratch to display the preview site?

      Will it ever be allowed in or should I remove references to yahoo from my bookmarks as I wont be able to use it?

      Thanks

    2. Hey Bob,

      I’ve outlined our Graded Browser Support philosophy in this article: http://developer.yahoo.com/yui/articles/gbs/gbs.html. According to the current version of the accompanying GBS Chart, SeaMonkey would be characterized as an “X-grade” browser and would get the full site. An advantage of a tiered system like GBS over a binary system of in-or-out decisions is that derivative and other less-commonly-used browsers are still offered (and generally provide) the full and complete first-class experience.

      Unfortunately, still-evolving limited-release beta sites of this scope are an example of times when this inclusive-by-design approach isn’t the best approach. For various reasons, it’s sometimes necessary to more-narrowly target certain resources or capabilities. I expect this targeting to continue to lessen as the page matures and is more broadly deployed.

      Thanks for a good question, and I hope my answer helps you understand our thinking more thoroughly.

      Thanks,
      Nate

    3. [...] 新的 Yahoo! 首頁 很早以前就看到了, 可是只有在我的 notebook 上, 其他電腦都看不到. 現在算是公開展示. [via here and here] [...]

    4. [...] Peeling Back the Interface of the Yahoo! Home Page Beta explains the extensive use of the Yahoo User Interface library and CSS Tools within Yahoo's public beta of their homepage. Yahoo's UI Library really is competing to gain favour with us Prototype users and Ajax fans. And to be honest, it's good stiff. Yahoo's new homepage is a great testament to that. [...]

    5. [...] Yahoo! letzte Nacht ihre neue Homepage als Beta veröffentlicht. Dass interessante dabei ist, dass diese neue Homepage unter Verwendung der Yahoo User Interface Library und der Yahoo! User Interface Design Pattern entstanden ist, die erst kürzlich erweitert wurde. Man kann somit neben den gegebenen Beispielen in der Dokumentation für die Bibliothek und die Patterns auch direkte Implementierungen als Beispiel ansehen. Auf dem Yahoo! User Interface Blog wird beschrieben, dass nur notwendiger Code geladen wird: “download-on-demand”. Durch die Größe der Bibliothek ist ein solches Vorgehen meiner Meinung nach auch sehr zu empfehlen. Auch sehr interessant ist, dass Yahoo! sehr auf die Verwendung von JSON setzt. JSON ist die leichtgewichtige Alternative für den Datentransfer mit Ajax und bisher nicht ganz so populär wie XML. [...]

    6. [...] New Yahoo! homepage is finally available for public view, which was previously in private testing. Many visual changes are done supported by smart Ajax support. They also added a personal assistant, which groups recent emails, instant messenger and other information together. Also check Yahoo User Interface Blog for further details and patterns behind new home page. Now I hope to see their email interface change with Ajax support soon, which would compete with gmail's. I believe they are far too late to act on that. [...]

    7. Are the problems with browser support (The SeaMonkey issue mentioned above, and other complaints I saw about Safari) related to something which you’re doing only on the homepage, or are they matters which come from parts of the Yahoo! UI Library code/patterns?
      If the latter, do you have an organized listing of which parts of the UI library can be safely assumed to work cross-browser, and which aren’t?

    8. [...] Ya se puede probar la nueva página principal de Yahoo!, explican las novedades en su User Interface blog. [...]

    9. Hey Yaron,

      I should have been clearer, so thanks for the follow-up question. The YUI Library is cross browser and works as designed on our extensive list of A-grade browsers. While some fringe issues may exist, the decision to initially support the home page beta on a subset of browsers is unrelated to the capabilities of the YUI.

      YUI is used across Yahoo! by dozens of our sites and around the world by countless members of our open-source community. They, like you, can trust it to work as designed on all A-grade browsers.

      Thanks,
      Nate

    10. For what it’s worth, I’m in current Firefox, but I’m protected against “web bugs” via the Content Preferences to “load images from the originating website only”. All the graphics loaded from various subdomains of yimg.com do not display. Page looks odd.

      I don’t know how many visitors have also chosen this Firefox preference, or have added it in other browsers via extensions.

    11. The New Yahoo!…

      (large posters appeared overnight to promote the brand new yahoo.com home page) Lots of buzz around the new Yahoo homepage which was made available as a preview today. Most appreciated the interactive elements that let you check your email and loc…

    12. [...] • Patterns behind the Yahoo! home page beta • Peeling back the interface of the Yahoo! home page beta [...]

    13. Hi Nate,

      If the homepage is basically built on the YUI Library, and it does work on most browsers, why specifically limit the browsers that the homepage works on, then?

      Or, maybe more accurately, I’m curious what of the homepage features is both not based on the YUI, and complex enough that you don’t want to run it on all browsers without further internal trials?

    14. [...] Yahoo! User Interface Blog – Peeling Back the Interface of the Yahoo! Home Page Beta [...]

    15. [...] Peeling Back the Interface of the Yahoo! Home Page Beta » Yahoo! User Interface Blog (tags: Tech WebDesign CSS UI JavaScript) [...]

    16. It will be interesting to see if the introduction of a whole main page focusing on Ajax technologies will scale to the level you need it to. Over all I think the design is improved tremendously over the current one. And the little touches added by the yahoo gui library are quite nice.

      It is great to see this kind of work coming out of a company as big as yahoo.

    17. Contenido estático y dinámico…

      Modelo Pre-rendered Hablaba ayer con Alejandro acerca del modelo pre-rendered para aplicaciones web. Este, junto con el de “todo”:http://wiki.freaks-unidos.net/libreria/ debe ser un wiki otro de sus _dogmas para el diseño de software…

    18. For a change someone Big came out with something Bigger, YAHOO for YAHOO. The blogs, interface and inclusive design is a great peel back for virtually all browsers.

      Robin
      The lilrobber