Questions à propos des modèles de pages "responsives" ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Alorsladaccord, 7 Novembre 2016.

  1. Alorsladaccord
    Alorsladaccord WRInaute occasionnel
    Inscrit:
    30 Juillet 2014
    Messages:
    485
    J'aime reçus:
    0
    "Sensibles", c'est tellement plus compréhensibles...


    Bien, deux questions si vous le voulez bien, à propos de ce sujet :

    1) Est-ce qu'un modèle de page pour mobile doit nécessairement être "sensible" ET est-ce qu'un modèle de page "sensible" est automatiquement valable pour un mobile ?
    2) Que pensez-vous de ce site pour créer une maquette de page "sensible" : http://www.thibautsoufflet.fr/concevoir-maquette-de-site-pour-le-responsive/ ? Je ne fais pas de pub' pour l'auteur, je ne le connais pas. Mais je voudrais savoir si son tuto' est fiable pour développer un truc en se basant dessus. Ou alors, avez-vous mieux comme adresse web ?
    Notez que je ne cherche pas des modèles tout faits avec des couleurs funny flash, je veux juste une bonne vieille maquette sommaire pour un site trois colonnes "responsive", que j'habillerai ensuite avec du CSS cousu main.


    Merci d'avance !
     
    #1 Alorsladaccord, 7 Novembre 2016
  2. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 159
    J'aime reçus:
    179
    sensibles à quoi ?
     
    #2 indigene, 7 Novembre 2016
  3. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 159
    J'aime reçus:
    179
    Moi j'utilise bootstrap.

    Voici un exemple de réalisation d'affichage en 2 colonnes sur desktop :

    <div id="4FV3e2TP" class="span8 ta-center tw-para">contenu première colonne</div>
    <div id="aw9vBAKA" class="span4 ta-center tw-para">contenu seconde colonne</div>

    Il faut savoir que la largeur de l'écran est découpée en 12 zones. Dans mon exemple, span8 indique que la colonne de gauche va représenter 8/12° de l'écran et la colonne de droite 4/12° de l'écran.

    Tu peux faire 3 colonnes en utilisant les largeurs de 3,6 et 3 ou de 2,6 et 4. Le total doit faire 12.

    Sur un smartphone les deux div vont s'afficher l'une en dessous de l'autre.

    Les class ta-center ou tw-para permettent l'utilisation de css correspondant à ces div. Ici ça sera centré mais il y a d'autres possibilités.
     
    #3 indigene, 7 Novembre 2016
  4. Alorsladaccord
    Alorsladaccord WRInaute occasionnel
    Inscrit:
    30 Juillet 2014
    Messages:
    485
    J'aime reçus:
    0
    Bootstrap... Je suis en train de regarder, merci indigene. C'est tout un monde nouveau, le design "responsive", à ce que je vois. Une question comme ça en regardant la page de boot' : faut-il maîtriser javascript, pour créer un design respons' ?


    Et dans ton code indigene, que sont-ce id tarabiscotés "4FV3e2TP" et autre "span8 ta-center tw-para" ?
    Ce sont tes codes persos et tu t'y retrouves comme ça, ou ça correspond à de nouvelles exigences pour le design "responsives" ?
    Span8, tu dis que ça représente 8/12e de l'écran. Mais ne pourrait-on écrire class="colonneGauche" et placer le span8 ta-center tw-para" dans une feuille de style ?

    Et les 12 colonnes en question, ça correspond à quoi au juste ?
     
    #4 Alorsladaccord, 7 Novembre 2016
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 190
    J'aime reçus:
    333
    #5 spout, 7 Novembre 2016
  6. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 159
    J'aime reçus:
    179
    les 12 colonnes correspondent à la largeur de l'écran découpée en 12 secteurs. Si ton écran fait 12 pouces, chaque secteur fait 1 pouce. Si ton écran fait 6 pouces, chaque secteur représente 0,5 pouce.

    Mon code minimaliste pourrait être

    <div class="span8">contenu première colonne</div>
    <div class="span4">contenu seconde colonne</div>

    Mais ici je ne précise pas d'id pour chaque div donc pas possible de faire un lien de type http://www.example.com/page.html#4FV3e2TP pour se positionner à un endroit précis de la page.
    Et dans ce cas il n'y a pas non plus de css pour gérer les tailles, les couleurs, etc...
    Tous les css sont bien dans des fichiers externes. L'appel des class correspondantes fonctionne comme avant. Il n'y a rien de nouveau. C'est juste que bootstrap propose des class déjà toutes faites pour notamment gérer le découpage en 12 tranches.

    Il existe un outil qui repose entièrement sur bootstrap et qui automatise tout ça très bien. Il s'agit de Lauyan TOWeb
    C'est de ça que je pars pour générer mes maquettes.
    Après je travaille à la main par mimétisme
     
    #6 indigene, 7 Novembre 2016
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
Similar Threads - Questions propos modèles Forum Date
Questions à propos d'AMP et du carrousel Référencement Google 27 Mai 2019
Deux questions à propos des tableaux de variable Développement d'un site Web ou d'une appli mobile 13 Mars 2017
Quelques questions à propos des fonctions Administration d'un site Web 30 Mars 2015
Quelques questions à propos du Responsive Débuter en référencement 4 Mars 2014
Plusieurs questions à propos des forums Référencement Google 9 Octobre 2012
3 questions pièges à propos de comptes/campagnes similaires AdWords 31 Mars 2012
Questions réponses sur Axeptio (Consent Management Platform) Administration d'un site Web 30 Mars 2021
Questions-réponses sur AppConsent, la CMP de SFBX Administration d'un site Web 30 Mars 2021
Questions-réponses sur la CMP ConsentManager Administration d'un site Web 30 Mars 2021
Sirdata répond à vos questions sur sa CMP Administration d'un site Web 30 Mars 2021