Web Creative

Développer un site Internet optimisé pour iPhone et iPod Touch

L’arrivée de l’iPhone dans le marché du mobile a complètement révolutionné notre manière de naviguer sur Internet lors de voyages ou de déplacement. Il est rapidement devenu la quatrième plateforme la plus utilisée pour surfer sur la toile, juste après Windows, Mac et Linux, laissant derrière lui d’autres systèmes comme Symbian OS, SunOS ou Playstation.

Les utilisateurs d’iPhone et iPod Touch représentent ainsi un marché considérable que vous ne saurez que mieux toucher en développant des sites adaptés pour un affichage mobile.

Lien permanent 4 Commentaires

Rappelez-vous ce à quoi ressemblait le web mobile en 2006 : des services WAP mal référencés et pour la plupart incompris ou inutilisés par le grand public, des coûts de navigation exhorbitants, et des navigateurs mobile incapables de comprendre la moindre instruction de mise en forme CSS, exception faites de certains Smartphones professionels.

Avec l’iPhone, Apple a su faire tomber ces barrières, notamment grâce à Safari mobile. Celui-ci est capable d’afficher et de rendre utilisable les sites optimisés pour un grand écran d’ordinateur sur un petit écran, et avec la technologie multitouch, le duo est parfait.

Alors, pourquoi se casser la tête à créer des sites pour l’iPhone alors que celui-ci peut déjà parfaitement afficher des sites optimisés pour de grands écrans ? Tout est question d’optimisation.

Un site optimisé pour un affichage mobile offrira une expérience utilisateur beaucoup plus agréable et enrichissante car les internautes n’auront pas à se soucier de zoomer pour distinguer telle ou telle zone d’un site. Dans le meilleur des cas, ils pourront même avoir l’impression d’utiliser une application plutôt qu’un site Web.

Applications iPhone vs. Application Web iPhone : Et les vraies applications dans tout ça ?

L’utilisation du SDK d’Apple permet de tirer davantage parti des performances du téléphone et de faire des choses que nous ne serons jamais capables de faire sur un site Web. Certes. Mais cela vous oblige à apprendre un nouveau langage, à faire valider votre application par Apple qui a tous les droits de la refuser, et ne rend votre travail accessible que par l’intermédiaire d’un système : l’AppStore.

Tenons-nous en à ce que nous savons faire de mieux des sites Internet. Safari Mobile interprète HTML, Javascript et CSS, et certaines fonctions vous permettent même de détecter de manière dynamique l’orientation de l’iPhone. Autant dire que nous avons là sufisamment d’outils pour développer des choses merveilleuses.

Google en est l’exemple parfait : Gmail, Google Calendar, Google Reader et plusieurs autres services ont été optimisés pour l’iPhone. Non pas sous forme d’applications se basant sur le SDK mais sous forme de sites Internet dynamiques optimisés pour Safari Mobile.

Comment développer un site optimisé pour l’iPhone ?

Nous vous proposons ci-dessous une liste de liens qui vous permettront de débuter dans le développement de sites Internet destinés à l’iPhone. Des tutoriaux étape par étape, des framework permettant de rapidement mettre en place des sites ressemblant à des applications natives, des éléments graphiques, etc… Vous avez là toutes les ressources nécessaires pour commencer.

N’hésitez pas à nous faire part d’autres ressources que vous auriez découvert ou à nous donner le lien de sites pour iPhone que vous avez développé !

Tutorial : Apprenez à développer pour l’iPhone

Excelent tutorial étape par étape de Nettuts qui vous permettra de construire facilement un site pour l’iPhone.
Nettuts : Learn How To Develop For The iPhone
http://nettuts.com/misc/learn-how-to-develop-for-the-iphone/

Tutorial : Construire un site Web pour l’iPhone

Un autre tutorial étape par étape pour construire un site pour l’iPhone
Engage Interactive: Building a website for the iPhone
http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

iPhoney : Simulateur iPhone Safari Mobile pour designers

Application pour Mac permettant de simuler le navigateur de l’iPhone, Safari Mobile.
http://www.marketcircle.com/iphoney/

TestiPhone

Un autre simulateur, cette fois sous forme de site Internet pour tester votre travail sur l’iPhone. À utiliser avec Safari de préférence.
http://www.testiphone.com/

iUI

Librairie permettant de reproduire l’interface utilisateur d’applications iPhone avec du simple HTML. Permet de détecter l’orientation de l’iPhone. Offre une expérience utilisateur “iPhone-like”. Vous trouverez ci-dessous un tutorial pour iUI
http://code.google.com/p/iui/

Tutorial pour iUI

http://www.webmonkey.com/tutorial/Build_an_iPhone-Optimized_Website_with_iUI

iWebKit

Une autre librairie permettant de mettre en place très facilement un site Internet pour l’iPhone.
http://www.iwebkit.net/index.html

Exemple de site iPhone

Différents exemples destinés à l’iPhone desquels vous pouvez vous inspirer. Testez avec votre iPhone pour vous faire une vraie idée.
http://groupaware.mobi/iphone/index.html

Perfect multi-column CSS liquid layouts

Mises en page CSS multi-colonnes compatibles avec l’iPhone
http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

iPhoneWebDev

Exemples de pages et de fonctionnalités destinés à l’iPhone et offerts avec leurs sources.
http://www.iphonewebdev.com/examples/

iPhone GUI PSD

Un fichier PSD regroupant tous les éléments graphiques utilisés nativement par l’iPhone.
http://www.teehanlax.com/blog/?p=447

A List Apart : Put Your Content in My Pocket

Excellent article de A List Apart qui vous accompagne dans l’adaptation de votre site pour l’iPhone
http://alistapart.com/articles/putyourcontentinmypocket

6 trucs & astuces pour optimiser votre site pour l’iPhone

Utilisez des styles optimisés pour Safari Mobile, définition du zoom par défaut, détection de l’orientation de l’iPhone, cacher la barre d’outils de l’iPhone, optimiser les images pour l’iPhone, composer sans le support de Flash
http://iphonemicrosites.com/articles/6-tips-to-optimize-your-current-site-for-the-iphone/

Ajoutez un icône d’accueil à votre site pour l’iPhone et détectez son orientation

http://www.hanselman.com/blog/MakeYourWebsiteMobile…

Recherche sur Web Creative

Contribuez à Web Creative

Faites nous part de ce qui vous inspire sur le web en ce moment.

Déposer une contribution

Tous les articles de Web Creative

• 20 sites Flash impressionnants
• 28 Vidéos Motion Graphics Reels littéralement bluffantes ! (Showreels)
• 30 Magnifiques photos HDR
• 31 jours pour apprendre à développer pour iPhone
• 40 Portfolios Ajax/CSS très inspirés
• 49 Lightboxes Javascript analysées et comparées
• 9 Frameworks CSS pour simplifier vos mises en pages
• Adsense pour applications mobiles iPhone et Android disponible en béta
• Ajoutez de la neige qui tombe à vos pages en javascript
• Akismet, la solution à vos problèmes de spam sur vos sites
• Bien designer : Les 10 commandements de Dieter Rams
• Coda 1.6 : Plugins & Subversion
• Comparez vos polices pour le web avec Typetester
• Créer des fonds originaux pour votre site internet
• Créer un bouton glossy Web 2.0 avec Fireworks
• CSSEdit, prévisualisation CSS en direct
• Deezer 2.0 pour iPhone
• Désactiver les ombres de captures des fenêtres de Mac OS X
• Dessinez le nuage “Mobile Me” d’Apple avec Fireworks CS3
• Développer un site Internet optimisé pour iPhone et iPod Touch
• Domptez les expressions régulières avec RegExr
• Douglas Bowman quitte Google… et rejoint Twitter
• Échec pour Cuil, le moteur de recherche Google Killer
• Espresso 1.0 - Éditeur de code pour Mac
• Expression Engine 2 arrive bientôt
• Faire connaître son site grâce aux galeries Web
• Filtrage de masse des réseaux en France
• Galeries, Diaporamas et Lightboxes javascript pour Mootools
• Goplan 2.0, système de gestion de projet en ligne, est sur les rails
• Hunch lance son API : Prenez des décisions
• Importez vos photos flickr en HD et avec leurs mots-clés depuis le nouvel iPhoto 8
• jQTouch, framework Javascript pour iPhone et WebKit Mobile
• Kronos - Application de gestion de temps
• Librairie Javascript YUI 3.0 disponible en béta
• Liste d’agences qui créent les plus beaux génériques et habillages Tv
• Mareen Fischinger Photography
• Mise à jour 2.2.1 pour iPhone et iPod Touch
• Monétiser le traffic de son site avec BuySellAds
• Mootools 1.2, Framework Javascript/Ajax est arrivé
• Motion Reels, découvrez des vidéos impressionnantes
• Navigation fluide et automatique à travers vos ancres avec Smooth Navigation
• Partagez votre inspiration avec ScrnShots
• PhoneGap : Développez pour iPhone, Android, Blackberry avec Javascript
• Shrink O’Matic - Redimensionnement d’images à la volée
• Sites de photographes talentueux en Flash, Ajax/Javascript et CSS
• Skype maintenant disponible sur iPhone
• Supprimer la DiggBar de votre site Internet
• Utiliser Automator pour ne plus répéter vos tâches quotidiennes
• Utilisez les Web Patterns pour optimiser vos méthodes de développement
• Validez vos pages Web grâce aux outils de validation du W3C
• Versions - Client Subversion pour Mac
• Vidéo de skate slow motion au Palais de Tokyo
• Yahoo Pipes, créez des mashups à la volée à partir de flux RSS / Services Web