13 February 2005
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 at 12:18 AM
Trackback Pings
TrackBack URL for this entry:
http://www.joesapt.net/mt/mt-tb.fcgi/3
Comments
Joe writes:
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.
# 17 February 2005, 07:37 AM -05:00
Joe D'Andrea has produced an informative write-up on the new home page he and Vincent Murphy developed for AT&T. It's...
06:57 AM, 20 February 2005
Peter J.
of Petroglyphs
writes:
<!--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?
# 20 February 2005, 01:06 PM -05:00
Boris
of HASH(0xa3b1e60)
writes:
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 ;)
# 20 February 2005, 08:43 PM -05:00
Joe writes:
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.)
# 21 February 2005, 12:26 AM -05:00
Peter J.
of Petroglyphs
writes:
# 21 February 2005, 02:49 AM -05:00
Joe writes:
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.
# 21 February 2005, 03:40 PM -05:00
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...
04:46 PM, 23 February 2005
Ron
of Ron Adams | eclip5e
writes:
If you want the entire page to be size dynamically, try sizing even the images with em.
http://www.htmldog.com/articles/elasticdesign/demo/
# 2 March 2005, 08:42 PM -05:00
Joe writes:
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?
# 3 March 2005, 12:21 AM -05:00
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.
08:28 PM, 20 April 2005