TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Mobile CSS

July 13, 2004

My old cell phone plan expired some time last week, and after the indentured servitude of a rather lengthy contract (for the sake of free hardware some time in 2001), it was time to refresh the handset. New toy: a tiny little Audiovox 8900.

Being a diligent web guy, one of my first official acts with the new phone was to load up a few sites to see what it could do. The mobile web has so far passed me by; sure, my old Nokia was capable of loading up a text-only version of most any site in its cramped three-line display, but it was never fun. The odd time I’d load up the Zen Garden for the simple thrill of seeing a couple of characters of familiar text on my phone, but that’s where the mobile web ended for me.

A quick digression first: this new phone is stylish. No matter what I discover about its quirks and glitches over the next few weeks, my first impression has been nothing but admiration and I expect that will stick. Everything about this model is polished and functional; the manual seems to be a waste of paper so far, it’s that intuitive. Compared to Nokia’s current ugly and quasi-skeletal lineup, it’s no contest. Compared to my old Nokia (which I grew fond of over time) everything feels next generation, and then some. 3 years of progress resulted in a smaller profile with way more packed in.

Except for one little thing. The web capabilities stink. Okay, now I get blue underlined links instead of black ones; is that all 3 years buys me? The browser is a lot more integrated in this model since other (mostly useless) things like ringtone and game downloading rely on it. But even those pages are a stark black-on-white contrast to the animated colour imagery that forms the menu system of the phone itself. Something doesn’t fit here, and it’s the second-class citizen they’re calling a browser.

Mobile web screenshot

Patrick Griffiths put together a nice little suite of mobile CSS tests to throw at various devices; I took a quick wander over (‘quick’ being a relative value, given the trouble typing backslashes by hitting the ‘1’ key nine times) and checked to see what was happening. The result? Failure on all 8 tests. A bright red ‘NOT’ greeted each test result.

That the ‘NOT’ was red seemed interesting though; turns out Patrick sets all spans within the test to a default red via an embedded style sheet, and overrides them with the mobile test styles. Which means that the import methods were failing, but the embedded style (which also has no specific media type defined) was somewhat… not.

Extending Patrick’s tests just a little, I’ve dropped an extra paragraph with some basic text formatting and a couple of box model rules into the bottom of this revised copy. It looks like I get color and background color, the odd box model property (I think I saw a margin), and that’s about it. No borders, no floats, no alternate fonts. In short, CSS is a pipe dream on this phone.

I realize there are better browsers out there; Opera’s mobile version seems to be gaining momentum, Nokia appears to be throwing money at Mozilla, and full-fledged PDA phones with built-in PocketPC or PalmOS capabilities obviously have some choice in browser. But it seems I’m locked into the lightweight that comes with this phone for now, and at least in Canada, this is one of the more capable phones available at the moment without getting into a ridiculous price range. Not a hugely positive sign.

Is the mobile web a reality? Maybe elsewhere. Though given the slow input of URLs, dozens of seconds between each incremental page load, and almost non-existent support of anything other than text, it seems there’s a long way to go in Canada.

Oh well. At least it has a camera.


Reader Comments

Lee says:
July 13, 01h

I don’t think the web on mobile phones will ever take off. I only see mobile phones being used as something to connect to the net on the move rather than being the main device.

What they connect is the question, whether it’s a laptop, a larger flexible screen you can take anywhere, or some other display system (glasses or projectors), I think that’s as far it will go.

July 13, 02h

I’m quite proud of my phone, I got it about two months ago on contract with O2 in the UK, and its a motorola v600.

It failed all the screen tests, and passed all the handheld ones and showing all the correct formatting as in Firefox, rather pleased I be :) I already knew it could process CSS though, as it has handled websites which I’ve visited on it’s CSS.

Mobile internet will take off I believe, when phones can handle more data and are quicker to download each page. At the moment though it is annoying as you wait about 10seconds/page and only get minimal text when viewing specially made mobile sites, eg http://www.google.com/ (will be mobile friendly when visited with a mobile).

Sadly though, I can only get 0.5mb download a month on my contract, and acording to O2 that is 1000 web pages viewing.

I think not..

I just went on the web on my mobile, and used 80,000 bytes on about 10pages (they weren’t mobile sites, so got a 413 error - Requested entity too large).

3
Michael Jaskolski says:
July 13, 03h

A few days ago, I’ve managed to buy Nokia 6600 which comes with free Opera browser. In Poland, Nokia 6600 costs about $130 but comes with monthly plan of 200 “free” minutes for $50 *and* you still have to pay for GPRS connectivity, for each 500 KB sent or received. No unlimited Internet plan is available :(

I could have bought SonyEricsson P900 for $300, but I’m waiting for Nokia 9500 or Nokia PDA.

I have to admit that mobile browsing works quite well. Especially www.bloglines.com/mobile :) CSS is also extensively supported.

As Nokia 6600 runs on Series 60 / Symbian 7.0, there is a lot of additional software available, including Jabber/ICQ/MSN communicators, IRC clients, RSS readers and more…

I think about using Opera as mobile application platform. It supports JavaScript quite well, so it would be a good idea to create some offline JavaScript apps and send it to Nokia using Bluetooth connectivity.

July 13, 06h

Hi Dave,
That looks like a pretty cool new phone, and I agree that nokia phones are mostly quite ugly, with just a few exceptions. But it’s a pity it doesn’t seem to have much CSS support.

In case your interested, after the HTML dog test was done, I tested my Sony Ericsson P800 with every single other media type (arual, braille, etc) style sheet, doctype and MIME type there is for (X)HTML. Basically, I went a bit crazy and created what some might call an excessive amount of tests; but, anyway, I published them all on my website.

http://www.lachy.id.au/css/tests/media/

(you probably only need to view the tests for all media types, the others are just split into individual media types, but have the same tests)

I got some interesting results. It turns out the P800 will apply any style within the style element, unless the media is embossed, which seems very strange. It’d be interesting to know if there were any other anomolies like that with other phones.

Mike D. says:
July 13, 07h

Lee,

You might be right in that by the time the mobile web takes off, devices will look a lot different, but there is no doubt that in certain areas, especially outside the U.S., connected cell phones are the single most important piece of technology in most people’s lives. Walk onto a Subway train in Tokyo and you’ll see that some kids can actually type in T9 quicker than with a keyboard! Yes… totally ridiculous, but true.

In the U.S., the “connected” part of our cell phones is, at most, a crutch until we can reach our laptops, but other countries are not so laptop/802.11 ready.

The other part of me, the designer, thinks that the whole phone/handheld device thing is just a really clunky intermediate step before goggles.

Once our personal communication devices are part of our eyeglass frames, that’s when the design/UI fun can really begin. Think laser eye surgery is killing the eyeglass frame market? It’ll be back…

July 13, 07h

Nice, I’ve noticed recently that most mobile phone reviews do not give info on the capabilities of the browser or how it even performs on the phone. I guess most people don’t use the integrated browser and only care about how good the camera phone shots would be (and of course call/signal reception). :P

Thanks for the Mobile CSS test, I’m off to get the Sony Ericsson k700 this month (as long as they get some stock for me to buy the darn thing), I’ll check out the capabilities of its browser or any unit that catches my eye. ;)

July 13, 07h

On my Treo600, all of the screen tests passed, but only one of the handheld tests passed. For those who are interested, the “@import” test was the only handheld test that passed.

Dave says:
July 13, 07h

I have a SE t610 which supposedly has “web browsing” capabilities. It is much the same situation with your phone… ugly text, super limited capabilities (WAP 1.0 only). Web Access ends up a novelty with this equipment, to the point where I completely disabled it on my account for cost savings. And to think, I signed up with a company (T-Mobile) that has worse coverage in my city than competitors just because it had more attractive “techy” things, like web browsing and picture messaging.

All of this pronouncement of “the mobile web” and stuff is clearly by tech oriented rich people who can afford to shell out $800 for a SE p900, or other expensive higher capability phone/PDA device. I think it will be 5 years or more before this “mobile web” is usable to a majority of cellphone owners.

Dave says:
July 13, 07h

I have a SE t610 which supposedly has “web browsing” capabilities. It is much the same situation with your phone… ugly text, super limited capabilities (WAP 1.0 only). Web Access ends up a novelty with this equipment, to the point where I completely disabled it on my account for cost savings. And to think, I signed up with a company (T-Mobile) that has worse coverage in my city than competitors just because it had more attractive “techy” things, like web browsing and picture messaging.

All of this pronouncement of “the mobile web” and stuff is clearly by tech oriented rich people who can afford to shell out $800 for a SE p900, or other expensive higher capability phone/PDA device. I think it will be 5 years or more before this “mobile web” is usable to a majority of cellphone owners.

July 13, 08h

I’ve got a Motorola v500 all the test passed except the CSS seemed to get confused about positioning.
The browser on the v500 is lovely except for the following problems:
A) It has a tendency to try and render stuff off the side of the screen but it doesn’t seem to handle left to right scrolling. This is not helped by people not using media rules for their pages.
B) It chokes on large pages… so much of the web is out of bounds. But I’ve managed to get some pages to work. Slowly but surely.

July 13, 08h

I am able to surf well with my Nokia 3300. It has a qwerty-ish keyboard built into the front _and_ it stores and plays MP3 files. The display seems to render most pages and images quite well. The only drawback is the actual speed of the browser downloading over AT&T’s network. However, the CSS doesn’t import for this browser either. I don’t know if you’ve got access to a 3300, but I’ve been well impressed with everything, including batter life and the speakerphone.

July 13, 08h

I may be no expert, but the internet to me is about getting content. I want lots of it and there is no reason to be on the internet if I cannot have it.

The small screen size of mobile phones just shoots this idea in the foot. It doesn’t really matter how a page is styled, there is no way that I will be able to comfortably read an article, or participate in a discussion through a 180x1180 window. On top of that, the struggles with input comes into play as you already mentioned with the back slashes.

On the same note, I do not want a phone so big as to browse the internet. I want something small, tight, throw in my pocket and never have to worry about it. I don’t even want to know its there until it rings.

Sure, checking email and stock quotes is handy, and that is really about as far as I see the cell phone internet craze going, but a phone is just not suitable hardware for internet browsing in my humble opinion.

So what should they be working on? Speed, speed, speed. People want to browse the internet, people buy computers. Computers are getting smaller and smaller every day to where soon we will have a laptop not much thicker than your average legal pad and light as a feather. So, if you get a bluetooth (obviously a new version) enabled phone connecting to the internet over a broadband connection, you are in heaven. The whole cell network is already there, so if we can get high-speed out of it wirelessly, I’m set.

13
Graham Kaplan says:
July 13, 09h

I have to agree with you about Nokia’s current lineup. All the phones are bulky and just plain ugly. I have a Nokia 3650 right now, but I’ll be dumping it for the Sony Ericsson S700i ( http://tinyurl.com/6j7jd )as soon as I can. Stylish Japanese phones, here I come!

Also, Blake S: If you have access to a internet-equipped laptop, what would be the point of using your phone to browse the (crippled) internet on a tiny screen? Why not just use the laptop?

quis says:
July 13, 09h

I have the t610 too, and it passes roughly the second half of the tests but not the first.

It has been useful in the past though, looking up sports results, getting dictionary definitions, weather/tide times, etc.

I think I may use it more when I have a laptop, and can connect to the internet via the phone, via bluetooth. Until then it is laborious, and even with a laptop it would still be very expensive (I pay £3/~$5 per MB).

July 13, 09h

It’s very interesting timing that you just came across this. I, only yesterday, tried loading up your site on my Sprint Treo 600’s builin browser. In the past, I was very impressed with it’s abillity to selectivly support CSS. Most positioning was lost, but that allows accessable sites to flow quite naturally.

Unfortunalty, this site was a *huge* mess. Most items were on top of each other, there were large missing chunks of imagry and other difficulties. You don’t have a “handheld” stylesheet, but I don’t think the device supports them anyways.

So, I’m waiting patiently for a PalmOS port of the gecko engine where I can finnaly enjoy the standards based wen on my Treo.

Rajeev says:
July 13, 09h

I totally agree with the previous commentor. I just can’t imagine people really surfing the web to read large amounts of content on their cell phone, unless its something like a Treo 600. From what I’ve seen, the SE T616 looks like a pretty solid phone and is hopefully better than the T610 others have been talking about. I plan on getting it sometime later this year. I don’t think the cell phone is really an appropriate device for digital convergence.

July 13, 10h

Does anyone know if any of these devices or any devices support the media type= handheld?

Also, if you are interested in surfing the web and don’t want to pay for the extra bandwidth on your phone, you can get a bluetooth enabled phone and surf the web through your computer’s connection through bluetooth.

July 13, 11h

I have a Treo 600 and with the exception of the import line all the handheld tests failed. When the browser is in “optimized” mode the positioning fails too, but when it is in “wide” mode the positioning is correct. I have noticed on my own site that the phone’s browser does not respect padding and of course there are only two font sizes.

Josh Bryant: Content is important and most of the time with the exception of a few sites the Treo 600 does a great job of rendering content. I use it with Bloglines to read my favorite blogs. The “optimized” mode is best for reading content as you have to scroll side to side in “wide” mode to read the content. On this site (http://www.mezzoblue.com) the top navigation gets totally messed up and of course the background padding that moves text off images is ignored which I’ve mentioned earlier but doesn’t interfere with reading the information. The content is easy to read. Eric Meyer’s site, http://www.meyerweb.com requires horizontal scrolling and more horizontal scrolling for comments or any blockquote items. Jeffery Zeldman’s site, http://www.zeldman.com is pretty easy to read and navigate as well as http://www.alistapart.com.

Blake: I don’t want to use phone if I have a computer handy, only when I don’t have a computer available.

The support of CSS for handheld devices is lousy at the moment, hopefully it will get better in the future.

Mike D. says:
July 13, 11h

One word for you: Treo

It is all about the Treo. Anyone expecting anything resembling a “web experience” from a T9 flip phone will be disappointed. While small and stylish, the industrial design of T9 phones makes them great for making calls and not much else. Which is fine, if that’s all you want to do.

I shunned the wireless web until I laid thumbs on the Treo. It is simply the best electronic device I’ve ever purchased, including Powerbooks. Here is a short list of reasons:

1. $4.99 a month buys me unlimited data transfer for web, email, etc (T-Mobile). Total phone bill: $45 a month.

2. I program my Tivo from it. If I’m away from home and I find out something is coming on TV that I want to record, a couple of taps in the Treo’s web browser (Blazer) and I’m done.

3. I have full access to all blogs via the free Bloglines Mobile Edition. This is invaluable if you’re in some remote corner of Hawaii and don’t want to hit up an internet cafe to stay updated. All blogs read through Bloglines Mobile are perfectly formatted for most wireless screens.

4. No need for an iPod. 1 GB of music via the SD card and PocketTunes. I listened to 4 hours of music on a flight the other day and it ate only 20% of the battery juice.

5. Built in VGA still/video camera.

6. Full HTML rendering capabilities. No, it’s not IE, but most well-designed sites I’ve tested with it look great.

7. Syncs with Outlook on my PC and everything on my Mac.

8. Most importantly, feels like a phone when you’re using it as a phone, and feels like a computer when you’re using it as a computer.

Anyway, that’s my two cents. Dump the flipper!

July 13, 11h

This is something that really interests me (even though I’ve only got a knackered old Nokia at the moment - I need to upgrade too!).

My original tests were to see the extent to which mobile devices pick up CSS at all, and how they apply it (rather than what they apply - the next step that your tests are getting to). I was actually pleasantly surprised - more than a few phones and devices were picking up media=”handheld”.

Is mobile CSS a reality? Well it’s obviously not universally supported, but its support is gathering pace. And that’s why I think it’s now a reality - a real, practical consideration and something that can be taken advantage of easily with this separation of structure and presentation malarkey - not many people want to go to the effort of recoding HTML or dealing with WML.

Like a print style sheet, it now makes sense to me to think about applying handheld style sheets, even if it’s to deliver a stripped down version (which would be easier to read on those devices that also apply the screen media type). There’s no harm done to those that don’t support media=”handheld”, but there are massive benefits for the increasing number that do.

July 13, 11h

Also, I think it’s really worth keeping in mind that unlike the table/lap-top web, devices, platforms and browsers are hugely different from country to country. What might be the latest supergadget in your local store might be stone age in someone elses or vice versa (I hear they have holographic teleportation phones in Japan now…).

Think there’s a lot to take in to account to make things work in IE/Mozilla or PC/Mac? There are 100 times more things to think about when it comes to the mobile web.

Todd says:
July 13, 11h

Not to play sycophant to Josh and Rajeev, but I have to agree that the typical cell phone is not a tool that lends itself to surfing the web. Given the limitations of the cell phone (screen size, cost, poor page rendering) one really has to wonder why web capable phones have become such a hot ticket, and why designing pages for such a poor web tool used by such a small number of people has become such a concern for designers.

This got me thinking of an article that appeared in Shift magazine a number of years ago (it was written by Michael Turner, but I couldn’t find it on their website). It spoke about the importance placed on “cool” products in terms of technological research—cell phones that could send colour faxes while the user was rock climbing, or the video cell phone, at the expense of other, somewhat more important technologies, such as clean burning cars.

Not to get to far off topic, but I think the concern over web capable cell phones, and therefore designing for web capable cell phones, is indicative of favoring the cool over the useful. That is to say, why do we spend so much time, and therefore money, designing for such a poor web tool which is used by such a small number of users? Is the web development community following in step behind the newest “fad” at the expense of developing other, more important or useful technologies?

July 13, 12h

Until trying your test I thought that my Motorola MPX200 was cool (carrier AT&T in the U.S.). The MPX200 runs Pocket IE as it’s browser. I should have known not to set my expectations too high. I get NO CSS support at all.

bah.

July 13, 12h

Mike D: I agree with just about everything you said. I happen to use Sprint because in my area, just my area, the coverage is great. That is not always the case. My unlimited internet coverage costs $15 USD a month. I’m getting a little over 110kbit/sec http://text.dslreports.com/mspeed using the 100k link.

Todd: Using the Treo 600 allows me to read blogs, do online banking, or even get a traffic map to see the best way to drive to work. It allows me to make use of time that I would not usually be able to make use of. For instance waiting in a doctor’s office (which lately has been a lot). Having the PDA functions allow me to be more productive. http://www.davidco.com. The device is small enough to still be a phone, yet large enough to read most blogs.

July 13, 12h

First, let me apologize for posting again. I should have said all I wanted to say in one shot. While I don’t get any CSS support on my phone that doesn’t mean that I still don’t find it useful. Case in point - one of the things that I set up for my own web site is the ability to blog from my mobile phone. Because I created my own ASP CMS I was able to easily create a VERY basic form on my website which I access through my mobile phone. I add my title and my text and choose submit. On the server-side form submission I append “While I was out:” to my title indicating that the post was from my mobile phone. Blogging is no longer limited to an internet access. Now THAT is cool.

I also “scrape” the Chicago Suntimes into my site which means I can access the top 30-ish Suntimes stories as well. Ad-free and properly marked up XHTML.

I guess what I’m saying is that *maybe* CSS and style of a site shouldn’t be as important on a mobile. Maybe it should be all about the mobility of clean content. Have fun with your new phone. :)

July 14, 01h

When I surf using the phone or PDA, all I really want is a text. I don’t care about logos, banners and other stuff - I only need to get the job done.
And that usually means to fetch some info. So, text is quite fine.

If you look at the PDA market, PocketPC’s rule (or are very strong) and the 2k3 version uses IE4.01, while 2k2 uses IE 3.02 (no CSS at all). So you _can_ use margins and paddings and borders… But is it really necessary? You can’t create columns when your screen is 120-160px wide, paddings and margins have meaning only up to few pixels, and the best use for borders I found is to visually delimit skip-to nav links from rest of the document.

I’m involved in the process of creating one, rather large, online banking solution where support for mobiles is on the goal list.

Good markup, minimum tables, floats all the way and you have the basis. Then add good handheld style that _must_ override each fixed size and float in the screen style, and you are pretty sure it will look alright.

Dan says:
July 15, 10h

I didn’t see anyone mention it, so I figure I will. I’m using a sidekick from Danger (via T-Mobile), and I have to say, I’m very happy with it. Almost all the sites I visit are completely usable, and with a full QWERTY keyboard, it’s very easy to blog/comment from.

It’s CSS support isn’t very comprehensive, but it comes close enough to be very usable.

With the color sidekicks out now, and the sidekick 2 rumors starting, perhpas you should look at that for your next phone/PDA.

28
Gedman says:
July 16, 12h

FYI, sometimes you can get out of a phone contract by simply upgrading your service. Many basic plans will not let you get out of your contract; however, they cant stop you from moving to an upgraded plan that doesnt have a contract.