voilà je souhaiterais savoir s'il y a une méthode pour développer en responsive design ? J'ai déjà entendu parlé du "mobile-first" pour commencer je sais qu'il faut toujours commencer par développer son site pour les mobiles.
Ensuite j'ai cru entendre qu'il faut gérer toutes les tailles d'écran mais sérieusement les tailles d'écran il en existe beaucoup, parfois des écrans de smartphone sont presqu'aussi grand que des ipad mini. Il existe aussi des écrans, comme mon smartphone Huawei, ultra mini.
Sans compter le fait que chaque smartphone a une résolution d'écran et que pour la même résolution d'écran si un smartphone fait telle taille et que l'autre fait le double bah il faut pouvoir gérer ça.
Donc je voulais savoir s'il existe une solution pour développer en responsive design de sorte que l'on oublie rien ?
Il ne faut pas "gérer toutes les tailles d'écran", mais faire en sorte que ton design s'adapte quel que soit le support. C'est l'origine du mot "breakpoint", "point de rupture" : tu changes ton design au moment où il casse.
Exemple : tu as une page avec une colonne de droite et un contenu à gauche. Tu décides de fixer ça à 960px de large, avec la colonne faisant 200px. Puis tu réduis ta fenêtre : quand tu atteins 990/980px de large, tu vois que tu ne pourras pas aller plus bas sans créer un ascenseur horizontal. Donc, tu crées une media query qui se déclenche à 990 ou 980 px, et dedans tu définis la nouvelle largeur de ta page, 600px par exemple, et tu réduis peut-être un peu la colonne de droite. Puis, à 620px environ, tu crées un nouveau point de rupture, et là, tu vas enlever la largeur pour que la page prenne toute la largeur disponible, et la colonne de droite va passer dessous.
Typiquement c'est comme ça que je ferais, en testant progressivement.
Pour le mobile first, tu peux faire dans l'autre sens : pas de largeur, "colonne de droite" en dessous, et tu agrandis ta fenêtre. Quand le texte n'est plus du tout lisible parce que les lignes sont trop longues, tu fixes une largeur, et tu mets la colonne à côté, etc.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Alors oui ça j'avais entendu l'histoire des points de rupture, je les ai essayé mais un problème est survenu.
En effet imaginons que j'ai un point de rupture à 300px de largeur mais que la résolution du petit écran de smartphone est de 600px. Alors le point de rupture n'aura pas lieu.
Ben si : si ta media query c'est "max-width: 300px", si, bien sûr que ça va se déclencher. Toujours utiliser les max- et min-, jamais width exactement, si c'est ce que tu avais en tête.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Il ne faut pas "gérer toutes les tailles d'écran", mais faire en sorte que ton design s'adapte quel que soit le support. C'est l'origine du mot "breakpoint", "point de rupture" : tu changes ton design au moment où il casse.
Exemple : tu as une page avec une colonne de droite et un contenu à gauche. Tu décides de fixer ça à 960px de large, avec la colonne faisant 200px. Puis tu réduis ta fenêtre : quand tu atteins 990/980px de large, tu vois que tu ne pourras pas aller plus bas sans créer un ascenseur horizontal. Donc, tu crées une media query qui se déclenche à 990 ou 980 px, et dedans tu définis la nouvelle largeur de ta page, 600px par exemple, et tu réduis peut-être un peu la colonne de droite. Puis, à 620px environ, tu crées un nouveau point de rupture, et là, tu vas enlever la largeur pour que la page prenne toute la largeur disponible, et la colonne de droite va passer dessous.
Bonjour,
Ce n'est pas non plus comme cela que je procède, je trouve ton conseil très intéressant.
Mais comment savoir précisément les dimensions de rupture dans le navigateur, avez-vous un outil à conseiller ou faut-il se débrouiller par sois même?
Pour Firefox, Ctrl + Shift + M déclenche le mode "vue adaptative", qui permet de modifier la fenêtre tout en connaissant la taille précise. Pour Chrom(e|ium), quand on a ouvert la console avec F12, on a un bouton en forme de loupe qui ouvre le même type d'outil. Pour les autres navigateurs, je ne sais pas.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
C'est une grille intéressante, qui donne une idée de l'existant, mais qui pour moi ne doit surtout pas être suivie à la lettre. J'ai tendance à prendre des points de rupture délibérément loin de ces chiffres-là, afin d'être sûre de retomber sur mes pattes, mais c'est plus de l'intuition et de l'expérience qu'autre chose. J'essaie aussi souvent de me baser sur mon contenu : vais-je avoir de grandes images ? Plutôt du texte ? Quelle taille de texte ? (sachant qu'une ligne confortable à lire fait entre 55 et 75 caractères, je peux en déduire la largeur de mon contenu) Et autres questions.
Non, un design fluide ne change pas de comportement / affichage, contrairement à un design responsive : le premier s'étire ou se contracte, le second adopte de nouvelles mises en page en fonction du support.
Amuse-toi à redimensionner mon site : http://www.emmanuelbeziat.com/ Il est fixe jusqu'à ce qu'on arrive à un design mobile ; entre deux, on passe du format "bureau" au format "petit écran", puis au format "tablette".
Mais un design fluide peut très bien être responsive, ce n'est pas intimement lié.
- Edité par EmmanuelBeziat 27 mai 2015 à 13:02:15
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Mais tu as un site Wordpress, c'est donc géré en auto par le Framework non?
Petite question, je peux me baser sur tes points de rupture comme support de base, ou non car alors cela dépend dépend de mon css personnel? j'imagine que chaque site est différent.
En tout cas ton site est vraiment chouette et agréable à l'oeil
à ce que j'ai pu voir sur le site de rhoomanu, les points de rupture sont gérés par des "min-width" et "max-width". Donc on ne prend pas en compte la largeur de l'appareil?
Car je ne comprend pas, j'ai fait quelque chose dans le même genre sauf que moi tout s'affichait quand même malgré une rupture à 500px.
EDIT : en fait ce que je ne comprend pas, c'est que la rupture ne se fait pas à 500px sur google chrome mais elle se fait bien sur firefox. Je viens de vérifier sur mon ipod et la rupture ne s'est pas faîtes non plus. Et si je fais (max-width:1000px) c'est pareil la rupture ne se fait pas. Donc le max-width se base sur la résolution de l'appareil je suppose
Oui, c'est fonction de ton propre design. Si par exemple ton site fait 800px de large en version "normale", tu vas vouloir mettre un breakpoint à environs 820px (histoire de laisser une marge). Ensuite, tout dépend de comment tu gères ton design. Moi, il y a un point de rupture simplement à chaque fois que deux éléments vont se superposer si je continue de réduire la fenêtre.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Et bien moi c'est simple @rhooManu c'est à peu près pareil que toi, c'est à dire que ce qui est le moins important est supprimer et pour le reste au lieu d'être à côté les uns des autres ça se superpose en s'alignant au centre.
Mais là dans mon cas actuellement c'est encore plus simple : j'ai un menu, un conteneur et un pied de page. Pour tester les points de rupture j'ai décidé de changer le background du site afin de voir où fonctionne les points de rupture exactement et j'ai pu m'apercevoir que par exemple pour google chrome (max-width) ne signifie pas vraiment la largeur maximal mais plutôt la largeur maximal par rapport à la résolution.
En gros on ne s'occupe pas trop de l'appareil sur lequel est consulté la page web mais plutôt du comportement de son propre design. Si cela marche bien sur mon PC en réduisant la fenêtre alors cela devrai en être de même sur tous les autres écrans.
Thomas Habets a écrit:
Il existe des frameworks pour faciliter ton responsive design si tu le souhaites ;-)
Bootstrap ou Foundation (pour ne pas les citer)
Personnellement, j'utilise Bootstrap au quotidien.
Peut-être mais mon but est d'apprendre et comprendre pour justement éviter les solutions toutes faites justement
En gros on ne s'occupe pas trop de l'appareil sur lequel est consulté la page web mais plutôt du comportement de son propre design. Si cela marche bien sur mon PC en réduisant la fenêtre alors cela devrai en être de même sur tous les autres écrans.
Exactement !
Ça me rend triste de tomber encore sur des sites - récents - qui sont tout moches sur mon téléphone, parce qu'on n'a pas pris soin de travailler le design. Ou que le site a une appli dédiée (mais là, ça me lance sur un autre sujet, et en plus je vais râler très fort, alors je vais m'abstenir ).
Pas d'aide concernant le code par MP, le forum est là pour ça :)
En gros on ne s'occupe pas trop de l'appareil sur lequel est consulté la page web mais plutôt du comportement de son propre design. Si cela marche bien sur mon PC en réduisant la fenêtre alors cela devrai en être de même sur tous les autres écrans.
Thomas Habets a écrit:
Il existe des frameworks pour faciliter ton responsive design si tu le souhaites ;-)
Bootstrap ou Foundation (pour ne pas les citer)
Personnellement, j'utilise Bootstrap au quotidien.
Peut-être mais mon but est d'apprendre et comprendre pour justement éviter les solutions toutes faites justement
- Edité par pipelette13 il y a 21 minutes
C'est avec Bootstrap et son code source que je me suis grandement amélioré dans le responsive design
En gros on ne s'occupe pas trop de l'appareil sur lequel est consulté la page web mais plutôt du comportement de son propre design. Si cela marche bien sur mon PC en réduisant la fenêtre alors cela devrai en être de même sur tous les autres écrans.
- Edité par pipelette13 il y a environ 4 heures
Voilà c'est la conclusion à laquelle j'étais arrivé. Sauf que j'ai un petit soucis. Si on osef de la taille de l'écran (min/max-DEVICE-width) alors ça veut dire qu'il faut se concentrer sur (min/max-width) tout court ? Si on fait ça il se trouve que mes 500px ne correspondent pas à 500px de largeur de la fenêtre :/
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)