little. yellow. different. A weblog by Ernie Hsiung

Posted
15 June 2004 @ 12pm

Tagged
Uncategorized

Yahoo! Calendar, the serious post

So, if you have a Yahoo! Mail account, you’ve noticed that the Yahoo! Mail site looks a little… different. You would have noticed that if you paid for a Yahoo! Plus account, you now have 2 gigs of space, while your free Yahoo! Mail has 100 megs now. And if you didn’t notice by now, you would have read it on CNET or in a multitude of websites talking about the storage space e-mail wars.

Oh yeah, you would also have noticed that the Yahoo! Mail, Calendar, Address Book and Notepad sites have been redesigned, but you won’t see that in many PR releases. That’s due to the awesome work of two of my awesome co-workers: Todd, who worked on the Mail application, and Maurcio, who worked on the Address Book. (I worked on the Calendar and, heh, Yahoo! Notepad.)

Some notes:

  • The new code is a hybrid of CSS and <table> based design. The tabs in Calendar should look familiar to some developers out there. A lot of the modules are based in CSS, but the main layout uses a giant <table>. Why? Because we had four month turnaround deadline and we didn’t feel like sudden sobbing fits over a broken CSS layout in the middle of the night, that’s why.

  • Obviously there are a lot of talks about web standards. There’s a lot of talk here about web standards here at Yahoo! too, but a lot of people think that only two types of sites exist - sites that have zero errors and warnings when put through an XHTML validator, and non-standard pages that involve 150 levels of tables. If you’re going to want to make sweeping changes on the way corporate web sites are coded, they’ll have to be done in baby steps.

  • Web Developers, especially web developers at large companies, don’t work in a vacuum. Code that is out of the developers control is given to us from advertisers, other groups within Yahoo! (the large masthead with the Search button is an example) and if it doesn’t validate, well, too bad. You deal the best way you can. I think this is the reason I feel like hurling bricks through monitors whenever I see a weblogger announce a site that has just gone public and a bunch of college kids think they can be witty and clever by running their sites through a bunch of validation sites and leaving the results in a comment. “Ha ha,” they seem to mock. “My personal weblog is perfectly validated, with no warnings or errors! Therefore, I am better than you.”

    To which I say, “Shut up, you have a LiveJournal.”

  • So why even bother using creating modules using CSS instead of <table>, if we know it’s not going to validate? For the record, it’s because we can still take advantage of the benefits of CSS - fast initial load times, easy style switching (want to make the colors pink? Too easy!) and less code bloat.

    (Off the record, it’s because I’ve practically forgotten how to create <table> based layouts. My bad.)


36 Comments

Posted by
karsh
15 June 2004 @ 1pm

I’ve forgotten too; I’ve actually went back to Photoshop to make one the other day. Geez. If no one else says it, the designs look absolutely wonderful. This may very well take me back to using Yahoo! as a main communications portal. Kudos!


Posted by
James
15 June 2004 @ 1pm

Off the record, it’s because I’ve practically forgotten how to create based layouts. My bad.

You say that as if it were a bad thing.

Overall, I like the new look–it is considerably faster (slowdowns because of Akamai problems notwithstanding), and it looks not unlike your usual non-web-based mail and calendaring application (I mean that as a good thing).

The one problem I have with the new look and feel is it looks pretty broken on Opera–the buttons are a bit out of whack and oversized, and the font has decreased in size to a near-unreadability.

Then again, I have a Livejournal…


Posted by
Steph
15 June 2004 @ 2pm

I have been using Yahoo mail, calendar, notepad, etc., for about a million years, and I love them all… I want to say thanks for the work you do - the redesign looks great. Geeeeez and all that with ROUNDED CORNERS too! Go on wid yo bad self… Don’t beat yourself up about the tables. They are hard to get away from, aren’t they? ;)


Posted by
evan
15 June 2004 @ 2pm

kudos to your css and table approach. as a developer, i do appreciate and understand the merits of web standards. however, i think these standards are sometimes more of a luxury in a fast paced production environment. there is a nice middle ground between css zealots and pixel freaks, which both sides tend to forget.


Posted by
Lara
15 June 2004 @ 2pm

I love the features on the Yahoo calendar, so I’m glad to have someone to thank personally for that. However, I do have one teeny tiny complaint. I noticed that in the new monthly view, the borders/squares around each date have been eliminated. When there are a lot of events on the calendar, it is very hard to read without the borders outlining each day. Please bring back the squares!


Posted by
LcF
15 June 2004 @ 2pm

wish I know design in CSS… :/
btw, is not evil.


Posted by
Raven
15 June 2004 @ 3pm

I read about this in the news today too, and given the fact that I receive 2,340,875.39 spam messages in my hotmail inbox every day and 100MB of free, NON-INTRUSIVE, storage was just too good to pass up — I made the switch to yahoo today.

I’m very impressed with the layout and the design of everything, your co-workers did a good job. The best part is, I can get all this space for email without some damn program reading my email to target spam at me.

Not only that, but yahoo isn’t all elitist by parceling out “invites” to join the service. I mean really, can you get any more pretentious?


Posted by
vj
15 June 2004 @ 4pm

The good news is the only part of the yahoo! account i’m still using is notepad. You go on with your bad-self.

Impressive ern. Impressive.


Posted by
cricket
15 June 2004 @ 4pm

Wow… so, do you get a bonus now? :)


Posted by
neekoh
15 June 2004 @ 4pm

customers of Yahoo! or any other ecommerce site probably cares very little if the web page validates or not, and really, those are who needs to be pleased.


Posted by
Natali
15 June 2004 @ 6pm

Uh, can I just remind Raven that Gmail is still in Beta testing, hence the invites (hardly elitist - I’ve given away invites to all my friends, free of charge, and I have two left) I think it’s more than decent for Google to let us plebs use their system before general release. It’s not like they have to. And it’s no more intrusive than any other email platform. The ads are there to keep the 1GB system FREE (imagine if they had a PAID service like Y! I wonder how much it would be then? 5? 6? 10?). I don’t even notice them - they are small and in the blindspot of the screen.

Ernie - it’s nice to see Yahoo! keeping up with competition. If Gmail ever explodes, I wouldn’t go back to hotmail, I know that much. Yahoo! is at least making the effort (and doing it well). Hope you don’t mind me bigging up the Gmail in your comments space, just felt I had to defend the crappy criticism.


Posted by
daha
15 June 2004 @ 6pm

I’m ranting. Feel free to skip. This is my first visit to your blog (I hit a link randomly from One Good Thing) and discovered that you may be the right person to rant at.

With the change my yahoo account has become nearly unusable from my home machine.

I know there’s something corrupted somewhere on my side … things have NOT BEEN GOOD since I upgraded from Win98SE to WinME, and I really need to wipe the hard drive and reinstall 98. That’ll probably do it.

From Internet Explorer I can read yahoo mail, mark messages for deletion, and delete them. I can click reply and fill in an address. But I can’t actually type any characters in the message body.

That’s been true for a good long while. So for a good long while I’ve been using Netscape 4.77 to use Yahoo mail. Today, I can’t do it. I get a screen telling me to either download a new browser or switch back to the old mail version. I click on the choice for the old interface, and the screen keeps reloading, and never takes me to my mail.

And, oh yeah, the line up top that says “welcome username” keeps popping up with usernames that aren’t mine. I’m sure that’s not a good thing.

-end of rant-

*daha*


Posted by
ellen
15 June 2004 @ 10pm

just a question..how come not all accounts seem to have been upgraded to 100mb? is it just a slow propagation type of thingie? :)


Posted by
Charles
15 June 2004 @ 11pm

Hey, Ernie, it looks nice. Very classy. It mostly holds up well at 16px minimum font size setting, although the bottom edge of the outer rounded square on the login page oddly doesn’t (odd because the top does tolerate). Totally falls apart at 200% but then what doesn’t?

I agree. We are probably going to go with hybrid tables/CSS at my workplace as well.

Any chance of RSSing your mini-blog?


Posted by
Charles
15 June 2004 @ 11pm

Oh, yeah, and anyone sending me a 1 meg file goes on my block list, let alone a 10 meg file, unless he’s gay, really cute, and puts out. Some of us are still on dial-up.


Posted by
Raven
15 June 2004 @ 11pm

Oh, and even though you didn’t have a hand in it, I just have to say that Address Guard feature on Yahoo! Mail is the coolest thing since sliced bread. I shelled out the $20 for that alone, I could really care less about the 2GB of space, no one is sending me full length porn movies or anything, LOL.


Posted by
Sebastiano Pilla
16 June 2004 @ 1am

Seconded the comment on Opera… The design needs a bit of refinement for that browser.


Posted by
Jemaleddin
16 June 2004 @ 4am

Actually, there are two kinds of XHTML pages - those that validate and those that compliant xml parsers are supposed to drop on the floor and quit rendering. I guess what you’re saying is that the Yahoo! redesigns fall into the second category. =-(

(The wisdom of that behavior is up for debate, but the behavior is part of the spec.)


Posted by
MrTeacher
16 June 2004 @ 5am

I also want to thank you and the team. I have been using Yahoo Mail, Calendar, Address Book and NotePad for years now and totally love the new look.


Posted by
Mark
16 June 2004 @ 6am

I have to say, I’ve been an avid Outlook fan for years. I also have used hotmail, opera mail, gmail, you name it. But today, my life has changed. I discovered yahoo mail, and at first, it was an idle thing. It looked like just any other mail site.

Then I looked closer, and saw them.
….
….
Rounded corners!

My life is different now. Everything is softer, and more….rounded. I feel gentler, and even the spam I get no longer enrages me like it used to do. I’ve now found a girl I love, and she loves me back, I’ve started enjyoing my job, and I hear talk of a promotion soon in store for me.

Ernie, this is all due to you. The rounded corners you added have changed my life, and I will be with yahoo mail FOREVER and EVER!


Posted by
Huntington
16 June 2004 @ 8am

My issue is that I don’t know what I’m going to do with all that memory. I always knew that when the little line turned red, it was time to do some culling. It encouraged discipline and conservation. This new generosity will just encourage my basic laziness, allowing me to keep old email I don’t really need.

But then, I write on Diaryland…


Posted by
arjanwrites.com
16 June 2004 @ 9am

I opened a Gmail account, but I’m sticking with Yahoo Mail. It is hard to beat 2 GIG.

BUT….

I’m just a bit thrown off by the redesign of Yahoo Mail quite honestly.

The sizing of the font in the email body is too small. When I increase it, then the page design gets distorted with the email header blown out of proportion.

I like the clean look of Gmail. Yahoo Mail should consider that.

Hurray for doing away with the ads! Things can only get better from here.

Your design friends can contact me if they want some first-hand feedback from a regular user Yahoo Mail power user.


Posted by
Anna
16 June 2004 @ 7pm

Okay, stab in the dark that Ernie will come back and read this comment — a friend (no, not me, I keep my OS up-to-date) is still running mac os 9.x. So when she logged into her mail today, she was faced with two choices: one, upgrade to a browser that supports all the new glory (can’t find a browser for os 9.x that fits that bill) or use the “old” Yahoo!. Problem, when she selects option 2, she’s stuck in a loop, can’t really get to her mail. Anyway, just an FYI. I’ve got her downloading mozilla 1.0.2 now hoping that it can get her in. And yes, I will get her to upgrade to X.


Posted by
RAY MIDWEST
16 June 2004 @ 9pm

Well are extremly confusing and CSS, well let’s just say I rather use the confusing tables.


Posted by
Camilo
16 June 2004 @ 10pm

You worked in that design? What is your wish, o elevated man!
Seriously, I so like it that went back to check email and the like. Rounded corners and css!!


Posted by
peter
16 June 2004 @ 10pm

seems like yahoo is playing catch up to gmail. was those shortcut keys just added today?


Posted by
Ryan Tate
18 June 2004 @ 3pm

I have the same problem as Anna’s friend. At work, on Mac OS 9 (a semi-old iMac, and I do not control the OS upgrade policy), the best browser I can find is IE 5.1. Ever since the upgrade, I can’t see my Yahoo Calendar, or any of my appointments.

The browser just chugs and chugs, spinning the little wheel (which means “processing”) until I Force Quit. Today it improved, maybe because I emailed Yahoo a day or two ago — I can see the top of the Calendar. But the rest never shows up. (I have timed four minute waits before I give up …. and I have 25MB allocated to IE.)

Yahoo Calendar changed my life when I started using it four years ago. I’d really really like to be able to continue to use it! (And yes, it does look cool now, at home where I can actually see it, but the blank screen at work doesn’t look so nifty …)


Posted by
amy
18 June 2004 @ 3pm

do you ever think about just how many millions of lives your handiwork impacts?


Posted by
Ryan Tate
18 June 2004 @ 4pm

Upgrading to Mozilla 1.31 via http://www.t3.rim.or.jp/~harunaga/mozilla-macos9/ did the trick. Also, I didn’t know it was possible to go back to the old look. The only reason I’d want to would be if I need IE for something but it would be nice to know how. maybe I’ll poke around …


Posted by
Anon
19 June 2004 @ 9pm

Dude, I just did a view-source of your Yahoo Notapad, (holy cow!) and I hope that’s not all you can come up with. Good luck validating that.


Posted by
Ryan
21 June 2004 @ 8am

I feel bad just complaining about compatibility … it really does look nice! (And it works now, in a proper browser)


Posted by
MrTeacher
22 June 2004 @ 10pm

I also have a gmail account, and the thing I don’t like about it is that there’s no delete button when you read a message. You have to pull down a drop down box, then go to the trash folder and pull down another one. It’s much easier to get rid of messages (spam) on Yahoo.


Posted by
strimble
24 June 2004 @ 11pm

Hey Ernie,
As I said before to you and Todd, good job! It looks great! The only question I have about your still using tables is, what if you want to switch your style to a design that scrolls horizontally instead of vertically?


Posted by
Kate
29 June 2004 @ 8am

I love yahoo’s new design. It’s lovely and very clean. Nice work!


Posted by
massless
14 July 2004 @ 1pm

Dear Competitor,
Yahoo! Calendar looks really great. The various UI improvements are fantastic. Seriously, that’s an impressive feat and you and your team deserve quite a number of accolades. Things I love right away: Padding, margins, ads shoved to the side, nav arrows that conform to Fitts’ law. (Woot!) I’d sort-of abandoned using Calendar because it was so cluttered, so now I’m going to go back to being a happy user. So as your competition, I’ll slump back home in bitter defeat, where I’ll be forced to simply console myself with a good, long soak in the tub and that 2.7 billion IPO…which is nice but doesn’t make up for not getting out a usable, nice-looking calendar, now does it? (On windy days, kinda, it does.)


Posted by
freddy
15 July 2004 @ 6am

Right, people. And all that stuff is terribly important. But what I really want to know is who the cute girl is whose photo is featured on the log-in page (http://mail.yahoo.com/?.intl=us).