NYTimes: Clueless about mobile web design

It really bothers me when a major web site goes live with their new mobile effort, and it proves to be much worse than the previous one. Check NYTimes’ new mobile web site here. It uses CSS for layout and it has fixed width. By looking this design it is so darn obvious to me that the guy who coded this has no freaking clue about the real mobile browser world and he has tested this site only with a Motorola RAZR phone at 176×220 resolution. Effectively, his web site works well only with about 20% of the world’s mobile browser market and it looks like a stupid long strip on a QVGA phone (and only on these phones that support CSS). It seems that these web devs think that if it looks good on a desktop browser and on a RAZR it’s enough. Well, it isn’t.


The site sucks on higher resolution cellphones, like on the N80


The site does not work at all on Motorola’s older cellphones, like the iTunes/E398 phones

On the other side, we have Digg’s new official mobile site, DiggRiver, which is way more compatible by using standard tags for layout. I sent Digg some feedback on how to fix 1-2 more things, but overall, Digg’s effort is way better than NYTimes’ in terms of mobile browser compatibility.

Post a comment »

renny wrote on September 11th, 2006 at 5:05 AM PST:

Being mobile web developer myself, I know what they are facing: couple of thousand different mobile devices with more than couple of thousand device browsers.. I tried the site with my N80 and it rendered fine (320px wide) – happened because I used the device’s Services browser, not Web browser (the one that you used, I assume). Explanation: N80’s Web browser cannot be recognized, but Services browser can (thus they are able to provide 320px wide site).

As there are quite a lot of browsers that does not give any information on the features of the device (such as wheather css is supported, or screen width) some sort of compromise needs to be done.

I have tried the site with 3 different devices (with different screen widths (128, 176, 320) and it rendered the content well..


This is the admin speaking...
Eugenia wrote on September 11th, 2006 at 7:53 AM PST:

You are making some assumptions on your part:
1. The browser does not have to be autodetected in NYTimes’ case. They have a separate domain for mobile.
2. The Webkit browser CAN be autodetected. I successfully do for osnews.

>some sort of compromise needs to be done.

Exactly. This is why your best bet is cHTML and not CSS. OSNews is able to render perfectly ON ALL these “thousands of devices and browsers”. Why NYTimes’ cant?

>I have tried the site with 3 different devices

More details please. And maybe camera shots too.


This is the admin speaking...
Eugenia wrote on September 11th, 2006 at 8:34 AM PST:

And BTW, the S60 browser’s rendering looks better because it does NOT support CSS. If it did, the result would have been the same as in the Webkit screenshot above. So no, you can’t defend NYTimes’ developers for rendering well on a *few* browsers just because these browsers IGNORE their incompatible code!!


renny wrote on September 11th, 2006 at 8:40 AM PST:

> 1. The browser does not have to be autodetected in NYTimes’ case. They have a separate domain for mobile.

Of course the MOBILE browser needs to be autodetected. Separate mobile domain only separates (PC) Web browsers from Mobile device browsers. Autodetection is required to make the site as optimased for a device’s browser as possible. If the NYtimes site is implemented the way I think it is, then the width of the site should be different for different browsers – for example my N80 renders the 320px wide NYTimes banner, whereas my other Nokia, N91, renders 176px wide banner – means that they indeed are doing autodetection and serving the contnet according to device capabilities.

> 2. The Webkit browser CAN be autodetected. I successfully do for osnews.

Sure it can, but the relevant question is how do you separate the two devices using the same Webkit browser? For example, above-mentioned N91 and N80 both uses the Webkit browser, but there is now way of separating the two. Or have you find out the way?

> Exactly. This is why your best bet is cHTML and not CSS. OSNews is able to render perfectly ON ALL these “thousands of devices and browsers”. Why NYTimes’ cant?

Because they obviously want to offer the best possible end user experience by utilizing the CSS if it is supported. I’m sure OSNews (what is the URL?) could look better and offer better user experience if it utlilized CSS version for certain devices. Why use cHTML’s limited style capabilities if CSS is supported? (Needless to say: of course NyTimes should make sure that CSS version is not offered to devices that does not support it (as it was with the case of your iTunes Motorola, I assume)).

>More details please. And maybe camera shots too.

Sure – will post URL to pictures asap. The devices were all Nokia ones (N80, N91, and older 7210, which all got different version of the site).


renny wrote on September 11th, 2006 at 8:43 AM PST:

The s60 browser indeed supports CSS. Options –> Settings –> Rendering by quality (not speed).


This is the admin speaking...
Eugenia wrote on September 11th, 2006 at 8:46 AM PST:

>for example my N80 renders the 320px wide NYTimes banner, whereas my other Nokia, N91, renders 176px wide banner

NYTimes’s mobile site does NOT make ANY such autodetection. They have a fixed size layout for ALL browsers. The fact that you saw SOME browsers using the full width is just because they don’t support CSS at all, and so they have ignored that instruction.

>Or have you find out the way?

No, there is no way to do that via the user agent. Neither you can do it for 95% of the other mobile web browsers. This is why the mobile developer ALWAYS have to use 100% page width.

>Because they obviously want to offer the best possible end >user experience by utilizing the CSS if it is supported.

There is no way to know if a device supports CSS or not. Not a way at all. NYTimes did a GENERIC site and they shoved a CSS-based layout to ALL browsers. Now, it’s up to the device to fall to xHTML gracefully or burn, like the Motorola browser did in my screenshot above.

>I’m sure OSNews (what is the URL?) could look better and >offer better user experience if it utlilized CSS version >for certain devices.

NO. You are making a HUGE mistake by advocating CSS for mobile devices. Read here for more.

Try osnews at http://www.osnews.com . We autodetect ALL mobile browsers and we offer ONE SINGLE mobile interface that looks good EVERYWHERE.


renny wrote on September 11th, 2006 at 9:16 AM PST:

> NYTimes’s mobile site does NOT make ANY such autodetection. They have a fixed size layout for ALL browsers. The fact that you saw SOME browsers using the full width is just because they don’t support CSS at all, and so they have ignored that instruction.

Not true. They have at least 3 different sizes.. (and: s60 browser supports CSS, you’ll just need to turn it on by yourself – see instructions above).

>No, there is no way to do that via the user agent. Neither you can do it for 95% of the other mobile web browsers. This is why the mobile developer ALWAYS have to use 100% page width.

I could agree if all mobile devices had mobile Web browser (like Webkit). But they don’t. Vast majority of the mobile devices still has “only” WAP browser, which can be recognised.

> There is no way to know if a device supports CSS or not. Not a way at all.

Yes there is. Have you ever heard of UAProf’s? Example: from the following URL (hosted by device manufacturer), you can tell that Nokia N80 supports CSS: http://nds1.nds.nokia.com/uaprof/NN80-1r100.xml

> NYTimes did a GENERIC site and they shoved a CSS-based layout to ALL browsers. Now, it’s up to the device to fall to xHTML gracefully or burn, like the Motorola browser did in my screenshot above.

My quess is that they do not have the Motorola in their database (yet), which is why they were unable to provide correct version for it.

>NO. You are making a HUGE mistake by advocating CSS for mobile devices. Read here for more.

Again, I seriously think that by utlizing CSS, a much better end user experience can be achieved.

> Try osnews at http://www.osnews.com . We autodetect ALL mobile browsers and we offer ONE SINGLE mobile interface that looks good EVERYWHERE.

Did try OsNews.com with my N91: looks horrible (will provide you with images of that aswell) and is pratically impossible to use.


This is the admin speaking...
Eugenia wrote on September 11th, 2006 at 9:25 AM PST:

>They have at least 3 different sizes..

Not on my tests.

>Vast majority of the mobile devices still has “only” WAP browser

“WAP” browser usually means XHTML. And xHTML is enough to provide a good site. I do use CSS, but only for beautification, NOT for layout.

>Have you ever heard of UAProfs

YES, and I HATE them. Using WURFL is too expensive in server CPU time.

>which is why they were unable to provide correct version for it.

I don’t believe that.

>I seriously think that by utlizing CSS, a much better end user experience can be achieved.

You have NOT given me a SINGLE reason why!!! I can do EVERYTHING I WANT with cHTML and BE MORE COMPATIBLE with mobile browsers by using cHTML. WHY use CSS? What does it gives me? http://www.mobits.com/portfolio.php

>Did try OsNews.com with my N91: looks horrible

I do not believe you. I have tested with S60 browsers and it looks just fine. You either use a buggy version of the S60 browser (which is a port of the S40 2nd Edition browser — I have blogged about this version in the past), or you are lying.


This is the admin speaking...
Eugenia wrote on September 11th, 2006 at 10:11 AM PST:

And btw, if you used the NYTimes site with your N91 only, it works best because that site is HARD CODED (on CSS browsers: S60, Webkit & Opera) to work well with 176px-wide screens. You are THEIR best case scenario!


This is the admin speaking...
Eugenia wrote on September 11th, 2006 at 10:30 AM PST:

And here is a screenshot of OSNews on S60 3rd Edition on the 176×208 resolution (like on your N91), using both browsers available. As you can see, it looks fabulous. It has a REAL design instead of a bunch of black text on white background — like most mobile web sites are today.


Comments are closed as this blog post is now archived.

Lines, paragraphs break automatically. HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

The URI to TrackBack this blog entry is this. And here is the RSS 2.0 for comments on this post.