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

[Alorsladaccord]

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

sensibles à quoi ?

 

[indigene]

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]

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]

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

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]

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