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

Alorsladaccord · 7 Novembre 2016

"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 !

indigene · 7 Novembre 2016

sensibles à quoi ?

indigene · 7 Novembre 2016

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.

Alorsladaccord · 7 Novembre 2016

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 ?

spout · 7 Novembre 2016

indigene a dit:

<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>
Cliquez pour agrandir...

Bootstrap 2, pour info on est bientôt au 4

D'autres frameworks:
http://semantic-ui.com/
http://foundation.zurb.com/
https://getuikit.com/
http://getskeleton.com/
http://milligram.github.io/
[...]

indigene · 7 Novembre 2016

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

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 d'un néophyte	Débuter en référencement	15 Juillet 2019
Questions bloc SEO	Référencement Google	12 Avril 2019