September 29, 2004 | View Comments (71) | Category: CSS Redesigns
Summary: Yahoo moves from tables to CSS. Is it a good thing and could it be better?
As sad as it sounds, I have been waiting for this day a very long time. Every once in a while a large site will redesign using CSS and it will come into the Vault submissions and I always think that it's cool to see another big one go to CSS, but in the back of mind I have always waited for the biggest one to make a move. Now it has happened. Yahoo is moving to CSS.
I understand that the redesign doesn't work in all browsers and some people receive a message telling them how their browser is not yet supported (very 1996-like). However, keep in mind that this site is viewed over 200 million times a day and when making a huge jump like this you can't do so without taking precautions. True your stats might only show that 1% of your viewers are using Netscape 4.7, but that 1% equals 2 million readers who will quickly move to another site taking ad revenue and shpping money with them.
Another futile complaint is to focus on how cluttered the page is and in the past I would have been all over this issue. However, I have come to understand that the Yahoo frontpage is one of the best design portal pages you will come across and simply works for the everyday user. When designing any site we try to focus on the audience, but what would you do if your audience was “everyone” and your content was “everything”?
What this redesign shows me is that Yahoo is indeed a forward thinking company and that they have no problems with using the best technologies for the job. Once a site like Yahoo makes a move then really there should be nothing holding back other big name sites like Amazon and eBay.
Old Design
New Design
A case study by the team behind this redesign would be the case study to end all case studies, but unfortunately I don't see anything like that coming out. The best we can do is analyze the site ourselves in comparison to the old one and provide our own case study.
Last year I spoke about How to sell standards to a small client and the gist of the entry was that you shouldn't have to go into details about developing a standards-based site since the majority of the client will only see what is on the outside of the hood. For larger clients though, if you are doing a standards based design that might take a bit longer to develop than with tables (don't know why it would) then you may have to do more explaining to justify your decision. There are a great deal of resources out there to accomplish this, but nothing speaks more volume than to tell them the largest site on the web does it. That might be all you need.
Looking at the code though you can see plenty of mistakes, but let's give credit to where it's due. They are moving forward so give them time, but if you are going to try you would like to see them do the basic things right.
When I first viewed the source I wasn't sure if I had mistakenly opened the source to the latest Linux kernel or not. There is so much JavaScript at work here that one has to think that a large portion of it can be taken out or at the very least refactored.
The CSS is all done internally and I would like to know why since the amount of styles applied is very large. My only guess is that since the homepage is the only one that has been restyled then doing an external page doesn't make as much since because all the Yahoo! properties have different layouts and styles. However, that is still a stretch because I am more than positive every page in the Yahoo site will share some common elements (eg. link styles).
There are a lot of different names being used in the CSS for the site and none of them make any sense or relate to the section they are styling. I can only imagine the time it would take for a new coder to come in and try to make some basic changes to the site. Instead of using names that we are accustomed to seeing in our code such as container or leftCol we see v and fp. It's quite possible they were trying to shave off some bytes in the code, but I think they added more chances of a headache when change time comes around.
This piece of code is probably the most confusing for me:
<div class=ol>
1. <a href=s/214053>My Boo</a><br>
2. <a href=s/214054>Lean Back</a>
</div>
I mentioned earlier how we should be patient with such a large undertaking and the code will be no where near perfect, but this is one case where just a couple more minutes of effort will go a long way. Let's change it a bit.
<ol class="top_songs">
<li><a href="s/214053">My Boo</a></li>
<li><a href="s/214054">Lean Back</a></li>
</ol>
What this does is keep the same styling, but moves us closer to semantics and should make things easier down the road. In fact the majority of the code on the page should be put inside of lists instead of divs. That alone should cut the number of divs in half.
Other than that (if you ignore the occassional small table) just adding “” inside of the tags will be another major step towards XHTML compliance. Even though that isn't the most important issue to tackle in a major redesign you should at least get the little compliant errors fixed. And with that the code already looks much better in CSS than in tables.
When it comes to the frontpage design I think the Yahoo team did a great job of organizing the information. Insane as it sounds, you have to look at how much information they are trying to present at once and imagine how much differently you would arrange all of it. I don't think I could do much better with that amount of content. Ideally you would like to see less of it, but organizational politics usually win over in the end.
By no means is the design perfect, but I think it is well done with what they had to work with. A drastic redesign would turn off many of their current users who might decide it's time to abandon ship. A great example of this is eBay where we went from the old homepage to a new one and back to the old one again (what up with the scrolling marquee???!!!). Users don't like drastic changes because some interfaces take time to get accustomed to and relearning a new one can be a pain. Imagine trying to learn to type on a keyboard where the keys were all rearranged.
I think this is a case of where a little change will go a long way and the change can be done in the CSS. When creating a site with this many different sections the wording/headers take a backseat to the visual cues of the design. I will try my best to show you an example instead of rambling further.
This is a small section of the page where we see three boxes using the same color scheme. Visually if you look at the page you will see that the whole left side has boxes like this with the exception of the ad box. What this means is that if I don't memorize the layout of the page I am left to read each box heading to find what I am looking for. Why not add another cue that will help me find where I need to go faster?
Now we have visual cues where I can begin to associate the Entertainment section with blue, the Small Business section with orange, and the Featured Services section with green. The actual implementation doesn't have to be the dramatic, but it should show how a bit more color can go a long way.
Let's look at it on a bigger scale.
Now maybe my choice of colors wasn't the best for the different sections, but you get the idea. A main point of the redesign was to bring more focus to the search box, but the redesign doesn't do that. Change the color and it definitely stands out more.
What all this color talk doesn't take into effect is internationalization and how different cultures look at colors. Obviously this would make things more difficult and I am sure is part of the reason Yahoo is sticking with a small palette of colors.
Color also helps with the branding of the site. When I think of Yahoo I think of the bright red logo. That red doesn't appear anywhere else on the page. I think a great place would be to use on hover links instead of using a different shade of blue as they currently do now. The red is powerful and should be sprinkled a bit more around the page. Again though red means different things to different people.
Not surprisingly, I could do with some color around this site :-).
I hope that we do not get caught up in the fact that the site doesn't validate and has other flaws which would prevent it from being a shining example of great CSS design, but instead focus on how the most powerful of all sites is making a move that we have been doing with our sites over the last couple of years. Many of us will forget that they are using a CMS that we will never touch and I am sure is a little more complicated than our MT and WordPress installations. I'm not saying that shutting out certain browsers is okay, but the fact that they are moving forward is a great thing and we should do our best in helping them with the move.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/351
WOW. Great writeup Paul. Very impressive. This is going on my site as an entry.
I am digging the new design.
Whats funny, is that I am taking a Programming Concepts class in Indianapolis and the computer I was using was actually pulling up the beta as the HOMEPAGE, whereas I would get home and get the OLD design. So I guess I was in that bunch of "test users" for yahoo. But I was digging it to be honest.
Bryan (http://www.juicedthoughts.com)
I was thinking along the same lines Mike, but didn't wish to put my foot in my mouth. Only reason I said that the majority of the site should be in lists is because that is what they are using...lists. Not many paragraphs or any other type of content. Just lists of items.
I have had trouble styling lists in the past so it's no surprise if they found working with divs to be a bit easier.
Bryan: thanks. It took a while to write :-)
Scrivs (http://9rules.com/)
Nice analysis. It's a bit like when Microsoft redesigned and recoded their frontpage a while back. You ask yourself why they didn't make it really good while they were at it.
You mention Yahoo's faked ordered lists, and that is a perfect example of what to me looks like developers not really knowing their stuff. Maybe I'm wrong and there is a good reason for not using real lists. I can't think of one though.
But anyway, nice to see things moving forward.
Roger Johansson (http://www.456bereastreet.com)
Fascinating write up, and I totally agree with your suggestion on colour.
As for Yahoo moving to CSS I think, even if it isn't a 100% compliant move, the fact that they even did it speaks volumes. As you say I would love to see a Business Case for this, how much do they/will they save in bandwidth? What constraints did they find (lists I'm guessing)? What advantages does CSS bring? Would be fascinating to see the financials behind this.
Gordon (http://www.gordonmclean.co.uk/)
You asked about why they did inline styles...
It's the work in progress, so I can only guess, but I have a gut feeling is that this is faster. Crazy as it sounds, I belive that they will finally trim down the styles, and leave them inline.
Why? Because they save on the HTTP requests. On the highly frequented site, having 2-3 HTTP requests less (especially in the HEAD part) can make an amazing difference in the speed of content showing up. This is best seen on modem connections.
I have experienced that many times (I have 33.6k modem at home) and you have to see it to believe.
That's why I'm strongly against the practice of having multitude of CSS @imports - they are so slow for fast-paced sites :(.
Aleksandar (http://www.aplus.co.yu/)
Very interesting writeup. I concur with your statements about the general page melding together with similarly colored headers. I think your color idea is centralized around organizing similar information similarly, which is a very important concept when designing in web or publishing texts. They are definately bold colors you chose - if they were taken down to a more muted scheme like the original blue (which I think is why they went with it) it would appear more passive and less like a preschool classroom. It was just to illustrate your point though, so great examples and a great writeup! It is indeed refreshing to see a major player move forward in terms of accessibility and speed. Specifically, I wish (as you mentioned) Amazon and E-Bay would follow suit.
Peter
Nice writeup Scrivs. It would be interesting to check back on the page in 3-6 months to see what further changes in the code and design have occurred.
I agree with you point about the use of color - perhaps there was a concern that this would be a problem for people with any form of color blindness (though I'm sure there are ways to make color differentiation work for the majority of users).
One thing I noticed about the design is that the "Launch Music" box looks so different to the others that it looks more like an ad than a functional part of the site. I wonder if anyone else found the same?
Christian Watson (http://www.smileycat.com/maiow/)
This is what I get when I go to that page using Safari:
We would love for you to participate in the Front Page beta.At this time, we do not have the new page programmed for your specific browser. We are working to have the page available to your browser in the coming week.
Please bookmark this page and check back next week to start using the new Yahoo! Front Page.
RM
Yeah, I get the same warning when I use safari -- I find that common with sites who use javascript to block out certain browsers; they either don't think about letting safari in, or they don't know about safari enough to let it in. Aside form it's min-height and a random amount of bugs, safari is a great browser... they'll get that down I'm sure, though.
Great write-up Scrivs -- I feel the same way. A few years ago I would have harped on them for not making semantic code, poor CSS writing, and lack of validation. While I feel they can and should improve, the fact that they are going CSS alone TABLELESS and with a doctype for god's sake is enough to make me glow. I hope they have enough experienced people to improve this... god knows I'd offer my services for free just to get that think up spanking new and pretty for the cause.
On another note, I never really have any problems with lists, with the exception of IE 5.5 and older browsers, which in that case is usually for horizontal lists with a defined block width and a left float, usually the inline works fine for me. http://css.maxdesign.com.au/listamatic/ is an excellent example of that... but maybe I'm missing something you guys have seen or I've ignored?
Brady J. Frey (http://www.dotfive.com)
Saving HTTP request by not linking CSS file? Interesting. I'd suggest to save those requests by reducing number of images used. You may save one request for CSS file, but you are left with same CSS
going back to you with every page view - and that's a lot. Normally CSS get cached and only 304 Not modified should go back to browser. So evene if there is only one page it is still worth to place CSS separately - because content of the front page changes very often, styling does not. So separating those you can have real savings.
What else. They could get rid of a couple ramaining tables and they definitely need some cure for the heavy case of classitis.
There can be impressive savings in bandwidth too.
Rimantas (http://rimantas.com/)
In terms of the colour, I wonder if the importance/investment in providing My Yahoo customization has something to do with it? If you're going to provide a complicated colour scheme (though visually more helpful in terms of cues to the reader) on one design that's one thing - but to do that and simultaneously offer 20-30 alternative pick-able colour schemes seems like a much more difficult task.
I suppose they have good data on how many people have selected alternative colour schemes and that drove their decisionmaking on this, but I doubt we'll ever know for sure.
Michael (http://www.mikel.org/)
At a guess I would say that the phony ordered lists have to do with the lack of control over spacing between the numbers and the list items.A small thing, certainly, but it drives some designers crazy.
Lists are one of those bits of markup that are great in theory but a bear to work with in practice.
That's easy enough to deal with:
ol {
margin-left: 1em;
padding: 0;
}
That usually makes the list markers line up with paragraph text (assuming, of course, that paragraphs and other text don't have a left margin set themselves).
Vinnie Garcia (http://blog.vinniegarcia.com)
First Microsoft, now Yahoo. Who will be next on the css train?
Nice write up.
Eddie Sowden (http://e26.co.uk/blog)
One can only guess the amount of bandwidth saved here. The choice for sites with this much traffic should be obvious.
The Yahoo switch indicates people are starting to catch on. The markup implies saving bandwidth costs was the main reason vo Yahoo's move. It would be nice if accessibility and forward compatibility would be reason enough.
Anyway, this is good news, surely many more will follow!
Wim (http://pixelpret.nl)
Nice writeup and well presented.
----
I agree with you generally about the use of color, however, I think the reasoning at Yahoo was more along the lines of color psychology and general meaning.
Generally speaking, a pale blue such as is used on their interface is associated with calm and happiness. In the chaotic informational overdrive Yahoo interface, an unrussled and emotionally rational look is important.
Furthermore, people tend to think of big, vast, universal type things with pale blue. Again, think of the sky. Yahoo is, a big, vast, universal type thing.
Finally, I think breaking down categories into color designations then assigns an unwanted (as far as Yahoo is concerned) level of importance of one category over another.
Mark (http://www.lightpierce.com/ltshdw)
Exactly Rimantas. Inline styling has probably more to do with Beta work at this time than anything else.
Also, this isn't inline styling. It's an inline stylesheet, which is _very_ different from inline styling (e.g. style="bla:meh;").
The lists I'm not too worried about. It's most likely a design thing, but as it saves bandwidth too I think it's actually a good thing (for them).
AkaXakA (http://akaxaka.gameover.com)
Mark: That could very well be what happened and it would be interesting to know if they did that much research in color psychology (I know its not a lot really). Blue might be the most universal color for all their properties and why it was the safe choice to go with. Same can be said of Microsoft's and IBM's website.
And its true that color may assign an unwanted level of importance on a category, but doesn't placing on box above another do the same thing as well?
Scrivs (http://9rules.com/)
Alexander: very interesting, to say the least.
Looking at the code, so much seriously confuses me - a lot of the things you already mentioned. But again, we're going to have to be absolutely certain, that when the biggest site on the internet does something, it's going to do it along with some of the best folks in the field, and they're going to be looking at shaving every single bit and byte off that homepage.
In general, it looks (the code) like everything was made by some bizarre CMS, and no human touch went into this. Again, the class and ID names as an example:
#st,#n,.ps,h2,#wd,#mo,#cb,#x,#mt cite,#v .h,#w,#w #ca,#mt,#v,#m{position:relative}
Still, I cant stop thinking: Hey, I could've done that better!
PS
If you want any more proof how much big sites like this are keen to save on bandwidth, View Source on http://www.microsoft.com/. Could be funny if it called a php error in line 1 :-)
Brian Andersen (http://www.brian-andersen.dk)
You're right about the colours Scrivs. They would indeed give good visual cues, making the website seem less cluttered.
However, if you keep visitors moving their eyes around the site, they may well see more adverts.
AkaXakA (http://akaxaka.gameover.com)
I took the source code of both homepages and put them into notepad. Saved each one individually and then compared.
Old Yahoo - 37 kb (give or take some bytes)
New Yahoo - 31.6 kb (give or take some bytes)
So from that method,
Not bad, but not overly significant either.
I thought it would have been more.
Bryan (http://www.juicedthoughts.com)
Hmmm, that's a shame... I would imagine cleaning up some of the code to be more semantic, which could potentially drop some of the abundant classes and divs would prove to be helpful? Some of that CSS could probably be cleaned through as well.
Brady J. Frey (http://www.dotfive.com)
How long before one of us CSS gurus does the yahoo re-design "properly", just to show how it SHOULD be done :)
I'd do it, if I had any extra time
Mike
Good writeup- but I must say yahoo has done a horid job so far.
HTML Errors: 223
The css validates, but it is horrid.
in 2 days, how could one ever remember what #v or where #v #v4.h appears in the document?
If this beta goes live, I can only imagine the negative effect its going to have.
Brian Cummiskey (http://www.hondaswap.com)
I have to agree with Brian Cummiskey, it would have been better to have converted this site in a standards complient browser and then tweeked it for IE instead of the other way around. as it stands now you get the "Your browser doesn't support this site" message in Opera7, Firefox1.0 and NN7.2
William Haggerty (http://vwh.ca)
The reason for the inline styles is exactly as somebody above said - the page will display faster by not making another http request. If you look at some of the larger sites (Google for example) you'll see that the styles are inline for this very reason.
Many CSS gurus will balk at this because they've not worked in an environment where every single request and character matters.
Yoks
I don't get it -- there are FONT tags everywhere. What's the point of doing it this way?
Does anyone know who's doing it, i.e. is there a company, design house, consultancy involved?
hostile17
I'm willing to bet that the things CSS fanatics frown upon in this redesign (one-character classnames, non-semantic lists etc) are bandwidth reducers.
Y!'s frontpage gets served what? a million times per day, more? Stripping a single character from a single classname equals 1MB saved bandwidth per day. Counting all the characters stripped, the amount of classnames etc it ends up being a visible, yearly saving on the bandwidth bill.
As for #v being harder to remember than #verticalDivider, it sure is, but what we see is the machine readable version. It isn't farfetched to suggest that the developers have a nicely commented, nicely named, and nicely layed out "raw" source version of the site, that is run through some macros or whatever before being published. Macros that could replace "#verticalDivider" with "#v", removing quotes around attributes and what have you.
Jakob S (http://mentalized.net)
i think font-tags are a singn for using a big ugly cms.
MAC OSX / SAFARI 1:
We would love for you to participate in the Front Page beta.
At this time, we do not have the new page programmed for your specific browser. We are working to have the page available to your browser in the coming week.
Please bookmark this page and check back next week to start using the new Yahoo! Front Page.
harhar
roman (http://www.stickerlove.com)
Many CSS gurus will balk at this because they've not worked in an environment where every single request and character matters.
Ok, so let's count. Current embeded (not inline) CSS at Y! is about 6KB. That means 6KB traveling at each request. Front page changes quite often CSS (once it has settled down) does not.
6KB extra each time. Multiply by requests.
Separate CSS can be cached, and that's it.
Now the "larger sites (Google for example)":
google.com embeded CSS is merely ~100 bytes total - and that's a good point to embed it.
Why?
Because HTTP request for external CSS and server response in case file has not changed and browser can use disk cache version totals to ~500 bytes (may vary depending on browser, configuration etc. but 0.5KB is a good estimate).
That means that if you have less than a 0.5KB CSS
it makes sense to embed it in page. But if you are going to include same CSS in many pages you may run into maintanence issue (unless it is included automatically from a single source).
However with Y! story is different. It is not 100 or 200 bytes of CSS code. Yahoo has 6KB so moving it out they could save 5.5KB per request.
Surely, current markup can be optimized a lot, but that is another story.
Rimantas (http://rimantas.com/)
A good look at the output Scrivs, and some insightful comments too. I am always hesitant to be too critical of these kind of efforts, particularly with a site the complexity of Yahoo!.
Often the designers and developers involved will be fully aware of the shortcomings, but have been restricted in what they can reasonably achieve given the timeframes, or constraints of existing systems, or budget and so on.
It is still absolutely valid to point out areas that need improvement, but we should not assume that the Yahoo! people don't already know.
It will be interesting to watch the changes between beta and live, and the ongoing adjustments.
Mathew (http://www.thepattos.com)
Yes Jason, just like the old one :)
Also, worth mentioning is that since all the css is inline, it'll be gzipped. That's trickier to do in an external file (and keep all browsers happy).
AkaXakA (http://akaxaka.gameover.com)
It's on. Less bickering.
Who will step up to the plate and make a yahoo css redesign that looks exactly the same, with under 30kb? Inline styles obviously a must :)
Could be fun to do a 100% bandwidth slimming contest - gogo version 2.
Brian Andersen (http://www.brian-andersen.dk)
looks like they switched back to the old yahoo. and the /beta is gone as well.
huphtur (http://www.huphtur.nl/)
Jamsy and Huphtur,
Perhaps you should check out the big whompin animated attention-geeting purple ad on the front page of Yahoo which reads "Come check out the new Yahoo! Front Page"
Mark (http://www.lightpierce.com/ltshdw)
Might need to refresh your cache, or restart your program. Firefox was rendering the original yahoo when I typed in the beta for a minute, even though I know i'd been there before... after that, saw it again. Looks like they updated the content too!
Brady J. Frey (http://www.dotfive.com)
the link buttons at the top that change color to the search preference is rather nice as well, I forgot to mention...
Brady J. Frey (http://www.dotfive.com)
mark: sorry bud. no matter what I try and no matter with what browser. it keeps showing old site. and no bigass purple ad. could it be my isp?
huphtur (http://www.huphtur.nl/)
Huphtur -
I will concede to you that it doesn't appear in Firefox or Opera. but it's really kinda hard to miss in IE.
Mark (http://www.lightpierce.com/ltshdw)
Shows for me every single time in Firefox. I think they set a cookie on the machine. You might have to disable it or erase it. In any case you always have my screenshot to look at :-)
Scrivs (http://9rules.com/)
I get a link just under the main header, that says:
Try out the new Yahoo! Front Page -- millions spoke, we listened.
Takes me here - http://www.yahoo.com/upgrade
Angad (http://apsk121.quadranet.org/new/)
LOL they even serve the message "We would love for you to participate in the Front Page beta... etc" to the Lynx text browser which cant use css anyway!
See screenshot on my blog
Neerav (http://www.bhatt.id.au/blog/)
Awesome write up, Scrivs! I can only imagine the process in getting the design approved by the powers that be in a company that large.
I had to visit yahoo.com in IE to get the link for Firefox. Looks great!
As a side note... movies.com just re-designed in CSS. Haven't had a chance to look it over yet.
Ryan (http://blog.ryanware.com/)
Savings in bandwidth:
From 2nd parigaph "However, keep in mind that this site is viewed over 200 million times a day "
From Bryan #21
Old Yahoo - 37 kb (give or take some bytes)
New Yahoo - 31.6 kb (give or take some bytes)
37-31.6 = 5.4Kb
(5.4Kb *200,000,000 hits per day)/1024 (Kb/Mb) = 1054687.5
thats 1,054,687 Mb
or 1005.8283805847168 Gb per day of xfer saved.
Ok, I prefer small numbers. how about:
0.9822542779147625 Tb of data transfer saved by 5.4 Kb....
please correct my math if that is wrong, i did it very quickly.
Aaron (http://(comming)toyingwithfire.com)
Something that was noted in the comments earlier and a thing that I totally missed was the changing colors for the different search tabs. That makes me even more curious as to why they went with blue for the default search box when all the rest of colors that help to make the search box standout.
Scrivs (http://9rules.com/)
Aaron, math looks correct to me. Amazing that they save a Terabyte of bandwidth from that transfer.
Scrivs (http://9rules.com/)
It's nice to see this move, yes, but there's no excuse for some of that code. I am mildly impressed. We should expect more from a group like Yahoo.
Seth Thomas Rasmussen (http://sethrasmussen.com/)
To what cam across as an excessively negative response, I'd like to add:
I understand there are no doubt many individuals more experienced and knowledgeable than myself working at Yahoo. It just seems to me that there is a certain level of implementation of structural markup and seperated presentation like this that you can expext even for large, popular sites like Yahoo.
I guess I'd just wonder why they felt they could only do so much, perhaps they have good reason that I'm not aware of.
Also, I suppose I should not assume that the Beta has everything a final version would have in place. For instance, perhaps the stylesheet will be linked in a final version so it doesn't add its whole weight to every page.
Seth Thomas Rasmussen (http://sethrasmussen.com/)
I kind of lost track of this thread...
My observation about the inline style(sheet)s works together with "it's a work in progress".
I certainly hope they will (for their own good) trim those styles down and keep them inline. Personally, on 200M/day, I would keep anything around 1-3kB of styles inline.
It's a simple math and a lot of testing. When I finish up the design, I make two separate sites, and test out with inline and external. For instance, on a site with 12-13 external styles amounting to 30k (all nicely separated for easy maintenance) I had a a delay on 2nd visit which was twice longer than when those styles were inlined. On 56k connection, with 1000 threads set in stress testing tool.
Since it was 30k, I combined it all into one .css and then it was much better. Then again, if it was 1-2k of styles, I would leave it inline.
Reason is HTTP compression. When you have that on, and I can't imagine making another site without it, content is delivered 4-5x faster and HTTP requests can ammount to longer wait then few, even longer inline styles, because browser is waiting for responses before it shows anything. With inline styles, there is not such delay.
Read Speed up your site by Andy King, and test on a very frequented site if you can. I had my share of hair pulling over slow web sites on a betting web site I coded, in time of Grand National horse race in UK. 20x higher (than normal days) unique visitor count few hours before the race, and 100x higher few minutes before the race. I watched in horror when the page could not be opened for more than 2-3 minutes (which is basically the duration of the race).
Never wanna see that again.
Aleksandar (http://www.aplus.co.yu/)
Its ok, its not great. In reference tot he colours, they should take a leaf out of msn.com's book.
Andrew
I hate to say it but there is evidence in what you guys say of having little experience in recoding large sites, as complaining it doesn't meet every requirement of truly standards compliance indicates.
It is incredibly difficult to code a site, (especially the portal style of yahoo and microsoft) with all of the dynamic information requred, and get it to work completely using CSS, while achieving all the other "business targets" that the company has laid out. I recently worked on my employers site as a member of a team and it was not possible to complete the site without some hacks and workarounds in the timescale provided, but that will slowly be improved. Browser technology and CSS implementation is simply not quite there yet.
The fact that Yahoo has made a start ois the most important, and you can be sure that as the content is updated and old content is slowly flushed out of the system, the semantics of the mark-up will improve.
Ben (http://www.beseku.com)
[re: Aleksandar on inline styles]
> Because they save on the HTTP requests.
Interesting thought, but surely with an extrnal file, although an extra HTTP request, repeat visitors would generally have the file cached, so it'd cut down on data transferred. Surely that extra data is worth more than an extra HTTP header in the long run?
Danny Tuppeny (http://dot-dot-com.com/)
CSS is very powerful. Yahoo Beta looks really nice, I like it very much. I've read throughout this place and it's quite fascinating how the people of whitespace define the enginuity, technicality and designity expressed in words. Keep up the good work guys. As for Yahoo, this is the start of a new world.
J.E.F. Manansala (http://www.manansala.org/)
yahoo! Korea (http://kr.yahoo.com/) is using CSS and tableless...
why not " " --> reduce k bytes
usually portal can't control the design of advertisements, so there are many colors in advertisements..
if each box heading has different color, the page will be ranbow-color ... :)
green
What I don't understand is why they bother checking for the browser. I downloaded the page in Firefox, saved it to a file, and then opened that in Safari.
It actually looks better in Safari, because Firefox isn't honoring my "minimum font size" preferences and parts of the page are coming out in what looks like flyspeck-3.
President Leechman
'Course, the real question is, why in bloody hell did they see fit to embed all 210 lines of their style rules into the index instead of linking to an external sheet?
Nathan
Humm ... wonder why http://movies.go.com/ works fine in my Opera 5 and abcnews.go.com looks like I am viewing it in lynx? I can't get ABC to work in Firefox either, and its very slow. Scrolling the screen is very jerkey.
mike
"It's a bit like when Microsoft redesigned and recoded their frontpage a while back. You ask yourself why they didn't make it really good while they were at it."
I guess they where testing their own site with their own browser, and it just didn't work like they wanted to ;) And every designer who dare to complain about it, did get fired immidiatly
rob-ot (http://rob-ot.be)
I think that yahoo could merge 2 search boxes: hot jobs with yahoo search (news, web, images, etc).
Maybe they they think that job search is more important than news search and put it additionally on their home page.
But in standard search results I found only options: web, news, images, etc and there was not option "Jobs" - I think that they should put this option in search options bar (if they think that jobs search is so important)
yoyo
How did they do the new email address popup.. When you type a letter a dropdown appears with a list of contacts that contain that letter.
Alex
I notice many people keep talking about why they didn't put the css in an external file.
Yes after that first time it might be cached on the client, but still on every page there would be another HTTP request to check if it was changed, and if you knew how a web server works you would know that every HTTP request is a delay itself.
One comment pointed out that every HTTP request, just to check on it would be about 0.5KB, that's small amount but you would have to count the network overhead of receiving and sending the request and response.
Even if the inline stylesheet was 5KB+, with the HTTP gzip compression and network overhead savings yahoo would still save a bundle in server time and network bandwidth.
Jory
As the old site, the new one does not set the background color to white! They simply assume that everyone has the white background in the browser's window. Well I don't have it white and the site looks awful on my gray background.
Maciej Miasik
>> As the old site, the new one does not set
>> the background color to white!
Just tried messing about with my GUI's colours. Seems Firefox sets the browser window to white whatever the system background colour, which is nice. Site looks silly on IE with a brown background though ;-)
Jimbot
Well my Firefox doesn't set the browser window color to white. Yahoo looks ugly both in IE and Firefox. This is quite common problem of many websites.
Maciej Miasik
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
At a guess I would say that the phony ordered lists have to do with the lack of control over spacing between the numbers and the list items.
A small thing, certainly, but it drives some designers crazy.
Lists are one of those bits of markup that are great in theory but a bear to work with in practice.
Mike (http://www.mikepick.com)