Responsive Web Design et mobile

Bonjour,
Un nouveau terme à la mode sur le web "Responsive Web Design". Que faut-il savoir à propos pour être à la page ? Après plusieurs recherches pour le moment je comprends que c'est l'ensemble :

1. Grille fluide
2. Images fluides
3. Media Queries

Pouviez-vous m'expliquer ces trois ensembles ?

Un autre terme, "site web mobile". Après des recherches aussi, les mobiles rassemblent les smartphones et les tablettes. Quelles sont les tailles d'écrans qu'il faut retenir pour faire un site web mobile ?

Merci d'avance...

Meilleures salutations.8O

Pour ce qui est de la fluidité (et ça répond aussi à ta question finale), c'est tout simplement un site qui va s'adapter à toutes les résolutions (dimensions en % et non fixes en em ou px).
C'est une obligation dans le cas des sites adaptés aux mobiles, étant donné la variété des affichages et les dimensions de ceux-ci.
Je m'explique : on a le même cas par rapport au Web, il y a beaucoup de définitions d'écran différentes. Alors, on se base sur la plus courante (800x600 jusqu'en 2005, 124x768 depuis) pour faire des sites en largeur fixe.
Le truc, c'est que ce n'est pas possible sur support mobile : imagine un site en taille fixe pour iPhone (320px de large) affiché sur iPad (1024x768) : on aurait 400px de vide de chaque côté...

Donc, on fait du design fluide.

Quant aux Media Queries, il s'agit d'adapter les CSS en fonction des supports (cas basique : Web = 1 feuille CSS, mobile = une autre feuille CSS)

Voilà j'ai compris le principe des media queries. Ce qui me reste à connaitre c'est les différents types de périphériques mobiles et leurs différentes tailles d'affichage (résolutions d'affichage).

Merci d'avance.

Euh... là, ça va être plus complexe : autant, côté iOS, je peux te répondre iPod/iPhone/iPad (et les dimensions des écrans se trouvent très facilement sur le Web), autant côté Android, ça risque d'être plus difficile...

Après plusieurs recherches, j'ai compris que le design la mise en page doit s'adapter à la taille de fenêtre et non au type de périphérique.

merci.

Bonjour,
Je me permets de continuer ce post.

Je dois adapter un site pour les tablettes et téléphone mobile.

Les tablettes ont des tailles d'écrans différentes tout comme pour les téléphone portable.

Quelles sont les tailles que l'ont considera pour les tablettes, et à partir de quelles tailles on les considère pour les smartphone.

Par exemple, sur mon iPhone c'est 320x480. Pour and HTC, la taille ne sera pas la même.

Mon iPad a la taille h:768 x w:1024. Mais une tablette d'une autre marque n'aura pas la même dimenssion.

Donc a partir de quelle taille, recommandez-vous, on va appliquer du CSS pour les tablettes et à partir de quelle taille on va appliquer du CSS pour smartphone

Merci pour m'éclairessir à ce sujet

Citation:

---

Envoyé par pierrot10

Donc a partir de quelle taille, recommandez-vous, on va appliquer du CSS pour les tablettes et à partir de quelle taille on va appliquer du CSS pour smartphone

---

Je pense qu'il ne faut justement pas penser comme ça. Parce que les devices deviennent de plus en plus variés, on ne peut pas faire de css dédiées à chaque type d'appareil.

Si tu veux, tu peux travailler avec des points de rupture. Par ex, tu crées un design simple sur une base de 800 px de large. Puis tu le réduis de 50 px en 50 px. À un moment, tu as un point de rupture, car la mise en page ne tient plus. Tu corriges donc ce point de rupture, et tu continues à réduire jusqu'au prochain — et jusqu'à la limite des plus petits devices.
Bien entendu, il faut opérer dans l'autre sens, pour les très grands écrans par ex.

Dans l'absolu, tu peux te retrouver avec une css de base, et trois ou quatres petites css qui, par le jeu des requêtes média, corrigeront les possibles désagréments :ccool:

Pour ma part je travaille de la manière suivante :

- Je conçois des pages flexibles : autrement dit, je ne cherche pas à obtenir un résultat parfaitement identique sur les différents devices. Je fixe les grandes règles et après le contenu se démerde. :D

- Je fixe des "crans" (media queries) à des largeurs types. Cela permet d'opérer des modifications de styles entre un device très étroit et un device très large. Il va s'agir d'un bloc qui apparait ou disparait, d'une liste qui passe de l'horizontale à la verticale, etc.

- Je détecte si le device est tactile : si c'est le cas, un style particulier s'applique sur les boutons afin que ceux ci deviennent adaptés en taille au clic avec le doigt.

Au final, il s'agit surtout d'une philosophie de conception. Lorsqu'on se détache de l'idée de vouloir obtenir un rendu parfaitement identique entre les différents navigateurs et qu'on comprend la démarche de design fluide, l'approche d'une conception adaptée au mobile devient beaucoup plus simple. Et la différence d'approche entre site desktop et site mobile disparait alors par la même occasion.

Oui, c'est comme ça qu'il faut procéder, la mise en page évolue suivant la taille de l'écran.
On définit des résolutions-clés à la base (recommandées : 1600, 1280, 1024, 768, 640, 320 pixels) avec pour chacune une mise en page spécifique.
Un écran en 480 de large verra donc la version 320 quand un écran en 800 verra la version 768.

Une autre possibilité est d'utiliser des grilles fluides, avec tous les éléments en %, mais ça demande plus de calculs en amont à mon goût.
Les deux méthodes se basent de toute façon sur les grilles et les media queries et sont toutes les deux admises et utilisées couramment.