1485 sujets

Web Mobile et responsive web design

Je suis en train de développer une web-appli pour tablette.
J'ai fait le design à partir de ma tablette android en format paysage (1280x631).
Mais le viewport du ipad a des dimensions différentes.
Comment faire pour que le design s'adapte à tous les formats de tablette en mode paysage ?
Je vais faire une maquette sur jfiddle demain. Mais des premières idées sont bienvenues.
Merci de votre aide.
Frédéric Smiley smile
Merci.
1) Est-ce une bonne idée par jquery de définir les dimensions des éléments de la page en % de la largeur et la hauteur du viwport ?
Cela me simplifierait la vie.
Sinon, j'utiliserai les media queries. Mais ça me parait plus compliqué.

2) Existe-t-il un simulateur qui permet de visualiser la page dans le format de l'ipad de façon fiable ?
Modifié par fredericmarcel (01 Sep 2016 - 19:25)
fredericmarcel a écrit :
1) Est-ce une bonne idée par jquery de définir les dimensions des éléments de la page en % de la largeur et la hauteur du viwport ?

Pas besoin de javascript, ça existe avec CSS via les Viewport units.

Un exemple : CodePen

fredericmarcel a écrit :
Sinon, j'utiliserai les media queries. Mais ça me parait plus compliqué.

Bien dommage, car quand on y a goûté on ne peut plus s'en passer. Et puis c'est tout de même la base de l'intégration web...

fredericmarcel a écrit :
2) Existe-t-il un simulateur qui permet de visualiser la page dans le format de l'ipad de façon fiable ?

Un iPad ? Non, à part l'inspection Chrome en mode mobile, je ne vois pas...
Bonjour,

Simuler un iPad
A la question de pouvoir simuler l'affichage d'un iPad, une brève recherche avec les mots clé 'simuler affichage web ipad' me renvoit un pléthore de sites qui semble permettre l'émulation de ce type de matériel.

J'ai relevé qu'entre-autre, FinalClap, EmulateurMobile et iPadPeek prétendent permettre cette émulation. Par contre je n'ai essayé aucun de ces sites mais il existe une offre à cette demande.

Par contre j'ai des doutes concernant les outils Chrome car je ne suis pas certain que Google prennent la peine d'y inclure toutes les spécificités d'Apple.

Toutefois je reste convaincu que rien n'égale les tests in situ même si ce genre d'outils peut probablement dégrossir les irrégularités causées par ce genre de matériel.


Gestion des tailles en JS
C'est une décision à ne pas prendre à la légère. Je travail avec du matériel qui date d'après Guerre et j'ai désactivé JS car mon navigateur mettait une plombe pour charger tout contenu et comme en plus de ça je suis paranoïaque je me sens plus en sécurité sans plutôt qu'avec.
Si je suis votre raisonnement, Fredericmarcel, je suis condamné à avoir un affichage merdique. L'accès à l'information portée, aussi importante puisse-t-elle être, m'est donc refusée. C'est noté, je n'y viendrais plus !

Les media-queries ont cette particularité d'avoir une rétro-compatibilité qui remonte limite à l'Âge de Pierre (aller, disons du Fer).
Certes, le premier cours sur les M.Q. peut rebuter mais ceci n'est vrai qu'à la première lecture. En effet, en s'y plongeant un peut plus (jusqu'aux mollets) on s'aperçoit que finalement la difficulté de mise en place n'est qu'une chimère qui n'existe que dans notre imaginaire tant le principe de fonctionnement se révèle simple et redoutablement efficace.

Maîtrise, fluidité, souplesse ne sont là que quelques qualificatifs diamétralement opposés à toute solution en JS (ou JQuery bien entendu).
Maîtrise car les M.Q. permettent de cibler très précisément et/ou très généralement selon le support de l'utilisateur.
Fluidité car une feuille de style charge et est exécutée nettement plus vite qu'un script JS.
Souplesse car les différentes propriétés prises en charge permettent de palier à toute situation.

Bien sûr mes écris sont fortement amplifiés. Non pas pour faire de la mousse dans le bain mais pour vous faire prendre conscience que JS n'est pas une Arme Absolue qu'il faille dégainer à tout bout de champs, surtout lorsqu'il existe des alternatives économiques (en ressource, dépendances etc).

Et puis, coder ceci en JS n'est-ce pas une façon déguisée d'introduire les media-queries dans le code ?!

Alors JS ? Oui, mais à dose homéopathique svp.

Les mots de la fin
Bonne journée ! Smiley smile
Olivier C a écrit :
Prendre le meilleur des deux mondes ? En fonction de ses besoins ?
A mon sens ceci résume parfaitement le développement web et est applicable à tout language et à toute situation. Smiley clapclap
fredericmarcel a écrit :

2) Existe-t-il un simulateur qui permet de visualiser la page dans le format de l'ipad de façon fiable ?


Oui. Une machine virtuelle OS X sur lequel on s'assure d'avoir Xcode et Simulator app qui permet de simuler tous les appareils à la pomme en utilisant les outils de développement de safari en parallèle.
C'est ce que j'utilise et ça marche plutôt bien.
Modérateur
Greg_Lumiere a écrit :
Bonjour,
Simuler un iPad
A la question de pouvoir simuler l'affichage d'un iPad, une brève recherche avec les mots clé 'simuler affichage web ipad' me renvoit un pléthore de sites qui semble permettre l'émulation de ce type de matériel.

J'ai relevé qu'entre-autre, FinalClap, EmulateurMobile et iPadPeek prétendent permettre cette émulation. Par contre je n'ai essayé aucun de ces sites mais il existe une offre à cette demande.

Par contre j'ai des doutes concernant les outils Chrome car je ne suis pas certain que Google prennent la peine d'y inclure toutes les spécificités d'Apple.

Toutefois je reste convaincu que rien n'égale les tests in situ même si ce genre d'outils peut probablement dégrossir les irrégularités causées par ce genre de matériel.

Attention, la plupart des «émulateurs en ligne» balancent le site dans une iframe aux dimensions prédéfinies (et c'est tout). Chrome fait un peu mieux mais c'est tout.

Sinon certains émulateurs (payants généralement) lancent l'url dans une machine virtuelle pour retourner des printscreens. C'est mieux que rien mais peu pratique pour faire des tests.

Si vous disposez d'un Mac, avec Xcode on peut lancer un simulateur (qui fait tourner IOS) de tous les appareils Apple (ce qui est bien moins onéreux que de tous les acheter). (Edit: doublon Manhattan Smiley smile
Modifié par kustolovic (02 Sep 2016 - 11:19)