Off and on, I’ve been running my web site for a couple of years. With the redesign of PixoBebo this year I took a more active role in the coding, some XHTML, and most of the CSS. Frankly, CSS is not as easy as XHTML, but I’m getting better. According to Google Analytics, almost 4-percent of my readers are using the iPhone and iPod touch, and that number is growing. So, with a little help, I built a version of the site just for them.
Easier Said Than Done
I’m proud of my work on PixoBebo. My personal system administrator, Ron McElfresh, one of the co-founders of Mac360 gave me the basic code, and has coached me along the way. He was reluctant to honor my request for an iPhone/iPod touch version of the site.
Why? It’s work. It’s easier said than done. So, I took on the challenge of doing most of the code myself. Ron did the layout, I did the CSS to match PixoBebo’s color scheme.
Any modern web page that looks fine in Apple’s Safari or Mozilla’s web browsers is likely to look good on the iPhone. The problem is all that scrolling around just to read a large web page in a small screen.
Small Is Beautiful
My objectives were simple and straightforward. The iPhone version of the site had to be fast loading, mimic the unique layout of news links and articles in the original home page, mimic the color scheme, and have a very fast loading headlines page.
Oh, and it had to be an option for iPhone users, not a forced requirement to view the iPhone version instead of the full version. That explains the Mobile button in the menu above. Which version you see is your choice.
The problem is squeezing out the unnecessary parts in the site like Search and giant advertisements, and squeezing in the essence of the site in a much smaller package. As an example, PixoBebo, like many sites these days, is about 960 pixels wide. The iPhone and iPod touch, in vertical mode, displays only 320 pixels across.
Yikes.
The Package
Did I mention that CSS can be a royal pain in my New York bred derrière? It is.
After a few days of crafting, cutting, screwing up, shaving and polishing, PixoBebo Mobile is ready for prime time. What you get is a very fast loading headlines page with a single link—a single finger touch—to recent articles and news.
Additionally, there’s a Summary page (accessed by the buttons at the bottom of every page) that mimics the current site’s home page, with news links and article links.
Readers are always one finger touch away from the PixoBebo home page, the Mobile home page, the Summary page, or the top of the page. I’ve noticed that a lot of browsing on the iPhone and iPod touch require a lot of scrolling.
Give PixoBebo Mobile a try on your iPhone or iPod touch and let me know what you think. My thanks to Ron for his help, and to CSSEdit for supplying the necessary tool to master mangle the CSS.
Kate's Comment Policy: Keep your comment on topic, relevant, worthy, and funny. Or, pick any three. Be pleasant, helpful, and only use your real name. Comments are moderated and will not appear immediately.