Responsive [Bootstrap], un nouveau thème révolutionnaire !

Un thème e-monsite responsive

Disponible depuis le 14 mai, le thème Responsive [Bootstrap] vous permet de rendre votre site responsive et d'optimiser ainsi sa consultation sur tout type de support : ordinateur, tablette, smartphone…

Un site responsive, comment ça marche ?

Selon le type de terminal utilisé par le visiteur qui consulte votre site internet, l'affichage de celui-ci peut être problématique. Citons quelques dysfonctionnements fréquemment constatés :

  • La largeur du site ne s'adapte pas à la largeur de l'écran
  • Le menu de navigation n'est pas directement accessible
  • Les textes et les images sont tronqués
  • Les formulaires sont trop larges…

Ces soucis de lisibilité nuisent à l'ergonomie de votre site web et peuvent vite le rendre inutilisable, décourageant l'internaute de poursuivre sa visite.

Un site dit Responsive suppose à l'inverse que tous ces paramètres aient été pris en compte lors de sa conception. Ainsi, tous les éléments qui constituent son contenu s'adaptent à l'écran, et leur largeur n'est donc plus fixe (définie en px) mais relative (définie en %).

Par exemple, sur le thème Responsive [Bootstrap], un menu vertical occupera un quart de la largeur du site sur tous les écrans de résolution supérieure ou égale à 768px de large (soit des tablettes aux écrans HD). Pour les résolutions inférieures, sur les smartphones par exemple, il occupera la largeur totale de l'écran et deviendra plus lisible. Votre site et son contenu s'adaptent donc automatiquement à la taille de l'écran, le rendant facilement consultable sur tous les supports :

Un site adaptable à tous les supports

Cette notion essentielle de Responsive concerne également les images insérées sur votre site, celles-ci s'adaptant (comme le reste), à la largeur de leur zone d'affichage (un widget dans un menu vertical, une page par blocs...).

Une nouvelle manière d'appréhender l'affichage des images

Des images redimensionnées

L'image n'est jamais agrandie au delà de sa taille originale, et dans le cas où sa taille est supérieure à celle de sa zone d'affichage, elle est redimensionnée et donc visible intégralement.

Un contenu qui s'adpate

Ci-dessus, une image de 1200px de large insérée à l'aide du widget Image dans une page par blocs. Sur l'exemple de gauche, l'image est tronquée car trop grande. Sur l'exemple de droite, grâce au thème Responsive[Bootstrap], l'image est redimensionnée et s'adapte automatiquement à la largeur de la zone de contenu.

IMPORTANT : Pour que les images figurant sur votre site se redimensionnent automatiquement et occupent toujours un maximum d'espace, il est important de les insérer à leur taille originale. L'image n'étant jamais agrandie, il vaut donc mieux qu'elle soit trop grande que trop petite.

C'est pourquoi seules les tailles d'images avatars et miniatures restent paramétrables sur ce thème. Les tailles moyennes et grandes sont devenues quant à elles superflues car considérées comme responsive par défaut.

Un code HTML et CSS basé sur le framework CSS Bootstrap

Le code HTML ainsi que les styles CSS sont conçus selon les règles émises par le framework CSS Bootstrap. Ainsi, le code HTML des composants de votre site (modules, widgets...) est normalisé, facilitant ainsi leur personnalisation. Pour les utilisateurs avertis, il devient donc plus facile de modifier l'apparence de leurs sites en CSS. Le code ainsi optimisé allège vos pages web, accélérant par conséquent leur temps de chargement.

Certains modules ont donc été revus, intégrant de nouvelles fonctionnalités. Par exemple, la page présentant un produit du module Boutique propose un effet de zoom :

L'effet zoom du module Boutique

Toujours sur le module Boutique, il vous est également possible (depuis Configuration > Menus) d'afficher en haut de la zone de contenu un lien rapide vers le panier, permettant ainsi à vos clients de visualiser son contenu en un clin d'œil. Un processus de commande a également été mis en place afin que vos clients puissent facilement repérer les diverses étapes de leur commande :

Nouvelle fonctionnalités sur la boutique

L'espace membre a également été repensé, ses fonctionnalités se présentant désormais sous la forme d'un menu déroulant :

Un espace membre repensé

Depuis le formulaire de personnalisation, vous pouvez aussi choisir de faire apparaître dans l'entête du site un moteur de recherche puis définir sa position :

Un moteur de recherche dans l'entête du site

Parmi d'autres nouveautés, citons également l'effet de dégradé appliqué sur les divers boutons du site, obtenu en CSS3 (et non plus à l'aide d'une image), les rendant ainsi facilement personnalisables.

Plus de version mobile à activer

En effet, ce thème s'adaptant à toutes les résolutions, vous personnalisez à la fois la version standard et la version mobile de votre site. Activer la version mobile n'est alors utile que si vous souhaitez personnaliser l'apparence de votre site sur mobile d'une manière diférente.

Sept déclinaisons vous sont actuellement proposées, mais d'autres viendront les compléter prochainement !

Responsive

Commentaires

  • Resaff
    C'est vraiment du bon boulot, merci à toute l'équipe.

    Une petite remarque, sur le fond de page, une option très pratique à disparue, qui permettait de fixer ou non le fond de page.
  • GameArt
    Ce nouveau thème promet d'être sacrément intéressant ...

    Je l'essaierai dans peu de temps avant de voir si je le mettrai en place définitivement.
  • GameArt
    Après avoir essayé, j'ai repéré quelques trucs qui ne sont pas très pratiques ...

    Pour les images, elles ne sont pas redimensionnées dans les tableaux. Quand une image est placée à l'intérieur d'un tableau (même si le tableau a une largeur prédéfinie en pixel ou même en y indiquant 100%), celle-ci prend sa taille maximale peu importe la taille que doit prendre la zone de contenu.

    Sinon, il y a aussi les vidéos. Si elle sont redimensionnées sans problème dans le module Galerie vidéo, elles ne le sont pas si elles sont intégrées dans une page ou dans un billet du blog.
  • Carla
    • 4. Carla Le 27/05/2013
    Il est bien ce nouveau thème ;) !
  • Resaff
    Il semble qu'il y ai un petit souci sur ce thème, le choix de l'effet de transition du nouveau carrousel ne fonctionne pas ..
  • tony-samson
    @Resaff : ce n'est pas un bug. Comme indiqué sur l'aide du widget Carrousel, certains paramètres ne sont pas repris selon les thèmes. Le thème responsive utilisant le framework Bootstrap, nous avons privilégié d'utiliser le carrousel natif qui ne comporte pas certaines options que nous proposons sur le widget.
  • Resaff
    Merci de votre retour, du coup le carrousel utilisé sur un thème responsive ne s'adapte pas à la taille de l'écran,
    peut être pour une future évolution :)

    L'ombre portée n'est plus présente sur le thème responsive, est ce une option envisageable ?
  • colin
    @Resaff - une modification en ce sens a été apportée au carrousel aujourd'hui ! Bien que ce thème ne les propose pas dans le formulaire de personnalisation de l'apparence du site, vous pouvez intégrer des ombres portées, ou d'autres effets CSS3, en CSS.
  • Resaff
    Bonjour,

    merci de votre retour et de votre réactivité.

Ajouter un commentaire

Code incorrect ! Essayez à nouveau