Congratulations to Dan Cederholm and team on launching a brand new Inc.com. The site sports a clean design, valid XHTML 1.0 Transitional markup, and a nice dosage of the CSS background-image property to pull in decorative icons and bullets, keeping most of them out of the markup. It also uses Dan’s mini-tab effect for main navigation, which he and I must have independently devised around the same time, since Adaptive Path uses something very similar.
Of particular note, once again, is Dan’s report that the Inc.com home page file size dropped from 52KB to 24KB, down by 54%. Almost the exact same percentage as the Adaptive Path and Wired News redesigns. See a viable trend emerging here?
Chalk up another huge media site (17+ years and 11,000 pages of content) which successfully made the transition to XHTML for markup and CSS for tableless layout.
Posted at 3:53pm in CSS, Technology, Web
18 comments (Comments closed)
inc.com forgot to set body background-color to #fff
huphtur: Please double-check before you post a public comment, especially if you’re pointing out errors or bugs. Unless Dan is lightning fast and caught it before I checked, I already see that body background color is set to white. In fact, it’s in the very first rule of /css/inc.css.
Mr Dan must have fixed it, cuz when I was looking at it, it wasnt set to white.
Heh heh. Indeed I was lightning fast :) huphtur: thanks for pointing out. I read your comment as I was leaving the office and made a quick fix. And thanks to Doug for the write up and kind words.
Great news keeps pouring in. Adaptive Path, Inc, and all of the sites Zeldman mentions are moving in the right direction. It is notable that it is the world’s best web designers using Standards in their projects, not the companies themselves requesting it. This is the way it should be. By working from the inside with blogs like this one, Dan’s, Zeldman’s, and a hundred others I haven’t mentioned, we are mobilizing a whole industry and changing the way the web is built. Bravo.
The number of great looking CSS based sites seems to have grown hugely over the last couple of months or so. So much so that when I showed a client a few of the sites that I found inspirational, I noticed that they were all based on valid CSS and (X)HTML and none of them had that sterotypical “CSS look”
It may be frustrating that we are limited to CSS that works in IE6 for Windows but I feel that we will continue to see people working around these limitations,to produce innovative and inspirational sites for years to come.
It’s nice, I like it, but there appears to be one problem in Opera 7/Win2K - the main navigation, perhaps the mini-tabs Doug was referring to do not seem to work - they aren’t displaying inline and are overlapping content. Other than that, I couldn’t find anything else wrong with it.
Looks like someone didn’t test in Opera 7…
I just downloaded Opera 7 to check, and you’re right. But the almost identical tabs work on his site… Odd. (I should also mention that Opera is quite nice. Not gonna replace Firebird for me quite yet, but nice.)
Thanks for finding, Luke. Doug pointed out that when absolutely positioning a styled, unordered list, Opera7 needs a width specified — otherwise it wraps. It also seems that Opera7 ignores white-space: nowrap; when added to the ul rules. Right now I’m stuck though, as specifying a pixel width breaks just about every other browser due to the fact that the list uses text hyperlinks. I’m still searching for a workaround…
Inspired by all of these new xhtml/css sites, I’ve redesigned one existing site and done a new one using xhtml and css. I love it, and I can do a lot more than I could before, but what about all of those people running old versions of IE?
I have a 2000 machine that came with IE 5. It doesn’t render any of my CSS. Of course, the magic is that the site is still usable, but if I had used tables it would be usable and look good too. The user wouldn’t even know the difference.
I have friends that work for a massive, unnamed financial company. They used to have something to do with stagecoaches. Anyway, their standard desktop runs Windows95 with some old version of IE. Of course, my designs look awful for these people.
Should I worry about people with old browsers? Should I sit around believing that the HR person looking at my portfolio will understand? I think it’s more likely the HR person doesn’t know or care about web standards and will just assume my sites are garbage.
What should I do?
Fred: If your designs look “awful” in IE5/Win, you absolutely should be worried about them. IE5/Win is still used by too many people to ignore and write off as a browser which doesn’t matter (at least for now, and probably for the next couple of years.) It’s certainly an old browser with flawed CSS support. But truth-be-told, it supports most of the CSS1 specification decently enough, aside from a few major hiccups with the box model and font-size keywords.
Those hiccups are a pain to deal with, but very possible to work around using Tantek’s box model hack, or a variation documented in the CSS-discuss wiki. Using one of those methods, it’s possible to get almost every design rendering as close as possible in IE5/Win as every other modern browser. Again, yes, it’s a pain, but a necessary one to address.
For proof, look at Adaptive Path or this site in IE5/Win and compare. Shouldn’t be much difference between Mozilla, Opera, or IE6/Win.
Doug: I just went to my 2000 machine to make a screenshot because Adaptive Path also looked pretty bad in it.
This time, it came up just fine, but when I went to one of the other sections it apparently stopped using the css. I hit the back button to get to the main page and it looked bad too.
I then went to my site that wasn’t working, and it worked fine, even when I went to my other pages and back.
This is IE 5.003315.1000 and is what came with 2000, I believe.
When it was working, your site looked basically the same as it does under IE6. My site was mostly the same, but my fonts and some margins were a little off.
About main navigation in Opera7.
Maybe just hide from Opera this property: float: left; (in #nav a:link, #nav a:visited)?
Sorry my poor english. :)
PS. I viewed inc.com/home/ in IE6, Mozilla1.4/Firebird0.6, Opera7.11 without {float: left;} for all.
Mash: many thanks, hiding float: left did indeed work. In the end I used a combination of the *7 hack and Box Model Hack to get it to work in IE5.0 as well. I’ve written up an attempt at an explanation here.
Maybe you could use Tantek’s highpass filter or inline version to have I5/Win apply the default “float: left” rule and then have CSS2-compliant browsers apply the “float: none” rule.
Your stats on how many Opera visitors you get are likely off. In Opera, which I primarily use, you can set what browser Opera Identifies itself as, and the Default setting seems to be MSIE 6.0. This is set on the Network tab of the preferences dialog. This is a very useful setting, because many sites that claim to be only MSIE will at least partially work in Opera.
Your site looks excellent, btw
Comments no longer open for this entry.