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:
    481
    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 101
    J'aime reçus:
    176
    sensibles à quoi ?
     
    #2 indigene, 7 Novembre 2016
  3. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 101
    J'aime reçus:
    176
    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:
    481
    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 168
    J'aime reçus:
    345
    #5 spout, 7 Novembre 2016
  6. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 101
    J'aime reçus:
    176
    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 à propos de fonctions sur les chaînes de caractères Développement d'un site Web ou d'une appli mobile 16 Novembre 2010
Questions à propos des outils de référencement yagoort Débuter en référencement 6 Février 2009
2 questions à propos des noms de domaine Noms de domaine et référencement 1 Août 2008
Questions à propos d'un site Demandes d'avis et de conseils sur vos sites 11 Novembre 2007
Questions diverses a propos de sitemap Crawl et indexation Google, sitemaps 5 Décembre 2006
Quelques questions à propos de Google Problèmes de référencement spécifiques à vos sites 5 Août 2005
Quelques questions à propos de Google Google : l'entreprise, les sites web, les services 10 Mai 2005
2 questions à propos du caractère "|" Débuter en référencement 12 Avril 2005
A propos de la CNIL - questions - Problèmes de référencement spécifiques à vos sites 25 Septembre 2004
Plusieurs questions avant de proposer mes pages à google Problèmes de référencement spécifiques à vos sites 9 Janvier 2004
SEO questions Référencement Google 9 Juin 2022
Questions SEO technique (pagination) Netlinking, backlinks, liens et redirections 1 Mai 2022
Questions URL canonique, crawl et indexation Débuter en référencement 25 Mars 2022
Questions Keyword dans domaine URL Demandes d'avis et de conseils sur vos sites 10 Décembre 2021