Implementation Focus: AA | RF's Redesign of the Pulte Homes Website
As a presentation layer architect, graphical alchemist, and Web Standards advocate for Avenue A | Razorfish, Frederic Welterlin's experience and areas of focus include designing, architecting, and programming client-side templates, providing interaction and technical recommendations, and developing standards and processes for best of breed Web development.
Frederic has eleven years experience working as a user interface designer and developer — responsible for conceptual and practical design development for a wide range of business and industry needs.
Tell us a little bit about your site redesign for Pulte Homes.
The new Pulte Homes, Inc. web redesign was launched in May 2008 to help consumers find homes using a rich and interactive map-based search tool, learn about available homes using interactive multimedia, organize and save properties of interest using personalized notebooks, and finally connect with Pulte sales agents directly through a dynamic, context-specific contact form.
The project was scoped as an end-to-end design and implementation effort lasting approximately 18 months. We used the following and YUI components as part of the redesign:
- Dom Collection
- Event Utility
- Element Utility
- Animation Utility
- Carousel Control (by Bill Scott)
- Container Family
- TabView Control
- Slider Control
- AutoComplete Control
- Button Control
- Grids CSS
- YUI Compressor
- Yahoo! Design Patterns Library
You chose YUI for the implementation of the Pulte Homes website. What factors went into that decision? You know and use other libraries on a daily basis (and choose them over YUI for some projects) — why was YUI the right choice in this instance?
- Time to Market: a need to have solid, pre-built functional components that can be quickly customized to match the desired interaction model and "look and feel." The web standards based approach that YUI employs makes it easy to customize components while also addressing common development issues such as browser compatibility, performance and accessibility.
- Robust set of widgets: a desire to use a front end framework that fits with the client approved interaction specification (for example, our UX team's use of the Auto Complete design pattern was accommodated using the YUI AutoComplete component). In the deadline-driven agency environment, integrated development practices help to reduce development time and improve continuity.
- Reliability: a sense of comfort/security in using products that are already proven on Yahoo! web properties. The YUI website, API, and supporting community are all excellent resources in providing help, feedback, and examples.
One aspect of AA|RF implementations of YUI that's striking is the degree to which you customize the look and feel. When you use a component like Container, Slider or TabView, you do a full custom skin. How much effort is it for you to do so? What tips do you have for other designers or developers who are skinning YUI?
Pulte is a great example of the typical clients that hire AA|RF — they do so not only because of our end-to-end service capabilities, but also because of our reputation for design and UX excellence. Since branding and user experience are so important to many of our clients, we place considerable effort into building high quality interfaces.
We recommend designers and developers consider using an integrated approach to web development, especially for large scale implementations involving interdisciplinary teams. For Pulte we used Yahoo! based interaction design patterns, functional components, styling guides and performance tools together to achieve the branding and user experience needs that our clients expect in world class products.
Pulte Homes is an ASP.Net site. What does a .Net developer need to know about YUI before getting started — any special tips and tricks?
In your Pulte implementation, we see a custom
yui.js rollup that contains your selection of YUI components. You implement this instead of drawing the individual files off Yahoo! servers. Is it ever appropriate to use a third-party hosting service (as Yahoo would be in this case) on your customer's sites?
Yes, absolutely. From a performance point of view, the advantages of geo-based file serving, caching, HTTP requests, etc, are compelling reasons to serve YUI from a content delivery network. We have actually referenced the Yahoo! Exceptional Performance site for best practices on how to improve performance. The new Pulte site, being a "Web 2.0" feature rich experience, requires above average bandwidth requirements. We are planning on implementing a number of new performance enhancing tasks over the next several weeks based on information gathered using such tools as YSlow.
What are you most proud of in the Pulte Homes project?
The new home search page is probably the coolest feature- it provides consumers with map-based searching for available homes, coupled with a rich set of filters around the most important criteria that people use to look for homes. This feature is a great mash-up of Microsoft technologies (ASP/.NET), Google technologies (Maps), and Yahoo! technologies (YUI). While the three companies are battling each other for market share, we have found a way to combine some of their best services to help people find homes. I like the symmetry of that…
What's on the horizon for AA|RF as far as the front-end is concerned? Are there emerging technologies coming into the mainstream that you're looking at for some clients? I'm thinking, of course, about things like AIR, Gears, HTML5, Silverlight, etc.
Since joining the Microsoft family last year, we have built a number of Silverlight applications to help bring this emerging technology into the limelight. In addition, we feel that mobile web application development is on the cusp of hitting the mainstream in the United States, especially with the advent of Apple's iPhone and its associated SDK. We are working hard to find ways to bring value to our clients via the mobile channel.
We have always put business and user needs ahead of technology — and will continue to do so. All the new technologies that are emerging offer a lot of potential in terms of solving problems more effectively and elegantly under certain contexts. However, the reality is that many of our clients are yet to fully harness the power of the Web 2.0 technologies that have emerged in the last few years. They are looking for us to do that in the near-term before they can look ahead.