Quelques idées pour adapter le design de son site à l’iphone

L’ergonomie sur mobile est de plus en plus un pré-requis pour la conception d’un site Internet, certains plugins de blogs permettent déjà de générer automatiquement des mises en page qui permettront d’optimiser l’affichage sur des terminaux comme les iphones. Pour les autres sites (autres que les blogs donc) il faut créer, porter ou adapter son thème actuel aux contraintes de la taille des écrans des téléphones qui sont plus petits donc moins lisibles.

Afin de vous donner quelques idées de mise en page bien fichues je vous encourage à aller visiter cette galerie de sites « iphone » qui est révélateur de beaucoup de très bonnes pratiques de mise en page. J’ai notamment apprécié PleaseFixTheIphone et la version mobile de flickr.

css-iphone

Pour ceux qui sont sous wordpress je vous conseille le plugin wptouch qui a l’air bien abouti et que je viens d’installer sur 2803.

Publié le mars 25, 2009 par . Cette article a été publié dans web 2.0 et taggé , , , , . Enregistrer le lien de l'article.

11 commentaires sur “Quelques idées pour adapter le design de son site à l’iphone”

  1. C’est vrai que cela est particulièrement pratique quand l’on a par exemple un iPhone/iTouch, où on a souvent tendance à visiter des sites. (je parle pour moi du moins)

  2. Hello

    Je vais faire ma pub mais c’est surtout pour récupérer des avis sur notre site iphone: http://www.touteslesventes.com/iphone (ou http://tinyurl.com/tlviphone).

    Le site « desktop » présente toutes les ventes privées sur internet, permet de rechercher, mettre en place des alertes etc.. et surtout accéder aux ventes privées.

    Pour l’iphone, non-seulement il a fallu revoir le design, mais surtout adapter le fonctionnel à la consommation qui pourrait être faite de notre service dans un contexte de mobilité.

    Donc l’accès au contenu est plus simple (mais moins riche), et les actions limitées: dans la mesure où il parait difficile de passer une commande sur un site de vente privée depuis son mobile, on a juste mis en place un bouton « M’alerter par email », qui permet de recevoir une alerte email pour la vente qui nous a intéressé (pendant notre trajet de bus, de métro, train, en déjeunant, etc..), et quand je suis de retour sur mon PC, je n’ai plus qu’à cliquer dans l’email pour accéder à la vente :)

    Si Henri ou les autres visiteurs ont des commentaires, je suis très preneur !

  3. @PH Langlois : Ce n’est pas si mal, mais un petit quelque chose me gêne. Quand l’on tombe sur votre site via un appareil mobile (un iPod Touch en l’occurrence), nous ne sommes pas automatiquement redirigé vers la version dite « iphone ». Pourtant c’est quelque chose de possible et qui me semblerait pratique.

  4. @Mathieu Ca, c’est un bug !! ;)

    En fait, sur l’iphone ca redirige automatiquement vers le site iphone, en mettant juste un bandeau permettant d’accéder au site classique si on a un besoin particulier.
    Faut que j’adapte le test sur le header pour prendre l’ipod touch …

    Merci pour cette remarque !

  5. c’est vrai que la détection automatique est pertinente en générale mais une version avec une url spécifique n’est pas mal non plus, je pense qu’il y a des pour et des contre selon les méthodes. Sinon il est pas mal du tout ton site, le fait de revoir la navigation est essentielle, les usages ne sont pas les mêmes comme tu le soulignes.

  6. @Henri merci :)
    C’est effectivement surtout l’ergonomie / fonctionnel que j’ai revu, plus que le design, qui reste .. simple .. !

    @Mathieu logiquement c’est corrigé, sur ipod touch tu dois directement arriver sur la version « iPhone ».

Les commentaires sont fermés.