« Hold That Thought | Main | So Many Plugins, So Little Time »

www.att.com home page redux

The AT&T home page adopted a brandy-new look this weekend. It's still valid XHTML/CSS, just as before. This time around we've revisited the print media style plus added handheld media style. (Finally, I can view the page on my PDA without scrolling horizontally!)

UPDATE: www.att.com has begun to officially change hands, starting with the home page. Read all about it.

The new design (which I can't take credit for - I'm only guilty as charged for the XHTML, CSS and JavaScript) sports a fixed-size feature that's flanked by cells of text along the right/bottom sides and lower-right corner. The challenge posed to myself and partner-in-crime Vincent Murphy: Create a page that's true to the comp yet built with standards-friendly, accessible, and semantically meaningful XHTML, CSS and JavaScript behind the scenes.

All in all, I'm quite pleased with how it turned out. There will be the inevitable touch-ups (and occasional refactorings) but it is extremely close to the comp, if not spot-on:

  • In the spirit of accessibility we kept all the text scalable. Alas, this breaks the layout up a bit when increasing the font size <!>. I'm hopeful we'll find a way to tackle the scaling more gracefully, probably using a variation of Pixy's 3-column layout technique (which we're already using across the rest of the site).

  • I expect we'll do something with the three promos to the right of the feature (read: "make the text a bit bigger and relatively easier to read").

  • While I didn't get a round tuit this time, I'm still quite eager to completely divorce the last bits of JavaScript from the XHTML. (Why just separate content and presentation, right? Get page behaviors in on the act too!) We already do this elsewhere on the site, for instance with the "highlight" class as applied to our Access Keys table - no need for onhover in the markup.

  • Worthy of extra-special mention are GreyWyvern's min-height hack and Dan Cederholm's Mountaintop Corners technique; both are featured rather prominently.

  • There's lots more in the CSS and JavaScript from the likes of Holly Bergevin, Caio Chassot, probably a few others I'm not recalling at the moment. (Wait - need I mention Eric Meyer and the css-discuss list where I happily lurk on a semi-daily basis? But of course!)

  • While expected appearances by RSS and sIFR 2.0 RC3 didn't make the cut ("awwww ..."), I'm sure there will be plenty of opportunity to finish tackling both of 'em going forward ("... yay!").

Every time I write a new kind of standards-based page, it winds up being a learning experience well worth the time and effort invested, many times over, no matter what hurdles I encounter along the way. With that, I offer stupendously huge thanks to everyone who had a hand - directly, indirectly or even unknowingly - in making this latest revision possible.

Posted by Joe on 13 February 2005 at 00:18 |

TrackBack

TrackBack URL for this entry:
http://www.joesapt.net/mt/mt-tb.cgi/3

Comments

Sure enough, a combination of Pixy’s and Dan’s techniques worked wonders for the lower-half of the home page. Try it now at different text sizes. Still no tables, print and handheld media are unaffected, plus the XHTML and CSS files actually got smaller as a result, especially the XHTML (who’da thunk it?).

Next on the list to tackle: Margin, padding and size of the three text promotions at top-right, revisiting sIFR <!!!> and scaling the main feature.

Posted by: Joe D'Andrea | 17 February 2005 at 07:37

» Two Kinds of Web Developers: Those with Clue… from Web Standards Project BUZZ
Joe D'Andrea has produced an informative write-up on the new home page he and Vincent Murphy developed for AT&T. It's... [Read More]

Tracked on 20 February 2005 at 06:57

Interesting writeup for a nice redesign. There’s one thing of interest that you haven’t noted, though. Around the navigation links you’ve included:

<!--googleoff: index-->

and

<!--googleon: index-->

I’ve seen these in the past but no one seems to know much about them. A very few bloggers have posted about it in the last year or so, all wondering if it actually does anything: care to comment?

Posted by: Peter J. | 20 February 2005 at 13:06

The page is fine - but still served as text/html, instead of application/xhtml+xml … where is the point to create a valid XHTML site without using the corrent MIME type?

Here is a nice and simple PHP-Code to check wether the browser supports real XML/XHTML Documents or not:

function ua_accepts_xhtml() {

    $xhtml = FALSE;
    $check_pattern = '|application/xhtml\+xml(?!\s*;\s*q=0)|';

    if (($_SERVER['SERVER_PROTOCOL'] == 'HTTP/1.1') and
        isset($_SERVER['HTTP_ACCEPT']) and
        preg_match($check_pattern, $_SERVER['HTTP_ACCEPT'])) {
            $xhtml = TRUE;
    }

    if(isset($_SERVER['HTTP_USER_AGENT'])) {
        if(preg_match("|rv\:0.9|", $_SERVER['HTTP_USER_AGENT'])) {
            $xhtml = FALSE;
        }
    }
    return $xhtml;
}

$content_type   = ua_accepts_xhtml() ? 'application/xhtml+xml' : 'text/html';
header('Content-Type: ' . $content_type . ';charset=utf-8');
header('Vary: Accept, User-Agent');
header('Cache-Control: private');

Hope you find it useful. For IEs, it serves text/html, for other browers (like Mozilla, Firefox, Opera etc.) it serves xhtml+xml ;)

Posted by: Boris | 20 February 2005 at 20:43

Peter: Here’s the straight dope. Those directives are not used by Google proper but rather our own slice-o-Google*, a mighty spiffy search appliance. They’re used to keep common things like the global header, navigation and footer out of our search index.

(* Astute readers examining the search markup will notice it isn’t yet XHTML-i-fied! Hang in there, it’s in queue …)

Boris: Good eye. Truth be told, that’s something we’ve given some serious thought to. All things considered, we’ve decided to stick with text/html for now. There are several ducks we’d like to get in a row first, before diving into application/xhtml+xml. All in good time.

Speaking of diving into things, for those who may be wondering “xhtml+xml - wha?” I respectfully divert your attention toward an article by Mark Pilgrim on the subject of XHTML and MIME Types. (It even touches upon some of the aforementioned ducks.)

Posted by: Joe D'Andrea | 21 February 2005 at 00:26

Thanks for solving the mystery of the magic comments, Joe!

Posted by: Peter J. | 21 February 2005 at 02:49

This just in from the “random subtleties” department …

  • Windows: The text “Networking Solutions” and “Order Online” appears indented ever so slightly with respect to the text below it. I say/write “appears” because it depends on the text size. Try increasing one above normal, then decreasing one below normal. Go on - it’s fun for the whole family!
  • Internet Explorer/Windows: The capital W in “Wholesale” and “Wireless” is missing a teensy bit off the left side. I thought we already tackled that one, but I’m obviously mistaken.
  • Firefox/Windows: There was an extra pixel of space between the top and bottom halves … until this morning. The solution? A well-placed vertical-align: bottom; eliminated the previous ill-conceived workaround. Ahh, much better.

Posted by: Joe D'Andrea | 21 February 2005 at 15:40

» AT&T Redesign case study from Six Apart Professional Network
Joe D'Andrea just posted a useful writeup of the process of creating a new standards-based design for AT&T. There's an extensive list of the techniques and tools used as well, complete with links if you'd like to implement similar tricks... [Read More]

Tracked on 23 February 2005 at 16:46

If you want the entire page to be size dynamically, try sizing even the images with em.

http://www.htmldog.com/articles/elasticdesign/demo/

Posted by: Ron | 2 March 2005 at 20:42

Ron: Thanks for sharing the link! I fondly recall reading Patrick’s ALA article because that is where we got the idea to pursue using ems for our font sizes. We haven’t looked back since.

… all the more reason why I’m surprised we managed to overlook using a percentage for the initial font size, as Patrick recommends with good reason. This is being remedied now, along with some subtle margin/padding adjustments (see first comment in this post).

As for using ems to scale the feature, I must take into consideration the creative requirements: JPEG or Flash, each with a stylized border to match (ay, there’s the rub - a gradient-fade or oversized image is right out). We even contemplated separating the border from the creative, making it part of the CSS! (We’re ruthless.) Alas, it didn’t work out.

With that, I think we’d have to go with the Elastic Image method. Except … try that method out in Safari. The image remains the same size and gets tiled. (Nooo!) Perhaps that can be overcome?

Posted by: Joe D'Andrea | 3 March 2005 at 00:21

» AT&T joins the cool kids group from think before you type
AT&T has recently released the redesign of their home page. They join the pantheon of the elite as the latest company to embrace web standards in the redesign of their web site. [Read More]

Tracked on 20 April 2005 at 20:28