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

Eh?

[Anonymous Coward]

Competant developers have been using xhtml and css for 10 almost years, creating sites that display fine on any media in any UA. I suggest that before the pro (pfft!) web application developers start doing this, they review HTML lesson 1 on the anchor tag. Javascript doesn't work cross-browser which means that it's useless for anything other than bells and whistles atop the basic functionality. Hence, ASP.NET sites relying on viewstate and doPostBack are broken by design.

As for applets, macromedia flash and other proprietry media formats, well...

Re:Eh?

[oneiros27]

Competant developers haven't been developing in xhtml and css -- because there's no support for it in IE ... serve it w/ the correct MIME type, or specify the correct doctype, and you're asking for problems.

HTML 4 and CSS is still the best solution for the general masses. If you're working on an intranet, or some other place where you can tell people to get a different browser, you might be able to pull off xhtml, but you can't be sure it's going to get interpreted correctly, so what's the point?

The concept of xhtml was good, but with flawed implementations, it's completely useless.

Competent designers know that the only thing you can count on in web browsers are problems, so you either have to use the bare minimum of features, test to the point where it's not cost effective to ever make changes, or just plan on crap breaking constantly.

Re:Eh?

[jZnat]

So does that make 95% of web developpers incompetent?

Yes.

~J

Re:Eh?

[Bogtha]

The mime type thing is a "should" not a "must" in the guidelines

Which guidelines are we talking about? I'm aware a W3C member published a Note saying that; just because it appears on the W3C domain, it doesn't mean it's the W3C's official position, and the Note states this.

You shouldn't be paying attention to non-normative guidelines and notes. You should be paying attention to the specifications. And the specifications are quite clear - RFC 2616 declares the media type contained in the Content-Type header to be authorative and not ignorable, and RFC 2854 clearly states that the only form of XHTML suitable for transmission as text/html is XHTML 1.0 following the compatibility profile (a.k.a. Appendix C.).

therefore IE has support for XHTML.

No, this is not the case. Just because it displays something, it doesn't mean it supports XHTML. Hey, I can get 'cat' to "display" a JPEG file in an incorrect way - does that mean that it is a JPEG parser?

Does Internet Explorer enforce the mandatory error handling? No. Does it enforce the mandatory lowercase DOM element type names? No. Does it use the XHTML CSS rules? No, it uses the HTML CSS rules. Does it understand xml:lang? No. Does it imply <tbody> elements inside <table> elements? Yes - which is correct for HTML but incorrect for XHTML. Does it support the XHTML content model for <script> and <style> elements? No, it uses the HTML content model.

In every way I can think of in which XHTML differs from HTML, Internet Explorer gets it wrong. No, it doesn't support XHTML.

Re:This makes me feel so old and so sad

[Musteval]

Have you ever even SEEN an image that's been resized by the browser? They almost always look like crap.

Why retrofit?

[Anonymous Coward]

If you create a web page that is clean, well structured and doesn't rely on stupid things like Flash, it should be viewable with wireless devices without any changes.

How many care? And misleading title

[Mowie_X]

Very interesting write-up, but how many webmasters/blogmasters/etc... really care if a webpage is hard to read on a mobile device? Isn't the title also misleading? This has nothing to do with whether the accessing device is "wireless" (my laptop is wireless), but rather if the accessing device is mobile (i.e small screen)

Re:This makes me feel so old and so sad

[Total_Wimp]

Safari (and possibly other OS X browsers) do what the GP is suggesting, and it looks good up to about 400%.

Good for Safari. That's a nice touch. Now, back to the topic at hand, making pages that will work well on a variety of OSs, web browsers and devices at a variety of resoultions.

TW

practical yes, good no ...

[Lazy Jones]

Solving these issues with XHTML and CSS may be a viable solution compatible with current standards, but it is not a good solution from a technical point of view. Why? Because it's silly to transfer large amounts of XHTML to a wireless device and then hide all the stuff that doesn't fit or look good on a small device using CSS. It's much better to have only the HTML that the device is actually going to display transferred to the device.

But hey, everything is bloated today, so why not web pages, eh?

Re:This makes me feel so old and so sad

[Simon Brooke]

I'm glad that you've always had the luxury of design web sites that look good no matter how big (or small) the browser viewport is. I don't.

Yes you do. Either you're just lazy, or you're too gutless to tell the management/customer that they're wrong. Seriously, not a flame. If an engineer who was designing a bridge let the customer talk them into removing some vital support on the basis that '... it looks ugly with that girder there...', you wouldn't call that engineer very professional. You are just as unprofessional when you let your manager or customer talk you into a design which looks good on their screen, but you know won't work well on others.

paper compatibility would be nice too

[moosesocks]

Most of what the article is talking about also can easily be extended to print medium as well. That is, the way a page looks when printed out.

Through a very simple use of CSS, you can rearrange the page to be more friendly for print format by dropping background colors, making the text black, and removing sidebars and navigational elements.

With a little more effort, you can rearrange elements, replace graphics/logos with black & white versions, and rearrange the text so that it's occupying the full width of the page, etc. The driving directions feature on google maps is a great example of this concept.

Even slashdot's CSS redesign sports some of these features by dropping the ads, the top row of topic icons, the sidebar, the "Read More..../Comments?" line below each article, and other assorted navigational elements. Granted, it's still not very pretty compared to most, but it looks a hell of a lot better than the manner in which browsers butcher printed documents without no media attribute set.