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.

Articles en rapport :

11 Commentaires

  • 1
    mars 25, 2009 - 11 h 39 min | Permalien

    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
    mars 25, 2009 - 12 h 08 min | Permalien

    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
    mars 25, 2009 - 12 h 13 min | Permalien

    @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
    mars 25, 2009 - 12 h 16 min | Permalien

    @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
    mars 25, 2009 - 12 h 19 min | Permalien

    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
    mars 25, 2009 - 12 h 23 min | Permalien

    @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 ».

  • 7
    mars 25, 2009 - 12 h 24 min | Permalien

    Cela fonctionne à présent, en effet !

  • 8
    mars 25, 2009 - 21 h 23 min | Permalien

    Cela fonctionne à présent, en effet !

  • 9
    septembre 20, 2009 - 11 h 01 min | Permalien

    Je te conseille vivement le thème « Carrington » qui est beaucoup plus pro –> http://www.geekeries.fr/articl.....og-iphone/

  • 10
    octobre 30, 2010 - 20 h 06 min | Permalien

    Salut,

    Vous auriez des liens de tuto sympa pour la création de widget pour un site en php?

  • 11
    novembre 1, 2011 - 5 h 08 min | Permalien

    Une étude de cas d’adaptation d’un site web pour les mobiles, en utilisant les CSS.

    http://blog.evolya.fr/index.ph.....ce-aux-CSS

  • Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    *

    Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    More in web 2.0 (6 of 354 articles)


    Voici une vidéo retraçant l'évolution des modifications apportées par les membres et les utilisateurs du service OpenStreetMap.org (une version opensource ...