Archive for June, 2010

Analyse de site : TheOleg.com

Monday, June 7th, 2010

Hey les kidz ! Et oui, c’est encore moi !

Aujourd’hui, après avoir choisis précédemment de vous présenter un relooking du site internet Kulte.fr, ainsi qu’un tutorial pour apprendre à faire des buttons web très facilement sous Illustrator, j’ai décidé de vous présenter une brève analyse du site internet theoleg.com

Capture d’écran 2010-06-07 à 09.10.59

TheOleg.com ? Vous demanderez vous ? Non, il ne s’agit pas d’une marque de sneakers tendance, mais simplement du portfolio d’un  graphiste, un graphiste bourré de talent.  Car oui, même un portfolio peu être utilisé à des fins commerciales : vendre son créateur dénommé Oleg Kostyuk !

Capture d’écran 2010-06-07 à 09.10.16

Tout d’abord, vous remarquerez surement le bandeau en haut à gauche « FWA » site of the day». ON ne se leurre pas : récompense ultime pour les sites internet, on sait parfaitement que la visite que nous allons effectuer ici va être plus sympas que celle d’une site sur les ânes de Provence ….

On va cependant en venir au premier point négatifs : vous comprendrez tout de suite, en allant sur ce site internet, que celui-ci est fait en flash du header au footer. Et là ca fait tilt dans la tête : Connaissant les quelques contraintes de ce type de site via le référencement google, on ne peut que désapprouver, car même en tapant oleg designer le site ne parvient qu’en deuxième sur la liste de résultat.

Il aurait donc était appréciable d’avoir une première page d’introduction en html et de ce fait, caser quelques mots-clés dans le code.

Continuons cependant notre visite, le choix de régler la musique de fond sur ON ou OFF sera quant à elle très appréciable, on sera cependant tout de suite rebuté par le petit avertissement sur la longueur des temps de chargement et des performances exigées pour l’affichage de ce type de site. Au moins, on est prévenus. Le portfolio de monsieur Oleg propose donc 4 sections : une section Myworld, sorte de CV interactifs où le designer met en avant ses hobbies et passions. Une section Portfolio, Une section «How it’s made ?» récapitulant en vidéo ses meilleures créations et comment les a t-il créé, et biensur la section Contact.

My World

Capture d’écran 2010-06-07 à 10.22.36

Section qui n’est pas forcément intéressante au niveau du contenu, on est cependant juste obligé d’aimer la forme. Effectivement, notre cher designer a eu une idée géniale : utiliser le flash pour nous faire jouer à cache-cache avec ses hobbies. Au final, 11 easter eggs sur la vie de l’artiste à trouvé dans un décor somptueux et séduisant, le tout en faisant preuve d’interactivité et de ludicité. J’ai même appris qu’il était fan de Linkin Park il y a quelques années !

On peut le dire, cet espèce de jeu interactif est un des outils de l’avenir de la communication sur le web : C’est en mélangeant interactivité et ludicité que le designer parvient à faire passer des messages sur sa vie, ses hobbies et passions à l’internaute qui se retrouve dans la majorité des cas séduit par l’univers et le concept.

Portfolio

Capture d’écran 2010-06-07 à 10.23.17

Pas grand-chose à dire, ni à redire ! Il s’agit simplement d’un book en flash,  dans lequel on appréciera le nombre important de références présentées en détail. Of course, je vous laisse juger par vous même la pertinence de ses créations, mes préférées restant pour moi Domani, Soyak et Hall Train …

How it’s made

Capture d’écran 2010-06-07 à 10.23.02

Petite partie intéressante, celle-ci mets en avant  les capacités du designer dans des vidéos ou sont présentées ses créations étape par étape lors de leur conception. On verra ainsi comment l’artiste a créé des iles flottant dans le ciel avec une image de montagne et une image de texture d’herbe

Contact

Capture d’écran 2010-06-07 à 10.23.34

Une rubrique contact pour pouvoir contacter l’artiste.

Enfin, le site affiche un lien en bas de page qui redirige sur le blog du designer, ou l’on peu suivre sa vie d’un peu plus près,  voir les dernières actualités et communiquer directement avec lui.

Conclusion : Un site attirant à l’œil, on notera comme principaux défault quelques problèmes liés a la conception d’un site réalisé en flash. On sera également interpelé par l’absence d’un curriculum sencé aider ce designer à se « vendre », mais le portfolio conséquent fera largement l’affaire. On ne pourra pas non plus reprocher le design graphique du site qui est magnifique, ni l’interactivité proposée avec l’internaute.

En bref un très bon site qui met en valeur son propriétaire et ses idées, peu de choses à reprocher si ce n’est la structure flash peu pratique et un manque de contenu texte, problèmes largement comblés par le blog.

Je finirais en adressant un petit conseil aux créa : avant on disais qu’on avait un book, maintenant je crois qu’il vaut mieux dire “portfolio”.

Analyse de site politique : l’UMP

Sunday, June 6th, 2010

Le bonjour à toutes et tous.

Tout d’abord, le pourquoi de ce choix qui peut prêter à polémique…

Les partis politiques n’existent qu’à travers la communication, et les sites internet sont devenus le fondement de toute communication interactive.

Et pourquoi ce parti ? Ce n’est pas un choix d’opinion, c’est parce que l’UMP est le parti leader en France, le seul à ne pas être dans une logique d’opposition donc et l’analyse du site pourra ainsi être plus intéressante je pense.

ump-mouvement-populaire

Analyse du site internet

Plan :

I – L’importance d’un site pour un parti politique et adéquation avec le site présenté

II – Analyse technique

I – Les sites de partis politiques

Les partis sont des marques comme les autres, c’est un fait. Besoins de notoriété, d’image avec derrière des objectifs marketing de rentabilité (obtenir les 5% de votes pour le financement de leur campagne, augmentation du nombre d’adhérents, etc.)

Le problème majeur en France est que la communication politique manque de dynamisme et d’innovation… Si la campagne présidentielle aux Etats-Unis était omniprésente sur internet, la France est très en retard. Budget de l’UMP pour la dernière campagne présidentielle : 20 millions d’euros.
Budget de Barack Obama : 85 millions dédiés à internet. Des centaines de millions au total. Et cerise sur le gâteaux (ou gâteau sur la cerise, à voir); une campagne d’appel aux dons online qui a permis au candidat de récupérer 32 millions de dollars.

Autre point crucial : la politique, c’est la discussion. Internet est le seul média permettant de communiquer à grande échelle tout en permettant un feedback facile. Pour enfin avoir une réponse à la question : “mais que demande le peuple ?”

Maintenant que le clou est bien enfoncé sur l’importance d’internet pour la politique, voyons un peu ce que notre parti leader nous propose…accueil ump

Allez, disons-le, ce site internet est cool.
Je reviendrais sur ce terme technique, “cool“, dans la partie suivante. Mais il faut le dire, c’est joli, tout en image, un menu discret et bien intégré.
On a tout : l’adhésion et le don directement accessibles en un clic sur toutes les pages puisqu’inclus dans le menu (gros boutons impossibles à rater); mais aussi les raisons qui font qu’on se dit qu’il faut vraiment donner ou devenir membre.

  • La partie “S’informer“, qui analyse tous les points dont parlent les médias, de manière plus partiale évidemment, avec tous les fondamentaux : un espace presse avec tous les communiqués, un agenda et des streamings des derniers meetings. Et le bonus, une partie “près de chez moi” si bien conçue que je suis invité à aller dans les Landes. Je suis mauvaise langue, on peut manuellement choisir sa région, mais pas d’inquiétudes!, il ne se passe rien en Rhône-Alpes.
  • La partie “Agir” entre vraiment dans le coeur de mon analyse. Les débats y sont listés, et il est même possible de signer des pétitions online et de répondre à des questions. Question de la semaine : doit-on encourager la pratique du sport au collège et au lycée l’après-midi ? J’ai répondu “Non” de peur de voir les petits footballers se reproduire plus encore. Mais en tout cas, il s’agit vraiment d’une partie interactive où l’internaute a le sentiment de participer aux débats actuels.
  • Les sections “Personnalités” et “Le Mouvement” sont liées, avec des pages “doublons” par ailleurs. Néanmoins, elles sont discrètes et peu attractives à côté des précédentes. Et là, on sent comme un paradoxe. Non ? Bon et bien moi, je le vois. Et je trouve cela génial. Il est évident que si des gens veulent des informations sur le nom de leur député ou le programme de l’UMP pour 2099, tout cela est trouvable partout sur internet. Si ce site n’était basé que sur cela, il n’aurait qu’un intérêt des plus limités. D’où la discrétion de ces parties, et la prédominances des précédentes, plus actuelles et interactives.
  • Le bonus : la boutique en ligne. Pas encore opérationnelle (obligation d’envoyer un chèque par la poste…) mais j’apprécie néanmoins l’idée de posséder un freesbee UMP, vital pour briller en société.

En bref : un site internet agréable, dynamique mais surtout dont l’existence se justifie, en proposant des contenus exclusifs et une interactivité (illusoire ?) avec le gouvernement. Un référendum permanent. A noter qu’un autre site, étroitement lié, “les créateurs de possibles” propose d’aller beaucoup plus loin dans l’implication et l’interactivité, en montant des projets notamment.

II – Point technique

Conception

Le site est évidemment conçu de manière très professionnelle.
Le budget global pour le site de l’UMP et celui des créateurs de possibles excédent les 2 millions d’euros, obtenir un résultat de qualité était le minimum.
Afin de comparer, je vous renvoie sur le site de Ségolène Royal qui a crée une polémique tant il était mauvais étant donné l’investissement. J’aurai également du mal à payer 40 000 € pour un site basique crée sous Drupal.

Avant d’entamer la partie analytique, il faut revenir sur le “cool” du site. Parce que oui, ça bouge. Oui, y a plein de super images partout. Mais l’absence de texte n’est-elle pas un énorme frein au référencement ? Ce site bénéficie de l’url et probablement d’un nombre de visiteurs suffisants; mais pour le sous-site des Créateurs de Possibles, le référencement est beaucoup moins bon. Sur la requête “UMP” dans Google, le site n’apparaît même pas. (Je n’ai fouillé que les 4 premières pages.)

Alors oui, c’est esthétique et ça bouge quand la souris passe dessus, mais ça ne fait pas tout !
(Mon avis est que les contenus sont assez illisibles par ailleurs, hiérarchisation des thèmes inexistante, images cachées puisque le défilement est obligatoire; impossible de se faire une idée globale des topics abordés en un coup d’oeil.)

Code

Toutefois, l’humilité est de rigueur. Le code n’est d’ailleurs pas de mon niveau de compréhension. Je vais tenter toutefois d’en dire quelque chose.

Site d’où le flash est totalement absent (avec les contraintes que nous lui connaissons) et en lieu et place du javascript à profusion, pour avoir des animations visuellement intéressantes sans léser les crawlers d’indexation.
Le contenu est bien hierarchisé par les balises de titres (de h1 à h2 ici), mais également sous forme de listes ( contenus <li> dans une zone <ul> notamment.)
A noter que les balises <div> sont terriblement nombreuses, j’ai donc cherché s’il y avait anguille sous roche. Avec par exemple du contenu caché sous forme de display:none, assorti d’une liste de mots clefs longue comme mon… Bras.
Il n’en est rien, le site paraît impeccable et respectueux des moteurs de recherches. (Inscrit sur google analytics par ailleurs.)

La partie “head” du code est la seule à rester (plus ou moins) claire à mon niveau, et au-delà des classiques feuilles de style CSS et javascripts mentionnés, on trouve ceci :

<title>
	Actualités  - S'informer  - Le Mouvement Populaire – UMP
</title>

En apparence, on ne change pas de page sur le site, puisque l’interface est statique et seule le coeur est modifié. Toutefois, chaque page possède un titre différent; dépendant de la partie et de la sous section sélectionnées.
Jusque là, rien d’exceptionnel.
Mais pour chaque partie, au titre s’ajoute “Le Mouvement Populaire” et “UMP.”

Voilà une petite astuce de référencement m’est avis…!

Conclusion :
Un site internet de grande qualité, tant du point de vue du codage (ce que j’en ai compris) qu’au niveau du contenu. Je ne renverrai d’ailleurs pas vers les sites d’autres partis, car celui-ci bénéficie d’un avantage énorme : être au pouvoir. C’est sur ce fait qu’est basé tout l’intérêt du site d’ailleurs, offrir aux citoyens la possibilité de participer en direct aux décisions gouvernementales.
Car il y a beaucoup de raisons qui font que l’on va sur un site internet, mais très peu qui font que l’on y retourne.

Quand l’UMP sera dans l’opposition, ce qui arrivera bien un jour, il sera curieux de voir ce que ce site deviendra !

12758450939

En vous remerciant de votre attention,
K

Fleury Michon, analyse du site Internet

Sunday, June 6th, 2010

Retirons le cellophane !

Avis aux amateurs de jambon, poulet, et surimis, aujourd’hui, c’est Fleury Michon !

Acteur incontournable sur le marché du jambon en tranches, Fleury Michon fait partie de ces marques alimentaires que peu de Français peuvent se venter de ne pas connaître, notamment en raison de son passage publicitairement régulier sur le petit écran.

Mais cessons de tergiverser sur les spots publicitaires et concentrons-nous sur le site Internet dudit Michon.

fleu1

Étrange impression, au moment d’arriver sur le site, d’être en pique-nique.

Les couleurs sont douces, dominante de vert clair en dégradé vertical vers du vert plus foncé, pour revenir au vert initial (voir ci-dessous), avec une pointe de blanc pour assaisonner le tout. On respire. Les images s’accordent à cette ambiance, laissant l’internaute dans un état paisible.

vert1

R : 173 • V : 225 • B : 43

vert2

R : 89 • V : 171 • B : 1

Le nom trônant en haut à gauche, suivi de près par sa signature, ne manque pas de nous renseigner sur l’endroit où nous avons atterrit et , bien sûr, sur l’identité du Roi de ce havre de paix. Notre œil s’y jette dès le moment où la page s’affiche. Mais rapidement, c’est le tableau en haut à gauche, aux éléments qui changent régulièrement (ainsi qu’au survol) qui capte notre attention.

Le site nous emmène vers d’autres pages, d’autres sites appartenant à ce cher Fleury Michon. Présentation de divers produits, tels que les boîtes individuelles de pâtes aux sauces et assortiments variés, les surimis, etc.

L’effort premier du site, repris tout au long des pages et des sites par le contenu, est de s’ancrer complètement dans une démarche écologique et respectueuse de l’environnement aux yeux des internautes.

•••

fleu2

Hiérarchiquement parlant, nous retrouvons un header avec

  • Logo,
  • Signature,
  • Lien direct vers plus d’informations sur le groupe,
  • Menu déroulant pour aller vers d’autres sites du groupe Fleury Michon,
  • Barre de recherche Google pour mieux trouver le contenu recherché via des mots clés
  • Les onglets régissant les pages du site,
  • Et pour finir, un logo Facebook qui redirige vers la page Facebook Fleury Michon.

La liaison avec Facebook vient en parfait accord avec l’esprit de ce site, qui prête à l’interactivité par les Internautes.

Dans le corps du site, au milieu des multiples encadrés présentant des produits et recettes, il est à plusieurs reprises précisé que ces recettes proposées sont soumises à la notation de l’internaute si l’envie lui prend de s’y atteler. Fleury Michon recherche donc davantage à se rapprocher de ses consommateurs en leur demandant directement ce qu’ils pensent de ses produits.

Il est utile de préciser que cette procédure se retrouve dans la tendance comportementale actuelle des marques vis-à-vis des consommateurs.

Rapide passage dans le footer pour constater que les banales mais utiles mentions légales sont de vigueur. Ainsi que le Plan du site, une section Questions/réponses, une possibilité de contacter Fleury Michon, un lexique, une lien vers une inscription pour la newsletter, etc. Diverses informations utiles dont certaines – je pense particulièrement à la newsletter – pourraient davantage être mis en avant.

À noter, le petit copyright (2008) qui va bien, à gauche de ce footer. fleu4

•••

Remarquons dans le code, qu’une partie dédiée aux moteurs de recherche et plus particulièrement à Google est présente et clairement définie. On y retrouve une liste importante de mots clés en rapport avec Fleury Michon et ses offres.

Ces mots, tapés dans Google reflètent un manque de référencement à ce niveau. Fleury Michon n’apparaît pas en tête de liste pour chacune de ces recherches. L’achat de plus de mots clés aurait été judicieux. Google n’étant plus comme il était quelques années auparavant : candide et friand des mots clés écrits directement dans le code.

Cependant, un système de guidage pour les robots de Google est présent.

On retrouve des fonctions php, des div, et toutes sortes de balises et classifications qui rendent le contenu du site beaucoup plus attrayant et référençable en terme de contenu. Les développeurs Web de Fleury Michon ont donc choisi la méthode propre à du flash dangereux, soucieux de la bonne lecture de Google lors de son passage sur le site Internet.

fleucode

•••

Fleury Michon nous propose un site paisible et agréable esthétiquement, dont le contenu se trouve être pertinent, autant dans la hiérarchisation des informations que dans sa démarche de référencement. Beaucoup d’efforts quant à la conservation d’une dynamique conceptuelle tout au long des pages et des sites du groupe. La marque écologique apporte un cachet à la société.

Petite déception personnelle : l’absence de jeu concours dans la rubrique prévue à cet effet. Espérons qu’à l’avenir, Fleury Michon nous fera rêver en nous offrant un voyage aux Caraïbes !

Quoiqu’il en soit, il n’est pas né le jour où les Français cesseront de manger du jambon. Merci Fleury Michon !