04 · 07

iPad web development tips

By now you, or someone you know, has an iPad. Of course, Apple has been preparing people on how to design their web sites for optimal use with the iPad (see Preparing your Web Content for iPad). Of course, the biggest thing is the lack of Flash support on the iPad. Apple is instead pushing people to use “HTML5.” I put that in quotation marks because most of the contexts in which I’ve seen this have been confusing. What Apple appears to mean by “HTML5″ is that they want you to use <video> instead of Flash video and their CSS animations and transitions instead of Flash effects.

Semantics aside, there’s a lot of information about how your site can be made to best work with the iPad, and I’d like to add a few nuggets to that body of knowledge.

User-agent string

The previously-linked post describes the iPad Safari user-agent to be in the following format:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

This was the user-agent string during the beta testing phase. The format is slightly different for the final release:

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

You’ll note the addition of “iPhone” in the operating system segment of the user-agent string. This brings the user-agent string for Safari on the iPad more into line with Safari on the iPhone and iPod Touch, which have the following user-agent strings, respectively:

Mozilla/5.0 (iPod; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

This means a single user-agent string sniff for “iPhone” returns true in all three cases. The problem, of course, is that you might want to serve different experiences to the iPhone/iPod Touch than you would for the iPad. Make sure you double-check any user-agent sniffing designed to target these devices.

JavaScript iPad detection

If you’re trying to detect the iPad using JavaScript, there’s a very simple way to do so: check navigator.platform. The value of navigator.platform is always “iPad” when Safari for iPad is the user-agent. This follows the tradition of “iPhone” for the iPhone and “iPod” for the iPod Touch. This is the most accurate way to detect the iPad from JavaScript, assuming you don’t want to do a full user-agent string sniff.

function isIPad(){
    return navigator.platform == "iPad";
}

Also, keep in mind that navigator.platform doesn’t change even when the user-agent string for a browser is changed.

Screen dimensions and orientation

The iPad documentation says that the screen resolution is 1024×768 as opposed to 480×320 for the iPhone/iPod Touch. You can detect screen resolution via JavaScript by using screen.width and screen.height, though it may not work quite as you expect on the iPad. One would think that screen.width would be 768 when being held vertically and would be 1024 when held horizontally. However, screen.width is always 768 regardless of the way you’re holding the iPad; likewise, screen.height is always 1024. It’s worth noting that this is the same behavior as on the iPhone and iPod Touch.

Safari on the iPad does support the window.orientation property, so if necessary, you can use that to determine if the user is in horizontal or vertical mode. As reminder of this functionality:

  • window.orientation is 0 when being held vertically
  • window.orientation is 90 when rotated 90 degrees to the left (horizontal)
  • window.orientation is -90 when rotated 90 degrees to the right (horizontal)

There is also the orientationchange event that fires on the window object when the device is rotated.

Mobile Safari is mobile Safari

The good news for web developers is that there’s not a lot of difference between Safari on the iPad versus Safari on the iPhone or iPod Touch. Though the user-agent string is different and the screen size is different, the core browser remains the same. Thus, all of the capabilities that you’ve grown to learn about, such as touch and gesture events, are all there for the iPad. I cover these events, along with other mobile Safari-specific functionality, in Professional JavaScript for Web Developers, 2nd Edition.

Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of Yahoo!, Wrox Publishing, O'Reilly Publishing, or anyone else. I speak only for myself, not for them.

--> You can leave a response, or trackback from your own site.

 

04 · 07

Preparing Your Web Content for iPad

Media_httpdeveloperap_wccjt

Having you taken these steps??

04 · 07

iPhone App Reviews by the Experts at PCWorld - PCWorld

TLC Network

Entertainment  |  Reviewed Mar 26, 2010 4:43 pm

4.0 out of 5 mice

2711 User Reviews

TLC isn’t the first channel most people flip to when they turn on the tube, but as far as campy reality programming goes, the cable channel has got the most original and controversial line-up around by far. For those who just can’t get enough Jon & Kate Plus 8 or What Not to Wear, the TLC Network app from TLC provides a handy go-anywhere experience, for the low, low price of absolutely free.

Read more »    Review this app »

Thinking a getting or even buying an app from the app store? View the review of it first.

04 · 07

iPad Struggles at Printing and Sharing Files - PCWorld Business Center

Media_httpimagespcwor_uikfg

Could Apple have done a better job at considering these components?

04 · 07

The iPad Makes Demands on Web Developers - PCWorld

Is your website compatible with the iPad and iPhone? If not, you might want to reconsider how you are doing things. With the growing popularity of these devices, Flash will be obsolete.

Web developers behind the sites on Apple's approved list of iPad-ready online destinations have confronted an issue that the device-maker is forcing to the fore: are official World Wide Web Consortium standard languages sufficient tools to deliver cutting edge functionality, or do plug-ins lead the way in design innovation?

Soon after Apple unveiled the iPad in January, one point quickly became clear for Web developers: Just as with the iPhone, the device would not support Adobe Flash, or any other Web plug-in.

Instead, if Web developers wanted all the dynamic content on their pages such as videos and animations to appear correctly on Apple's new device, they had to create it using only the next generation markup language for the Web, HTML5, and related open standards.

At first glance, it appears like a logical move to stick with open standards, rather than technology largely controlled by a single company.

"A lot of the things that Flash has traditionally been used for, were Flash's domain, because there weren't any credible open standards available. Now there are," said Bruce Lawson, a vocal HTML5 advocate who also works on the Opera Software as a developer relations (for this interview, he stressed that his opinions were his own, and not those of Opera).

But a casual search on Google reveals that there are at least 74 million web pages that use the Shockwave Flash (SWF) format. It is a tall order to ask all of them to change for a single company's line of products, even if Apple sold more than 500,000 of these devices last weekend.

Observers also note that the developer tools for HTML5 aren't as advanced as those for Flash, and the standard is not finished yet, which could lead to more work for developers down the road to readjust pages to meet the finalized standard.

And by eschewing the Web's plug-in model, the iPad may potentially miss out on cutting edge features enjoyed elsewhere on the Web.

For photo-sharing site Flickr, the chief feature on the site that needed to be addressed was video, which the company has been gradually introducing into its service.

"It was not a huge effort," said Flickr Project Manager Markus Spiering, though quickly adding the site's developers were already familiar with the standards that Apple was requiring for the device.

"We were using Flash for our video content, but the iPad doesn't support Flash," Spiering said. "The iPad has a built-in HTML5 video player, which we could leverage."

The Web development team were already testing HTML5, and had already borrowed some of the work it did for the Apple TV, which worked well in the iPad format.

"It was a couple of days of testing and then we enabled it," Spiering said.

Now, when an iPad user visits the Flickr site, the site's servers determine the visitor is using that device and switches from sending the video to a Flash player to sending it to Apple's HTML5 video player.

Spiering said that to offer video for all Flickr visitors using HTML5 would be a larger challenge, because additional controls -- such as full screen capability -- would need to be added to bring the browsers up to feature parity with the iPad.

Apple itself has released guidelines on how to prepare Web pages for the iPad. In a nutshell: All the capabilities you seek can be found by using Javascript, Cascading Styles Sheets (CSS) and a set of still-evolving standards loosely associated with the World Wide Web Consortium's HTML5. What could not be used are plug-ins of any sort, including Adobe Flash.

Adobe has been, understandably, defensive over Apple's stance, and playing up Flash's use on other portable devices, as a way to deflect attention away from Apple's decision.

However, Dave McAllister, Director of Open Source and Standards (OSS) at Adobe Systems suggests that Apple itself may be putting the iPad at a disadvantage by not including plug-ins.

"From our viewpoint, it's not just the lack of Flash, it's the lack of being able to use plug-ins that are not owned, controlled and approved, that is an issue," McAllister said.

McAllister noted that innovation with the Web format has historically taken place not with the standards themselves, but rather plug-ins. Standards take years to ratify and tend to center around technology that has been so widely replicated, it has in effect been commoditized.

"Standards don't lead innovation. To innovate means to build on or out from the existing platform," McAllister said. "You don't want to have to wait for the consistent commodity approach to catch back up to the innovation. You want innovation to happen, and [standardize] the best from it."

It's been the plug-in model that introduces new functionality to the Web, he argued. Think of Sun Microsystems' Java plug-in, for instance, which introduced rich graphical functionality for the Web in the mid-1990s. By eschewing plug-ins, the iPad could potentially lose out on some of the cutting edge features enjoyed on other Web browsers.

Another issue that McAllister notes is that Web development shops will have to come up with two versions of their sites, ones that run Flash and ones that don't. "Most of these [shops] already have Flash as part of their workflow, so now they are adding a second part of the workflow," McAllister said.

For its part, HTML5 is starting to prove itself to be a very capable markup language, able, in theory, to replicate much if not all that Flash could offer. HTML5 and associated standards such as CSS and Scalable Vector Graphics (SVG), will be an "open platform for rich Web applications," said Philippe Le Hégaret, who is the W3C's interaction domain leader overseeing graphics, HTML, and video, in an e-mail.

Last week, Google engineers posted a version of Quake II that they ported to HTML5, using Javascript. Elsewhere in Google, a beta version of YouTube has been created that uses HTML5.

HTML5 and its related standards can cover a lot of Flash functionality, Lawson said. Simple animations can be recreated in CSS. More complex animations can be done with the HTML5 canvas tag in conjunction with Javascript.

But unlike Flash, HTML5 doesn't yet have a lot of production-ready integrated developer environments. "Flash has very good authoring tools," Lawson said. As McAllister noted, Dreamweaver and FlashBuilder are already incorporated into the day-to-day operations of many Web development shops.

In contrast, the tools for HTML5 and related technologies are still being developed. Worse yet, many are aimed more at the programmer than the run-of-the-mill Web designer. As one media company told the Valleywag industry gossip site, "Guess what, we don't have a bunch of code junkies in our newsroom." (Though Adobe itself seems to be in the early stages of incorporating the HTML5 standards into its own production tools, if this prototype of Dreamweaver that converts artwork into HTML5's Canvas tag is any indication).

Another potential problem: The HTML5 standard has not actually been finalized yet.

"The HTML5 standard is still a work in progress," Le Hégaret admitted. The problem is that until it is finalized, HTML5 may change. And if it does, all the pages affected by the changes will have to be revamped.

One bit of unfinished business is the HTML5 video tag. HTML5 allows pages to run video directly within the browser window, without a plug-in. The problem is, the browser makers are split over which video codec to use.

Google Chrome and Apple Safari natively support the high-definition H.264 MP4 format for this task. Neither Opera nor Firefox support this codec, due to concerns over licensing fees. Opera and Firefox, on the other hand, use open-source codec Ogg Theora, which Apple and Google have been reluctant to support, citing performance concerns. Microsoft hasn't committed to either.

Overall, however, HTML5 may be closer to the finish line than its critics suggest. Lawson does not think that the W3C will make dramatic changes to the HTML5. "It seems to me that the main work on inventing new features is pretty much over," he said. "It is possible that one or two features might get dropped because they are not being supported by any browsers, but the features that will be dropped are by definition ones not being widely used."

For the foreseeable future, anyway, Web developers interested in tweaking their sites for the iPad, but also using continuing to use Flash, may have no choice but to build, as Flickr did, hooks specific for the iPad. And Flash itself, despite Steve Jobs' wishes, is not going anywhere soon.

"I don't think HTML5 will kill Flash in anything but the very long term. There is so much Flash content out there that will need to be supported," Lawson said.

Kyle Reddoch

I am an aspiring Web Developer, Android Fanatic, Family Man, and all around Web Geek! I also do Freelance Development work.

About

My Journey through the Interwebs!