Thread

A few weeks ago I got a Kindle 2 (which has 3G internet access), and was amazed to see how horrible my blog looks on a small portable device. So yesterday I decided to see if I could make a version of my blog optimized for mobile devices.

I figured I’d be at it all day—and maybe even give up in despair. But, as it turns out, it was about a three-hour job. Once again, I’m impressed with the elegance of ExpressionEngine.

Here’s the blog:
http://j-walkblog.com

And here’s the mobile version:
http://j-walkblog.com/index.php/mobile

How I did it:
First I created a new template group called Mobile, and duplicated the key templates I use. In my case, it was six templates. Then, in each template, I stripped out all the navigation (in my case, a sidebar div), removed the links to the CSS files and scripts, and deleted everything related to styles. I was left with just EE code and pure and simple HTML tags. Then I added some new (and very simple) navigation links. I slapped a small masthead on the main page, and that was it.

It retains all of the basic functionality, loads quickly, and is easy to navigate. So far, everyone has reported that it works just fine on their mobile device. And it’s also good for dial-up users.

Questions, comments, and suggestions are welcome.

What kind of web page rendering is provided by the Kindle 2? A known browser? Why was it necessary to strip out CSS?

It would also be interesting to see what kind of traffic your site (or, any site) gets from Kindle 2 readers. In the two years since the Kindle hit the streets it’s been reported that Amazon has sold about half a million. I manage some sites which are getting over 1-percent of visitors using iPod touch and iPhone and there are roughly 25-million to 30-million of those on the streets. Is it any wonder that Amazon provided a Kindle application for the iPhone.

As much hoopla as there is over mobile Safari’s ability to render regular web pages, sans Flash (which is fine with me), and embedded media, it truly makes more sense to build a page that fits the screen size (with some flexibility) and navigation requirements of a mobile device.

Kindle uses the Netfront browser. It actually renders pages pretty well if you use the “advanced” mode (which is not the default).

I stripped out the CSS because there’s no telling how the various devices will handle it and I don’t have the ability to do any testing. Plus, my goal was to reduce bandwidth to the bare minimum. Using only HTML tags works fine for my purposes.

I don’t anticipate much traffic from Kindle users. It’s primarily a book reading device. I suspect most users don’t even bother with the browsing capability.

... It’s primarily a book reading device. I suspect most users don’t even bother with the browsing capability.

To by a cynic…then why bother?
To be a web nerd…are you using any ‘platform/browser detection & redirection’ or just linking to this template?

I did it mainly for cell phone users—which vastly outnumber the Kindle users.

Automatic detection is on my “see if I can do it” list.

I applaud you for your efforts J-Walk!
😊
Good job!

J-Walk,

I kind of recall seeing an add-on that was made specifically for the detection of browsers (possibly, mobile/portable ones - don’t remember). This might really help you out - if anybody cares to contribute to this thread who might know, then that would be great. =) I’m not an advanced PHP user, so I’ve no idea how to do it that way, though I know it’s possible.

I remember reading something somewhere that Apple was discouraging auto redirection via browser to separate mobile versions of web pages because of Safari’s advanced rendered capabilities on the iPhone (arguably the most used platform for web pages). Or, something to that effect.

While that posture makes some sense, and it is handy to be able to view any web page on a mobile device, it also ignores the screen differential between a modern Mac/PC and a mobile device. Using the AP Mobile News, or USA Today’s iPhone app, or the New York Times app on the iPhone/iPod touch is a vastly improved experience over browsing their respective sites on any standard mobile phone browser or iPhone Safari.

That said, I’ve made it policy not to auto redirect a mobile device to a the mobile version of a web page, but to provide an obvious link to the mobile version of the site, which can easily be bookmarked for future reference.

To each their own I suppose. There are certain types of websites that really make sense to have a more compact mobile version for ease of viewing.

Blogs are sometimes a nuisance to scroll due to the huge capacity of text detailed onto a page, and sometimes with a wide 3 column layout (such as Engadget), it can be annoying for touch-screen mobiles if you accidently click something because of the sheer amount of links. That, and also the huge amount of finger wagging with scrolling.

As for the Apple/Safari thing.. I don’t think that’s a big deal since Safari doesn’t dictate rankings, etc.