Certains Webdesigns présents sur le Blog du Webdesign semblent tenir de la magie, tant ils sont innovants et impressionnants. Pour les rendre plus accessible, je vous propose de lever le voile sur leurs secrets et vous apprendre comment reproduire leurs effets les plus impressionnants.

Pour ce premier numéro, je vous propose de décortiquer le site de l'agence Sismo design, que vous pourrez retrouver dans notre article Découvrez 5 sites avec une navigation et un concept original #103.

Cet article est un prototype pour une nouvelle série d'articles se proposant de décortiquer pour vous un site à la conception ou à la navigation innovante. Le but ne sera pas ici de vous fournir la liste exacte des ressources utilisées dans le site étudié, car la compression des assets rend cette information quelque peu délicate à obtenir, mais de vous fournir des astuces et ressources permettant de réaliser le plus simplement possible les mêmes effets.

Si ce concept d'article vous plaît, n'hésitez pas à le noter en commentaire !

Sismo Design

Le site en général

Le site est découpé en 4 parties bien distinctes, utilisant chacune des techniques différentes, le tout relié par une home minimaliste. Passer à une de ces 4 parties se fait sans rechargement, et avec un petit effet de transition de page sympathique.

Trouvez un webdesigner disponible

Trouvez gratuitement le prochain talent qui réalisera votre projet ou rejoindra votre équipe.

Le changement de page sans rechargement peut se faire assez simplement avec jQuery, et le changement de l'URL, lui, fait appel à la technologie pushStat, qui permet de modifier l'url de la page, son titre, et même l'historique du navigateur, mais le plus simple reste d'utiliser la ressource Pjax.

Pjax est une ressource qui vous permettra en quelques lignes de mettre en place ce type de changement de pages sans rechargement, et se permet aussi le luxe de vous fournir des hooks pour insérer une animation lors du changement de page.

L'effet de transition est un peu plus complexe à réaliser, heureusement Codrops se décarcasse pour nous, et propose une impressionnante série de transitions de pages, ainsi que les explications nécessaires à leur mise en place.

Enfin, bien que ce ne soit pas visible pour les visiteurs, un preloader est installé sur la page pour charger les images du site lors de la visite, pour fluidifier les changements de pages. Je vous conseille d'utiliser PreloadJS pour ce type de besoin, il est parfait dans ce rôle.

Homepage

La Home page propose un simple titre et quatre carrés au hover intéressant représentant les différentes parties du site. Le contenu de cette page est centré en largeur, mais aussi en hauteur.

Après un peu de rétro-enginering, voilà le hover sous une forme un peu brute, mais aussi plus simple à apréhender

See the Pen Kxltd by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Pour ce qui est du centrage vertical et horizontal, les développeurs ont utilisé une particularité des tableaux : il est possible en CSS de centrer le contenu d'une case de tableau sur les deux axes, en déclarant simplement de display du conteneur en table-cell.

 

Je m'arrête ici pour cet article pilote, les futurs articles standards feront certainement le tour complet des sites étudiés. Si ce genre d'articles peut vous intéresser, n'hésitez pas à vous manifester en commentaires !