Back to top

Faire évoluer votre site web en 2.0

mon site internet passe en mode Web 2.0, une évolution majeure pour devenir viral… Comment faire ? C'est quoi le web 2.0 ?

Remedact 2.0 est simple et friendly

mon site internet est plus lisible : davantage d'espace blanc et une taille de police minimal de 16px, comme je l'explique dans l'article 5 astuces pour augmenter la lisibilité de votre site web.

J'ai également mis en place le module Drupal Jcaption qui utilise les champs title ou alt d'une image pour le mettre en légende sous l'image (plus simple et sans bug avec Colorbox que le module image field caption).

Depuis très longtemps je veux passer mes listes d'images en grilles verticales, ce qui est beaucoup plus intuitif car on déroule une page web vers le bas, et certaines images comme celles des skates verticaux étaient vraiment trop petites. J'ai trouvé et mis en place le module Masonry views et Masonry API de Drupal, utilisant le javascript de Masonry, comme je l'ai vu tant de fois sur des sites Wordpress, mais aussi dans Pinterest, ou sur le site d'Erik Johansson,  Kristian Hammerstad et même Beyoncé…
Pour la gestion des résumés d'articles à l'intérieur de ces grilles et pour savoir quels éléments afficher et où les placer, je me suis inspiré du thème Wallstocker de Kazunori Miura (décidément le Japon ♥ )que j'ai mis en place sur mon Tumblr. J'ai donc fait le choix de mettre mon image de référence de l'article, puis un début de texte explicatif et qui donne envie de lire la suite (voir les actions en fin de cet article), la date de publication relative (il y a…) et enfin les icones de partage social (lire ci-dessous).

L'arborescence du site et l'accès direct à certaines pages choisies est possible grace à un super footer. Ce dernier permet aussi de mettre un mini formulaire pour s'inscrire à la newsletter et les liens vers mes pages de réseaux sociaux, ainsi que vers des pages perdues dans le site, mais utiles. Sur ce point, il pourrait être intéressant de mettre des liens de pages régulièrements consultées en faisant une analyses des visites… mais bon j'ai arrêté de faire en fonction de… Et puis comme cela, il n'y a pas de cookies traceurs : mon site internet est transparent de ce coté-là.
Un super footer peut être illustré ou au contraire super soft comme celui du site d'Apple, clair, avec des polices et couleurs simples, sans icones. Certains ajoutent directement le formulaire de contact dans ce footer.

Le coté friendly vient du gain de lisibilité et d'espace (lire ci-dessus), mais aussi grâce au design adaptatif : quelque soit la taille de votre écran, mon site internet se veut parfaitement adapté. Après avoir cherché dans les nombreux modules drupal de menu responsive, j'ai compris ce vers quoi je voulais aller : un menu latéral hors cadres comme sur le site du célèbre auteur de comics Mike Mignola (créateur de Hellboy et au style faussement simple ♥ ), mais aussi comme sur le site d'Arte TV. Les modules étant foireux et/ou trop compliqués/simples, j'en reviens au bon vieux codage html et introduction de code Javascript dans le <head> de la page web, avec les conseils de How to - Side navigation (navigation latérale), dont j'ai choisi le menu Sidenav push (off-canvas).
Quand on navigue sur mon site internet avec un mobile, ça change tout ! Et c'est donc mobile-friendly. Simple. Content.

J'essaie de garder un fichier CSS léger et ayant moins de 1000 lignes une fois les éléments déroulés. On peut s'inspirer de css minimalistes fonctionnant avec des grilles comme Pure.css, dont j'ai d'ailleurs failli utiliser le système de menu latéral.

Remedact 2.0 est interactif

Il fut un temps où j'ai fermé mon compte Tumblr, Twitter, Behance etc. et où j'ai enlevé de mon site internet les liens de partage sur les réseaux sociaux. C'est une erreur à ne pas commettre. Mais distinguons deux points à propos des réseaux sociaux : les comptes et le partage.

Pour les comptes facebook, twitter, behance etc., je comprends que ça puisse prendre du temps de les alimenter, mais des outils de partage existent pour partager sur de multiples plateformes le même post en quelques clics. C'est pour cela que j'avais fermé mes comptes, ma page facebook etc.

Mais pour ce qui est du partage, il est important de proposer au visiteur web la possibilité de partager : c'est comme pour les sourires ou la connaissance = tout ce qui n'est pas donné/partagé est perdu. Et ce serait dommage de perdre ce partage potentiel, puisqu'après tout, pour être honnête, c'est ce que nous recherchons tous.tes : être aimé.e et/ou reconnu.e dans un milieu, trouver et développer sa communauté, ses fans.

Ainsi donc j'ai créé à nouveau des comptes sur des réseaux sociaux à tendance art visuels = qui partage des images : Tumblr, Pinterest, Instagram, Behance. Un codeur irait davantage sur d'autre plateformes comme Github (› wikipedia), ou Reddit pour partager des liens. Puis j'ai ajouté des icônes de partage sur mon site internet, avec le module sharethis, mais il y en existe moultes.
On peut aussi essayer de contrôler ce qui va être partagé, notamment au niveau du choix de l'image avec le sub-module Open Graph du module Meta tags.

Il y a quelques temps, j'avais remplacé la gestion interne des commentaires par Drupal par une gestion avec Disqus (module Drupal Disqus), utilisé entre autre par Arte.tv. La gestion de ce qui est affiché est un peu compliquée dans l'espace utilisateur, mais Disqus est en court de traduction en français.

Remedact 2.0 est marketing

C'est un peu difficile à dire comme ça, de manière brute, mais oui, j'ai développé mon site internet dans un sens marketing. Quelle honte à avoir après tout ? De quoi peut bien vivre un artiste sinon de ses propres ventes ? J'ai donc développé l'e-commerce avec la mise en place d'un shop remedact dans lequel on peut fouiller mes créations et les filtrer par support et taille.

En fait là aussi j'avais déjà commencé à mettre en place l'e-commerce sur mon site internet il y a des années (avec le module Drupal commerce des commerce guys), sans finaliser la méthode de paiement Paypal. Cette fois-ci j'ai opté pour le paiement par Stripe avec le module Drupal Stripe, que je trouve plus simple, moins onéreux et plus friendly.

mon site internet pousse à l'action

Pour être honnête, une fois de plus, on peut réfléchir sur les actions que l'on veut voir se réaliser sur une page :

  • on a déjà parlé du partage sur les réseaux sociaux : avec des icones  simple, facile d'accès mais sans être prépondérants (couleurs ou taille criarde) et dont l'emplacement est judicieuseent choisis,  le partage sur les réseaux sociaux est simple et à la portée de tous.tes
  • la mise en place d'une partie "related" propose des articles de mon site internet qui pourraient intéresser le.a lecteur.rice car ils partagent les mêmes intérêts / tags que l'article en cours de lecture. Cela amène à cliquer sur un autre contenu similaire et à prolonger le temps et les images/articles vus.
    Malgré l'existence d'un module Views related content, j'ai utilisé une méthode qui fonctionnera aussi sous Drupal 8. Le résultat demande à être amélioré peut-être avec Apache Solr…
  • pour finir, il y a bien sur l'e-commerce, avec un bouton "ajouter au panier" friendly encore une fois par sa couleur et ses bords arrondis.
    Mais cela implique également un shop clair et des étapes de commande (checkout) claires. J'ai pris exemple sur les sites de la Fnac (checkout, tarif en rouge… ce site s'est fortement amélioré, car à un moment, c'était une catastrophe) et d'Amazon.

 

Au final, même avec tout ça, remedact reste remedact et la meilleur action que vous puissiez avoir est de vous transformer vous-même, d'aider les autres ou le sort de la planète par vos actions en réaction à une méditation induite par le visionnage de mes images… Regarde, médites, agis !

Merci

Same same but… different

up

Laisser un commentaire…