Alsacreations.fr en version mobile

Bonjour tout le monde,

Je viens de faire une refonte du site www.alsacreations.fr censée être optimisée pour les mobiles (récents).

Pour cela je suis passé par les choix / techniques suivants :

1) HTML 5 pour les champs de formulaires (email et téléphone)
2) Détection du média mobile via le meta tag "viewport" et les media queries. On a décidé de faire volontairement l’impasse sur les anciennes générations de navigateurs ou ceux qui ne supportent pas les media queries (windows mobile, blackberry sauf toute dernière génération)
3) Affichage d'un message personnalisé en préambule ("Version mobile du site web de l'agence")
4) Redéfinition des tailles de polices
5) Redimensionnement des éléments : passer toutes les largeurs fixes en largeurs fluides, appliquer des max-width 100% à tous les éléments "risqués" (img, table, object,...) et un word-wrap: break-word pour éviter les débordements (code source par ex)
6) Passer tous les contenus sur une seule colonne : les éléments contigus deviennent empilés (les float left ou right deviennent des float none)
7) Suppression du superflu : display: none sur les éléments jugés non nécessaires à la navigation ou la compréhension du document
8) Optimisation de la navigation : on refond intégralement le système de navigation principal et on l'affiche de façon optimisée pour le media mobile
9) Réordonnement des contenus. C'est le bonus final : On fait le choix d’afficher systématiquement les blocs de contenus en priorité, puis la navigation principale, puis le pied de page grâce au modèle de boîte flexible et sur l’ordre d’affichage des blocs via la propriété box-ordinal-group.

C'est tout
En théorie, tout est magnifique et bien pensé... mais je ne peux tester que sur mon smartphone personnel, un iPhone 3.

Je n'ai aucune idée du rendu sur les autres mobiles récents et c'est pour cela que je demande un petit geste : pourriez-vous tester www.alsacreations.fr sur votre smartphone et me faire un retour en me confirmant (ou m'infirmant) que mes choix techniques s'appliquent bien chez vous ?
Encore mieux, avec une capture d'écran, je serais aux anges.

Merci d'avance pour votre aide.

La discussion reste bien entendu ouverte pour débattre du bien fondé de chaque technique et de sa mise en oeuvre pratique pour les personnes intéressées.

Bonne journée,

Raphaël
Modifié par Raphael (04 Jul 2010 - 23:05)

Patidou a écrit :
Je t'ai répondu sur twitter (Gloup Gloup), je ne sais pas si tu as reçu les réponses.

Hello,

Oui, merci à toi !

Peut-être un peu H.S., mais c'est tout chaud : Screencast: "Mobile web development techniques"

Hello,

Allez, je franchis le pas, depuis le temps que je lis Alsacréations, je peux bien m'inscrire pour t'aider à avoir un retour sur la refont "mobile" du site

Donc, perso, j'ai un vieux "pseudo" smart-phone : Une LG KU-990 Viewty.

Alors, avec le navigateur intégré, le site ne détecte pas qu'il s'agit d'un téléphone mobile.
Du coup, les images sont bien grandes pour un si petit écran et c'est donc difficilement exploitable...

Par contre, avec Opera Mobile, que j'ai également installé sur mon petit Viewty, le site détecte bien qu'il s'agit d'un mobile, et l'affichage est conforme à tes souhaits. (enfin, je pense... en tout cas, c'est propre !) C'est un poil trop large pour cet écran... mais d'une part, j'ai pas réussi à passer l'affichage en mode paysage sous Opera et d'autres part, il est clair que la résolution du Viewty (240x400) n'est pas vraiment ce qui se fait de mieux aujourd'hui en terme de smartphone

Voilou, en espérant avoir pu participer à l'amélioration de ce toujours excellent site

Tigrosaure

Merci pour ces maigres mais importants retours.

Vu le nombre de lectures de ce sujet, j'en déduis :
1- que le sujet n'intéresse pas grand monde (ce que je peux comprendre)
2- que cette version mobile est vraiment parfaite (ce qui m'étonnerait un peu plus)

Salut Raphael,

1...2...
3- Qu'il existe des alsanautes intéressés par la question mais qui ne possèdent pas de téléphone malin pour tester
(ce qui ne mets pas en doute la perfection de votre version mobile...)

Hello, comme il n'y a pas beaucoups de retour, alors voici le mien avec un HTC Desire (Android 2.1, WebKit , 480x800)

- Le menu se trouve tout en bas, c'est normal ?
- Je trouve pas de lien pour allez directement sur la version Desktop . (L' ai-je loupé ?)

Si non très bonne lisibilité, ça se navigue bien et il s'adapte parfaitement sauf la marge de droite seulement sur la page d'accueil.

Le gros point negatif, c'est quand on passe en mode landscape, les blocs ne s'adaptent pas, et quand on rechargent la page ou clique sur un lien, patara : on tombe sur la version desktop (il est la mon lien !! )
C'est la detection du mobile qui fait ? Je me trompe ? Quand je surf avec mon mobile, dès j'ai quelque chose de long a lire, je passe en landscape c'est plus agreable.

Voila si non, super la lisibilité et l'information est bien la, notament, le "version mobile du site" qui permet de situer.

Je pourrais faire un screenshot du mobile dès demain si ça interrese ( !! Mais , on est deja demain ! )

Raphael a écrit :

La "détection" ne se fait que via media queries : la feuille de style mobile ne s'applique que si le device a une résolution native inférieure ou égale à 480px. Et ça ne devrait rien changer si le device passe en landscape.
Du coup, je ne comprends pas ton histoire de "tomber sur la version desktop"

AMHA, j'ai l'impression qu'il pense se trouver sur une version «spéciale mobile» du site, du genre :

http://m.alsacreations.fr/

Modifié par Patidou (15 Jul 2010 - 10:42)

ReHello, tout d'abord,

Raphael a écrit :
Oui, c'est volontaire, voir le point 9 dans mon explication.

ça m'apprendra a lire entre deux ligne

Raphael a écrit :
Il n'y en a pas puisque je ne vois pas trop l'intérêt d'une version desktop sur un mobile de résolution 480px. Tu peux m'en dire plus ? Tu t'attendais à une verison desktop ? Qu'apporterait-elle

Je dit ça par ce que j'aime bien avoir un lien, qui renvoi sur la version normal du site, quand par exemple ont a quelque chose bien précis a trouvé, et qu'elle n'est pas sur la version mobile, donc plus rapide, ou plus simple d'aller sur le site normal, mais si le site et bien fait , y devrait pas y avoir de problème

Donc voila pour les Screenshots: (j'ai mi des liens, les photo sont un peu grande sur le poste !)

La page d'acceil :
http://dl.dropbox.com/u/6888621/Android/Capture/device.png
Le formulaire de la page d'accueil:
http://dl.dropbox.com/u/6888621/Android/Capture/device1.png
Le menu :
http://dl.dropbox.com/u/6888621/Android/Capture/device2.png
Formation :
http://dl.dropbox.com/u/6888621/Android/Capture/device3.png

Sur certaines page, comme la page création, la taille est différente, le texte est plus petit:
http://dl.dropbox.com/u/6888621/Android/Capture/device4.png et donc le menu plus élargie : http://dl.dropbox.com/u/6888621/Android/Capture/device5.png je sais pas pourquoi, mais ça viens peut etre de mon telephone ?

Raphael a écrit :
La "détection" ne se fait que via media queries : la feuille de style mobile ne s'applique que si le device a une résolution native inférieure ou égale à 480px. Et ça ne devrait rien changer si le device passe en landscape.
Du coup, je ne comprends pas ton histoire de "tomber sur la version desktop"

Il passe a la version desktop seulement après un clique sur lien, ou rechargement de la page. Je sais pas trop comment marche les media querie, mais je pense qu'il doit regarder si la longueur est plus grande que la largeur si oui > on est en mode portrait donc > afficher page mobile

On comprend mieux en image :

E-mailing en landscape :
http://dl.dropbox.com/u/6888621/Android/Capture/device6.png
et quand on clique sur un lien en landscape:
http://dl.dropbox.com/u/6888621/Android/Capture/device7.png
http://dl.dropbox.com/u/6888621/Android/Capture/device8.png
http://dl.dropbox.com/u/6888621/Android/Capture/device9.png
On est obligé de revenir en portrait pour que la version mobile revienne.

Voila Voilou, si les images dans les screenshots comme le bouton du formulaire paraisse moche, c'est pas comme ça en vrai.

bioslord a écrit :
On comprend mieux en image :

Ah oui, je comprends le topo, mais de là à comprendre d'où ça vient ...

Merci beaucoup pour ces retours.

PS : j'ai fait des modifs il y a une heure. Tes captures d'écran sont très récentes ?

Raphael a écrit :
PS : j'ai fait des modifs il y a une heure. Tes captures d'écran sont très récentes ?

Oui, je les ai fait a l'instant

bioslord a écrit :


Oui, je les ai fait a l'instant

OK, donc la seule indication imposée (non fluide) le meta viewport dont la valeur est "device-width".
Du coup, je n'y peux pas grand chose si cet Android "perd" cette valeur dans certains cas en landscape

Euh, sans vouloir trop t'embêter, tu voudrais bien refaire le test ? (je viens de modifier un truc)

Patidou a écrit :
On dirait que son mobile fait 800px de large en landscape… Si il n'a pas retravaillé les images.

Ben c'est le cas
Il a une résolution natif de 480x800 en landscape (800x480 en portrait )
Quand je l'ai acheté j'etait tout content j'avais le tel avec la plus grande resolution, mais maitenant c'est l'iPhone4 avec son 960x640

bioslord a écrit :
mais maitenant c'est l'iPhone4 avec son 960x640

Mouais, sauf que l'iphone 4 continue a considérer son"device-width" à 320px...contre toute attente
Bon ben désolé : ton téléphone est considéré comme étant un "vrai" écran classique quand il est en landscape.

Pour moi, la limite entre le mobile et le desktop est de 800px. Le tien est entre deux feux selon mes critères : mobile en portrait et desktop en paysage.
Modifié par Raphael (15 Jul 2010 - 23:48)

Pour iPhone 4, apple a sorti un media queries "propriétaire":

only screen and (-webkit-min-device-pixel-ratio: 2)

…faut voir s'il fonctionne avec android…

Théoriquement on devrait pouvoir tester les dpi* mais peu de navigateurs tiennent compte de cette propriété.


*160 pour iPhone 2/3 et plus de 330 pour le 4.

Patidou a écrit :
Pour iPhone 4, apple a sorti un media queries "propriétaire":

Ah oui c'est pasidiot, mais ça devient vraiment trop spécifique.