Retrofit Your Web Pages For Wireless Compatibility 142
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."
This makes me feel so old and so sad (Score:5, Informative)
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 (Score:5, Interesting)
Re:This makes me feel so old and so sad (Score:4, Insightful)
Re:This makes me feel so old and so sad (Score:4, Interesting)
Re:This makes me feel so old and so sad (Score:4, Insightful)
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
Cellphones don't have that much capability (Score:2)
Re:This makes me feel so old and so sad (Score:3, Interesting)
Opera performs nice filtering on images when you magnify the page. Also, the browser that comes with the Palm Pilot also does a really nice job of resizing images. Internet Explorer, as of version 5.5 at least, does not do nice filtering. (i'd be curious to know if 6.0+ was modified since I've discovered it will nicely resize stand-alone images too big for the page.) It's up to the browser.
Somebody e
Re:This makes me feel so old and so sad (Score:1)
Why does everybody always talk about magnifying images when it's up to displaying them on *smaller* screens?
Because on bigger ones ther always will be blank space. but on smaller ones it *must* be smaller to be usable.
The problem is: in Firefox (and of course IE) you get a hell of a crap of image quality in *any* resizing. Just compare it to an image that got resized in photoshop or with another good filter like "lanczos resampling".
By t
take a look for yourself: (Score:2)
live image resizing in-browser [agilepartners.com]
Re:This makes me feel so old and so sad (Score:2)
That's not necessarily a bad thing. Web pages are meant to be designed to look good at a variety of resolutions (ideally, all, but in reality it's very hard not to have a minimum workable resolution around 100x100-ish). The problem is that a lot of web page designers are used to mediums where they specify how something is rendered, in comparison to HTML, where you specif
Re:This makes me feel so old and so sad (Score:2)
Re:This makes me feel so old and so sad (Score:3, Informative)
Re:This makes me feel so old and so sad (Score:2)
http://www.carto.net/papers/svg/samples/shapes.sh
for a nice simple example. Googling for "SVG example" is also a good start. Strangely, can't get any of the examples from carto.net that use JS to work...
Re:This makes me feel so old and so sad (Score:1)
exactly. i want to stress the point that HTML has NOTHING todo with any of the following:
- design
- layout
- look
- style
or all in one: how it should look
it's ONLY for MARKING UP your content with structure.
If you think about look when you code your html, then you're obviously doing sumthing fundamentally wrong.
I myself needed a long time to see how wrong i got it. I finally came when i used
s to structure sections and areas, realized that a width
Re:This makes me feel so old and so sad (Score:4, Informative)
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 (Score:2)
No. What will happen is that the browser will guess that the image is really really small, and then re-render the page when it downloads the image and can check the real dimensions. This makes it impossible to read the text content without either hitting stop or waiting all of the images to load, because the text will be reflowed every time an image gets loaded.
Re:This makes me feel so old and so sad (Score:2)
Regardless of the behaviour, specifying the image size will allow the page to be rendered more quickly.
Rendered, in this case, has a binary meaning. Either the page is fully rendered, or isn't.
Re:This makes me feel so old and so sad (Score:2)
Anyway, what you say isn't true of NS3 at all (nor of NS2 for that matter). If image dimension isn't specified, NS3 just shows a small placeholder, instead of a placeholder of the correct size. Even on a slow machine (and I used NS3 on a 486 for years, so I know!) it makes no *practical* difference in rendering time, and does not affect the rest of the page (I think you're rememberi
Re:This makes me feel so old and so sad (Score:2)
One really nice thing about using an old browser: I see more of the content and less of the presentation. Sure makes the web easier on the eyes!
Re:This makes me feel so old and so sad (Score:2)
Now, if only the browsers would do a better job dynamically resizing images in the first darned place...
> Try laying-out a page on a 110dpi screen using point-size fonts and pixel-size images,
> then display that same page on a 96dpi (or less) mobile device.
You don't even need to go the mobile
Re:This makes me feel so old and so sad (Score:3, Interesting)
You mean other than the fact that the two most widely used browsers in the world still perform crappy no-interpolation nearest-neighbor image scaling, and yet somehow still manage to suck up gobs of CPU time doing it? (I'm talking here about IE and Firefox, of course.) If you expect a user's browser to have nice image scaling, you will be wrong 99% of the time. It's a ridiculous situation, in this age of dedicated 3D rendering hardware
Re:This makes me feel so old and so sad (Score:2)
You don't need OpenGL to do interpolated rescaling. ZSnes, for example, does it in realtime (30FPS), while still leaving enough CPU for the
Re:This makes me feel so old and so sad (Score:2)
Re:This makes me feel so old and so sad (Score:2)
Except that Firefox will automatically resize large images that are viewed alone (direct link to the image file) so they fit the browser window - you can switch between the full and resized images by clicking on it. This is a nice feature, but the image quality of scaled image is horrible.
Use SVG (Score:1)
Well, according to the HTML standard you should.
However if you want scalable images you should go for SVG. Both Opera (8.0+) and Firefox (1.5+) supports this natively. Konqueror has a nice KPart, and IE users can use Adobe's plugin.
Re:This makes me feel so old and so sad (Score:2)
Personally, I wouldn't (except perhaps in special cases where I was trying to get a complex page to lay out faster); but I don't consider it wrong to do so. I look forward to the day when most Web images are scalable vector graphics and, uhhmmm, scale. Nicely, and on all devices then in common use.
Re:This makes me feel so old and so sad (Score:3, Informative)
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 probab
Re:This makes me feel so old and so sad (Score:1)
Re:This makes me feel so old and so sad (Score:1, Redundant)
Re:This makes me feel so old and so sad (Score:3, Insightful)
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
Re:This makes me feel so old and so sad (Score:2)
Yes, I can see it now. "You are wrong not to waste money making sure your web application works on a cell phone. I don't care if a cell phone could only show 2 of the 50 required fields at a time. I don't care if none of your users use cell phones to access the application. You are dead wrong. You MUST spend money on this."
I make sure my web application look good at all reasonable resolutions. I specific
I just love extreme statements :) (Score:1)
Re:I just love extreme statements :) (Score:2)
You can use "max-width" to limit how wide the column goes. Of course, one particular browser doesn't understand it. (hint: it begins with 'internet explorer')
Re:I just love extreme statements :) (Score:1)
Oh yea, buggers. Forgot. Well that'd be just 80-90% of the web population then, big deal
Wireless compatibility? (Score:1)
What I want to know is how do your graphics look on a green screen with a hurcules (HGA) monocrome graphics card?
I don't refer to the internet as "the web". There are more protocols than http, really.. have a look..
Check your results using Opera! (Score:5, Informative)
Just what the world needs ... (Score:3, Informative)
Eh? (Score:4, Insightful)
As for applets, macromedia flash and other proprietry media formats, well...
Re:Eh? (Score:2, Interesting)
And as for ASP.Net, then you don't really know how it works it seems. It'll use whatever the browser is compatible with (a
Re:Eh? (Score:4, Insightful)
Yes.
~J
Re:Eh? (Score:1)
Re:Eh? (Score:2)
Re:Eh? (Score:2)
Yes [webstandards.org].
Re:Eh? (Score:2)
Re:Eh? (Score:2)
Thanks for the advice regarding the q= bit of the user agent;
Re:Eh? (Score:5, Interesting)
I've actually been trying to do some of what TFA has been talking about, but even then I get stymied by buggy wireless browsers that crash if you have a "screen" stylesheet and a "handheld" stylesheet in the same document, or crash if you load more than 8k of text and images, or fail to load the page if you have more than one image. I wish it was as easy as TFA talks about.
Re:Eh? (Score:3, Insightful)
Competant developers haven't been developing in xhtml and css -- because there's no support for it in IE [wikipedia.org] ... 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 co
Re:Eh? (Score:2, Informative)
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.
Re:Eh? (Score:4, Insightful)
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 [ietf.org] declares the media type contained in the Content-Type header to be authorative and not ignorable, and RFC 2854 [ietf.org] 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.).
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:Eh? (Score:1)
Re:Eh? (Score:2)
Re:Eh? (Score:2)
That is talking about what you need to do in order to be a conformant producer of XHTML. It has nothing to do with what you need to do in order to be a conformant consumer of XHTML.
I never said that it is all or nothing. But you seem to think that 'nothing' is compliant. Surely Internet
Re:Eh? (Score:2)
You don't have to support everything in the specification in order to be conformant, so it's not "all or nothing". However, the specification lays out specific requirements as to what can be called conformant, and you have to follow all of them in order to be conformant. So it's not as contradictory as you might think.
What support for XHTML?
Re:Eh? (Score:2)
I'm sensitive to the issue, really. I browse regularly from a Palm, both over WiFi and GPRS. I would really appreciate more work in this area. (See Google for a g
The XHTML MIME type and XHTML Basic (Score:2)
Competant developers have been using xhtml and css for 10 almost years
Ignoring for a second how these standards haven't been out that long, hardly anyone is currently supporting XHTML strict properly anyway: using the correct MIME type [hixie.ch]. In short, if it works in Internet Explorer, it's the wrong MIME type, even if w3.org's validator says it's fine. No company is yet happy with the idea of their web site not working in IE, so they use the incorrect MIME type.
Incidentally, there's a version of XHTML inte
External CSS? (Score:2, Informative)
It is also worth noting that your readers are likely to be paying for bandwidth on mobile devices - if you use a
Re:External CSS? (Score:5, Informative)
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:External CSS? (Score:1)
Re:External CSS? (Score:2)
I'm well aware of FOUC. I call your attention to this part of the document:
So it's not nearly as common a problem as the OP made it seem.
In actual fact, while the quoted statement might have been true at the time of writing, Gecko also has a FOUC problem. It only arises when you use the HTTP Link header to link to your external stylesheet though, which virtually nobody does because
link tag doesn't work? (Score:2)
Re:link tag doesn't work? (Score:2)
See that's the trouble with not learning proper terminology and calling everything "tag" :). I'm not talking about the bit in your documents that looks like:
I'm talking about information your browser receives when requesting those documents, that looks like:
The former is called an element. The latter is called an HTTP header. You might also refer to the former as a
Re:External CSS? (Score:2, Interesting)
On a handheld device, rendering (displaying) is a bottleneck for mobile browsers, simply because the CPU is much slower. So you will skip any preliminary heavy rendering job before you have all CSS in place.
The CSS fundamentaly affects what needs to be downloaded, and what will actually be displayed.
For example using Opera [opera.com] in small screen rendering mode (Shift+F11) you only apply handheld stylesheet (if found), in print preview mode (shift+P) only the print
A better fix is XSLT (Score:3, Interesting)
In case I'm offtopic... (Score:2)
Re:In case I'm offtopic... (Score:2)
real programmers use no data caching or invocation/processing caching, they just waste cpu power everywhere they can!
are you really that mad at you cpu's that you want to transform them each time a dummy client makes a request ? there are much better ideas out there for a while already, take a good look around
Caching (Score:2)
I don't see the problem. Why avoid tech? You can be the hottest web artist and/or editor, but stil
Re:In case I'm offtopic... (Score:2)
Do you really think that the GP doesn't understand this? Caching the files generated is blatantly obvious. If you can write decent XML-handling code, I don't know how you could not understand caching. Don't assume that people are stupid just because they didn't mention an implementation detail.
How many care? And misleading title (Score:3, Insightful)
Re:How many care? And misleading title (Score:2)
And to split that hair the other way, my laptop is mobile. So what's your point again? Where I come from people refer to Blackberries and mobile phones as wireless devices. It looks like where you come from people refer to them as mobile devices. It's all the same and was very clear from reading the article what was being talked about.
Works fine on my laptop, why modify? (Score:2, Funny)
Re:Works fine on my laptop, why modify? (Score:2)
Re:Works fine on my laptop, why modify? (Score:2)
Re:Works fine on my laptop, why modify? (Score:2)
You're right that it's a waste for lots of sites, but some sites can really take advantage of being available for cellphones and PDAs, in which case you should not just hop
Re:Works fine on my laptop, why modify? (Score:3, Interesting)
On more expensive devices (mostly PDAs) pages tend to display anyway, sometimes with scrollbars (which sucks, but it's no different to a computer with low resolution). It's a non-problem for them. The gap in the middle with dodgy browsers is just catchup too.
Re:Works fine on my laptop, why modify? (Score:2)
This article on A List Apart - detailing what could be done to improve Slashdot before it switched to CSS
Re:Works fine on my laptop, why modify? (Score:2)
BTW this is basically how the new Opera Mini browser works as well. Only they have their own intermediary language which they convert the HTML to.
Re:Works fine on my laptop, why modify? (Score:2)
This site did the same thing not too long ago (Score:2)
But overall, this is really a good idea. Where I work, we have some monitor/reporting/utility pages, and I've already requested mobile-device css for them.
If I go somewhere (and am on call) I don't need a PDA or laptop, just a smartphone or something similar... all set.
Except that... (Score:1)
Re:Except that... (Score:1)
they should practice what they preach. (Score:3, Funny)
It Was An Itsy Bitsy Teeney weeny.... (Score:2)
Accessing the 'net on my Motorola is almost always something done while stuck in a boring lineup, and the local weather report is the only thing that I've bothered to bookmmark.
Re:It Was An Itsy Bitsy Teeney weeny.... (Score:3, Informative)
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 cent
Re:It Was An Itsy Bitsy Teeney weeny.... (Score:1)
MP
Try our software for timesheets [sphericaltech.com]
Cameron Moll did a great series on 'mobile' design (Score:2)
With a lot of useful tips on how things work in the real world: Mobile Web Design: The Series [cameronmoll.com].
practical yes, good no ... (Score:5, Insightful)
But hey, everything is bloated today, so why not web pages, eh?
Re:practical yes, good no ... (Score:2)
CSS already allows for only transferring the necessary stylesheet. In your HTML document you can specify which media types a given referenced stylesheet apply to and the browser can then determine which stylesheets are relevant to it. You still need to transfer the HTML document, but there shouldn't be any extraneous crap in the HTML document if the presentation is properly confined to the stylesheets anyway. (In practice there is usually a bit of "leakage" due to limitations of CSS2, but in most cases it's
Wireless device browser compatibility isn't easy. (Score:4, Interesting)
In order to make our site compatible with as many mobile phone browsers as possible (I work for 4INFO [4info.net]), we use the WURFL [sourceforge.net] Wall JSP tag library. This matches the browser user-agent, against a database of known devices and capabilities, and renders the appropriate markup. Only after extending that library and updating its device database have wee been able to get our WAP [4info.net] site to render on most mobile phone browsers.
Re:Wireless device browser compatibility isn't eas (Score:2)
The updates to the device database are a fact of life I guess (especially given that the WURFL guys seem to be Europe based and you seem to be US based - I assume there are some differences in the devices available).
[pnee] [at] [toombeola.com]
but what about devices w/ no CSS support? (Score:3, Interesting)
just a thought...
Accessibility is important for many reasons (Score:3, Interesting)
A great test of a web site tests is loading on a Blackberry. Sometimes I move blocks of code around and use absolute positioning so the good stuff renders first, to help reduce thumb pain. (/. has too many nav links at the top of the code, so you have to scroll a lot to see the stories.) Googlebot "sees" web pages much the same way as a Blackberry. Indeed, search optimization and accessibility have a lot in common.
I am not sure XHTML is the key to accessibility. XHTML allows tables, which are often misused to control layout. The code flow of a table is different from visual representation, causing loss of semantic information when the page is rendered on alternative browsers or spiders that don't assemble the table the same way.
These common SEO/accessibility strategies provide good results on mobile devices, even with HTML 4.01, and as an additional benefit, make it much easier to manage the site, and may help search visibility:
Developing for Mobile Devices (Score:1, Interesting)
2.) Build effective tools that allow that editorial team to repurpose your web content for mobile devices.
The reason for point 1 is this: when using a mobile device users typically want to read less. They're busy, they're also doing something else, they're utilizing a snatched bit of time to get some facts. Very few of them want to read the same amount of content they would on a web browser. Until we have AI you'll need a good human sub-editor to trim away the fat and leave usa
You should listen (Score:3, Informative)
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 [blogspot.com] 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 (Score:2, Informative)
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/ [internetworldstats.com]
How many people will have browser equipped phones in 1,2 and 5 years?
Mobile/PDA/Small Screen Internet will be HUGE.
Re:You should listen (Score:1)
Try
http://www.internetworldstats.com/top20.htm [internetworldstats.com]
paper compatibility would be nice too (Score:4, Insightful)
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.
800x600 is good enough (Score:1)
Besides having no ads, who wants to view great photos and hd video on a tiny screen. About the only websites that would be worth viewing are forums an
Re:800x600 is good enough (Score:2)
Re:I used server-side PHP to generate pages... (Score:2)
It's amazing what just a change in CSS can do (as CZG articulates). Go ahead and test it in different platforms.
Good page design is about a good designer.
Re:Why retrofit? (Score:2)