Récemment, nous avons célébré le premier anniversaire de Droopler, notre distribution Drupal. Cela représente une occasion parfaite de considérer notre projet du point de vue du design et de l'expérience utilisateur, ainsi que de nos principes fondamentaux qui nous guident dans le développement de ce projet.
Créer des composants, pas des sous-pages
Nous voulions développer un outil universel pour la création de sites web Drupal, c'est pourquoi nous sommes finalement arrivés à la conclusion que nous devions penser à Droopler comme à des briques Lego, en ce sens que chaque sous-page devrait être constituée de blocs prédéfinis qui facilitent la création de contenu. Nous voulions que nos utilisateurs disposent d'une large variété de blocs - sections - qu'ils peuvent organiser librement sur chaque sous-page suivante. En conséquence, créer des sous-pages sur Droopler ressemble exactement à jouer avec des briques Lego. Les sections sont sélectionnées à partir d'une fenêtre contextuelle graphique, présentant les blocs utilisables sous forme d'icônes, ce qui facilite la création de pages et réduit le temps nécessaire pour le faire.
La sélection des sections disponibles vous permet de choisir celles que vous aimez et vous permet de faire tout ce que vous avez l'intention de faire. La distribution vous offre plus d'une douzaine de sections, y compris une bannière, un CTA, un formulaire de contact, des blocs de contenu, des galeries et bien plus encore. Les mises à jour suivantes ajouteront de nouvelles possibilités et de nouvelles sections.
Faciliter l'édition de contenu pour les éditeurs
En plus d'offrir une opportunité de construire des sites web de manière rapide et pratique, nous voulions également offrir des moyens de modifier rapidement le contenu. C'est pourquoi nous avons récemment ajouté la possibilité d'ajouter de nouveaux éléments sur les sous-pages et de modifier le contenu via le frontend. Il suffit de déplacer votre curseur au bon endroit sur la sous-page et d'utiliser l'option pour supprimer la section, modifier l'existante ou en ajouter une nouvelle. Cette fonctionnalité intuitive permet aux utilisateurs d'ajouter rapidement et facilement un nouveau type de contenu à la sous-page sans avoir à visiter le panneau d'administration. Tout se passe dans une fenêtre contextuelle sur la sous-page.
Vous pouvez voir cette fonctionnalité en action dans le clip suivant (à partir de 1:11) :
Adaptez votre site web aux appareils mobiles
Droopler est un produit open source moderne et innovant, qui prend en compte la grande variété d'appareils utilisés quotidiennement par les internautes du monde entier. C'est pourquoi il fonctionne parfaitement à la fois sur les téléphones de différentes tailles d'écran, ainsi que sur les ordinateurs de bureau et les ordinateurs portables. Grâce au fait que le site web est divisé en blocs, nous avons réussi à faire en sorte que tous les éléments et types de contenu fonctionnent de manière propre et logique avec les vues mobiles. Dans ce cas, le principal défi provient de la faible largeur d'écran sur les smartphones. Grâce à l'utilisation de mises en page réactives, tous les éléments qui ne tiennent pas côte à côte peuvent se redimensionner de manière appropriée et se "déplacer" librement vers les lignes suivantes. Droopler vous permet d'utiliser librement des fichiers SVG, qui facilitent le redimensionnement des graphiques vectoriels sur les écrans, vous aidant à éviter la pixellisation - vos éléments graphiques restent toujours nets.
Droopler est universel
L'un des plus grands défis était de concevoir Droopler de manière à le rendre universel et polyvalent, permettant à ses utilisateurs de créer une variété de sites web. En d'autres termes, nous voulions nous assurer que toutes les couleurs, la typographie, les polices et l'apparence générale fonctionnaient bien pour autant de types de sites web que possible. Le principe directeur du développement de Droopler était la création d'une distribution qui avait fière allure après une installation rapide ; c'est pourquoi nous avons basé la mise en page par défaut sur des couleurs atténuées et la police Lato lisible et universelle. Il semble que les solutions appliquées en conformité avec nos principes de conception fonctionnent dans des scénarios réels, puisque de nombreux sites web basés sur Droopler suivent simplement notre mise en page de base, y compris les pages d'événements, les sites d'entreprise et même les pages créées pour les parcs nationaux.
Cependant, Droopler est également très ouvert aux ajustements fins en éditant et en remplaçant les feuilles de styles CSS existantes, ainsi qu'en en ajoutant de nouvelles.
Construire une excellente UX dans Droopler
Nous concevons une excellente UX dans Droopler pour deux types d'utilisateurs : Tout d'abord, pour les personnes qui créent et éditent le site web. En pensant à eux, nous visons à développer des outils permettant une édition rapide et simple, car nous voulons nous assurer que le processus de création de sites web soit aussi agréable et satisfaisant que possible. C'est pourquoi nous nous concentrons sur l'ajout de nouveaux éléments aux sous-pages et sur l'édition des éléments existants, en garantissant stabilité et extensibilité.
Le deuxième type d'utilisateurs sur lequel nous nous concentrons sont nos visiteurs, qui parcourent le site web fini. Nous optimisons Droopler en tenant compte de la vitesse, en nous assurant que le temps de chargement soit court et que tous les éléments s'affichent correctement sur divers appareils. Nous nous concentrons également sur l'aspect visuel de Droopler - en d'autres termes, nous voulons que les gens l'apprécient. Cette raison simple nous amène à mettre constamment à jour la version actuelle et à ajouter de nouvelles fonctionnalités.
Plans pour l'avenir
Toute l'équipe de Droopler travaille intensivement au développement futur du CMS. En termes de design, nous travaillons constamment sur de nouvelles sections, offrant une variété de nouvelles utilisations. Nous voulons répondre aux attentes et aux besoins de nos utilisateurs, qui nous disent ce dont ils ont besoin en partageant leurs commentaires avec notre équipe. Nous pouvons voir la direction du développement des pages basées sur Droopler, ainsi que toutes sortes de nouveaux blocs développés en pensant à eux, ce qui nous donne des indications claires sur la direction que nous devons prendre avec notre design à l'avenir. Bientôt, une nouvelle démo Droopler avec de tout nouveaux éléments, ainsi que des changements le rendant un outil beaucoup plus efficace pour construire des sites web corporatifs.
N'hésitez pas à consulter régulièrement www.droopler.com et à aimer notre page fan FB à www.facebook.com/Droopler/
