e-Jori, portfolio d'Art et Design de Jori Avlis - Portfolio

Référencement : principaux sites référencés

Jori — Fri, 18 Apr 2008 12:21:00 +0200

En tant que consultant web seo, plusieurs problématiques m'ont été soumises, toutes très différentes. Voici un rapide tour d'horizon au sujet de mes principaux clients actuels.

Pour Neyrat Peyronie, il a fallu surtout optimiser les Titles, les meta descriptions, de faire un peu de netlinking. C'est une société spécialisée dans la fabrication de produits textiles de qualité, que vous retrouverez chez vous en décoration intérieure, ou en extérieur : parasols, coussins, nappes... Le site étant en HTML statique, le travail pour appliquer les recommandations en référencement naturel est assez simple, si le nombre de pages n'est pas exagéré; en effet, un site de la sorte est long à mettre à jour, car il faut le faire page à page.

Pour Cybernétix, qui est basé sur le CMS Spip, c'est un peu plus compliqué. Spip est un outil très puissant et déjà relativement bien optimisé pour le référencement, mais lorsque vous voulez effectuer un changement, c'est autrement plus compliqué que simplement éditer un fichier HTML. Le travail ici est donc plus poussé, mais autrement plus gratifiant. Le principal problème de Cybernétix, c'est la thématique, qui est très peu recherchée en général sur les moteurs de recherche. Cette entreprise basée à Marseille est spécialiste en solutions robotiques pour interventions en milieux hostiles. Ils font des robots qui prennent les risques à la place des humains : démantèlement de centrales nucléaires, inspection de pipelines, intervention en atmosphère explosible, défense...

Au sujet de Weekendesk - Smartbox, qui est un site de vente de coffrets cadeaux, c'est avant tout un travail de consulting : audit global du site afin d'en déterminer les différentes problématiques, optimisations techniques et linguistiques, veille concurrentielle, transfert de compétences aux équipes de Weekendesk. Un gros chantier actuel est le changement de marque des coffrets cadeaux, qui de Weekendesk, passera à Smartbox, Weekendesk étant dorénavant réservé aux séjours.

Onedirect est un site d'e-commerce spécialisé en téléphonie d'entreprise. Présents dans quatre pays (France, Italie, Espagne et Portugal), ils sont en train de changer de site. La migration d'anciennes URLs vers un nouveau site est un problème majeur en référencement : comment le faire sans perdre (trop) de positions dans les principaux moteurs de recherche? Nous avons du faire un audit de l'existant et du futur site, et déterminer avec les développeurs Onedirect quelles étaient les meilleures stratégies à adopter.

Le site de déco et ameublement en ligne, Delamaison veut la part de son trafic naturel augmenter. Notre but est ici de trouver les stratégies qui permettront à Delamaison de mieux se positionner sur les requêtes pertinentes pour la marque. Ceci implique une profonde optimisation technique, pour empêcher les facteurs bloquants qui sont tout autant de "plombs" pour les moteurs de recherche.

L'agence de voyages Thomas Cook cherche à augmenter sa notoriété en France, en proposant des destinations de rêve aux internautes français. Un gros travail est en train d'être développé pour améliorer le netlinking du site, en sachant que la concurrence est rude.

Pour finir, Mediatis, crédit en ligne (pour financer des projets personnels ou pour avoir une réserve d'argent à disposition) va bientôt lancer son nouveau site. Nous avons travaillé main dans la main avec les agences web (une pour le design, une autre pour l'intégration) et avec le client, pour, de base, avoir un site qui soit optimisé pour le référencement naturel : c'est le meilleur moyen de procéder, tout leur site a été pensé pour qu'il n'aie pas le moindre problème technique qui à la naissance, pose un souci à Google (ou autre moteur de recherche). En prenant le SEO comme un élément majeur du développement de leur nouveau site, il sera beaucoup plus facile à trouver pour les internautes, qui auront ainsi plus de chances pour trouver leur page sur "le rachat de crédit", directement grâce au moteur de recherche : les résultats seront plus pertinents.

webdesign: principaux sites réalisés.

Jori — Wed, 25 Jan 2006 18:28:00 +0000

Au cours des années, de mon premier site réalisé en 1999 jusqu'a aujourd'hui, beaucoup de choses ont changé au niveau du webdesign. Je vous montre ici mes réalisations principales, à des moments clefs de mon parcours de webdesigner. De l'époque où le mot d'ordre etait l'utilisation de tables et des éditeurs wysiwyg à aujourd'hui: respect des standards et la séparation du contenu du graphisme en utilisant (x)html et css2. Pour voir un graphisme en plus grand, cliquez sur l'image :)

e-tsuki fut mon premier site à voir le jour sur le web, sortant du simple cadre universitaire. Axé vers les jeunes dessinateurs influencés par le Japon, il me format aux armes du webmaster, en me donnant une première approche de la pratique. Installation de forum, modération, mes connaissances théoriques étaient mises en pratique. Le graphisme que je vous montre ici etait la troisième version, un site n'est pas figé dans le temps mais doit toujours suivre l'air du temps, évoluer, progresser.

Ce site fut réalisé par la méthode classique. Après avoir fait un design général sur papier, puis sur illustrator ou freehand, on passe au découpage et à l'intégration. En utilisant des tables (qui sont sémantiquement réservées aux données tabulaires), en mêlant graphisme et contenu, en ne faisant pas attention à rendre le site accessible à n'importe quel navigateur (à l'époque, l'hégémonie d'Internet Explorer était devenue totale). Cette façon de faire est assez directe, on construit le site au fur et à mesure. L'énorme désavantage: un tel site est très difficile à actualiser ou à changer le design, une refonte graphique équivaut à tout refaire de zéro. Pour ce site, j'ai en plus ajouté flash, sans penser aux personnes qui ne l'auraient pas. Résultat: impossible pour quelqu'un qui n'a pas flash player d'accéder au contenu d'e-tsuki.

Lors de mon stage chez SiteWork, il me fut demandé de réaliser une série de templates (designs génériques) et un site pour commercialiser ses mêmes templates. Il s'agissait de faire très simple, les templates seraient vendus bon marché par la suite à des petites entreprises, commerçants ou particuliers. En ce qui concerne le graphisme de novaexpo, et c'était le cas également pour le site d'e-tsuki, mon principal objectif était de faire un design liquide (occupant l'écran de l'utilisateur dans toute sa largeur, s'adaptant á la résolution). Je dois dire que faire des sites qui soient vus correctement chez le maximum de personnes est mon grand cheval de bataille sur le web, et l'adaptation des designs aux différentes résolutions d'un écran un défi. Voyez vous même: en redimensionnant la fenêtre de votre navigateur, vous verrez mon site (e-Jori) s'adapter aux nouvelles conditions d'affichage. Vous pouvez observer le design du portail de novaexpo ici. Le logo, le fond en 3D et le flash ont été également réalisés par mes soins.

Quelques templates réalisés lors du stage:

Un petit travail réalisé pour un hôtel. À ce moment j'avais compris que flash ne devait pas se superposer complètement au html normal, un site qui aurait un fort trafic de tout horizons se doit d'être simple. Nous réduirons donc flash à un simple "bonus" graphique. L'erreur à éviter: mettre les boutons dans le fichier de flash, obligeant l'internaute à attendre que flash se charge pour pouvoir changer de page, ou empêchant carrément quelqu'un qui n'aurait pas flash de naviguer. Ah, bien entendu, tout élément flash doit être un bonus et non pas une tare lors du chargement, les fichiers doivent être donc de taille très réduite.

Megalojas est un site encore en construction, pour un futur portail de plusieurs magasins en ligne. Chaque magasin est basé sur le logiciel libre osCommerce. J'ai également réalisé les magasins en ligne, en adaptant les templates d'osCommerce au design que j'avais créé auparavant (charte graphique, logos).

Sur ce site, réalisé pour une entreprise de création de logiciels, j'abandonne enfin les tableaux et passe au design moderne: utilisation d'une feuille de style pour tout ce qui est design et graphisme, standards du web. Ainsi, le site est accessible pour tout le monde, quelque soit son navigateur, y compris les navigateurs texte. De plus, l'utilisation d'une feuille de style qui sépare complètement le graphisme du contenu permet une très grande facilité pour un éventuel redesign du site, on ne touche plus au contenu. De plus, pour faire un redesign global, on ne modifie qu'un seul fichier (la feuille de style), inutile de changer toutes les pages du site (on comprend tout de suite l'avantage lorsque notre site peut avoir plusieurs centaines de pages différentes).

e-Kaki est sans aucun doute mon principal projet personnel, un site qui permet aux artistes de s'exprimer sur le web et qui rencontre un franc succès, pour un public si ciblé, nous venons d'atteindre les 100 000 visiteurs uniques. Codé selon les préceptes du consortium W3C, le haut niveau d'exigence est évident. Il faut afficher dans les meilleures conditions les oeuvres de nos membres, ce qui implique un design liquide et non intrusif (on se doit de valoriser le contenu avant tout autre chose, un graphisme trop présent risque d'éclipser l'importance des oeuvres exposées). De plus, le fait de séparer le design du contenu permet de proposer à nos utilisateurs le choix entre plusieurs templates, chacun décide ainsi de lui même quel graphisme il préfère pour visualiser e-Kaki. Cette caractéristique nous a aussi permis de faire un design qui change selon l'heure de la journée: sur le forum, on sait tout de suite si il fait nuit ou pas ;)

Finalement, je réalise actuellement des thèmes pour le logiciel de blog dotclear. En un clin d'oeil, je peux changer l'aspect visuel de mon site, simplement en choisissant un autre thème dans l'interface d'administration. Tous sont en xhtml strict et css2.

Thème réalisé pour le site MangaStyl', un point de rencontre de tous les artistes influencés par le Japon et l'Asie en général.

Le thème Mozaïk, une adaptation d'un ancien template que j'avais réalisé pour les forums PHPBB.

Le thème Liquid Card, l'évolution du thème de mon site personnel en thème "tout public", dont vous pouvez voir une démo ici.

Oldies: sites en flash

Jori — Tue, 17 Jan 2006 19:19:00 +0000

Je vous présente dans ce billet quelques un de mes anciens sites fait majoritairement avec la technologie flash. Chacun représente une étape dans ma façon de voir et penser le webdesign. Je n'utilise plus de nos jours flash de façon si intensive, j'ai compris qu'un site, pour bien fonctionner, devait en limiter l'utilisation. Je décrirais dans ce billet pourquoi, en montrant l'évolution de ma façon de faire :)

Mon premier portfolio, un site où j'exposais mes travaux d'étudiant en arts graphiques. Sur ce site, j'intègre du flash dans des pages html. Je ne voulais pas faire un site "tout en flash", à cause d'un soucis de facilité à updater par la suite, avec de nouveaux travaux. Le soucis, c'est que les liens internes du site sont en flash, rendant ainsi impossible pour l'utilisateur une navigation personnalisée (c'est à dire que l'utilisateur choisi si il veut ouvrir le lien dans une nouvelle fenêtre ou non, par exemple).

Un petit travail que j'ai nommé Graphic Rain, pour mes études, que j'ai intégré dans mon premier portfolio. Tout en flash cette fois, il présente l'avantage d'avoir des transitions fluides entre chaque page, vis à vis d'un site qui serait entièrement fait en html. Le problème, c'est qu'il est impossible en flash de pointer sur une page spécifique (imaginez que vous voulez montrer une page interne de ce site en flash - vous pouvez pas) et par conséquent, les moteurs de recherche non plus. C'est le désavantage de flash, en plus d'empêcher un libre accès au contenu (impossible de sauvegarder une image ou d'augmenter facilement la taille du texte). En somme: flash se substitue aux capacités de votre navigateur, limitant l'internaute - ou le robot - dans sa navigation.

Ce travail en flash, exclusiva promo, n'est pas prévu pour être un site, mais une présentation que l'on distribue en cd-rom, j'ai donc allégé pour le web, ne gardant que la présentation initiale (les liens ne fonctionneront pas). Ce travail avait été fait pour une entreprise qui voulait se promouvoir auprès des clients par le biais d'une "carte de visite digitale" comme nous l'avions appelé. Fait en collaboration avec un professionnel du marketing, j'ai du faire beaucoup de concessions pour que nous trouvions un compromis. Comme partout, le client à toujours des idées, et c'est à nous d'essayer de faire du mieux que nous savons, tout en satisfaisant le client.

Encore un autre travail multimédia qui n'est pas un site Internet, mais un kiosque digital. Convento de Cristo présente ainsi un monument historique célèbre de la ville où j'ai étudié les Arts graphiques pendant 5 ans, le couvent du Christ, à Tomar. Un kiosque digital, ce sont ces bornes d'informations que l'on trouve un peu partout dans les musées, les monuments, et qui ont souvent une carte ou un peu d'Histoire de la zone précise que nous visitons. Il y a quelques années, pour faire ce travail, nous aurions utilisé Director, avec son langage Lingo, mais flash, devenu de plus en plus puissant et versatile a progressivement remplacé ce logiciel.

La première version de Ministers of Design est un exercice de style, tout en flash. Nous voulions montrer du service, faire un site bourré d'animations, de petits détails, et nous sommes tombés dans le piège que flash présente aux designers: l'énorme liberté créative que cet outil représente à provoqué un trop-plein d'éléments graphiques, qui sont entrés en conflit avec le contenu, mis en marge. Hors, un des principes basiques du design graphique, c'est que les éléments graphiques sont au service du message que nous voulons transmettre (le contenu) et jamais le contraire.

Conscients de notre erreur, moi et mon collègue, ami étudiant, avons décidés de faire une deuxième version de Ministers of Design. Cette fois ci, nous ferons simple, visuel, en pensant avant tout à ne pas surcharger visuellement notre travail. La simplicité est sans aucun doute une des bases fondamentales du webdesign, et une clef de succès pour un site réussi. Le défi ici était de faire un site tout en flash, mais qui se redimensionne selon la taille de l'écran de l'utilisateur. Il sera toujours en plein écran chez vous.

Finalement, j'ai fini par faire mon portfolio flash. L'ancienne version de mon site, e-Jori a un design plus agréable, à mon sens que les précédents, mais surtout, j'utilise une de mes caractéristiques en tant que designer: je suis aussi illustrateur. Le problème, lorsque nous sommes les deux à la fois, il est parfois plus difficile de prendre du recul vis à vis de son illustration pour pouvoir l'intégrer à un design. Et ceci va se voir sur mon site, l'ergonomie pêche un peu, je n'ai pas donné l'importance nécessaire à la navigation du site, ne pensant plus qu'au visuel.

En conclusion, maintenant, j'utilise flash comme un "plus" qui ne doit en aucun cas se superposer au contenu ou à l'usabilité. Si par exemple quelqu'un n'a pas flash player, il doit être capable de naviguer sur mon site malgré tout (le mieux étant qu'il ne remarque même pas que flash n'est pas là). L'autre point important, c'est de toujours faire attention au poids total de notre travail, il est très facile avec flash d'atteindre plusieurs centaines de Kos, ce qui, pour un modeste 56k, est très pénible. Dernier point, sans aucun doute le plus important: un site, nous voulons que les internautes y reviennent souvent. Si nous présentons à chaque fois la même animation, si l'Internaute doit attendre à chaque fois quelques secondes pour atteindre le contenu, il y a de très fortes chances qu'il aille voir un site peut être pas aussi "beau" (le concept de beauté étant purement subjectif) mais sans aucun doute plus "pratique".

Photos

Jori — Fri, 23 Dec 2005 21:25:00 +0000

Des fois, pour m'amuser, je prend mon appareil photo, et, *clik*. C'est presque aussi rigolo que de retoucher (légèrement) par la suite sur photoshop. La bonne retouche, comme on dit, est celle qui ne se voit pas. Dans cette galerie, un peu d'argentique, un peu de digital, un peu de photoshop... fruit de mes expériences sur plusieurs supports.

Print

Jori — Wed, 21 Dec 2005 22:25:13 +0000

Quelques uns de mes travaux graphiques destinés pour le papier (print design). Afin de voir en haute résolution le travail de votre choix, cliquez sur le titre en bas à gauche.

Vous avez également besoin de la dernière version de flash player.

Logos

Jori — Wed, 21 Dec 2005 03:42:54 +0000

Je cherche, dans chaque logo que je fais, à transmettre l'image de l'entreprise ou institution de façon évidente et graphique. Une image forte, simple mais pas simpliste, c'est la première étape pour faire une bonne identité corporative.

Afin de voir en haute résolution le travail de votre choix, cliquez sur le titre en bas à gauche.

Vous avez également besoin de la dernière version de flash player.

Peintures Digitales

Jori — Thu, 15 Dec 2005 03:49:35 +0000

Galerie pour voir rapidement mes peintures digitales. Cliquez sur les miniatures pour les voir en grand ;)