Retrofit Your Web Pages For Wireless Compatibility

An anonymous reader writes "You probably don't want to maintain Web and wireless versions of the same site or take on the overhead of Extensible Markup Language (XML) transformations. This article shows you a more practical approach to wireless compatibility. With some well-designed XHTML, a bit of CSS, and the media attribute, you can do wonders. Create more flexible, Mobile device ready, Web pages with XHTML and CSS."

Comments

This makes me feel so old and so sad

[Simon Brooke]

If you weren't writing flexible web design ten years ago, you should have been. There's nothing new in it; and indeed, much of what is being suggested in this article is still bad old inflexible design, which will still break badly on devices which you did not expect.

never — never — use absolute (pixel) dimensions for anything other than images. You don't know how many pixels wide the screen you're addressing is. The browser at the far end does, though, and if you get out of its way and let it do it's job intelligently, it will.

Re:This makes me feel so old and so sad

[multipartmixed]

> Why should you specify pixel dimensions on images?

The page will render faster if the browser knows the dimensions of the image before downloading it.

This is especially critical for dial-up and wireless (assuming the wireless browser even has images enabled).

Re:This makes me feel so old and so sad

[urmensch]

Yes, that's an Adobe plugin test. Try this.

Re:This makes me feel so old and so sad

[Flwyd]

I'm not sure if browsers have gotten smarter about this, but if you specify pixel sizes on images, the browser can leave the apropriate amount of space open so the page text doesn't jump wildly while modem users are reading it. Back in the day, some browsers wouldn't even render the page until they knew how big each image was going to be.

And while I've never surfed the web on a cell phone, I'll bet my webpages look just fine in them. They looked pretty good in lynx last I checked. And most of them probably work well in an aural browser. That's because they're almost all text. Coincidentally, there's a very high content-to-bandwidth correlation.

Check your results using Opera!

[e2mtt]

FWIW, you can check out your site in Opera using Small Screen Rendering (shift+F11) for an easy preview. It follows css rules nicely.

Just what the world needs ...

[anzev]

This is just what we need. Another "temporary solution". The next thing that's going to happen is that everyone will start complaining how a browser doesn't respect some standard. I think that there should be no "intermediate" solution for this. Either you do it like you should have done it, or you don't! P.S: I'm sorry, I had to say this, I'm the first one, I hope :-). In Soviet Union, the web pages retrofit you.

External CSS?

[TheRaven64]

On a mobile device, you often have a minute amount of bandwidth and a huge amount of latency. If you move your CSS into separate files then displaying the page uses the following steps:

1. Fetch HTML (long wait).
2. Parse HTML.
3. Render preliminary (no-CSS) view.
4. Fetch CSS (another long wait).
5. Fetch inline images (again, a long wait, but slightly overlapped with the previous step).
6. Render final view.

It is also worth noting that your readers are likely to be paying for bandwidth on mobile devices - if you use a lot of small CSS files then you will not only make it take a long time for people to view your site, you will also make it expensive (that HTTP request overhead adds up a lot faster than you might think).

Re:External CSS?

[Bogtha]

That's a very distorted description of what actually happens. Yes, with the initial page view, you need to make an extra request for the external stylesheet. However, for all subsequent page views, the stylesheet doesn't need to be downloaded. So, if you compare embedded <style> elements with external stylesheets, then you are downloading very slightly more data on the initial page view, but then lots less for each subsequent page view.

Basically, so long as most of your visitors load more than one page, you come out ahead by using external stylesheets. This also costs your visitors less, as less data is transferred overall. The idea that external stylesheets use more bandwidth is a very superficial analysis that is the exact opposite of the truth once you look beyond a single page view.

I'm also highly suspect of your assertion that external stylesheets render the document twice; in most implementations I am aware of, rendering is delayed, so step 3 that you describe doesn't happen.

Re:It Was An Itsy Bitsy Teeney weeny....

[Tony Hoyle]

I must admit I gave up on the net on cellphones ages ago... GPRS slows to about 1k/sec in cities and a lot of the time stalls altogether, so it's really not a practical method of web browsing.

3G holds promise, where it's available.. which is practically nowhere (the providers are good at showing maps with '100% coverage' of 3G, but when you get down to it the coverage is at best a weak signal that keeps dropping out.. even in cities... and out in the sticks it's just not there. I live 2 miles from the centre of the second largest city in the UK - and there's no 3G here at all).

Re:Eh?

[holloway]

The mime type thing is a "should" not a "must" in the guidelines, therefore IE has support for XHTML.

It's a myth that not being able to handle the mime-type means the client doesn't understand XHTML as the guidelines clearly state it's recommended but unnecessary.

You should listen

[dada21]

I read EVERYTHING on my PDA phone. 99% of my browsing, posting and e-mail is performed there. Sites that don't support me don't get viewed, and as time goes on, there will be more like me.

I've spent thousands annually subscribing to websites that support my PDA. Slashdot was actually one of the first. Google does it as well. I can't wait to see what happens as mobile browsers become more available.

I just picked up the Samsung t809 phone and can browse the web via Mini Opera (or my PDA synced via Bluetooth). Getting 150kbps downloads through T-Mobile's EDGE, so most websites are instantaneous even on the road (yeah, it's safe, sure it is).

There are webmasters that have e-mailed me back saying they'd never support a tiny screen. I don't see how you can ignore the amount of phones that read more than just WAP -- many are HTML compliant with just a little software addition. Give it time and I bet we'll see popular sites getting more than 5% of their users from tiny screens.

Re:You should listen

[denebola]

IMHO you are 100% correct.

I notice with interest that we are approaching 1 billion users on the Internet.
http://www.internetworldstats.com/top20.htm/

How many people will have browser equipped phones in 1,2 and 5 years?

Mobile/PDA/Small Screen Internet will be HUGE.