CityBlogz Design Studio / Blog » Web Design

Preparing Your Web Content for iPad

admin — Sun, 09 May 2010 02:03:54 +0000

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.

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.

W3C Mobile Web Best Practices Flip Cards

admin — Sun, 21 Dec 2008 19:21:25 +0000

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 vs iCopyuPaste

admin — Thu, 11 Dec 2008 16:52:34 +0000

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:

New RIA logo

admin — Wed, 10 Dec 2008 15:17:27 +0000

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.

iCopy uPaste – User Interaction Prototype

admin — Thu, 31 Jul 2008 18:37:33 +0000

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.

iCopy uPaste

admin — Mon, 28 Jul 2008 23:01:36 +0000

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?

My Resume as a Wordle

admin — Thu, 03 Jul 2008 13:59:23 +0000

Can you guess what my profession is based on this Wordle image?

RIA Example Logo Designs

admin — Tue, 10 Jun 2008 13:00:52 +0000

Here’s an update on the web redesign project under way for Rochester International Association. These are some logo designs that we are currently brainstorming.

Website redesign: Rochester International Association

admin — Wed, 14 May 2008 16:26:32 +0000

Looks like I am approved to get started on redesigning the Rochester International Association website. It’s been about 4 years since it’s last redesign. This is how the website looked like before 2004.

I have some interesting ideas for it:

Instead of the blog as the front page, redesign front page to simplify navigation and accessibility.
Split up into 6 themes according to what are the most requested information: World Festival, Your Country, About RIA, Blog, Events Calendar, Memberships.
Shiny new logo
About RIA – Allow people to easily find photos, and other promotional materials. Without exposing personal information, add a directory of current board members and a way for people to contact them.
Your Country – Enable people to easily find resources and news based on a specific country.
Memberships – Add ability to renew or join membership online. Add a way to accept credit card donations online via PayPal or Google Checkout.
Link to Facebook group page for RIA

Mobile Ajax and the Future of the Web

admin — Thu, 01 May 2008 03:57:17 +0000

Continuing the theme of mobile web 2.0, here’s a presentation from Dan Appelquist at the Web 2.0 Conference on April 24, 2008. Another must read for those of us interested in the mobile web development space.

| View | Upload your own

Mobile Web Design presentation by Brian Fling

admin — Thu, 01 May 2008 03:35:22 +0000

This is a must read for anyone interested in developing mobile web applications for mobile devices. It gives a good overview, and goes into some detail into iPhone web development near the end. It is almost like a state of the union address for where we are at with mobile application development.

| View | Upload your own

The iPhone SDK for Web Development

admin — Tue, 11 Mar 2008 05:12:00 +0000

Here’s part of the announcement that Steve Jobs forgot to mention…

| View | Upload your own

Project: Psychic Insights by Debbie

admin — Wed, 25 May 2005 13:52:09 +0000

Besides my current stream of projects, for the past couple weeks, I’ve been asked to complete a web redesign for a local Rochester Minnesota psychic who prefers to be called Debbie. I finally completed the work yesterday, and I must admit that it was an interesting experience.

The first time I met Debbie, I had my doubts about her abilities, but after my wife spent some time with her, I have to admit that she is fairly accurate in her readings. She wasn’t 100% correct but she got about 80% of the things right, which is quite extraordinary. I’ve also just added the site to my online portfolio.

UPDATE: Due to non-payment, I had to remove the psychic-insight.com website from the public view. It is still available in a privately accessible site.

Wednesday’s Web Design Tips

admin — Wed, 19 Jan 2005 13:51:27 +0000

Here’s a nice site to visit if you do a lot of dynamic HTML work using CSS and JavaScript. The page is titled “CSS Properties To JavaScript Reference Conversion“. It is quite handy as a reference sheet to print out.

In other news from the web blogging world, Google has setup a rather interesting initiative to help prevent comment spam on blogs. They have partnered with MSN Search and Yahoo! Search to set these standards. It basically requires that the author of the blog to add a new link attribute (rel=”nofollow”) on any hyperlinks that are created in the comments section of the blog. Google and other search engines would then ignore the hyperlink when determining search rankings. I am assuming that this has been a common technique to increase page rankings in Google for quite some time. Of course, this initiative would not solve the problem of comment spam without hyperlinks, but I think it is a step in the right direction.

Web design tip: fieldset tag

admin — Wed, 25 Aug 2004 18:04:00 +0000

The fieldset tag is a very useful tag to make a complex and lengthy form more organized and visually appealing. This technique draws a thin border around a group of form elements so the end user knows they are somehow related. This breaks up a large form into smaller sections that are easy to understand. The legend tag is used to define what text you want to appear in the upper left corner of the selected form elements. For example, if you had a form that collected information about the user, such as their name and address, you could wrap those form elements with a fieldset tag to convey to the user that those form elements are related.

The result on your browser should look like:

Reference: http://www.lynda.com/newsletters/