IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Webdesign & Ergonomie Discussion :

Responsive Web Design et mobile


Sujet :

Webdesign & Ergonomie

  1. #1
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2006
    Messages
    985
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juillet 2006
    Messages : 985
    Points : 460
    Points
    460
    Par défaut 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.

  2. #2
    Membre habitué Avatar de grafimages
    Homme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2011
    Messages
    99
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Etats-Unis

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Novembre 2011
    Messages : 99
    Points : 170
    Points
    170
    Par défaut
    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)

  3. #3
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2006
    Messages
    985
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juillet 2006
    Messages : 985
    Points : 460
    Points
    460
    Par défaut
    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.

  4. #4
    Membre habitué Avatar de grafimages
    Homme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2011
    Messages
    99
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Etats-Unis

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Novembre 2011
    Messages : 99
    Points : 170
    Points
    170
    Par défaut
    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...

  5. #5
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2006
    Messages
    985
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juillet 2006
    Messages : 985
    Points : 460
    Points
    460
    Par défaut
    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.

  6. #6
    Débutant  
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 091
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 091
    Points : 943
    Points
    943
    Par défaut Quelles sont les tailles d'écran à considérer pour les tablettes
    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
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  7. #7
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 700
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6
    Par défaut
    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

  8. #8
    Membre à l'essai
    Profil pro
    Webdesigner
    Inscrit en
    Mai 2013
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2013
    Messages : 11
    Points : 13
    Points
    13
    Par défaut
    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.

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

  9. #9
    Membre habitué Avatar de grafimages
    Homme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2011
    Messages
    99
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Etats-Unis

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Novembre 2011
    Messages : 99
    Points : 170
    Points
    170
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Livre] Responsive Web design
    Par Macmillenium dans le forum Webdesign & Ergonomie
    Réponses: 2
    Dernier message: 15/09/2016, 19h16
  2. Responsive Web Design Googlebot-Mobile user-agent
    Par ceweb dans le forum Webdesign & Ergonomie
    Réponses: 4
    Dernier message: 30/01/2013, 08h10
  3. Responsive Web Design
    Par mealtone dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 28/11/2012, 16h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo