En ce mois d’août 2011, Digitalies a accompagné Christelle Martineau pour la refonte de sa boutique en ligne. Le site Friponet.fr est dédié à la vente de vêtements pour enfants de qualité d’occasion.

Le site e-commerce est développé grâce à la plate-forme libre Prestashop.

Prestations : direction artistique (sur la base de la charte existante), intégration technique, migration de la boutique depuis OSCommerce vers Prestashop, formation complète à la gestion de la boutique.

Cette version 1.4.4 propose notamment une fonctionnalité attendue de longue date : la mise à jour automatique en un clic « One Click Upgrade« , similaire à ce que propose WordPress.

Nous attendons évidemment beaucoup de cette fonctionnalité, que nous sommes impatients de tester en profondeur !

Ces conférences vidéos sont basées sur la plate-forme Skype. La dernière version Windows du logiciel permet d’ailleurs d’ores et déjà l’intégration de ses contacts Facebook.

Plus d’informations :

• http://www.facebook.com/videocalling
• http://www.skype.com/intl/en/features/allfeatures/facebook/

Cet été est décidemment riche en nouveautés avec l’apparition il y a quelques jours de Google+, qui ouvrira d’ailleurs ses portes au public à la fin du mois de juillet.

Au cours de cette soirée, vous allez nouer rencontrer et discuter avec des personnes, et inévitablement remarquer leurs signes distinctifs : visage, tenue, traits de caractère…

Autant d’indices qui vous aiderons à les reconnaître dans le futur : sans ces indices, elles ne sont que des anonymes au milieu d’une foule d’inconnus.

Le symbole de votre marque

Le logo définit votre marque, votre identité auprès du public, auprès de vos clients, auprès de vos prospects. Il inspire la confiance et la crédibilité.

Puisque que votre entreprise possède une personnalité unique, votre logo est une création sur mesure.

Qu’est-ce qu’un logo, au juste ?

Commençons par ce qu’il n’est pas :

• Le logo n’est pas un « dessin », il n’a pas comme vocation première à être « joli » (nous y reviendrons) ;
• Le logo ne peut pas être réalisé en quelques minutes à l’aide d’un ordinateur ;
• Le logo ne peut pas être acheté « tout fait » dans les catalogues que l’on trouve sur Internet.

Le logo exprime ce que vous êtes et ce que vous faites, sur tous vos supports de communication : papier, web, flotte de véhicules, dans vos locaux…

Plus que cela, ce sont la qualité de votre savoir-faire et votre crédibilité en tant que professionnel qui doivent se retrouver dans votre logo :

• Un logo improvisé dans un logiciel renvoie l’image du « bricolage » ;
• Un logo trop compliqué ou trop chargé en effets (ombres, reflets…) ne sera pas reconnu et mémorisé par votre public.

Les qualités d’un logo

Il doit être simple… Assurément plus difficile à faire qu’à dire !

Créer un logo simple veut dire que nous avons conservé uniquement l’essentiel, « l’essence » de l’entreprise, ce qui est le fruit d’une véritable réflexion avec vous.

Le superflu (ornementations et autres décorations) n’a clairement pas sa place ici.

Cela signifie obligatoirement faire des choix en assumant cette simplification. Il est impossible de toute dire dans un logo : il faut conserver une idée majeure, et accepter de la mettre en avant.

Le logo est porteur d’un message.

Prenons un des logos les plus reconnus au monde : celui de Nike. Exemple célèbre maintes fois pris pour exemple, c’est en effet un véritable modèle.

Qu’exprime t-il ? La vitesse, la souplesse, sans nul doute. Cela fait d’ailleurs bien longtemps que Nike ne communique plus sur ses produits, mais sur un style de vie.

Que représente t-il ? L’aile d’Athéna, déesse grecque de la guerre, appelée également Athené Nikè (Ἀθηνά Νίκη en grec ancien). De Nikè à Nike™, le chemin est rapide et la boucle est bouclée pour une des plus celèbres marques au monde.

Pourtant, ce logo est extrêmement simple et dépouillé. Mais il fonctionne et c’est ce qu’on lui demande ! Les budgets publicitaire de la marque ont évidemment contribué à cette reconnaissance, mais sans remettre en question les qualités propres au logo.

Un logo doit-il être « beau » ?

La beauté est un critère bien subjectif… Certains trouvent hideux le logo des Jeux Olympiques de Londres. D’autres l’adorent.

La beauté n’est pas un critère. Le dessin du logo doit être cohérent avec la marque.

Une boutique de vêtements gothiques n’aura pas la même image qu’une épicerie bio, tout comme un organisateur de courses de motocross et un cabinet d’experts comptables.

Le bon logo, c’est celui « parle » tout de suite. Il fait référence à des idées et à une culture propres à votre public.

Ai-je besoin d’un logo ?

Faites le point sur votre communication : quelle image renvoyez-vous aujourd’hui ? Est-elle satisfaisante ? Comment l’améliorer ?

Dites-vous qu’un logo bien pensé et bien réalisé sera votre reflet durant de nombreuses années.

Pour conclure, n’oubliez pas qu’un logo n’est utile que s’il est bien utilisé ! Ce n’est qu’un maillon de la chaîne, celle de votre communication professionnelle.

Contactez-moi si vous avez besoin d’un conseil, je vous aiderai avec plaisir à définir vos besoins.

Nicolas Duvivier.

Agence : BETC Euro RSCG.

Selon le communiqué de presse de 8 avril, « PagesJaunes affirme son positionnement d’expert du digital et du local ».

On retrouve les tendances graphiques qui persistent encore en 2011 : arrondis, dégradés, et typographies « gentilles » (capitales peu marquées par rapport aux bas de casse). On notera également la reprise du J pour le dessin de l’insigne.

Avec un logo comme celui-ci, la création de l’icône de l’application pour iPhone / iPad ne demandera sans doute pas beaucoup d’effort.Le style « glossy » initié par Apple il y a 10 ans et repris à volonté par les « entreprises 2.0″ n’est pas mort, qu’on se le dise !

Ce type d’ornements graphiques se retrouve notamment sur le logo SFR :

Et l’on retrouve par ailleurs l’association d’une lettre stylisée et d’un point dans le logo Corsair Fly :

Principales caractéristiques : une nouvelle couleur verte (tendance écolo ou approche « Android » ?) et nouvelle typo en rondeurs futuristes (encore une !).

Un article est d’ailleurs en préparation sur ces logos axés « typographie ». Le nouveau logo Acer confirme d’ailleurs une certaine conformité dans les identités des grandes marques. À découvrir bientôt !

À vrai dire, ce sont deux choses tout simplement différentes.

Une image numérique, qu’elle provienne d’un scanner, d’un appareil photo numérique, ou d’un fichier créé de toute pièce dans un logiciel, c’est avant tout une mosaïque de carrés colorés (les pixels). Nous ne parlerons pas ici des images basées sur des courbes mathématiques (images vectorielles).

L’image numérique comporte 2 caractéristiques essentielles qui permettent d’apprécier sa taille :

• La définition désigne la quantité totale de pixels qui composent l’image. On parlera ainsi d’une image de 3000 pixels par 2000 pixels, ou encore d’une image de 6 mégapixels.
  Plus ils sont nombreux, plus elle sera susceptible de reproduire les détails avec précisions.
  Attention, cela n’est pas le seul critère de qualité : rien de sert d’avoir un appareil photo 20 mégapixels si l’objectif est médiocre (nous aurions dans ce cas une image haute définition qui aura capté tous les défauts de la lentille !).
  
• La résolution est liée à la finesse de l’image imprimée, elle désigne la taille physique d’un pixel imprimé : on cherche idéalement à ce que les pixels soient invisibles à l’œil nu. Pour ce faire, la résolution de l’image doit être supérieure à celle du dispositif d’impression (jet d’encre, laser, presse offset ou numérique…).
  La résolution s’exprime en ppp (pixels par pouce), ou dpi (pour dots per inch). Une image à 72 dpi signifie qu’un pixel mesure 1/72e de pouce sur le papier (soit un carré de 0,4 mm de côté).
  Idéalement, on cherche à utiliser des images à 300 dpi : à cette résolution, l’œil ne peut pas discerner les pixels.

La combinaison de la définition et de la résolution permettent de connaître la taille imprimée d’une image.

Prenons un exemple avec une image de 1200 pixels par 600 pixels de définition, ayant une résolution de 300 dpi.

Si l’on imprime cette image, elle mesurera 4 pouces par 2 pouces sur le papier (1200 / 300 = 4, 600 / 300 = 2).

Si l’on essaye d’imprimer l’image en plus grand format (via les réglages de l’imprimante, par exemple), alors sa résolution va diminuer (et donc les pixels vont s’agrandir), jusqu’à devenir visibles. On évitera ainsi d’imprimer des images à moins de 200 dpi pour les documents qui doivent être lus à une distance de lecture normale (40 – 50 cm environ).

Enfin, certaines images peuvent être imprimées en basse résolution de façon voulue : c’est le cas des panneaux publicitaires de ville (de 4 x 3 mètres) car ils ont vocation à être vus à quelques mètres de distance. On peut donc diviser la résolution par 10, car la qualité d’une image à 30 dpi vue à 10 mètres équivaut à celle d’une image à 300 dpi vue à 1 mètre. On s’évite ainsi de générer une image trop lourde !

Pour quelles raisons une page web “n’existe plus à l’adresse indiquée” ? Il se peut que :

• Le visiteur se soit trompé en saisissant l’adresse de la page ;
• Le site ait changé d’adresse ou utilise des URLs réécrites dont la structure a été modifiée depuis le dernier passage du robot d’indexation ;

Dans le premier cas, il n’y a évidemment pas grand chose à faire : les erreurs 404 sont justement là pour notifier au visiteur que… la page n’existe pas ! Si votre site prend en charge les erreurs 404, il avertira le visiteur et lui permettra de poursuivre sa navigation autrement, en suggérant des pages similaires ou en affichant un formulaire de recherche.

C’est plus délicat lorsqu’un grand nombre d’adresses “mortes” pointent vers votre site. C’est sans doute le fait d’un changement de nom du site (déménagement vers un nouveau domaine) ou un changement de la structure des liens (réécriture d’URLs). Et il convient de les corriger pour ne pas perdre votre référencement ni dérouter une partie de vos visiteurs.

Google Outils pour les webmasters : détecter les liens morts connus par Google

Google propose un module très pratique dans ses outils pour les webmasters (gratuit, nécessite un compte Google) : le rapport des erreurs d’exploration. Google nous donne ici l’ensemble des liens morts dont il a connaissance, mais également les pages web qui référencent ces liens morts.

Un grand nombre de liens morts peut signifier une erreur de configuration de votre site, notamment sur sa gestion des URLs réécrites ou sa gestion des adresses canoniques.

Détecter les liens morts avec le W3C Link Checker

W3C Link Checker parcourt les liens présents sur un site à la demande (avec un niveau de profondeur paramétrable) et affiche les liens morts et les redirections rencontrées. Très pratique.

Il affiche également les temps de chargement des pages liées. Google ayant tendance à privilégier les sites rapides, c’est un indicateur à surveiller.

Attention, cet outil se comporte comme un robot d’indexation, et ne vérifiera pas les liens interdits par votre fichier robots.txt. Il peut être utile d’être temporairement plus permissif le temps du scan.

Enfin, les redirections (301) détectées sont présentées. À vous de voir si vous pouvez mettre à jour les URLs. Par exemple, remplacer les liens vers le site officiel WordPress http://www.wordpress.org/ par la bonne URL http://wordpress.org/.

Cas pratique : erreur de configuration de Prestashop

Récemment, nous avons détecté un grand nombre de liens morts sur un site de vente en ligne utilisant la solution Prestashop.

Prestashop propose un module permettant d’éviter les contenus dupliqués, qui indique pour chaque page produit son URL principale à privilégier (appelée URL canonique).

Pour mémoire, ce système d’URL canonique est utile dans ce genre de site car une même page peut posséder plusieurs URLS (exemple : la version « URL propre » http://mon-site.fr/chaussures/homme/article1.html et l’URL « technique » http://mon-site.fr/products.php?id_product=42), ce qui est susceptible d’être pénalisé par les moteurs de recherche.

La présence d’une URL canonique pour chaque page du site permet d’indiquer aux moteurs les bonnes URLs à indexer (http://mon-site.fr/chaussures/homme/article1.html), et d’ignorer les autres (http://mon-site.fr/products.php?id_product=42).

Ici, la configuration des adresses canoniques (URL de référence, évitant le contenu dupliqué) était incorrecte. Au lieu d’une racine d’URL canonique de la forme :

 http://www.mon-site.fr/shop (bonne racine canonique)

Nous avions :

http://www.mon-site.fr/shop/shop (racine canonique fausse)

Conséquence : les moteurs de recherche conservaient comme page de référence une adresse introuvable (car possédant un “/shop/” de trop) ! C’est… très très mauvais !

Il va falloir effectuer une redirection massive de tous ces liens.

Prise en charge des liens morts par une redirection permanente

Dans le cas présent, les liens morts de cette boutique en ligne doivent être remplacés par les bons liens, avec un “/shop/” en moins. Le mécanisme est simple, il faut indiquer au serveur web que les adresses du type :

http://www.mon-site.fr/shop/shop/*

doivent être redirigées vers une adresse presque identique :

http://www.mon-site.fr/shop/*

Cette redirection est gérée facilement sous le serveur web Apache par un fichier .htaccess. Il suffit de lui indiquer, pour chaque adresse incorrecte, quelle est sa nouvelle adresse permanente (comme faire suivre votre courrier à la Poste suite à un déménagement).

Il serait fastidieux de prendre ses URLs une par une pour les placer dans le .htaccess, même si cela est parfaitement possible pour gérer manuellement une adresse, au cas par cas. Dans notre cas, la seule chose nécessaire est d’indiquer que toutes les adresses du type « /shop/shop/ » se verront redirigées vers « /shop/ » tout court :

La syntaxe générale est la suivante :

RedirectPermanent /{source}/ http://{cible}

Recommandation : autant que possible, ne modifiez jamais la structure de vos liens (permaliens dans WordPress, par exemple) ou le slug d’une page. Si vous faites cela, toutes les anciennes adresses deviendront mortes. La détection des liens morts n’est pas une science exacte car basée uniquement sur les pages de votre site connues par les moteurs : ce n’est pas absolument exhaustif. Autant s’éviter un travail inutile et réfléchir au format des URLs avant le lancement du site !

De bons outils ne feront pas un bon site si la conception du site (littéralement, le webdesign) fait défaut. La connaissance de vos visiteurs et de la manière avec laquelle s’adresser à eux est primordiale.

Faire un site pour vos visiteurs. Pas pour vous.

À chaque ajout de fonctionnalités, lors du choix d’un graphisme, d’une photo, lors de la rédaction de vos textes, d’un ajout d’outil, posez-vous les questions suivantes :

Mes visiteurs veulent-ils cela ?

Savent-ils l’utiliser ?

En tirent-ils un bénéfice ?

Il est facile de céder à la facilité : une animation ou des fonctionnalités alléchantes, des textes « écrits pour Google » (bardés de mots-clés, mais totalement indigestes), mais il y a fort à parier que beaucoup de vos visiteurs n’y trouveront pas leur compte.

Ils ne s’y feront pas prendre deux fois, bien souvent.

D’où l’importance d’identifier vos publics (et leurs proportions relatives).

Puis découvrir ce qu’ils viennent chercher sur votre site …et leur donner !

Rapidement, et sans détour.

L’exemple des transports de La Rochelle (Yélo)

http://yelo-larochelle.fr est esthétique, graphique, animé. C’est très plaisant !

Il fait appel aux animations Flash sur l’ensemble du site. Cela le rend malheureusement inutilisable sur un téléphone mobile tel l’iPhone ou une tablette iPad.

Certains smartphones gèrent Flash, mais l’interface a été programmée pour une utilisation avec une souris (pointage précis), non avec le doigt (pointage grossier).

Ce site serait très pratique en usage nomade, dans la rue (surtout si je ne connais pas la ville) ou pour un usage occasionnel du réseau.

Part ailleurs, l’usage de Flash introduit ici un autre problème : les boutons « Page précédente / Page suivante » sont inactifs, la navigation s’effectuant au sein d’une animation, mais l’adresse de la page ne change pas. Impossible de mettre en favoris un plan de ligne, une liste d’horaires…

Le plan du réseau est situé sur un site externe, http://www.rtcr.fr, qui nécessite 4 clics pour l’atteindre. Le plan est un document PDF très lourd (6.2 Mo - télécharger le plan) : la consultation est décourageante.

Ce site a une présentation graphique totalement différente de Yélo : ce qui surprendra le visiteur, et lui demandera un effort supplémentaire.

Enfin, des animations longues (et donc lassantes) sont proposées, et ne me donnent pas un accès immédiat aux fonctionnalités de base : les plans, les horaires, les incidents réseau :

Je prendrai un autre exemple, que je trouve bien plus intéressant en terme de bénéfice utilisateur : le site infoTBC (Bordeaux / CUB). Dès la page d’accueil, les fonctionnalités de base sont immédiatement accessible :

Conclusion

Votre site n’est pas pensé pour vos visiteurs si :

• ils se demandent « comment fonctionne ce site ? » ;
• ils se demandent « cela me concerne t-il, suis-je au bon endroit ? » ;
• doivent décoder des menus ambigus, voire du jargon de votre métier ;

Ces tâches prennent de l’énergie. Ce sont des dépenses inutiles qui génèrent de la frustration.

Vos visiteurs ne veulent pas ça : qu’en est-il de votre site ?

La sauvegarde de données est une activité trop sérieuse pour la confier à un être humain : il faut au-to-ma-ti-ser. Sans hésiter.

J’en profite pour signaler qu’une sauvegarde n’est utile que si elle peut être restaurée. Ce n’est pas un détail : je rencontre de nombreuses personnes qui stockent des « copies de sauvegarde », sans jamais mettre en doute la fiabilité du support de sauvegarde ni le logiciel de restauration.

WordPress : sauvegarde de la base de données

La base de données de votre site sous WordPress contient l’ensemble de vos articles, pages, commentaires, auteurs, réglages, et configuration d’extensions.

Autant dire la bonne majorité des données que vous ne souhaitez pas perdre en cas de pépin.

La sauvegarde des médias (images, vidéos…) fera l’objet d’un article ultérieur.

Une base de données (habituellement sous MySQL) peut être facilement sauvegardée avec des outils de gestion comme PhpMyAdmin. Efficace, mais cela nécessite toujours de déclencher la sauvegarde manuellement.

Par contre, PhpMyAdmin sera d’une grande aide pour la restauration.

Une extension WordPress indispensable : WP DB-Manager

http://wordpress.org/extend/plugins/wp-dbmanager/

Très complète, elle permet notamment de planifier une sauvegarde à intervalles réguliers, et de vous l’envoyer directement par email.

Les sauvegardes sont également stockées sur le serveur, et peuvent être directement restaurées.

Pour aller à l’essentiel : WP DB-Backup

http://wordpress.org/extend/plugins/wp-db-backup/

Elle est utilisée sur la plupart de mes sites. WP DB-Backup sauvegarde la base WordPress, mais également les tables d’éventuelles extensions.

Le réglage d’automatisation est là encore très simple.

Set it and forget it (configurer-la et oubliez-le) :

Ces précautions prises, vous devriez vous éviter le stress de la recherche d’une sauvegarde en cas de plantage du site. Et consacrer votre temps à d’autres activités que la sauvegarde de vos données.