Adaptation site pour Tablette (, smartphones): probleme d'interaction

Contexte: Le site a adapter est un site contenant de nombreux questionnaires. Chaque question peut avoir plusieurs reponses (QCM: Question a Choix Multiples). Chaque reponse est identifiee par un bouton radio. Le clic sur un bouton radio fait apparaitre un texte (Vrai ou Faux) dans une bulle (tooltip). Le but est d'identifier la bonne reponse a chaque question.

Probleme: la solution actuelle basee sur les spry (javascript) de Dreamweaver ne fonctionne pas sur les Tablettes et les smartphones.
1) Quelle solution envisager pour avoir un fonctionnement acceptable sur les Tablettes et les smartphones.
2) Peux-t-on concevoir un developpement commun pour les differents environnements (Pc, Mac, tablettes et smartphones).
D'avance merci pour toute contribution permettant d'avancer sur ce probleme.

Le problème vient souvent du fait que des "pop-up" directement dans la page utilisent le positionnement "fixed" qui n'est pas reconnu par les téléphones intelligents.

Personnellement, j'envisagerais d'utiliser un bloc apparaissant directement sous la réponse lors du clic. Ça pourrait être animé avec un slidedown de jQuery par exemple, etc, etc.

Autrement, il y a les frameworks mobile comme jQuery Mobile ou iUX qui pourraient sans doute offrir plus d'interactivité adapté mobile pour un projet du genre.

Merci pour la reponse. Je recherche la solution la plus simple possible. Actuellement, l'info-bulle "reponse" est positionnee par rapport au clic de la souris. Est-ce cela que vous appelez un positionnement "fixed".

Parmi les approches proposees laquelle permettrait aussi d'avoir la meilleure independance a l'environnement (PC, tablette, smartphone).

Questions subsidiaires:
1) faut-il basculer vers html5 et css3 afin de pouvoir differencier les environnements
2) l'utilisation de html5 et css3 ne risque-t-il pas de poser des problemes avec les navigateurs plus anciens (type IE8, IE7, FF....)

Pour un site unique compatible autant sur ordinateur que sur tablette et smartphone, la solution la plus simple sera d'oublier les "pop-up" et d'y aller avec un affichage des réponses au sein du flux.

(Parce que les framework pour cellulaire style jQueryMobile ne font pas réellement bonne figure sur un ordinateur de bureau)

Salut,

philter a écrit :
Questions subsidiaires:
1) faut-il basculer vers html5 et css3 afin de pouvoir differencier les environnements
2) l'utilisation de html5 et css3 ne risque-t-il pas de poser des problemes avec les navigateurs plus anciens (type IE8, IE7, FF....)

1. Non : on peut très bien se contenter du XHTML 1.0 et des CSS 2.1 (avec des CSS 3 uniquement pour les media queries) tout en tenant compte des supports mobiles.
2. Si ; mais, les solutions pour y remédier existent : créer les éléments HTML 5 dans le DOM pour les versions d'Internet Explorer antérieures à la 9 (afin qu'elles les prennent en charge pour les CSS et la manipulation du DOM, cette solution ayant l'inconvénient de supposer que JavaScript est activé pour qu'elle marche) et privilégier la dégradation élégante lorsque les navigateurs ne comprennent pas certaines propriétés CSS 3 (par exemple, prévoir une couleur d'arrière-plan si les dégradés gérés en CSS 3 ne sont pas chargés).
Modifié par Victor BRITO (15 Jul 2011 - 21:45)

Merci pour les differentes reponses. Je vais continuer a investiguer, en privilegiant une solution niveau client plutot que serveur (pour eviter les problemes d'affichage dans le cas de congestion reseau ou serveur).