I just realized how many WiFi devices with WAP/WML/HTTP/HTML browser support I have (ericsson phone, casio, nokia, and more!). I decided it was high-time to get my site into this mobile-space. But, being the busy person that I am, I didn't have alot of time to build a separate style sheet and test it on all kinds of devices. This is my easy 3 step solution:
1. [CREATE THE ACCOUNT] Create an account with WINKsite and consume all the RSS you can you hungry little syndication piggy. Feed those links, feed them!!
This includes consuming your own blog content, maybe picking up your own flickr stream, your del.icio.us links, your ma.gnolia.com links (you get the picture). Go check out WINKsite to see what I mean. And preview what you build within the nifty WAP emulator they have. It is a little JS popup with a mobilesque stylesheet funkifying the look-n-feel.
WINKsite converts all of this RSS/XML content into WAP/WML friendly pages; perfect for your cellphone, blackberry, BlueBerry, or 802.11X refrigerator door display.
2. [HANDLE THE WAP BROWSERS] Handle the WAP browsers on your home page (landing, splash, main, root, etc..) with ease. I catch them with a little ASP detection script and send them 301ing on their way:
If instr(request.servervariables("HTTP_ACCEPT"),"wml" ) > 0 then
Response.redirect ("http://winksite.com/jforsythe/mobile")
Response.ContentType = "text/vnd.wap.wml"
Response.Flush
Response.End
End If
I am sure that there are plenty of you who can port this to your server-side script of choice and add it to the comments.
3. [HANDLE THE POCKET BROWSERS] Now for the little browsers that try their very best to render that complicated CSS2 box-model hacking ultra-large font displayin' web 2.0 ajaxian page.., you might want to give them the option to visit your WAP page too.
Caveat: If you sent them directly to the WINKsite page you used in step 2, you would find out that the lack of JavaScript support to launch the WAP emulator popup is a sure way to lose that visitor. Instead, let's send them directly to the WINKsite emulator without the popup script. The format for the URL looks like this:
http://www.winksite.com/html/emulator_frameset.cfm?susid=12990
susid is your WINKsite ID # (it is all over the site once you create an account).
So now that we have the link to send them to a WAP/WML formatted as HTML page how do we detect them without a complicated Device/Version/Client detection script? Lets use the 80/20 rule for device support! As long as you have a device that supports the CSS directive media="handheld" we are in business. This included my really old Cassiopeia E-125 with the first PocketIE for PocketPC. So, the trick goes a little something like this:
add a div to the top of your page just below the <body> element:
<div id="wapable">
woah! mobile device detected: <a href="http://www.winksite.com/html/emulator_frameset.cfm?susid=12990">WAP off my site with WINKsite</a>
</div>
Give the div an id equal to "wapable". Next, you need to modify your current stylesheet (or create a new stylesheet if you don't have one) and add this selector:
#wapable {
display: none;
}
This will essentially hide the div element from most of your common desktop-capable web agents (those capable of display="screen").
Now, create a brand new stylesheet for this next part. Name it something like mobile.css or some such. Include the link element for this stylesheet beneath any others already linked. The magic is in the "handheld" media descriptor for this link element. My code looks a little something like this:
.... other stylesheet links...blah blah blah.....
<link href="jforsythe_mobile.css" type="text/css" rel="stylesheet" media="handheld">
See!!!
See that part where it says media="handheld" !!?!
That's the ingredient I was telling you about. So... in this stylesheet we just created and linked, let's add this new selector:
#wapable {
display: block;
border: 1px solid red;
}
This theoretically displays the <div> element (instead of hiding it) and draws a red border around it to get the readers attention (my casio didn't display the red border).
The pocket browser user now gets a very informative message about a HTTP/WAP option, and can click-away at a moments notice to the slimmer version of your content.
Too bad they won't be able to see those kick-ass DHTML IE transition effects you just poured all over your site. Especially the one where the text glows rythmatically and your background cycles through the entire RGB css color spectrum in about 3 mind-blowing seconds.
Well, maybe your content will at least compel them to visit your site with a bigger browser someday. At least, for now you have dutifully accomidated the mobile crowd (80% of them at least... hopefully... probably).
Comments:
Created 175 weeks, 3 days ago