1479 sujets

Web Mobile et responsive web design

Mobile first avec KNACSS

Salut à tous!

Depuis peu je me suis lancé dans le Responsive. Et il faut dire que ce n'est pas facile : beaucoup de sources et d'approches, mais dur dur de savoir sur quel pied danser.

Après avoir réalisé des maquettes, j'ai décidé de me lancer avec une approche Mobile-first (amélioration progressive) à partir du framework KNACSS. Le problème c'est que je ne sais pas trop comment démarrer notamment concernant la width de départ. Dois-je me référer aux différentes "surfaces en pixels CSS" des smartphones ? Si oui, dois-je partir sur une width ou max-width, à 320px, 640px, 745px, etc. ?

Merci de m'éclairer de toutes vos lumières !
Bonjour,

J'apporte ma petite contribution.

De 1, il faut choisir entre mobile first et desktop first. Tout dépends de la cible (est-ce que le site sera fréquenté plus par les mobiles ou plus par les desktop). Parfois il y a tellement de contenu qui disparait sur les petits écrans qu'une approche desktop first en mieux.

De 2, si vous faites du mobile first, il faut réfléchir aux terminaux que vous viser le plus. Les mobiles modernes, les moins-récents, et les plus petits? Faudra prendre une décision de ce côté là. Le premier breakpoint peut être 320 ou moins, tout dépends des mobiles ou "gadgets" que vous ciblez. Ensuite à chaque "breakpoint" vous chargez une media-query avec (min-width: 768px) par exemple.

Mais ça c'est une réponse plutôt simple, il y a beaucoup plus de paramètres que vous pouvez pendre en compte. Tout dépends du type de projets, de votre audience, de vos priorités, etc....
@rgs95 : ce qu'il faut comprendre c'est que les points de ruptures se définissent par rapport aux layouts du site et non pas par rapport aux multitudes de définitions d'écrans possibles.
Bonjour à tous ! Smiley smile

Merci pour vos réponses toutes instructives ; je découvre de nouvelles bonnes questions à se poser. Pour tout vous dire, il s'agit de créer une page d'atterrissage, somme toute assez minimaliste, dans le but de recruter de nouvelles adresses mails sur des plateformes de publicité payante. On aimerait recruter aussi bien sur Desktop que sur Mobile et Tablette.

Etant donné que je débute dans le Responsive, je tâtonne sur le processus de création. J'ai suivi un cours de maquettage mobile sur Openclassrooms ; il demandait de partir d'un document 1080x1920px, car ces dimensions "correspondent à des standards qui existent sur le marché". Mais vu l'importance des breakpoints, je me dis qu'il faudrait maquetter sur toutes les largeurs qui m'importent, n'est-ce pas ?
Exactement. Clairement, vous ciblez plusieurs périphériques. Donc, faudra faire des recherches sur les tailles d'écrans et adaptez avec les média-queries.
allan00958 a écrit :
Exactement. Clairement, vous ciblez plusieurs périphériques. Donc, faudra faire des recherches sur les tailles d'écrans et adaptez avec les média-queries.


Merci, j'y vois plus clair ! As-tu déjà codé en Mobile first ? Si oui, j'aimerais bien voir tes créations.
Sujet clos
Aller à