Case Study:
Wretch New Front Page
-Featuring CSS3 for the future
Adam Wang
Wretch FE, MPS APAC
I come from Republic of China, Taiwan.
self intro
Wretch
www.wretch.cc
introduce wretch
#2 traffic contributor across Y!, 50% of Y! TW traffic.
introduce wretch
7.6 billion pv per month
- Mail: 33b
- Flickr: 3.3b
- FP:7.4b
need more info here
Tons of valuable UGC
photo, blog, video...etc
but quite old
Wretch's Magic: Make people get famous overnight.
Online version "American Idol" in Taiwan.
Wretch: 1999
IE6: 2001
12 years old since first wretch bbs
To have better promotion/influence, we need to
- re-design layout
- re-arrange priority
It's a chance to play CSS3 and play it cool.
(without flash)
ppl always asks for flash.
HTML5 & CSS3: The native is the best.
Using less images and flash turns out better performance.
and less effort on maintenance.
even securer
On an old browser? :(
86.78% of Wretch visiting is via IE.
- IE8:37.3% (all Y!:20.73%)
- IE7:27.47% (all Y!:12.87%)
- IE6:16.54% (all Y!:8.54%)
- FF3.6:3.78% (all Y!:10.61)
date of this Feb
Ask yourself:"Does websites need to look exactly the same in every browser?"
Alright, let's do it.
Well, you know, in Yahoo!...
we have to...
most of them have no idea about css3 and its limitation.
Users deserve better experience.
Gap between designer and front-end engineer
a huge gap between thinking in code and Photoshop.
PNG to web page on diff. browser?
you can find psd to html/css service online easily.
How can they define spec without seeing how it works?
- transform: rotate(30deg);
- transition: all 0.3s ease;
Do prototype proactively and repeatedly.
Hey, Adam. I want to have them on IE6.
- border-radius
- rotate
- gradients
- transition
- rgba
designers never know the pain from IE.
Progressive Enhancement
Escalator never breaks.
It' okay without box-shadow, text-shadow and transition.
There must be someone have to compromise.
But, hey! Designer wants it cool.
WTF.
Sorry, I can only give you a stair on IE6.
to designers, IE6 stands for the worst browser ever.
gradients
on IE.
Do graceful progressive enhancement with Modernizr 
Modernizr tells you feature support instead of browser and its version.
Save gradients with image.
- html.cssgradients .belt {...}
- html.no-cssgradients .belt {...}
- Modernizr.gradients (in js).
Save rotation with evil filter (IE only)
I hate this but I have to do.
Another lesson learned: use pseudo-class for style and less markup carefully.
Y.UA.ie tells you browser mode instead of document mode which matters to pseudo-class support.
My idea: using :after to overlay a transparent mask is neat without extra markup.
Shadow overlay
Painful example: IE8 supports :after but cannot apply filter: alpha(opacity=50); on it.
IE9 supports rgba. Problem's solved.
We even found some worse case occasionally...
Some Chinese characters with text-shadow and transform/transition vanish on Chrome.
The character has complicated stroke.
How we deal with it: remove text-shadow.
@font-face?
4~5MB per Chinese font file.
San Serif vs Serif
Modern browsers are like HD-TV. They come out first, then HD-contents arrive later.
We should encourage users to use modern browsers by providing cutting-edge technology and good content.
Argh, IE9 is not a modern browser.
