CNN: one of the sites that has no clue about mobility

Once more, I am appalled. This time, over the mobile version of CNN International. It looks like shit and it doesn’t even render correctly on the vast resolution of the Treo’s 320×320 (running Blazer which is a branded Netfront browser). As you can see from this picture, it even creates horizontal scrollbars on a 320×320 screen, which completely renders useless the mobility of that page.

So, as I have nothing else to do (well, there’s laundry, but that’s ok), I sat down and rewrote the CNN International page in a way that renders perfectly and without scrollbars even on 128×128 phones (images are not bigger than 105 pixels wide because we should not forget the scrollbar width when designing a mobile page). I also lightly shuffled around the words at the table at the bottom and trimmed them a bit, e.g. “Technology” became “Tech”, so the table can fit better on small screens (and it’s important to not impose any width to the TDs but let it flow depending on the length of its longest word). My design also looks good on a QVGA phone/PDA where it only has “two pages” to scroll up and down instead of long scrolling. True to my mobile principles, the page uses very little CSS and it’s written in cHTML instead of XHTML, as it’s is more compatible with most mobile browsers.

The source code for the whole page is not more than 4.5 KBs and the two pictures used, are not more than 5 KBs — combined. Overall, that’s less than 10 KBs that a mobile user will have to download on his phone or PDA — which means that it doesn’t cost more than $0.10 with Cingular’s GPRS prices. Totally financially feasible, even with these crazy GPRS prices that we have here in USA (in case that no unlimited data plan was purchased by the user). All it takes, is some design clue and some testing with lots of devices.

my CNN mobile mockup

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.