"the mobile experience" blog goes, well... MOBILE

I've been wanting to take this blog to a mobile platform for quite some time. I was actually surprised to learn that of all things, Google (Blogger team) haven't already come up with a way to parse and render blogspot accounts to a formatted for mobile screen. I suppose with all the customization that is going on, it'd be a nightmare for Blogspot account to figure out what to display or not.

mobile.theMobileExperience.com is born!

So here I am, trying to construct a somewhat dynamic and mobile-friendly website (mostly optimized for iPhone's Safari browser). After some research online, I learned that the mobile Safari browser relies on a unique meta tag called "viewport". In short, because desktop browsers rely on the ability to resize a window to deal with webpage scaling, iPhone's fix width browser gives you the ability to zoom in n' out via two-finger spread. By implementing the meta tag "viewport", you can control how your page is displayed and scaled at launch from an iPhone. Apparently, the viewport is pretty flexible, allows you to set your content width between 200 all the way to 10,000.

The trick I've learned thus far has been setting the initial scale to display my content end to end. For example, if you have a webpage which uses 640 pixel width, I would set the initial-scale to 0.5 to basically scale down 50% so it fits iPhones 320 pixel width perfectly when holding the phone upright in portrait mode.

I used a feedburner "BuzzBoost" function to generate the latest 10 entries from this blog to be displayed on the mobile-friendly site. As mentioned yesterday, Apple offers a nice guideline to help you build a far more advanced mobile web capable of using all of iPhone or iPod Touch's bells and whistles. This is just the first stage for me. I intend to do a little more and get better at optimizing my content for mobile handsets.

PS - I noticed some folks building websites with really wide table or div (900+ pixels) but uses really large thumbnail and font. They proposely let iPhone scale giantic fonts and pictures down. My guess is that they do this because they want people who accidently land on these pages via Desktop to still be able to operate with ease? I am open to any thoughts or feedback regarding to best practices for iPhone browsers.