Blogger has relaunched today, with standards-compliant templates, comments with spamblocking, streamlined blog creation, and page-per-post — the kind of things that we've come to expect from a modern blogging tool. The redesign was executed by the arch-geniuses of Stopdesign and Adaptive Path, and it shows. This is a beautiful redesign, both in terms of look-and-feel and approachability for novices. Here're project leader Doug Bowman's notes on the redesign:
The rounded corners seen throughout the Blogger redesign (and in several of the user templates) make use of an expansion of the Sliding Doors technique written for A List Apart last year. The Blogger design is a fixed width, which means most of the modules of the site exist at pre-defined widths. Since the width of each module is known, one image is used for the top-left and top-right corners of a module, and another image is used for the bottom-left and bottom-right corners. The images are called in as background images for two nested elements. Since these two elements contain all the text of the module, they expand infinitely as the module grows in height. Think of it as Sliding Doors turned on their sides.
For modules requiring a border, the two images are modified to include top and bottom borders connecting the two corners. A third element gets nested in the HTML that uses left and right borders which connect top and bottom corners.
This design posed many other challenges when building it out, specifically because we wanted to allow the text and each of the design elements (header, modules) to be as flexible and scalable as possible. The markup construction was tricky and required compromises in several places. As is evident with the rounded corner modules, extra divs were necessary for each background image called in. In CSS3, border images will certainly help eliminate the need for extra elements. And I've been pressuring Tantek to get the CSS Working Group to consider allowing us to set multiple background images on one HTML element.
(via EvHead)
