Apple iPad iPhone Mobile mobileweb Web Design

Preparing Your Web Content for iPad

Here are some tips for modifying your existing website so that the user gets a different experience when browsing on the iPad.

  • Test your website in Safari on iPad using the iPhone Simulator (Hardware -> Device -> iPad). iPad is available in the iPhone Simulator in iPhone OS 3.2 SDK.
  • Test your website on iPad, and update user agent detection code if necessary. iPad user agent string is:

    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

  • Simulating Safari on iPad HTTP requests in Safari on the desktop.  First, enable the checkbox next to “Show Develop menu in menu bar” in Safari’s Advanced Preference pane. Next, select Develop -> User Agent -> Other from the Safari menu. You will be prompted to enter a user agent string. Copy the Safari on iPad user agent string above, then paste in it into the dialog box that appears. Note: You can try this trick with websites like Gmail and YouTube to view how they display a different version of their website for iPad Safari.
  • Using a constant for viewport width.
    <meta name="viewport" content="width=device-width" />
  • Prepare for a touch interface. Don’t use a:hover pseudo class or mouseover events.
  • Orientation media queries to automatically select the proper stylesheet based on whether the user is in landscape or portrait.

    <link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
    <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

Mobile mobile 2.0 mobileweb Web Design

W3C Mobile Web Best Practices Flip Cards

Go get your Mobile Web Best Practices Flipcards now. These summarize the Mobile Web Best Practices 1.0 document. The flipcards are a useful reminder of the sixty guidelines explained in detail in the specification. A PDF version of the cards is available.

Apple iPhone Mobile mobile 2.0 mobileweb user interface Web Design

Pastebud vs iCopyuPaste

Pastebud — Looks like this new iPhone web app called Pastebud is out that does exactly what I had envisioned for the iCopyuPaste web service of mine.  Unfortunately for me and the rest of you out there, I’ve been swamped with too many other commitments to get mine out there first.  Therefore, I’ve decided to simply offer my help to the developers of Pastebud, and see if they’ll let me help out with this project.  The only thing that iCopyuPaste would have an advantage over on Pastebud is the fact that I didn’t plan on charging anyone for this service. Pastebud costs $5 to use once it officially releases. Also, I plan on giving iCopyuPaste an open-source license so that anyone that wants to see how it works can. I’ve got a lot of work to do to get my code published. Stay tuned.

News about Pastebud: