PouipouiDesign + iPhone = pouiPhone09

Ce titre un peu cryptique pour vous annoncer la sortie de la « version iPhone » de ce site !

En effet, depuis que j’ai un iPhone, j’avoue passer pas mal de temps dessus (quel doux euphémisme ^^”), et quand j’ai eu besoin de montrer mes travaux dessus pendant mes déplacements, le format “normal” du site ne s’y prêtait vraiment pas…

Du coup, après presque 5 jours (répartis sur 3 semaines) de réflexion et conceptualisation (le plus dur) et 2 jours (non-stop) d’intégration et mise en place/mise en ligne, j’ai enfin pu sortir une version plus adaptée au format d’écran et aux principes d’interaction de l’iPhone…

Pour la voir, deux façons simples :

  • consulter ce site avec un iPhone, évidemment :) A la première connexion, vous devriez être automatiquement redirigé vers la bonne version du site. Il est impossible de revenir vers la version “normale” (je n’ai pas réussi à mettre tout ça en place exactement comme je le voulais) sur l’iPhone.
    Edit : en utilisant le super plugin “Mobile Theme” de Noel Guilbert, j’ai pu mettre en place un système qui propose cette version mobile automatiquement aux iPhone, Blackberry, appareils sous Windows CE, Opera Mini, Symbian, Motorola, Opera Mobi… !! Merci Noel (et brol qui m’a pointée dans la bonne direction) ! :)
  • pour les “malheureux” qui n’ont pas d’iPhone ;) il vous suffira d’ajouter ”/?theme=pouiphone09” “?dc_mobile_theme=1” à la fin de l’adresse du site. Pour revenir à la version normale, il faudra ajouter ”/?theme=pouipoui09” “?dc_standard_theme=1” … simple non ?
    Edit: dans tous les cas, vous pourrez aussi cliquer sur les liens “version mobile” et “version complète” présents en bas de toutes les pages dans les deux versions.

Edit du 06 juillet 2009 : bon, ça a été mouvementé mais finalement je suis repartie sur une solution plus simple…
Utilisation du plugin Arlequin pour la gestion des thèmes, et un bout de code PHP trouvé là, agrémenté d’un bout de code du  plugin “Mobile Theme” de Noel Guilbert, et inclus à la fin du index.php à la racine…
A priori donc maintenant ça marche “au moins” sous iPhone de manière automatique et à vérifier sur Blackberry, Opera Mini/Mobi, Symbian, etc. Vos retours seront vraiment appréciés !
Mais de toute façon vous pouvez passer d’une version à l’autre en cliquant sur les liens version mobile” (“?theme=pouiphone09”) et version complète” (“?theme=pouipoui09”) présents en bas de toutes les pages pour voir lesdites versions…

Edit du 6 juillet 2009, un peu plus tard… :) Alors finalement ça ne sera pas en PHP mais en Javascript :) Une popup de question quand on est sur iPhone + un cookie pour ne pas reposer la question plusieurs fois…
Et pour tout le monde, toujours les liens pour passer d’une version à l’autre bien sûr…
Allez, j’y touche plus ! :)

Bref, je vous laisse fouiller tout ça et me faire vos commentaires, je serai comme toujours ravie de les entendre !

Comme vous pourrez le voir, je n’ai pour l’instant pas encore réintégré la recherche, je cherche encore un moyen de le faire “élégamment” et ergonomiquement… trouvez-vous qu’elle manque ?

Enfin, réfléchir à cette version (et m’inscrire récemment sur twitter, flickr, etc.) m’a amené à me poser la question de la pertinence de “liens sociaux” en bas de mes billets…
Trouveriez-vous utile de retrouver des boutons de raccourcis (vers twitter, flickr, reddit, etc., pour envoyer à un ami, etc.) en bas de mes billets ?
Ou au contraire trouvez-vous cela complètement superflu ?

Bref, j’ai en tout cas absolument adoré concevoir et réaliser cette version, qui demandait une réflexion assez poussée finalement, et je trouve le résultat final assez convaincant (faut savoir être honnête, et je suis rarement contente de mes “œuvres”)… presque au point de proposer un switch sur le site pour tous ceux qui veulent utiliser cette version même sans iPhone et surtout sans manipulations cabalistiques de l’url :) Edit: Ce switch est donc maintenant disponible en bas de chaque page !

A très bientôt pour de nouvelles nouvelles ! :)

5 réponses à cet article

# - - neolao -

Effectivement, la navigation est chouette.

# - - CUT HERE -

Hello,

Très sympa, facile et clair. Quelques remarques : comment gères-tu la détection de l’user agent ?
Car j’ai vu d’abord le site en version normale pendant 2 secondes avant d’être redirigé vers le thème adapté à l’iPhone. Dommage :/

En tout cas très lisible. Peut-être n’aurais je pas utiliser une liste déroulante pour changer de références. Un peu galère après 2 changements.

Sinon pas de bug constaté, félicitations :)

# - - Jérémie -

Design sobre et élégant, comme j’aime :)

Par contre, la première redirection est un peu surprenante, surtout avec un lien direct vers un billet qui renvoie vers une page d’accueil. C’est un peu déroutant.

Autre point qui m’a un peu surpris, le nombre de clic pour arriver a lire le contenu d’un billet (3!). Mais c’est peut-être moi qui ne suis pas très dégourdi.

Par contre, je trouve que le formulaire pour les commentaires est très agréable à utiliser (oui, je commente avec mon iPhone)

Globalement, plutôt Bravo :)

# - - Marie ALHOMME -

Bonjour et merci à tous de vos commentaires positifs ! Pour répondre à vos questions :

CutHere : La détection de l’iPhone se fait en JS sur les pages « normales », qui redirigent vers la version iPhone, mais je crois que ça ramène sur la home parce que j’avais un / en trop dans ma redirection… je l’ai enlevé, c’est mieux là non ? En tout cas merci de ta vigilance ! Pour la liste déroulante par contre, c’est marrant parce que moi au contraire je trouvais ça plus simple et ludique à utiliser sur l’iphone qu’une looooongue liste à scroller… ? Mais je note, si vous êtes plusieurs à me le dire je reverrai peut-être bien mon opinion sur le sujet ! ;)

Jérémie : La redirection ne devrait plus poser de problème, en ce qu’elle devrait pointer vers la bonne page et non vers l’accueil. Il faudrait peut-être plutôt une détection et redirection côté serveur mais je ne sais même pas si c’est possible ??! Par contre pour voir un billet, il suffit d’un click… sur le titre ! :) La petite flêche ne sert que pour lire le résumé avant d’éventuellement cliquer sur le lien de l’article complet. Pour certains articles courts qui n’ont pas de chapo/contenu mais juste un contenu, cela permet aussi de s’affranchir de charger la page complète de l’article et de le lire directement dans la liste. Ravie pour les commentaires puisque ça t’a permis de me faire ces retours :)

Voilà, j’espère avoir répondu à vos questions et remarques, n’hésitez pas si vous en avez d’autres ou souhaitez me répondre sur celles-ci ! :)

Votre réponse ?

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


Chez PouipouiDesign

  • PouipouiDesign / 2011 / JDS / Intégration
  • PouipouiDesign / 2011 / Westcon / Intégration
  • PouipouiDesign / 2011 / Renault Sport F1 / Webdesign / Intégration
  • PouipouiDesign / 2011 / CinéLycée / Intégration
  • PouipouiDesign / 2011 / Sud Web 2011 / Webdesign / Intégration / Développement
  • PouipouiDesign / 2010 / Raymond Interactive / Intégration / Développement
Retour en haut