Jeff dePascale Blogging on and developing web and mobile technologies

The web on tablets: How the iPad has immediately changed web development

[dtse][/dtse]Whether you are for or against it, the iPad has hit, and within days it has changed perspectives on how the web will be developed now and in the near future. Major outlets like The New York Times have modified their development strategies to fit this new user case. Will this be a continuing trend? Will 'iPad friendly' development become a new standard? Or will it all subside and iPad users will still be left with broken pages across the web on their devices? In my opinion, it'll wind up somewhere in the middle.

I'll admit it: I drank the kool-aid. I am a new iPad owner, even though admittedly initialy being somewhat of a detractor of the device at launch. However, a minimal amount of time with the iPad yields two very important takeaways: 1- the potential in the device is huge (barring that pesky missing camera for skype-ing), limited mostly by software, which Apple can and will change at any time (iPhone OS 4.0 will be announced in just a few days), and 2- slates as a device category really will be a big deal very soon regardless of OS, and should be cased for in web development. Period. And it doesn't take much to do so. The web at large has moved away from full Flash websites for many reasons (including myself, and I am the developer behind a full bore AS3 framework). Times have changed, and what worked before just isn't appropriate anymore. Forget the Apple argument, just look at SEO and full Flash sites are instantly a problem. These days, Flash modules are king for rich content, a use case that generally doesn't get in the way of proper indexing of pages.

As of this writing, mobile specific variants of websites are really just starting to become an expectation of end users. It's becoming common practice, and that's a good thing. Understanding your end users context gets you that much closer to retaining them. Suddenly however, the manner in which those mobile versions are detected is a problem. Many sites still force mobile variants to users without an option to switch to the full site. I am mostly opposed to this logic, unless your site is completely unusable on said devices (Full Flash sites being a prime example). Otherwise, the user should always be presented with an option to opt out of a mobile variant, even if some of the site will break - its the users choice, and by presenting mobile first, you have effectively warned them and gated appropriately. If they choose to go through, so be it.

This problem is amplified now by the iPad. With 300,000 iPads sold at launch alone, there's no denying that it will be a segment worth targeting. RIM/Blackberry only account for roughly 8% of web traffic according to AdMob as of Febuary and typically their devices are still cased for in mobile development. iPad will likely surpass that number quickly. Currently, the iPad user agent string represents itself as a mobile device. Subsequently, many sites are presenting mobile variants by default, and in many cases are forcing that version without an option to switch to the regular site. This problem is amplified by the fact that these mobile variants were designed for 480x320 displays, not 1024x768. They render fine, but in some cases they look very off. Clearly this will need to be cased for. But how? Should tablets as a device type be given their own variant? I don't think so, but I'm sure some sites will soon go this route. But there is another option: progressive enhancement.

The concept is simple: only show your users what they are capable of consuming. Let's take Flash as a case study. First, lets assume the two variation web development model: mobile and desktop. I am all for serving desktop to tablets, lets leave the mobile variants for truly mobile devices - the one you are likely to pull  out in the grocery store and search for a product. That's not going to be a tablet device, it's going to be a smartphone. Additionally, note that many Android tablets won't support Flash in the near term, so the Flash problem isn't just an iPad issue. Moreover, even if Flash is supported, that doesn't mean that the design of the Flash content is well suited for touch either, so it may still be an issue to present that content to your user. It's likely that tablet users generally are going to be expecting the full web on their large screens. So how do we go about presenting the 'full web' site experience to a plugin limited end user?

For Flash content, detect if the player is present and the version is adequate for the content, and if it is, serve the Flash. If not, serve alternate content in the same location as where the Flash should be. If you're content is fed from XML (which it should be whenever possible), that same source can be used to feed an ajax replacement (video content could conceivably be rendered in HTML5 or using HTML4 and an alternate plugin to Flash such as Quicktime). Extra bonus: Googlebot is now executing limited javascript, so your initial load dynamic content may even be indexed for SEO. If that content matches the flash, there's the fix for Flash SEO indexing in module content. It's an elegant and simple solution to the problem. Architecting from step one with this methodology in mind will produce a cohesive, rich, SEO optimized experience across mobile, tablet and desktop variants.

Have any other suggestions? Leave a comment!