It’s just data

Media Dependent Styling

I finally decided to upgrade my cell phone to one that supports the web and email.  I settled on an LG enV3 in slate blue.  One of the pages I frequently check is my comments page, and as I had taken care to ensure that the markup degraded gracefully, the page displays adequately on my mobile device — with one obvious annoyance that surprised me.

To read the comments, I have to horizontally scroll.  Usability significantly improves if I add the following to my CSS:

body {width:320px}

Now, clearly I don’t want all user agents to format the page with a 320px width.  My preferred approach would be to solve this in the CSS.  The first thing I tried was media="handheld", but sadly the results showed that this was ignored.

I tried Media Queries, but they too were ignored.  This opens up the possibility of styling by default a limited width and only utilizing the full width on browsers that support Media Queries.  Firefox 3.5 being one such browser.  Firefox 3.0.11 doesn’t have such support.  My conclusion is that this isn’t widely enough supported for me to depend on it.

I may end up having to do conneg.  Available headers include:

HTTP_X_WAP_PROFILE: "http://uaprof.vtext.com/lg/vx9200/vx9200.xml"
HTTP_ACCEPT_CHARSET: utf-8, utf-16, us-ascii, iso-8859-1
HTTP_USER_AGENT: Mozilla/5.0 (compatible; Teleca Q7; Brew 3.1.5; U; en) 320X240 LGE VX9200
HTTP_VIA: 1.1 Comverse 4.5
HTTP_ACCEPT: text/html, application/xhtml+xml, multipart/mixed, multipart/related, */*
HTTP_ACCEPT_LANGUAGE: en; q=1.0, en, *; q=0.5
HTTP_ACCEPT_ENCODING': gzip, deflate

I guess it is not an option to install Opera on that phone?

Posted by Sjoerd Visscher at

I truly am new to this, and honestly don’t know.  I don’t see my device listed on this page.

Posted by Sam Ruby at

That page does not appear to be always up to date. E.g. my Sony Ericsson C905 is not listed either but Opera Mini works fine. Maybe go to operamini.com on your phone and see what it says?

Posted by anonymous at

anonymous. Heh. I figured it would take the name via OpenID somehow...

Posted by Anne at

I went to operamini.com, but the browser on the phone did such a poor job of rendering the page (the dropdown menus on the top are permanently dropped down, and obscure the content of the page) that the page was useless to me.

As to OpenID: I do try to get the “sreg” nickname and fullname info and have tested it with my setup, but for some reason it didn’t get your info.

As an update: the problem appears to be related to the “footer” that I relocate to be a dropdown menu.  It doesn’t relocate with this web browser (which is fine with me), but does cause the screen width to change (which is what I want to avoid).

Posted by Sam Ruby at

Try media queries again.  Your phone’s built-in browser doesn’t support them, but Opera Mini does.

Posted by Jim at

I have yet to figure out how to install Opera Mini, or even verify that Opera Mini is supported at all on the device that I have.

Again, what I see if I go to the Opera Mini page is that the Products... Support... Company... and Business #nav dropdown menus are all (simultaneously) dropped down — just the backgrounds though (rectangles with horizontal lines, no text), with the net effect being that the page itself is obscured.

Posted by Sam Ruby at

Try [link]

That should bypass the dropdown cruft.

Posted by Robert Sayre at

While visible, that’s a maze of twisty passages, all alike.

The page itself is an ad, which leads to [link].

That page lists three options.  Go to the page that I can’t read.  Send myself an SMS message (result: URL of the same page), or select my device from a list (which doesn’t list my device).

Posted by Sam Ruby at

Try to download Opera Mini via these direct links:

[link]
[link]

Posted by anonymous at

I guess I’m hopeless, as I don’t know what to do with those links.

I click on them from within the browser on my phone and see some evidence that they are being downloaded (in the top center I see an icon that looks like a cell phone, followed by an icon containing two horizontal arrows pointing in different directions, and finally followed by an icon that looks vaguely like a globe).

Then... nothing, in each case.

I clearly can download those files to my PC, but I wouldn’t know how to install such files onto my phone.

Meanwhile, I’m using this stylesheet.  I’m disappointed that, like IE, I can’t apply css rules to elements introduced in html5.

Posted by Sam Ruby at

Can you try the styling dependent on the User-Agent? Just throw the mobile browsers a completely different css. Infact you don’t even need to write code, just rewrite the URL if User-agent is a mobile agent.

Posted by Sachin Gupta at

Sachin: that’s essentially what I am doing at the moment:

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} Teleca.*\ 320X
RewriteRule blog.\.css$ http://intertwingly.net/css/lgenv3.css

I simply would have preferred an approach which put this in the CSS itself.

Posted by Sam Ruby at

Your phone is, as far as I can determine a BREW phone, and doesn’t support J2ME.  Now, having said that, I know we deliver on BREW, but I’m not at all sure whether your operator supports installation of third-party applications.

Posted by Arve at

If you want a solution that works in your phone’s native browser, the referenced UAProf RDF XML file is an acceptable way to do content negotiation. It tells you right in the prf:ScreenSize element what resolution it supports. I have to agree with the others that Opera Mini is an excellent alternative, though.

Posted by Asbjørn Ulsberg at

It tells you right in the prf:ScreenSize element what resolution it supports

I’m skeptical.

Reported there: 320x199

Reported on lge.com: 320x240

Posted by Sam Ruby at

I Hear That

Lowell McAdam:  Bravo. Depending on what’s offered, I sometime next year, I’ll seriously consider an out-of-cycle (i.e., non-subsidized) upgrade.... [more]

Trackback from Sam Ruby

at

Add your comment