Approche mobile first

Bonjour,
Je viens vers vous aujourd'hui car pour un projet je souhaite utiliser l'approche mobile first, mais ça m'apporte tout un lots de questions auquels j'essaie de répondre...

La plus grosse question viens par rapport a l'ajout d'element html lors du passage en version tablette ou desktop, car en supprimer avec la propriété display:none ok, mais en ajouter par contre la je voit pas trop :s

Je donne un exemple pur étre plus clair
affichage smartphone:

<div>
   <h1>un titre</h1>
    <p>un paragraphe</p>
</div>

affichage tablette:

<div>
   <h1>un titre</h1>
   <ul>     ------------------->  ajout d'un ul
         <li>un lien</li>
         <li>un lien</li>
   </ul>
    <p>un paragraphe</p>
</div>

affichage desktop:

<div>
   <h1>un titre</h1>
   <ul>     
         <li>un lien</li>
         <li>un lien</li>
   </ul>
    <img src=une image>   ---------------------> ajout d'une image
    <p>un paragraphe</p>
</div>

Voila, je pense que c'est plus clair

Alors peut etre que je me trompe dans l'approche mobile first, dans ce cas la re-aiguiller moi , mais pour moi un site mobile first est coder pour le mobile et ensuite on rajoute les elements pour les résolution plus hautes, cela dans le but de charger le moins de code possible sur mobile, mais comment arriver a ce résultat en "injectant" du code html pour les résolutions plus hautes (sans js idéalement...)...

Ou alors peut etre que je me prend la tete pour rien et que ces juste les display:none qui sont a utilisé....

Merci de votre aide je suis un peu perdu

Tu peux garder le même principe sauf qu'ils sont en display:none par défaut, et en display:block (ou autre) quand le media query le demande.

.monimage, .monul { display:none; }
@media ..1.. {
  .monul { display:block; }
}
@media ..2.. {
  .monimage { display:inline-block; }
  .monul { display:block; } /* inutile si tu n'utilises que les min-width (il sera déjà visible avec la règle précédente) */
}

Modifié par kenor (30 Jan 2015 - 19:41)

Bonjour. Pour compléter le message précédent : plutôt que de cibler les éléments concernés par leur classes propres, le mieux est d'utiliser des classes génériques afin de les décontextualiser.

Un exemple (pour SASS, en CSS il suffit de remplacer les variables par vos break points perso) :

.cover { // @note Cibler tous les éléments cachés
    display: none;
}

@media (min-width: $sizeS) {
    .uncover-sizeS { // @note Dévoiler l'élément caché cible pour les écrans supérieurs à $sizeS
        display: inline;
    }
} // END @media

@media (min-width: $sizeL) {

    .uncover-sizeL { // @note Dévoiler l'élément caché cible pour les écrans supérieurs à $sizeL
        display: inline;
    }

} // END @media

En début de notre code, on peut améliorer l'ergonomie en modifiant deux ou trois trucs :

// On ajoute le sélecteur [class^="uncover"] tout en gardant la class .cover (ça sert beaucoup sur un site)
.cover,
[class^="uncover"] { // @note Éléments cachés
    display: none;
}

@media (min-width: $sizeXS) {

    .uncover-sizeXS { // @note Dévoiler un éléments cachés
        display: inline;
    }

} // END @media

@media (min-width: $sizeS) {

    .uncover-sizeS {
        display: inline;
    }

} // END @media

Comme cela, au lieu d'écrire :

<div class="cover uncover-sizeS">display:none si résolution > sizeS</div>

Il suffit d'écrire désormais d'écrire ceci pour obtenir le même résultat :

<div class="uncover-sizeS">display:none si résolution > sizeS</div>

Notons que ce système ne permet aucune économie de chargement pour la version mobile : les éléments html, les images, sont tout de même chargés. Par contre, sur les mobiles "poussifs" (comme le mien) le calcul de l'affichage s'en trouvera quand même allégé.
Modifié par Olivier C (01 Feb 2015 - 09:14)

Merci pour votre aide

@Olivier C, je truove ta méthode bien sympa, et je comprend que tous les éléments meme non visible sont quand meme chargé, y a t'il une technique qui evite cela?

Dans tous les cas il y a une donnée téléchargées par défaut ( moins lourde que la solution par défaut sans ses techniques) et javascript est utilisé tant qu'il n'existe pas de recommandation et même si elle existe seule chrome et android l'ont déja implémentées dans leurs navigateurs ( scrset http://caniuse.com/#search=srcset / picture http://caniuse.com/#feat=picture ) .

Ajouter du code html selon les breakpoints sans javascript : impossible !

mediaquery permet d ajouter que du code css ( style) seulement et :before n'est pas vraiment du content . Utiliser ce content avec du code html !!! aieh aieh ....

Il y a deux notions le poids des images du à la taille (widthxheight) et à la résolution (HD x2 ) pour les images. C'est parce que l 'image n'est pas visualisée à sa taille réelle que dans un width ( css pas raster) supérieur l image devient "flou" encore plus avec ecran HD du fait que le width du navigateur sur mobile est celle de l'écran et que le width du css ( définit a plusieurs niveaux pour une page) doit tenir dedans . Cela dépend aussi du code css , en effet une partie de l'image peut glisser ( hidden) et vous perdez le sujet de l image ; il faut alors recentrer le sujet de l 'image selon le breakpoint !!!

l image basse résolution est téléchargée
http://tinyurl.com/brg6gbz
http://tinyurl.com/ms6w6fn

pour javascript
le script de chargement des autres script est téléchargé
cela existe notamment pour interface non visible en partie ( color picker , date picker) .
javascript est téléchargé lorsque l on active le script
http://tinyurl.com/d2wrqoc

CSS
tout est possible en javacript
style et règle document.styleSheet[0].rules[0]


pour html xml
le code javascript de gestion des technologies si dessous
fragment
iframe
ajax
jquery fragment
shadow Box ?

à tester et à confirmer ( rien d affirmatif dans mon poste )


cordialement
Modifié par 75lionel (06 Feb 2015 - 16:07)

@Olivier C
Est ce que cela se fait en responsive de changer dynamiquement un sélecteur dans le body ?
Cela donnerait pour mobile
<body class=" side mobile">
et pour tablet
<body class="side tablet" >
Dans ce cas ou est l' intéret d utiliser les mediaqueries ? , le code css doit le gérer de façon global sans "namespace" c'est à dire en dehors de context @media .
Modifié par 75lionel (06 Feb 2015 - 15:59)

rif5 a écrit :
@Olivier C, je truove ta méthode bien sympa, et je comprend que tous les éléments meme non visible sont quand meme chargé, y a t'il une technique qui evite cela?

Oui mais c'est une toute autre histoire : il faut passer par une méthode Ajax.

75lionel a écrit :
Est ce que cela se fait en responsive de changer dynamiquement un sélecteur dans le body ?

Via javascript donc... Je n'en vois pas l'intérêt étant donné que le CSS est fait pour cela.