Une expérience utilisateur réussie passe également par des modules accessibles, bien pensés et efficaces pour l’utilisateur. Pour accélérer le déploiement de fonctionnalités, j’ai sélectionné pour vous 14 ressources à utiliser dans vos futurs projets web.
Ce nouvel article regroupe différents plug-ins que vous pourrez implémenter à votre guise dans vos sites. Couvrants plusieurs domaines, vous y trouverez des éléments pour traiter vos images, gérer le chargement d’une page, améliorer la recherche et bien plus encore.
Responsify.space
Commençons cette sélection par un intéressant plug-in jQuery. Celui-ci vous permet de créer une mise en page responsive plein écran, sous forme de grille d’images. Le gros plus de Responsify.space ? Il tient compte des images lors du redimensionnement et permet ainsi de présenter au mieux le contenu, quelque soit la résolution.
Bricks.js
Bricks.js est une alternative ultra-rapide et facile à la mise en page Masonry.
OkayNav
Lors de la construction d’une navigation horizontale, vous vous êtes très probablement souvent retrouvé confronté au problème du positionnement des liens sur mobile et tablette. Le plug-in Okay Nav propose ainsi de placer les liens dans un menu « off-screen », une fois que ceux-ci quittent la zone utile de l’écran. Malin !
jQuery Secret Nav
Envie d’un menu original avec un effet 3D ? jQuery Secret Nav vous permet de le déployer rapidement. Attention, ce type de navigation est plutôt adapté au desktop plutôt qu’au mobile.
Light Gallery
Un plug-in ultra light pour une galerie efficace. Elle supporte le touch, propose une fonction de téléchargement des images et fonctionne en plein écran.
Chocolat.js
On continue avec la gestion des images avec Chocolat.js, un plug-in de lightbox responsive proposant un affichage orignal. Idéal pour un site e-commerce ou un portfolio par exemple.
Photo Swipe
Cette galerie d’images n’a pas besoin de jQuery pour fonctionner. Elle se déploie de manière indépendante grâce à son propre framework. Utilisez-la pour vos interfaces tactiles, elle intègre des fonctionnalités comme le swipe (évidemment!), le pinch to zoom et le vertical swipe pour fermer la galerie.
Twenty Twenty
Zurb nous offre un plug-in de comparaison classique mais efficace. Ce fonctionnement est un des meilleurs moyen de montrer la différence entre deux images.
jQuery Video Extend
Vous êtes à la recherche d’un plug-in pour insérer une vidéo dans votre contenu ? jQuery Video Extended va encore plus loin. Grâce à ce plug-in, vous avez la possibilité de personnaliser le player à votre guise, en ajoutant votre logo, ajouter des markers avec des labels et j’en passe. Il est bien évidement compatible avec les vidéos Youtube.
Be Lazy
Une des référence en terme de lazy loading, Be Lazy est ultra léger (1,2kb) et fonctionne sans jQuery.
Pace
Un moyen ultra rapide de mettre en forme un module de chargement sur n’importe quel votre projet. Un très bon moyen de donner un feedback efficace à votre utilisateur.
Fullpage transition
Design Modo propose un tutoriel complet pour créer des transitions de pages originales.
Tableau comparatif responsive
La gestion d’un tableau dans une mise en page adaptative peut vite devenir un casse-tête. Grâce à ce plug-in de Codyhouse, celle-ci est simplifié en se redimensionnant de manière efficace.
Advanced Search Form
Une intéressante gestion de moteur de recherche avancé.
Avez-vous trouvé votre bonheur dans cette sélection ?
Pour encore plus de ressources, je vous invite à consulter les archives du blog pour découvrir 25 ressources Javascript et CSS pour vos interfaces en juin 2015 ou encore 25 ressources jQuery et CSS3 pour vos sites web en novembre 2014.