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

After months of working with the Rochester International Association board, we’ve all decided on the final logo that will be the face of the new website and brand.  It took a while because we wanted to make sure we got it right. The first one listed below was the final choice.

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.

Still no copy and paste for iPhone 2.0. Apple has admittedly said that copy and paste is in the works, but it is not a big priority.  Time to take matters into my own hands by creating a “iCopy uPaste” web service for the iPhone.  I figure it would be a nice side project for me to learn more about iPhone web development and get some exposure in creating a REST-based web service.

The premise is simple.  I want a way for anyone using an iPhone to open a bookmarklet on any Safari web page that activates a hidden dialog menu.  They can select any text from the web page and copy the text to a “Copy and Paste” web service up in the “cloud”.  The user can paste the text on another page’s form input field or somewhere else on the same page.  I can already think of several hurdles such as cross-domain JavaScript, server-related security issues, and iPhone limitations on JavaScript events.  I plan on sharing every morsel of information that I find on my journey and I invite anyone to help.  I will start putting up the code in some form of source control (more on that later).  By the time I’m done, perhaps Apple will already have implemented a nice solution to this problem.

The wonderful part of this idea is that it doesn’t necessarily have to be confined to iPhones.  Creating it as a web service and opening up an API allows any platform that can consume web services to have access to a “cloud-based” Copy and Paste.  Therefore, I can envision native iPhone apps to simply create the following options: “Copy to iCopyuPaste” and “Paste from iCopyuPaste“.  They can hook those events to consume the “iCopyuPaste” web service.  Of course, the down side is that it won’t work if you aren’t immediately connected to the 3G or Edge or Wi-Fi network, but that’s the trade off for copy and paste.  Another use case scenario could be for someone who needs to copy some text from one computer’s browser over to another computer’s browser.  If they needed that text to be pasted into a native app via the system’s clipboard, someone could conceivable use Adobe AIR to create a widget that consumes the “iCopyuPaste” web service and store that text onto the system clipboard, ready to be pasted on any application on the desktop. Thoughts?