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)
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)
)
