Appelez-la « split-screen », « divided-screen » ou écran divisé vertical. Cette nouvelle tendance se retrouve dans de nombreux web design : décryptage et exemples.
La tendance du webdesign à deux colonnes, a petit à petit fait son apparition avec l’utilisation du double scroll. Depuis un ou deux ans, de nombreux sites mettent en place ce genre d’effet pour présenter leur contenu.
Bien plus qu’un simple parti pris graphique, diviser l’écran en deux parties bien distinctes offre une manière originale de guider l’utilisateur dans votre site. En y regardant d’un peu plus prêt, on peux y trouver d’autres avantages :
- Créer des mises en page minimalistes et efficaces.
- Attirer l’attention de l’utilisateur vers une partie bien précise.
- Jouer sur les contrastes.
- Offrir une mise en page non conventionnelle.
- Créer des sites plein écran.
Ce type de mise en page est particulièrement bien adaptée à une navigation sur grand écran ou encore sur tablette. En testant ces différents sites, j’ai pu cependant constater que les concepteurs trouvent d’intéressantes solutions pour adapter cette présentation à un support mobile. Je vous invite à tester par vous même, en navigant à travers ces quelques exemples :
Plastic Bionic
Studio Meta
Play Mag / Most Wanted 2015
NightCall US
Hello Monday
London Art Weekend
Parktavernsp
Stolen Girl Friends Club
La grande Evasion
Desktime
Formlets
Fifty Five
Rick And Drew
Names for changes
Comment créer deux colonnes en CSS ?
Pour mettre en place un layout à deux colonnes, rien de plus simple. Il suffit de définir deux blocs occupant chacun 50% de votre écran (logique me direz-vous). Fixez-les (avec position) à gauche puis à droite.
Pour la pratique, jetez un oeil au tutoriel « Spilt Layout » de chez Codrops.
Ressources :
Je vous propose deux petits templates (payants) basés sur ce principe :
MUMM | The Splitted Coming Soon
ATHOS – Innovative Coming Soon Template
[Edit : deux nouvelles ressources intéressantes à découvrir ci-dessous]
Moet Multiscrolling Coming Soon Template
Versatile Coming Soon Template
Pour conclure :
Avant de décider de créer un site utilisant le split-screen, je vous conseille de vous poser les bonnes questions :
- Ce type de mise en page est-il compatible avec ma cible ?
- Est-il adapté à mon contenu ?
- Apporte-il vraiment une valeur ajoutée ?
Ne perdez pas de vue que le contenu est roi. Bien qu’un bon design et une bonne expérience utilisateur permettent de rendre le site inoubliable, n’oubliez pas que l’écran divisé est juste un simple moyen de faire passer différemment votre message.