Design and Development For iDevices: A Complete Round Up
Apple is all over the web and yours and ours lives too. The way we viewed web on our iDevices (iPods, iPhones and iPads) has changed recently with the announcement of Apple iPad. As we already know, the iPad and iPhone render web pages very differently. There is no flash involved and everywhere, the flash components are blocked out. This leaves a very little freedom to the flash developers. Another important aspect that remains is the screen size. When you’re on your iPhone or iPad, everything you see is scaled downed to a smaller level. In such situations, the game changes.
Here, in this post, we’ll list out the best resources for designers and developers who want to start designing for the iDevices.
How designing for the iDevices is different:
The Viewing Orientation
iPad is a magical device. But the problem is, it views the web in both portrait and landscape mode. Conventionally, web designers design websites for computer monitors which are on landscape mode all the time. That creates a problem of possibly clipping the content out when the orientation of the iPad is changed. In this situation:
It’s all about User Interface
What makes iPhone and iPad truely lovable devices is the awesome user interface they provide. And when it comes to websites and web pages, designers often tend to forget about the user interface. Many times, people just follow the age old path of default wireframing and design principles.
It’s HTML5
With the iDevices, it’s the end of flash and birth of HTML5. The former is a hallmark technology from Macromedia which was later acquired by Adobe. As far as HTML5 is concerned, it’s a new and interesting technology which has a great scope ahead. Google already has adapted HTML5 for it’s various services and now Apple is following the bandwagon.
So that was an introduction on how different it would be to design and develop for the iDevices. Here are the resources to help you more in this regard:
Best iPad/iPhone Apps For Web Designers
Fargo
Test your knowledge of familiar fonts like Wingdings and Rosewood or show your skills by taking the exceedingly difficult route
Freeform
Freeform is a vector drawing tool for your iPad. Create quick sketches, mockups, or diagrams with this powerful tool. Export your drawings via email in JPG, PNG, or PDF formats, or save to your photo library. Create new designs whenever or wherever inspiration strikes!There is nothing quite like the experience of interacting with your drawings with your fingers
Things for iPad
Things is a beautifully focused and amazingly intuitive task manager. Effortlessly manage to-dos, notes, due dates and projects. A smart today list and the scheduling feature allow you to work as effectively as possible every day.
Markup
Markup for iPad lets you connect to your websites and edit the text files within them. Download, edit and upload text files such as HTML, CSS, PHP etc. Preview the pages you edit and test them without ever leaving the app.
WordPress
It’s easy to manage your WordPress blog from your iPad, iPhone or iPod touch. With the WordPress OS, you can moderate comments and create or edit posts and pages. All you need is a WordPress blog or a self-hosted blog running WordPress 2.9.2 or higher.
CameraBag
Dramatically enhance your photos using the many classic camera and film simulations in CameraBag. It’s like having a dozen unique cameras all in one app!
CameraBag focuses on emulating styles and processes from some of the most interesting cameras of the past to enhance the mood of an image, and the results are stunning
Color Expert
Color Expert contains powerful tools to help artists and designers identify, translate, capture and showcase color.Designers know inspiration can come anywhere at anytime. Just look around. Some of the best ideas are waiting for you in the real world away from the studio. Now with Color Expert, you’ll have the tools to capture the moment, the moment a color captures you.
Pallete
Palettes is a powerful iPhone productivity tool for creating and maintaining color palettes. Turn your iPhone or iPod Touch into a portable color creation tool. Now you can create a color palette anywhere at anytime.
Insta Paper
The critically acclaimed, award-winning app to read web pages on the go, in the air, or on the couch.
Jumbalaya
Jumbalaya offers a unique tabletop game experience you can only find on the Apple iPad. Use both hands to organize your letter tiles; push them together and pull them apart to make as many words as you can. Get ready for a uniquely tactile and addictive word jumble experience!
Apple’s Official Resources For Developers
Preparing Web Content For iPad
This article talks through details of the user agent code for Mobile Safari on the iPad, why you should use W3C standard web technologies instead of plug-ins (Flash is, of course, not supported), and how you should modify CSS code previously targeting the iPhone.
Safari Web Content Guide
A guide on how to ensure your web design works well in Safari (whether on the desktop, iPhone, or iPad)
Human Interface Guidelines
Although primarily aimed at native apps, if you can implement these standards in your web application you’ll be on the road to offering a great experience for the user.
Further Developing and Coding Resources:
Detect if your user is using iPad using PHP and Javascript
An amazing articles with ready to use code snippets that lets you redirect your user to the iPad version of your site if he/she is using iPad to view your website
iPad Orientation CSS
As we told you earlier, iPad can be used in both landscape and portrait orientation. This article helps you understand the pros and cons of both orientation schemes.
iPad Web Development Tips
Working through a number of different CSS/JS techniques, and explaining why the browser really isn’t all that different from the desktop.
Well, that was a complete round up for Designers and Developers seeking resources for the iDevices. Do let us know if you found the information useful by dropping down your comments 
