This tutorial will outline a simple procedure used to display an “iPhone style” modal prompt whenever a user visits your site from an iPhone/iPod touch. For this example we will combine user agent detection with the JavaScript confirm() method to create a prompt which allows the user to select between your regular and iPhone-optimized versions of your website. Read more »

With the numbers of users visiting your website from an iPhone/iPod touch growing each day, opportunities to show these visitors targeted content are becoming increasingly valuable. The message can be as simple as a special offer shown only to these users, a customized welcome message or even a complete version of your website created especially for these visitors. This tutorial will outline a simple procedure to create a welcome message which will be displayed whenever a user visits your site from one of these devices. Read more »

For years developers struggled to present layouts with round corners, often populating nested tables with images to accomidate the page design across several different browsers. Today, this problem has been addressed using standard CSS and we are able to take advantage of these advantages to stylize content for our microsites without the use of images and tables. Read more »

We’ve recently come across a post on the iPhoneWebDev board from a member named Rico who posted some source using touch events to emulate sliding of the iPhone UI. View the post and source after the jump. Read more »

Here’s an interesting tip recently posted by Wayne Pan which covers using base64 encoding to cut down the number of HTTP requests on iPhone WebApps. “Reducing the number of connections is critical for client side performance. Due to the nature of mobile and mobile networks the problem is only amplified. A low hanging fruit has always been moving to css sprites for all your graphical resources. A lot of developers haven’t moved to inline images because not all browsers support it. However, web app developers on the iPhone have it much easier. We only have one browser to worry about, and luckily for us, it’s a good one.” Read more »

Nettutes has a great article up titled “Learn How To Develop for The iPhone” which outlines the basics of creating a basic iPhone framework. The code samples and psd make it very easy to create your first iPhone webpage. Read more »

Beginning with OS 2.0, the iPhone now supports integration with the SMS application from MobileSafari, allowing users to send SMS messages to you simply by tapping a specially formatted hyperlink on your website. Read more »

To improve the experience of users visiting your website from an iPhone, it is necessary to evaluate how your content will display on these devices. This will allow you to identify areas in which your content can be optimized more effectively.

For example, increasing the font size and breaking content and navigation into more appropriately formatted blocks will increase usability. Read more »

While the iPhone packs a lot of resolution into its relatively small screen, the address bar consumes about 60 pixels of real estate by default when a page is loaded in MobileSafari. With either 320 or 480 pixels available to the viewport, 44 of which are reserved for the bottom toolbar, it’s necessary to maxamize every available pixel. Below, we will teach you two techniques you can use to hide the default address bar when the page loads, allowing you to reclaim this valuable space in your iPhone presentations. Read more »

Have you ever wondered how those shiny round icons on your iPhone were made? This tutorial will teach you how to design your very own springboard icons for use on any website. Then check our post on adding the icons to a page or site. Read more »

The iPhone is capable of showing a custom icon of web pages the user has added to their home screen, however by default the image is a simple snap shot of the screen. Here’s how to make a custom icon that will show up in the iPhone’s springboard when a user adds your website. Read more »