Designing for the iPhone: Resources

37 Signals a dit une fois sur la conception pour l'iPhone:

Concevoir pour l'iPhone est comme un hybride de print et web design.

Le web nous le savons tous est truffé d'incertitudes. Nous ne connaissons pas la taille de l'écran du spectateur ou de la résolution, nous ne savons pas le gamma de l'écran de quelqu'un, nous ne savons pas si ils ont un caractère certain et / ou exactement comment cela rend le visage dans leur navigateur, nous vous ne sais pas le navigateur qu'ils vont utiliser, etc

Mais le papier, d'autre part, est plein de contrôles. Taille fixe, les visages fixes, les couleurs fixes. Qu'est-ce que vous imprimez est exactement ce que quelqu'un voit (en supposant que vous avez fait votre travail sur la couleur et du papier, etc.)

Donc, l'iPhone est un mélange bizarre. C'est le web, et les choses peuvent défiler, et les données sont lues depuis des serveurs distants, mais c'est aussi une largeur fixe, un navigateur fixe, polices de caractères fixe, etc It's pretty cool et un exercice vraiment rafraîchissant de conception.

C'est très vrai. Se rendre à la conception pour l'iPhone est juste fun. Pas de soucis pour la Croix-tester les navigateurs, pas de soucis d'avoir à répondre à des technologies obsolètes. Ce que vous design est ce que vous obtenez!

Voici quelques ressources pour vous aider à aller avec votre projet de conception iPhone.

Fichiers Photoshop

Free iPhone Fichier PSD pour les icônes / snapshots / whatever

iPhone GUI PSD

iPhone Interface PSD File

iPhone Style Icon. psd Kit

Officiel d'Apple Ressources

iPhone Dev Center
Video: Introduction à l'iPhone SDK (enregistrement gratuit requis)
Graphics & Animation Coding How-To's

Tutoriels

Découvrez comment les développer pour l'iPhone

Designing for the iPhone (lorsque vous tenez pas)

Créer un iPhone Slick / Mobile Interface à partir de n'importe quel flux RSS

Designing for iPhone (liste de plusieurs sites Web avec des interfaces iPhone)

Demandez ET: conception de l'interface iPhone (vidéo inclus)

ECommerce Pratique: Conception de site Web pour l'iPhone

iPhone Icons

Designing for the iPhone (part 1) (favicon)

Comment créer un profil personnalisé Apple iPhone icône pour votre site Web

Comment faire pour créer un iPhone Webclip icône en utilisant Photoshop

Evolution de la Delivery Status Icon (très cool animation de ses cours)

Code snippets utiles

Détection de l'iPhone avec JavaScript:

<script type="text/javascript"> if (navigator.userAgent.indexOf('iPhone') != -1) { { // Do something iPhone Specific! } </script> 

Définissez la taille de visualisation iPhone:

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 

Mettez ça dans vos pages web section tête. Si vous voulez forcer une largeur statique », changez d'appareil-width» à une taille spécifique. Dimensions de l'écran de l'iPhone sont 320 x 480px.

Défilement vers le bas pour cacher la barre de menu de chargement de page:

 <script type="application/x-javascript"> addEventListener('load', function() { setTimeout(hideAddressBar, 0); }, false); function hideAddressBar() { window.scrollTo(0, 1); } </script> 

Pour plus de nouvelles iPhone et les commentaires sur les applications plus récentes iPhone, consultez AppCraver.