CityBlogz Design Studio / Blog

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”>

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.

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:

• Copy and Paste Comes to iPhone – Wired News
  
• iPhone Copy and Paste Now Working Between Safari and Mail – Gizmodo

This is wonderful news. According to the Apple Developer Connection website, 

We have decided to drop the non-disclosure agreement (NDA) for released iPhone software.

We put the NDA in place because the iPhone OS includes many Apple inventions and innovations that we would like to protect, so that others don’t steal our work. It has happened before. While we have filed for hundreds of patents on iPhone technology, the NDA added yet another level of protection. We put it in place as one more way to help protect the iPhone from being ripped off by others.

However, the NDA has created too much of a burden on developers, authors and others interested in helping further the iPhone’s success, so we are dropping it for released software. Developers will receive a new agreement without an NDA covering released software within a week or so. Please note that unreleased software and features will remain under NDA until they are released.

What does this mean to you?  This means that developers can now share to the world any technical articles or tutorials related to developing iPhone apps or web apps.  Now, I can finally proceed with publishing my iCopyUPaste technical article.

According to the Netbiscuits blog…

The main advantages of client based mobile Web applications are that they provide very good possibilities for graphic design of user interfaces and keep content available even offline. Furthermore, they often show faster reaction times and are sometimes easier to link to other telephone functions such as directories, camera, etc. The main disadvantage of every client-based solution is that they initially need to be downloaded by the user and installed on the mobile – a practice that will need to be repeated for every new release. Many users are prevented from taking this step due to technical problems, security issues and a lack of clarity concerning costs involved. Furthermore clients are always dependent on the mobile phone operating system and must often undergo costly adjustments for each individual terminal.

Mobile sites, on the other hand, do not require any installation. They are immediately available over the browser and the sites’ content and software are continuously updated unobtrusively to the mobile user. Mobile sites also provide a greater scope of outreach than clients do, as nowadays practically all mobile phones have a browser. Adjusting mobile sites and rich media content to various mobile terminals can be made 100 percent automatic. This means a massive reduction in development and testing expenses. User interface design is also no longer an obstacle. Modern mobile phone browsers enable use of AJAX and Flash, thus creating a user experience similar to that of PC Web. If a company is looking for a larger audience reach with as little hassle as possible, the mobile site is the clear winner.

I totally agree. The one thing that I advocate is to have some kind of markup language that allows the browser to have access to native device functions such as the PIM, camera, etc.

Head on over to CityBlogz Labs section of the website, to check out the latest code iteration of a user interaction model demo that I’m prototyping.  It is a little bit rough around the edges, but it showcases a little bit of how I envision the Copy and Paste to work on the iPhone Safari client.  I will be describing some of the code in detail over the next couple weeks, so stay tuned.