Vous êtes fan de Star Wars ?
Vous avez été biberonné au premier opus de Jeffrey Zeldman ?
Vous savez qu’Alsacréations n’est pas une marque de farines à pâtisserie ?
Ça vous parle si l’on vous dit : Smashing Mag, Coding Horror, A List Apart ?

But alors your are french ?

Le pitch dans ta potch

Dans le cadre de sa croissance, LunaWeb recherche un profil de développeur confirmé afin de compléter son savoir-faire en développement Web en environnement « léger ».
Vous intégrerez l’équipe de production et collaborerez à des projets de conception d’applications Web exigeantes, et laissant part à votre créativité et votre autonomie. Vous serez également en contact avec notre réseau de compétences externe composé notamment de développeurs Flash (AS3) ou Ruby.

Vous maîtrisez les outils et langages informatiques du web suivants : xHTML, PHP 5, MySQL, Javascript, CSS, AJAX, environnement LAMP.
La connaissance des frameworks Zend (PHP) et jQuery (JS) est un vrai plus.

Des connaissances plus ou moins approfondies en environnement Ruby On Rails (dév/intégration) sont également des points de développement intéressants pour le profil de notre entreprise.

Le profil que we want

Profilé ainsi, tu seras, jeune padawan :

• 2 à 5 ans d’expérience en développements web
• Bonnes capacités d’analyse et de conception
• Autonome, dynamique et rigoureux avec le sens du résultat
• Enthousiaste, doté d’un bon relationnel, avec un vrai sens de l’équipe.
• Pas réfractaire à l’idée de bosser sur Mac (hein Gaël-Ian, hein…).

Dans un environnement décontracté, exigeant et dynamique, au cœur du centre ville de Rennes, tu travailleras.

Les petits riens que we wish en plus : Zend, jQuery, Doctrine, Ruby On Rails, SVN, Git, Wordpress…

Les conditions que we offer généreusement

Poste basé à Rennes, à pourvoir immédiatement, en CDI avec période d’essai étendue à 3 mois, pour une rémunération à débattre sans se battre.
Pour postuler, rien de plus simple il y a : (à vos sollicitations téléphoniques, nous ne répondrons pas).

L’iPhone : Objet de culte, gadget pour technophile ou invention géniale ?

Le téléphone siglé de la Pomme est devenu en moins de deux ans l’objet technologique le plus apprécié du grand public. Avec un navigateur équipé comme les « grands », et un système d’exploitation permettant de mixer géo-localisation, prise de vue (photo ou vidéo) et expérience interactive en ligne, l’iPhone ouvre de nouveaux horizons de communication mobile à un très large public, de particuliers comme de professionnels.

Une aubaine pour la com’ des grandes marques ou des sociétés de services ?

iPhone, une application pour chaque usage

Sommaire de cet article

• Le navigateur de l’iPhone en position de leader incontestable en France
• Sites mobiles et applications iPhone : un marché qui s’organise
• Le business de l’iPhone : Quelques chiffres
• Qu’est-​ce qu’une ap­pli­ca­tion iPhone ?
• Qu’est-​ce qu’un site spé­cial iPhone ?
• Ap­pli­ca­tion iPhone VS Site spé­cial iPhone
• Ap­pli­ca­tion iPhone, 5 condi­tions fa­vo­rables
• Un pro­jet de dé­ve­lop­pe­ment d’ap­pli­ca­tion, com­ment ça marche ?
• Site op­ti­mi­sé pour iPhone, 5 condi­tions fa­vo­rables
• Un pro­jet de site iPhone, com­ment ça marche ?
• Ap­pli­ca­tion ou site mo­bile ? Et pour­quoi pas les 2 !
• Sé­lec­tion d’ap­pli­ca­tions iPhone in­té­res­santes
• Sé­lec­tion de sites iPhone in­té­res­santes
• J’ai un pro­jet de site ou d’ap­pli­ca­tion iPhone !

Le navigateur de l’iPhone en position de leader incontestable en France

Les récentes études témoignent du bouleversement des usages qu’induit ce téléphone : plus de surf, plus de consultation des e-mails et toujours plus d’accès à Internet via les applications connectées au Net. En France, presque la moitié des «mobinautes» sont des possesseurs d’iPhone :

L'iPhone représente 44% des visites mobiles - Source eStats 2009

Sites mobiles et applications iPhone : un marché qui s’organise

Annonceurs, revendeurs d’applications, marchands d’accessoires et marques en recherche de notoriété s’intéressent de près à cette nouvelle forme de consommation dite mobile. Par delà le merchandising, ce qui interpelle c’est la multiplication des usages induits par cette plateforme.

Comme le dit en effet la publicité signée Apple, pour chaque besoin de la vie réelle, « il y a une application pour ça » :

• se repérer en ville,
• prendre les transports en commun,
• échanger des photos avec des amis,
• consulter quotidiennement les stats de son site e-commerce,
• lire des articles en ligne, jouer dans le métro,
• consulter les performances de son portefeuille d’actions en bourse,
• etc.

Des milliers d’acteurs pour des centaines de milliers d’applications, et bien plus encore de versions mobiles de sites Internet dédiés à ces usages.

iPhone est partout, même en sushis !

Le business de l’iPhone : Quelques chiffres

• 200 M$/mois : le marché des ventes d’applications iPhone,
• +200% : part de marché de l’iPhone face à ses concurrents (sur 2008-09),
• 11% des mobiles en France sont des iPhones (juin 2009 – groupe Gartner)

Voilà donc que l’on parle d’application et de site mobile, mais au juste quelle est donc la différence ? Et surtout dans quel contexte vaut-il mieux envisager de concevoir une application iPhone plutôt qu’une version iPhone d’un site Internet ?

Qu’est-ce qu’une application iPhone ?

Une application est un programme qui, intégré au système d’exploitation de l’iPhone, propose une expérience de navigation optimisée. La manipulation de données multimédias est rendue possible par l’interaction des différents outils natifs tels que le GPS, la caméra ou encore l’appareil photo.

Travailler / Communiquer

Jouer / Se divertir

S'informer / Se repérer

De nombreuses applications sont dédiées à une seule tâche (ex: prise de note, jouer la radio ou ajouter du contenu à son blog), mais la plupart tirent parti de la puissance d’intégration des différents modules de l’iPhone pour proposer des outils vraiment utiles et pertinents.

L’application Metro Paris, par exemple, permet de vous localiser, de vous indiquer l’entrée de métro la plus proche et vous emmène jusqu’à votre rendez-vous via une fonction d’itinéraire très puissante qui n’a besoin que de l’adresse d’arrivée (pas al station) pour vous réaliser le parcours le plus rapide en empruntant le réseau de la RATP. Génial !

Qu’est-ce qu’un site spécial iPhone ?

Le site iPhone de LunaWeb - lunaweb.fr/m

Un site spécial iPhone peut être une version allégée d’un site existant, ou bien une ré-interprétation complète d’une vitrine Web afin de proposer une expérience de navigation optimisée et complètement adaptée à l’interface et aux fonctionnalités du téléphone Apple. Comme son nom l’indique, cette version est exclusivement réalisée pour un public de possesseurs d’iPhone. Il sera donc très moyennement perçu des autres navigateurs, mobiles ou pas.

Puisque l’on est en contexte mobile, il convient donc d’imaginer quel sera l’usage et le contexte de navigation des internautes de cette interface mobile. En établissant des scénarios utilisateurs adaptés, on imagine dans quelles situations le site sera visualisé (ex. pour un restaurant : pour chercher l’adresse/le numéro de téléphone, pour effectuer une réservation, etc.).

Bien entendu, le site mobile proposera du contenu, de l’image et du texte principalement, et sera moins « puissant » qu’une application puisqu’aucune fonction avancée ne sera disponible (localisation GPS, captation vidéo/audio, fonctions de navigation, etc.).

Application iPhone VS Site spécial iPhone

Mobil'iti : la Vallée de Clisson

À l’heure de construire une stratégie mobile, l’inévitable 
question de la forme revient à poser celle du fond :

• quelle est l’histoire à raconter ?
• quels messages faire passer ?
• quelle expérience offrir ?
• de quelles ressources dispose-t-on ?
• quelle finalité à cette présence ?
• quels objectifs à atteindre ?
• à quel public s’adresse-t-on ?

De ces éléments fondamentaux découle la logique 
d’action, et donc la mise en scène de notre histoire. S’il est difficile de tout reprendre dans un article qui se veut synthétique, il semble néanmoins évident que certains contextes vont très logiquement vous aiguiller vers le choix d’un projet applicatif.
Impossible par exemple d’imaginer de créer le site mobile permettant de réaliser le tracking GPS de vos parcours de joggueur, après prise de photos du parcours et calcul du temps et de la distance parcourus.

Application iPhone, 5 conditions favorables

Il nous semble évident de privilégier le développement d’une application mobile lorsque :

Module de localisation de l'Application iPhone Estuaire 2009

• l’opération de communication est pérenne (reconduit d’année en année ou bien un service permanent),
• le dispositif doit inclure du rich media (son, GPS, images, SMS…),
• les informations sont nombreuses et de nature très diverses,
• les accès doivent être sécurisés et/ou personnalisés,
• le dispositif est prévu pour un usage quotidien (alertes…).

Pour faire simple, il est indispensable de pouvoir compter sur une application quand il s’agit de proposer une expérience enrichie pour le mobinautes. Des exemples tels que celui de l’application développée dans le cadre de la manifestation culturelle Nantes Estuaires 2009 (et dont j’ai déjà rendu compte dans le billet Estuaire 2009 s’offre une application iPhone) permettent de se rendre compte à quel point une application peut offrir un vrai support de visite et donc être un adjuvant de la découverte d’un produit, d’un service ou d’une manifestation.
Pour Nantes Estuaires, en l’occurrence, l’iPhone devient un audio-guide puissance 10 de la manifestation culturelle qui s’étalait sur 9 mois.

Un projet de développement d’application mobile, comment ça marche ?

Un projet de développement d’application revient peu ou prou à suivre les étapes suivantes :

• exploration des besoins/objectifs,
• définition du projet (cahier des charges),
• maquettage ergonomique et graphique,
• développement Cocoa et Javascript,
• test et mise en production,
• demande de publication sur l’App Store,
• publication de l’application.

Phase de maquettage ergonomique, application Things for iPhone - http://is.gd/5gXMv

Le temps de développement d’un tel projet dépend bien entendu du nombre d’acteurs officiant sur la conception, et de la capacité du donneur d’ordres à faire valider les différentes étapes du projet ; mais il semble d’ores et déjà acquis qu’une application iPhone simple met entre 3 et 6 mois environ à voir le jour.
Et pour les grandes applis, non seulement le projet peut mettre plus d’une année à naître, mais en plus il faudra compter avec un développement quasi constant puisque les versions de l’application viendront au fur et à mesure de la découverte de nouvelles fonctionnalités possibles (ou des bugs qui apparaîtront…).

Un site optimisé pour iPhone, 5 conditions favorables

Dans cette même logique, il existe un « terrain » plus propice au développement d’un site mobile, plutôt que d’une application :

• visite rapide et condensée d’un site corporate,
• infos courtes à transmettre de manière instantanée,
• publication dynamique du contenu Internet,
• contexte e-commerce ou e-learning,
• dispositif prévu pour une consommation rapide.

N’oublions pas, de plus, que le navigateur Safari est équipé de fonctions de visualisations quasi identiques à son grand frère équipant les ordinateur Apple. Une réserve de taille cependant : aucun iPhone ne sait lire les applications Flash, toutes les animations doivent donc être réalisées en Javascript.

La version iPhone du site mobile de la SCNF

Un projet de site iPhone, comment ça marche ?

Qui dit projet, dit également gestion de projet, même pour un site mobile.
Voici comment il est possible de rythmer l’organisation d’un projet de site mobile :

• exploration des besoins/objectifs,
• définition du projet (cahier des charges),
• maquettage ergonomique et graphique,
• développement HTML et Javascript,
• test et mise en production,
• publication sur url spécifique,
• mise en place d’un kit de détection sur site global.

Évidemment, le fait de créer un site pour iPhone simplifie énormément la tâche à l’heure de valider techniquement un cahier des charges : il n’y a qu’un navigateur, qu’une interface et qu’un support graphique à supporter. Fastoche quoi !

En toute logique, le temps de développement, et donc le budget à allouer, est très en dessous de celui nécessaire pour une application. Selon le nombre de page et le type de site (est-ce un site satellite allégé ou bien une architecture optimisée d’un site existant et qui propose des informations dynamiques type www.sncf.mobi ?), le projet va bien sûr supposer plus ou moins de ressources, mais pour un petit site « portfolio » des services ou des produits d’une entreprises, sur une quinzaine de pages statiques, 3 semaines peuvent suffire depuis la définition du projet à sa mise en ligne.

Application ou site mobile ? Et pourquoi pas les 2 !

Certains acteurs n’ont pas voulu choisir forcément entre un site répondant à un usage d’immédiateté, de praticité et de concision ; et une application iPhone, synonyme d’expérience enrichie, sécurisée et/ou interactive.

C’est le cas par exemple du Crédit Mutuel, qui a su composer la recette idéale avec les deux méthodes :

• Application iPhone : localisation de son agence via GPS, consultation de son compte, création de virements et numéro de paiement virtuel pour ses achats en ligne. Disponible sur l’App-Store et gratuite pour les clients.
• Site iPhone : consultation de ses comptes, virements, suivi d’opérations boursières, numéros utiles en cas de perte ou vol.

D’un côté, on colle à une préoccupation de praticité (le site, accessible rapidement de n’importe où) et de relation riche avec le client (application, proposant une consultation avancée du compte via mobile).

Application iPhone du Crédit Mutuel

Site iPhone du Crédit Mutuel

Sélection d’applications iPhone

Pour ne pas se quitter sans avoir testé et/ou vu de quoi tout cela a l’air, voici une rapide sélection de quelques applications connues et très utilisées par les possesseurs d’iPhone :

• GPS TomTom (jamais perdu, toujours à l’heure) : http://is.gd/2ws6u
• Le Figaro (application exemplaire) : http://is.gd/2wwqo
• L’Équipe (très pratique et rapide) : http://is.gd/2wvQ2
• Le Monde.fr : http://is.gd/2wvRM
• France24 (la TV en live + le dernier journal) : http://is.gd/2wvWb
• Métro Paris : http://is.gd/2wvYu
• Wikipedia : http://is.gd/2wwmr
• Météo Pro : http://is.gd/2wwqV
• PagesJaunes : http://is.gd/2wws2
• Facebook : http://is.gd/2wQyP
• Tweetie (Twitter version client) : http://is.gd/2wQHT

Sélection de sites iPhone intéressantes

Égalité pour tous, voici une liste de sites Internet « iPhone Ready » :

• libération expresso : http://iphone.liberation.fr
• google : http://m.google.com
• l’oréal : http://www.iphone.lorealparis.com
• kelkoo : http://m.kelkoo.com
• sport24 : http://mobile.sport24.com/
• mappy : http://www.mappy.fr/
• vélib : http://www.ivelib.com/
• Allocine : http://iphone.allocine.fr/
• Meteo24 : http://www.meteo24.fr/

J’ai un projet de site ou d’application iPhone !

Puisque l’on a beaucoup parlé de sites mobiles et d’application spécialement dédiées à l’iPhone, n’hésitez pas à nous contacter si vous souhaitez recevoir un devis pour votre projet.

À lire sur le même sujet :

Décliner un site pour iPhone
Coder le Web pour les mobiles
Créer l’icône de son site Web pour Iphone/Ipod Touch

Avant propos

Version iPhone du site Internet de LunaWeb

Découvrez sans plus attendre les différentes pages de la version mobile du site LunaWeb en vous rendant sur notre page référence !

Le site LunaWeb en version Mobile »

* * * Bonne lecture ! * * *

Un téléphone qui tombe à point nommé !

Le smartphone d’Apple est à la mode depuis bientôt deux ans, ça tombe bien il a permis de révolutionner la consommation d’Internet, et de faire entrer de plein pied l’accès Internet nomade dans le monde personnel comme professionnel.

Le développement d’applications iPhone suit des guidelines mises à disposition par Apple, d’un point de vue technique mais également ergonomique et fonctionnel. Dans le grand nombre d’applications disponibles sur l’AppStore, de nombreuses applications mettent par exemple en place une navigation qui se base sur le composant adéquat mis à disposition dans le SDK. Pour l’utilisateur, c’est l’assurance d’une appréhension plus simple et plus intuitive de l’interface.
[Source : Ergonomic Garden - iPhone & Android ou la prise en compte des guidelines - http://is.gd/1Ktf6]

Dans le même esprit, l’accès rendu facile et nomade à Internet permet aux utilisateurs d’iPhone de multiplier leurs séances de navigation dans un contexte pratique et/ou ludique. De récentes études démontrent en effet que les possesseurs du téléphone d’Apple surfent plus sur Internet, qu’ils consultent plus les emailings commerciaux, qu’ils micro-blogguent plus, et qu’ils matérialisent les signaux commerciaux extérieurs (enseigne de magasin, logo sur un camion, slogan à la TV) par un report sur leur navigateur mobile.

Bien entendu, ces usages concernent plus largement les smartphones, à la nuance près que l’iPhone propose une ergonomie et un confort de navigation qui conduit à un plébiscite du surf chez ses utilisateurs. Tout ceci nous amène directement à la question qui tue : comment offrir une navigation optimisée pour un utilisateur nomade, zappeur et accédant à l’information via un écran de 320×480 pixels ?

Faire d’un utilisateur nomade un internaute efficace

Récemment confrontés à une refonte de notre site Internet, nous avons eu à analyser de près comment il était possible de « servir » du lunaweb.fr aux utilisateurs équipés de ce téléphone bigrement pratique.
Bien entendu, cette démarche s’inscrit dans un cadre plus large de réflexion sur les usages de notre site Internet.

Une première consultation de nos statistiques nous a renseigné sur le taux de consultation du site depuis un terminal mobile : relativement faible !

À bien y regarder, les chiffres d’audience nous indiquaient cependant deux choses intéressantes, qui nous motivaient à quand même « y aller » :

• le peu de terminaux mobiles qui y accédaient sont majoritairement des iPhones (merci les copains;-))
• les visites « mobiles » étaient souvent très courtes, trop courtes, et ne reflétaient pas le parcours « normal » d’un utilisateur « normal ».

Fort de ces observations, il nous a paru logique de penser qu’il nous faudrait penser en premier lieu au fond du site, plutôt qu’à sa forme. En effet, puisque l’on avait la chance d’attirer quelques curieux sur iPhone, pourquoi ne pas leur proposer une expérience de navigation vraiment utile et agréable ?

La genèse d'une application iPhone à succès - Things, de CulturedCode (©)

Possesseur de ce bout de bakélite signé de la pomme californienne, je suis moi-même très souvent confronté à la frustration de voir surfer sur un site « normal » depuis ce téléphone et de rencontrer les freins suivants :

• lisibilité des caractères, puisque toute la page est affichée, mais sur un écran représentant à peine le tiers des petits écran de PC !
• poids de la page, supposant une temps de chargement prohibitif, surtout quand on n’est pas en zone 3G (c’est-à-dire hors des villes
• présence d’espaces blancs non renseignés quand il s’agit d’encarts flash (ou pire, des textes que personne ne voit jamais « normalement »…)
• navigation pensée pour une souris, et pas pour un gros doigts glisseur (je hais les petits liens textes pas annoncés en tant que tels, je préfère de loin un gros bouton marquant le passage d’une page à l’autre)

Face à cela, et compte tenu de la période très courte pendant laquelle il est possible de capter l’attention d’un visiteur surfant sur votre espace Web depuis son siège de TGV, dans le métro ou le canapé ; il convient donc de constituer un mini-cahier des charges du site pour iPhone.

La mise en scène ergonomique du parcours utilisateur sur Iphone - © CulturedCode

Ce dernier sera très rapidement établi puisqu’il s’agit de :

• déterminer à quel(s) public(s) va s’adresser la version iPhone de votre site (quel public, quels type de navigants, quelle attente),
• sélectionner les contenus absolument essentiels qui doivent être communiqués, compte tenu de l’attente de vos visiteurs
• ré-écrire ces contenus pour plus de concision et de clarté (on taille à la serpe, si si !)
• réaliser un rapide wireframing reprenant la taille de l’écran iPhone afin de visualiser le rendu des textes
• prévoir une charte graphique allégée de votre site mobile
• réaliser des visuels clairs et adaptés à la taille de l’écran
• mettre en place un environnement de navigation propre à l’iPhone, en se basant sur un kit Web spécialement étudié pour cette interface (voir plus bas),
• concevoir un site « allégé », c’est-à-dire conçu pour un usage nomade et restreint.

La navigateur iPhone à la loupe

Vidéo du maniement du navigateur Safari

Développé par Apple, il est doté du navigateur internet Safari Mobile, une version light du navigateur grand frère, possédant le même moteur de rendu HTML.

Il réagit donc exactement de la même façon que la version Mac. Dans la mesure où vous maîtrisez les langages de base de l’Internet, comme le HTML, CSS ou encore Javascript ; la création d’un site pour iPhone se déroule de façon quasi identique à un site ordinaire.

Le principal avantage est qu’ici, l’iPhone n’acceptant qu’un seul navigateur (en tout cas pour l’instant), le souci principal d’un webmestre est alors écarté : pas de tests de rendus sur une multitude de navigateurs. Ce qui permet de gagner un temps considérable (pas de phase de débuggage à prévoir).

La contrainte du téléphone portable

Première contrainte lorsqu’on veut réaliser une version mobile de son site Internet : la taille de l’écran. Si l’on part désormais du principe que tout site « correct » doit respecter la résolution basique de 1024 pixels de large, pour 768 de haut (dimensions disponibles sur tout ordinateur normalement constitué, hors mini PC), on doit en revanche se contenter des tailles suivantes pour l’iPhone :

• 320×480 pixels lorsqu’il est utilisé verticalement,
• 480×320pixels lorsqu’il est utilisé horizontalement.

Ce qui est, il faut bien l’avouer, extrêmement limité. L’iPhone permet donc la lecture d’un site Web ordinaire (comprendre, une version non-mobile du site), mais son affichage sera tronqué et la lecture s’en verra affectée.

Convert, application pour iPhone, © Taptaptap.com

L’autre contrainte est le curseur, c’est à dire le pointeur avec lequel nous allons cliquer et ainsi naviguer dans le site. Pour un ordinateur, pas de souci : le pointeur est petit et précis, il permet de cliquer ET de survoler. Mais sur un iPhone, le pointeur se matérialise par votre doigt, qui est plus gros et donc moins précis.
Afin de rendre la navigation possible du bout des doigts, il convient donc de réfléchir aux tailles des boutons et autres liens pour que ceux-ci puisse être facilement cliqués (ou devrai-je dire « tapés »).

Enfin, l’appareil est portable et donc utilisé dans divers environs pas forcément propices à la lecture, provoquant des reflets lumineux qui affaiblissent la vue de l’écran. Il faut donc penser à l’utilisation de contrastes élevés entre les différentes zones matérialisant les espaces de navigation et ceux dévolus à la lecture.
Dans le même esprit, les liens seront facilement repérables et bien espacés, afin d’éviter aux gros doigts de saisir à la volée deux boutons ou deux liens hypertextes.

Construire un site iPhone, le détail technique

Il existe sur le Web une multitude d’outils permettant d’accélérer le travail inhérent aux basiques (frameworks, librairies Javascript et autres subterfuges CSS).

À l’instar du web « traditionnel », il vous est également possible de créer votre site pour iPhone en partant d’une page blanche ; mais certains outils ont été pensés spécialement à cet usage. Dans cet article, j’en citerai deux (pour les avoir testés) :

• Le premier est iUI développé par Joe Hewitt, par ailleurs développeur d’application pour Firefox (et notamment le créateur du plugin Firebug, tant aimé des webmestres). Très simple d’utilisation, ce framework est un package composé d’une feuille de style CSS, d’un gabarit HTML et d’un dossier/images/ permettant de développer des applications web pour iPhone. Très simple d’utilisation, il est en revanche à noter que cette ressource pêche par son manque d’actualisation, la faute à l’emploi du temps très chargé de son concepteur.
• Le second est WebApps : C’est notre préféré, nous l’avons utilisé pour réaliser la version iPhone du site de LunaWeb. Lui aussi très simple à mettre en œuvre, ce framework se propose de partir du look & feel d’une application native d’iPhone.

Il suffit alors de personnaliser le fichier CSS et d’entrer vos contenus en HTML afin de commencer à construire votre site mobile.

Le code est ouvert (sous licence open source), bien commenté et lui aussi constitué de 3 éléments principaux :

• un fichier index.html qui contient l’intégralité de vos pages,
• un fichier Javascript qui gère la navigation
• et un fichier CSS qui permet le design de votre site.

Code HTML de la version iPhone du site LunaWeb.fr

Rien de plus simple !

Tester son site iPhone sur PC ou Mac

Puisque vous savez comment construire la version spéciale iPhone de votre site, il convient désormais de tester le rendu de ce dernier dans un navigateur approprié. Le tester avec Internet Explorer, Mozilla Firefox ou même Safari « non mobile » reviendrait en effet à ne pas tester grand chose, puisqu’il est entendu que cette déclinaison mobile n’est « regardable » que sur le téléphone d’Apple.

La meilleure façon étant bien entendu d’avoir un iPhone sous la main, pour autant tout le monde n’en dispose pas sous la mais. Pour cela, la solution passe obligatoirement par l’utilisation de simulateurs iPhone.

iPhoney, simulateur d'iPhone pour Mac

Ces simulateurs, certains fidèles, d’autres moins, sont simplement des applications dotées de Safari mobile. Ils permettent de visualiser le rendu de son site à la manière d’un iPhone. Après en avoir essayé plusieurs, j’en ai retenu un seul : iPhoney.
Durant nos tests, ce petit soft s’est montré parfaitement fidèle au rendu vérifié par la suite sur le « vrai » téléphone, presque plus pratique à utiliser en phase de développement que l’objet communiquant Apple. Revers de la médaille, cette application n’est uniquement disponible pour Mac.

La détection iPhone sur mon site Internet

Votre site est donc prêt à être publié, et vous vous posez alors la question du où ? et du comment ? le mettre en scène. Puisqu’il est établi depuis le début de cet article qu’il s’agit bien de réaliser une version spéciale Iphone de votre site Internet, vous ne pouvez pas prétrendre installer ce domaine sur un nom de domaine en .mobi, qui priverait potentiellement tous les possesseurs d’appareils mobiles d’une version adaptée de votre site pour ces autres terminaux nomades.

Vous pouvez, en revanche, décider de mettre en place votre site iPhone sur une extension, une page ou un sous-domaine spécifique de votre site (du genre iphone.votredomaine.com ou bien votredomaine.com/iphone). Il faudra alors prévenir vos utilisateurs qu’une version spéciale de votre site existe à cette adresse.

Le chat se mord alors un peu la queue, car si vous choisissez cette solution, vous devrez « planquer » un lien « iPhone » tout au début de votre page d’accueil du site, afin que les utilisateurs provenant du mobile Apple. Le Web étant ce qu’il est, vous ferez alors subir un long temps de chargement à quelqu’un qui vous proposez une version allégée plus rapide après ce tunnel d’entrée un peu inutile.

Pour pallier à cela, vous pouvez opter pour une autre solution : détecter le type de navigateur accédant à votre nom de domaine principal, et servir la version appropriée de ce dernier selon la situation rencontrée :

• site « normal » pour les internautes sur Mac, PC ou Linux
• site « allégé » pour les mobilnautes (téléphones, PDA)
• site « iPhone » pour les gens équipés du célèbre téléphone

Chaque navigateur possède en effet ce qu’on appelle un «USER AGENT», une signalisation effectué par le navigateur lorsqu’il demande à accéder à une page. C’est cet agent qui va nous permettre de discriminer les différentes versions du site Internet duquel vous proposez une déclinaison mobile. Par le truchement du bout de code qui suit, que vous collerez dans votre fichier .htaccess à al racine de votre site, la version iPhone de votre site sera donc servie aux internautes équipés :

# Reecriture specifique pour appareils mobiles iPhone
RewriteCond %{HTTP_USER_AGENT} ^(.*)iPhone(.*)
RewriteRule ^(.*/)?$ mobile.php [L,QSA]

Ce script permet donc de jeter un œil sur le type de navigateur qui s’annonce et de re-diriger vers la page de votre site mobile (ici, en l’occurrence, mobile.php). Vous devez donc modifier la dernière ligne et renseigner le chemin vers votre site mobile.

Si vous désirez essayer ce script depuis votre ordinateur (il faut bien tester…), vous pouvez utiliser le plugin FireFox User Agent Switcher qui permettra de mentir sur la carte d’identité du navigateur « normal » pour le faire passer pour un « mobile ».

Votre site pour iPhone est alors en ligne, vous pouvez alors communiquer en direct avec les possesseurs du téléphone en leur délivrant un fond et une forme exclusive.
Il est totalement possible, par exemple dans le cas d’une petite pizzéria de quartier, de décider que la déclinaison iPhone du site ne comportera qu’une seule page constituée :

• d’un logo,
• un numéro de téléphone (cliquable pour appeler d’un seul « tap »)
• un lien de localisation GPS pour l’itinéraire (puisque l’iPhone embarque Google Maps),
• et mêmes d’un message exclusif type « coupon -20% pour les possesseurs d’iPhone ».

La détection iPhone sur le site de LunaWeb

Nous aussi nous nous sommes prêtés au jeu, nous avons lancé un chantier de création d’une version mobile de notre site, et nous en avons même fait un récit intitulé LunaWeb Mobile.

Enfin, n’hésitez pas à nous consulter afin de vous faire accompagner dans cette démarche.

À lire sur le même sujet :

Application iPhone ou site mobile iPhone ?
Coder le Web pour les mobiles
Créer l’icône de son site Web pour Iphone/Ipod Touch

Pour les guerriers de l’intégration Web, voici un outil de référence très pratique permettant de connaître d’un coup d’œil l’équivalent HTML d’un symbole, d’un acronyme ou d’une abréviation. De construction simple, l’arborescence classe par type de besoin les différentes ressources disponibles : symboles généraux, mathématiques, devises, direction… Un vrai couteau suisse !

Ce site présente en outre une navigation à chargement AJAX permettant de ne pas relancer un rafraîchissement complet de la page lorsque l’on passe d’une catégorie à l’autre. Pratique et rapide, cet artefact réduit le temps d’utilisation de ce service pour en faire une véritable bibliothèque portable des entités HTML courantes.

De plus, l’utilisation d’une navigation par onglets (merci à Klaus Hartl pour son plugin jQuery) permet un passage rapide d’une famille d’abréviations à l’autre, en gardant le focus de la page, c’est-à-dire sans avoir à re-scroller la page afin de retrouver son niveau de lecture initial. Si l’on ajoute à cela l’utilisation de couleurs à fort constraste (sans aller jusqu’au noir et blanc pur) et le recours à un design très tableau (normal pour une… table de références!), on obtient un outil fort agréable et utile !

> Voir le site Entity Code