Comment s’y retrouver parmi les milliers de plugs-in Jquery disponible sur le web ? C’est simple, gardez uniquement le meilleur de cette année pour vos sites web à venir !

Depuis déjà 5 ans, la libraire Jquery et ses plugs-in fabuleux n’en finissent pas de retourner le web. L’année 2011 à vu sortir de terre quelques beaux trésors de technologie. Voici pour vous, la sélection du meilleur de cette année :

Joyride Tour

Pour faire rapidement une visite guide de votre site.

DropKick.js

Créer un menu déroulant stylé !

Isotope

Ultra complet, voir trop complet, découvrez Isotope pour vos mises en page.

Supersized 3.2

La dernière version du plug in pour vos site photo en plein écran.

Sausage.js

La saucisse magique pour vos sites en une page. Super pratique.

FitText

2011 à connu l’explosion du Reponsive Webdesign. FitText vous donne les outils pour adapter vos tailles de police, et bien plus encore.

Flexslider

Toujours dans le Reponsive Webdesign, FlexSlider un slider Jquery complétement adaptable.

Jquery Timeline

Idéal pour des réalisations créatives basés sur une ligne du temps.

Jquery PhotoSwipe

LA galerie d’image pour mobile !

Reveal Box

Installable en trois clics, la Reveal Box est l’outil ultime de vos message non-intrusifs.

Circular Content Carousel

Un caroussel évolué pour vos contenus.

Jquery : Menu animé et site plein écran

Un autre plug-in par Codrops qui peux être une bonne base pour un projet.

Tubular

Parfait pour mettre une vidéo en full screen et en fond de votre site

JVector Map

Un librarie de cartes, toujours utile dans certaines situations et très complet.

Si vous en aviez un seul à garder, lequel choisiriez-vous ?

NewQuest, agence qui me tient à cœur depuis longtemps !  Découvrez l’univers et le site original du studio savoyard dans l’agence du jour #5.

Après la découverte de leurs nombreuses réalisations e-commerce (comme Headict et bien d’autres), il est difficile de passer à côté de NewQuest lorsqu’on utilise Prestashop. L’agence fondée en 2007, est d’ailleurs partenaire de la solution e-commerce open source en étant certifiée Prestashop Or. Orientée web avant tout, la société compte aujourd’hui une trentaine de collaborateurs et s’agrandit chaque jour. L’objectif principal du studio est de créer un projet qui se démarque et surtout apporter une plus value.

C’est bien cette idée que l’équipe NewQuest transmet à travers son nouveau site web. Mis en ligne il y a quelques mois, il fait réellement preuve d’originalité et de technique.

L’interface est basée sur une mosaïque conçue avec Jquery. L’internaute est invité à ouvrir des pop-up pour découvrir l’activité de la société.

Les pop-up sont bien pensés, simples d’accès et souvent avec un contenu riche. Il est bien entendu possible de déplacer les fenêtres une fois celles-ci ouvertes. La navigation au clavier est également prise en compte.

Petit gadget peut-être, mais la possibilité de sauvegarder une mosaïque personnalisée est réellement un plus technique ! NewQuest a de la réserve !

À tester vous-même sur www.newquest.fr

Depuis l’arrivée du site Nike Better World, les sites utilisant un effet de paralaxe vertical ont explosé ses derniers mois. Tendance du webdesign ou non, un petit tour d’horizon s’impose.

D’où vient cet engouement ? Simplement, je dirai que le principe est original et donne une bonne profondeur au design. L’effet de paralaxe vertical peut-être considéré comme une évolution d’un one-page webdesign avec scroll vertical simple.

Nike Better World s’impose clairement comme une référence, avec une réalisation impeccable et innovante. Original peut-être plus, le concept a été repris à de nombreuses reprises, plus ou moins bien selon la technique utilisée. À vous de juger !

Coca Cola Daft Coke

Bonne réalisation Coca Cola qui propose un petit historique des bouteilles design. L’effet de paralaxe est géré par une scrollbar simulée avec Jquery.

Chemical Romance

The Chrisbox

Les superbes photos utilisées donnent toute la force au site. À voir !

Unfold

Yebocreative

David Beckham

Resolutionim

Manufacturedessai

Campaign Monitor

Arrivé très tôt après la mise en ligne de Nike BW, le mini-site de Campaign Monitor comporte quelques problèmes de lenteurs et d’affichage…

Un effet intéressant sur le site de Wesc qui mélange plusieurs types de paralaxe.

Comment faire pour obtenir un tel effet ? Des éléments de réponse dans les tutoriels suivants :

Trop vu, trop copié ? Le concept de l’année ? Et vous quel est votre avis sur ces sites ?

Un article inspiré par Nike Better World et Art-Spire.

Les sites avec un webdesign plein écran, envahissent le web. Pour la simple et bonne raison que leur mise en page est souvent simple, efficace et permet de mettre avant des visuels qui en jettent. Pour vous aider a faire de même, je vous propose 8 ressources Jquery.

Bien avant l’explosion et l’utilisation massive de Jquery, le Flash était la principale technique utilisée pour réaliser des sites « fullscreen« . Les designers qui se sont tourné vers la librairie Jquery ont permis de faire avancer la technologie  pour offrir des sites toujours plus rapides, toujours plus animés et prenant la totalité de l’écran du navigateur. Vous cherchez les ressources et les tutoriels sur le sujet ? Vous les avez sous la main !

Menu animé Jquery en plein écran

Galerie fullscreen avec miniatures animées

Galerie fullscreen

Galerie Jquery avec miniatures

Le célébre plug-in « Supersized » Jquery

Jquery Fullscreener plug-in

Un tutoriel CSS + Jquery

Galerie / slider en fullscreen

Partagez vous aussi vos ressources, je n’hésiterai pas à les rajouter à l’article !

La navigation est un élément primordial à soigner dans un design de site web. Pour la rendre facilement utilisable, et joliment regardable, un petit peu Javascript est souvent le bienvenu.

Les nouvelles techniques CSS3, couplées à du Jquery permettent d’obtenir des menus de toute beautés. Cette sélection de 8 tutoriels permettra de vous apprendre différentes techniques pour créer un menu qui en jette !

Un menu bien animé

Simple mais efficace drop down menu

Un menu façon Vimeo

Jquery + CSS 3

Un navigation de slide

Navigation sur images de fond

Un menu en bulles, bien réussi

Celui-ci n’est pas vraiment un menu mais il peu toujours servir !

Si vous avez d’autres

Premier « guest post » sur Webdesigner Trends : Gaétan de Design Spartan a rédigé pour vous un article sur un sujet très actuel dans le webdesign, les sliders.

Depuis maintenant un moment déjà, nous voyons les pages de nombreux sites agrémentées de javascript pour des effets de rollover, de menus déroulant, de lightbox ou encore de sliders. Nous nous intéressons dans cet article aux sliders et à leur emploi dans le webdesign.

Qu’est-ce qu’un slider ?

Un slider est un élément présentant du contenu de façon ergonomique, souvent sous forme de diaporama avec une navigation. On les retrouve sous le nom de slideshows (= diaporamas) ou encore de carousels.

Ils peuvent ainsi présenter du contenu de tout type de manière à ne pas prendre trop de place à l’écran et sans rechargement de page intempestif.

Ils sont souvent utilisés pour afficher :

- des images : c’est le cas dans beaucoup de portfolios ou de sites en rapport avec l’image (photographie, graphisme). Il agit ainsi comme un petit diaporama pouvant ensuite renvoyer vers une page au travers de liens.

- des informations : souvent vu dans le cas de sites souhaitant présenter leur produit ou service innovant, on voit beaucoup de sliders présentant de façon claire et concise le fonctionnement du service ou du produit, ou encore ses avantages, etc… Cela est particulièrement utile pour ne pas avoir soit à charger une page de beaucoup d’informations, soit justement de naviguer entre plusieurs pages.

- mettre en avant un contenu spécifique : particulièrement apprécié par les blogs pour mettre en avant leurs articles « stars » ou les plus récents. Plus que pour des blogs, lorsqu’il est bien utilisé, un slider peut mettre en avant de façon intuitive presque n’importe quel contenu.

De plus en plus, on voit des sliders remplacer totalement la zone de contenu du site (généralement entre le header et le footer) dans le cas de sites ayant relativement peu de contenu. Cela signifie que le menu de navigation principal renvoie, après un clic, non pas sur une nouvelle page mais fait en général « coulisser » le contenu jusqu’à la page demandée.

Comment bien utiliser un slider ?

Aussi amusants qu’ils puissent paraître, les sliders ont leur limite et mal les utiliser peut être un échec. Mais avec ces quelques conseils, vous ne devriez pas faire d’erreur :

Ne surchargez pas en contenu

L’intérêt d’un slider est de pouvoir montrer plus de contenu de façon intelligente et pratique. De ce fait il va de soi que surcharger chaque slide de contenu alourdira la page. De même, il vaut mieux ne pas avoir trop de slides. Par exemple avec une vingtaine de slides, il perd totalement son utilité car il y aurait trop de contenu et retrouver l’information deviendrait vite une galère terrible. On voit en général plutôt entre 4 et 7 slides, voire un peu plus lorsqu’il ne s’agit que d’image. Il faut donc garder à l’esprit que l’objectif d’un slider est de présenter et trouver rapidement un contenu (image, texte, vidéo, etc…).

N’oubliez pas la navigation

Dans le cas d’un diaporama d’images notamment, on peut être tenté de ne mettre aucun lien ni aucun bouton et de juste laisser le timer faire défiler automatiquement les images les unes après les autres. C’est une erreur. Comme dans toute interface utilisateur, il faut que l’utilisateur ait le contrôle. Ainsi, il faut qu’il puisse passer d’un slide à l’autre quand il le souhaite via des liens ou boutons (des petits boutons pour chaque slide ou encore flèches précédent / suivant, les idées ne manquent pas !).

Montrez le nombre de slides

Quelque chose qui est souvent oublié en ergonomie, est que de ne pas savoir où est le commencement et où est la fin peut être frustrant ! Cela rejoint en partie le point précédent sur la navigation, il faut que d’une façon ou d’une autre, l’utilisateur soit conscient du nombre de slides et de là où il se trouve (par exemple 4/7).

Sur le site de Sprinkle Penny, chaque slide met en avant une caractéristique du service avec peu de contenu ce qui met en valeur celui présent. A noter la place importante de la navigation du slideshow qui permet à la fois de naviguer entre les slides, mais aussi de montrer sur laquelle on se trouve.

Intégrer graphiquement le slider

Des slideshow tout faits, il en existe des dizaines téléchargeables gratuitement. Quelque fois les thèmes graphiques sont agréables à regarder et quelque fois non. Dans tous les cas, gardez à l’esprit que l’intégrer dans le design général du site est nécessaire et cela peut même devenir un élément-clé unique du design, comme nous verrons dans les exemples plus bas.

Radium offre ici un très bon exemple d’intégration du slider dans le design. Cela devient à la fois beau, interactif et surtout unique. Les éléments de navigation sont particulièrement bien intégrés, de même que le contenu des slides.

Les transitions

En général, si on aime bien les sliders, c’est parce qu’ils permettent de mettre du contenu en avant intelligemment, mais aussi et surtout pour leurs transitions ! A vous de réfléchir aux transitions, sachez qu’il en existe aujourd’hui pour tous les goûts, style diaporama, fondu, effet 3D, etc…

Un peu d’inspiration avec des exemples de sliders

Quelques liens et ressources pour aller plus loin sur le sujet :

http://www.1stwebdesigner.com/resources/57-free-image-gallery-slideshow-and-lightbox-solutions/

http://www.1stwebdesigner.com/inspiration/great-slideshows-web-design/

http://webdesignledger.com/inspiration/55-inspiring-examples-of-slideshows-in-web-design

http://www.smashingmagazine.com/2009/03/09/slideshows-in-web-design-when-and-how-to-use-them/

J’espère que cet article vous aura plu et appris ou rappelé certains principes dans l’emploi de sliders en webdesign.

À propos de l’auteur :

Gaétan Weltzer aka Design Spartan est littéralement dépendant au graphisme, à l’illustration et au multimédia. Autodidacte et polyvalent, il adore partager et développer ses connaissances, comme en témoigne son désormais célèbre blog Design Spartan ! Il est également graphiste freelance dans le domaine du webdesign, de la création de sites internet, de l’illustration, de Flash (animations et sites interactifs) et de l’identité visuelle. N’hésitez-pas à le contacter pour vos projets, il mettra son expertise à votre service.

Le second article de la série traite comme prévu des librairies Javascript. Elles sont devenues aujourd’hui quasiment indispensables au développement d’une interface basée sur XHTML/CSS, qui soit riche en expériences utilisateur.

Depuis quelque temps maintenant le Javascript marche sur les plates-bandes de Flash. Animations en tout genre, widgets, composants, plugs-in, bref les librairies offrent la possibilité de créer rapidement et facilement de nouvelles fonctionnalités sur un site web. Elles sont majoritairement utilisées pour créer des applications web du coté client. Le débat Flash vs Ajax n’est pas nouveau, je ne m’étendrai pas plus longtemps, c’est n’est pas le sujet de cet article…

Un point sur les librairies Javascript les plus populaires aujourd’hui :

Jquery :

« Write Less, do More« , écrire moins et faire plus, un simple slogan qui résume très bien la philosophie de la librairie. Une documentation bien faite, des tutoriels en tout genre, et une quantité impressionnante de plugs-in à télécharger sur le web font de Jquery une librairie incontournable.

Ressources pour prendre en main Jquery :

• Le site officiel
• Les UI (Composant d’interface utilisateur), très intéressant !
• Chez Six Revision, un article pour débuter. (en Anglais)
• Des liens pour débuter et aller plus loin

Mootools :

Mootools est un framework orienté objet. Il offre le même type d’effets et d’animation que Jquery, Scriptaculous ou encore Prototype (Mootools est d’ailleurs basé sur la librairie Prototype).

Scriptaculous :

Vraiment poussée au niveau des possibilités d’animations, la librairie offre de très bon effets visuels. Rien qu’a voir la  page d’accueil du site…

Ressources :

• Le wiki officiel (en anglais)
• Des infos sur les méthodes disponibles (en français cette fois !)

Parmi cette liste (restreinte aux plus utilisées),  il convient de choisir celle qui est adaptée à vos besoin. Cependant évitez d’utiliser plusieurs librairies différentes en même temps sous peine d’avoir des problèmes de conflits.  Les librairies sont des outils qui continueront à se développer en 2010. Comme en témoigne le grand bruit autour de la nouvelle version de Jquery par exemple, ainsi que le nombre croissant de sites utilisant ces technologies. Et vous, quelle librairie utilisez-vous pour vos projets ?

Si vous trouvez les librairies Javascript standards trop compliquées ou trop ennuyeuses découvrez Performer. Cette librairie propose de nombreux effets et widgets sans écrire de Javacript ! Elle utilise les propriétés des élements HTML (class, rel, href…) pour créer les effets. Sinon vous pouvez toujours trouver de l’inspiration et apprendre grâces aux milliers de tutoriels sur la toile. Un exemple récent, chez WebdesignDev avec une sélection de 20 tutoriels Ajax ou encore chez Design Reviver avec 20 tutoriels d’animation Jquery.

Dans le prochain article de la série, j’essayerai de faire un point sur l’état actuel du référencement des sites en Flash.

La librairie Javascript Jquery est très populaire en ce moment sur le web. Elle est utilisée par de nombreux sites, soit pour embellir la navigation, soit pour apporter du mouvement, pour créer des galeries d’images… Les plugins disponibles à partir des librairies Javascript sont « faciles » à prendre et main et permettent de rapidement développer vos propres applications.

Le blog WedesignFan propose une sélection de 26 plugins de navigation Jquery à découvrir absolument. Pour en savoir plus sur Jquery et le Javascript je vous invite à lire un article traitant du sujet sur le blog Design Spartan.