Optimisation code responsive pour site arfoo

Bonjour à Tous,

Après d'excellents conseils à propos de mon 1er site , je souhaiterais être guider par des d'experts responsive pour améliorer les points suivants :

- affichage des images sur la page d'accueil accueil
- mettre en place un menu pour smartphone
- affichage des titres en fonction de la taille de l'écran sur les pages secondaires celle-ci

Et n'hésitez pas à me donner votre avis sur le site dans son ensemble
Merci d'avance
Modifié par mbouchaud (21 Jan 2017 - 08:35)

Bonjour,

Avant de vouloir s'attaquer au responsive, je vais donner mon avis sur le site en général

Déjà, il est pas mal réalisé, c'est du bon boulot. Cependant, quand on arrive sur la page d'accueil, on est un peu bombardés d'informations. Il y a trop d'éléments graphiques sur ton site et le visiteur ne sait pas trop où il faut regarder. Je pense notamment à la barre qui donne l'adresse et des boutons de partage en haut du site. La bannière verte en haut à droite est un peu trop flashy et n'est pas en accord avec le reste des couleurs. Il faudrait également revoir les polices et leur taille (je pense notamment au premier paragraphe de la page).

Passons à tes questions:
- Pour adapter ta grille d'images, le mieux serait un slider d'images, une à une. cela éviterait de prendre trop de place sur la page.
- Pour le menu, tu n'auras qu'à adapter en choisissant ce que tu préfères: un menu qui coulisse d'un côté vers le centre de ton écran, un dropdown,...
- Pour les titres, c'est très simple (voir plus bas).
Pour le responsive, il est indispensable d'utiliser ce qu'on appelle en CSS les media-queries. Il y a pas mal de cours les présentant

Si tu as d'autres questions ou si un truc ne te paraît pas clair dans ce que j'ai écrit, hésite pas

Merci docteurdread pour tes suggestions

Pour les titres responsive, c'est OK
En action rapide, j'ai modifié le nombre d'images affichées et modifié le CSS pour une meilleur gestion des images. Par contre j'aime bien l'idée du slider, un exemple léger à me proposer ?

Est-ce que quelqu'un dispose d'un tuto menu responsive ?
Modifié par mbouchaud (11 Jul 2015 - 09:10)

Pour le menu, n'hésite pas à visiter mon blog Juice of Code, je viens de rédiger un article: http://www.juiceofcode.com/creer-un-menu-deroulant-responsive/

Pour le slider, je te conseille Owl Carousel, pour moi un des meilleurs. Il est responsive et pourvu de fonctionnalités intéressantes. La documentation est là pour t'aider

Merci pour les ressources partager

J'ai mis en oeuvre un menu responsive.
Par contre en ce qui concerne le carousel afin de conserver les performances de l'annuaire je préfère travailler sur le paramétrage de l'outil.

Avez-vous d'autres suggestions ?
Modifié par mbouchaud (21 Jan 2017 - 08:36)