Archives pour la catégorie #Web

Parlons de création web en générale, avec le webdesign, la création de sites internet, le référencement, le webmastering, l’emailing, la publicité web, la maintenance de sites internet, l’animation web, l’interactivité…

Site internet : 5 astuces qui rendent votre site plus professionnel

5 astuces pour créer un site internet professionnel
Vous avez fait créer un site internet mais vous ne le trouvez pas très professionnel, pourtant il comporte toutes les fonctionnalitées dont vous avez besoin. Faire appel à un webdesigner vous permettra d’améliorer l’aspect graphique, ergonomique pour lui donner un aspect plus professionnel.

Voici 5 astuces à intégrer, qui vont rendre votre site internet plus professionnel aux yeux des visiteurs.

1-Avoir un logo et s’en servir de base pour créer le design du site

Icône logo flat designAvoir un vrai logo n’est pas un luxe, c’est une nécessité qui va permettre à votre site de se démarquer, le logo est la pièce maîtresse de votre identité visuelle. Vos visiteurs pourront vous identifier uniquement grâce à cela sur l’ensemble de vos supports de communication ainsi que votre site internet.

Pour accentuer votre identité visuelle sur votre site, vous pouvez faire réaliser votre design sur la base de votre logo. Donc utilisez les mêmes codes couleurs, les mêmes types de formes, les mêmes polices, ou la même intention graphique, etc… tout ce qui se rapproche de votre logo. Votre univers unique en sera d’autant plus marqué. Votre logo prendra d’avantage d’importance, les visiteurs le mémoriseront plus facilement avec des aspects visuels du site qui s’y rapportent.

2-Intégrer une barre de menu principal fixe en cas de « scrolling »

Vos visiteurs naviguent dans des pages de différentes tailles. Certaines pages nécessitent inévitablement un « scrolling » de la page, c’est à dire une action de descendre dans la page via la molette de la souris ou la barre de défilement du navigateur. Il est intéressant de mettre en place un menu accessible même dans des pages longues et pour cela, l’astuce consiste à fixer le menu en haut de page afin qu’il soit accessible dès que le visiteur descend dans la page. De ce fait, le visiteur pourra accéder rapidement, et facilement à n’importe quelle  rubrique principale de votre site et gagnera du temps dans sa navigation. Il appréciera et trouvera qu’il est plus agréable de naviguer sur votre site internet que sur beaucoup d’autres.

Attention toutefois, à bien limiter la hauteur du menu pour qu’il ne prenne pas une trop grande proportion du haut de page, cela limiterait la zone de lecture de la page de votre visiteur. Un menu fixe, lors d’un « scrolling », ne devrait pas dépasser 70 pixels maximum de hauteur.

3-Personnaliser les titres, sous titres, puces, etc… convenablement

Bien souvent, dans une page d’un site internet, nous retrouvons uniquement le titre principal de la page, puis un pavé de texte avec quelques sauts de lignes et une image.

Chaque mot a son importance et l’utilisation des mises en forme des textes est à la fois utile pour mettre en valeur les mots ou phrases mais aussi pour une lecture agréable du visiteur, et diriger son œil vers des textes importants. L’utilisation soignée mais non abusive des mises en forme des textes, permettra de donner envie de lire dans un premier temps. Cela permettra, juste après, de rapidement diriger le visiteurs vers des titres, sous-titres, puces, etc… qui sont là pour être lus en priorité sur une lecture en diagonale et rapide liée à ce type de lecture courante sur internet.

Tout comme dans n’importe quel livre, journal ou magazine, la mise en page ainsi que la mise en forme des textes et images ont un rôle capital qui détermine le niveau de confort de lecture de l’information pour donner plus de professionnalisme au contenu de votre site.

4-Créer des zones ou boutons d’actions pour vos visiteurs

Voici un exemple de bouton d’action qui renvoie vers la page de contact

Ne laissez pas vos visiteurs seuls lorsqu’ils terminent la lecture d’un de vos pages ! Donnez leurs, la possibilité d’aller plus loin avec des zones ou des boutons d’action. Une zone ou un bouton d’action est placé à un ou plusieurs endroits stratégiques dans la page, qui va contenir à un ou plusieurs éléments pour inciter le visiteur à réaliser une action, plutôt que de simplement quitter votre site pendant ou après la lecture d’une page.

Les actions proposées peuvent être très diverses :

  • Indiquer un numéro de téléphone ou une adresse email cliquable.
  • Placer un bouton d’action qui renverra vers la page de contact ou de demande de devis.
  • Proposer un lien interne ou externe pour approfondir un sujet.
  • Placer un lien/ un bouton/ une image qui renvoie vers l’une de vos références qui se rapporte à la page.
  • Mettre en avant un bouton d’achat dans le cadre d’un site e-commerce.
  • Inviter le visiteur à s’inscrire via un champ d’inscription à une newsletter pour approfondir le sujet, recevoir un cadeau ou simplement pour recevoir des nouvelles, etc…
  • Dans le cadre d’un article, proposez de laisser un commentaire ou un avis
  • Placez d’autres résumés d’articles à lire de la même catégorie avec une vignette propre à chaque résumé d’article.
  • Inciter au partage de la page avec des boutons de partage sur un ou plusieurs réseaux sociaux.
  • etc…

 5-Avoir un pied de page bien construit

Le pied de page est un élément souvent laissé à l’abandon sur des sites amateurs. On n’y retrouve que les mentions du type « Réalisé par … », « Copyright … » . C’est une double erreur.

Premièrement :
Car le pied de page peut intégrer un menu secondaire qui rappelle les rubriques, voir les sous-rubriques, à la fin de la lecture d’une page pour que le visiteur puisse accéder à d’autres pages de votre site plutôt que de le quitter. Surtout, si vous n’utilisez pas le principe du menu principal fixe cité avant, dans le point n°2.

Deuxièmement :
Le pied de page est l’endroit idéal pour permettre d’accéder aux mentions légales du site, aux conditions générales, au plan du site, au lien vers les pages de réseaux sociaux, etc… à toutes les pages qui ne seront sans doute pas visibles dans le menu principal du site pour gagner en simplicité et espace. Mais, ces pages sont très utiles pour le visiteur qui veut vérifier votre entreprise ou société, vos conditions, etc…

Un pied de page bien construit est signe d’un site organisé et donc plus professionnel.

Conclusion des 5 astuces qui rendent votre site internet plus professionnel

5 astuces pour créer un site internet professionnelAvoir un site internet ne suffit pas ! Pour qu’il soit professionnel, il faut qu’il renvoie une image professionnelle, surtout si vous représentez une entreprise, une société, un commerce, etc… Mais il faudra aussi qu’il soit agréable et utile pour les visiteurs si vous voulez qu’ils s’intéressent à vous ou deviennent vos clients. Pour cela, ces 5 astuces devraient vous y aider.

Toutefois, c’est un travail à la fois technique et créatif, plutôt long qui vous prendra parfois beaucoup de temps si vous l’entreprenez seul et sans connaissance pré-requises. Pour cela, je vous invite à contacter un professionnel proche de chez vous ou à contacter F4 Design, en tant que spécialiste web, je me ferais un plaisir de vous conseiller et de réaliser l’amélioration ou la refonte de votre site internet.

validation-creation-site-internet-pmeAvez-vous utilisé une des 5 astuces sur votre site ou avez-vous d’autres astuces pour rendre un site plus professionnel ? Si vous envisager de faire ou d’améliorer un site professionnel, je répondrez à vos commentaires pour vous y aider 😉 .

 

Refonte graphique du site e-commerce ecocarton.fr

refonte-site-e-commerce-eco-carton

Le Groupe Box Center basé à Narbonne fait partie du réseau National BOX, leader du marché du carton en France.

Le Groupe Box Center m’a confié la refonte graphique du site ecocarton.fr pour qu’il réponde d’avantage à leurs besoins. Cette refonte a pour but de diminuer les demandes d’aide des clients sur des points informatifs de l’utilisation des produits que recevait l’ancien site internet et le service client, cela en réorganisant la lecture de l’information des pages du site, mais également pour améliorer l’expérience des utilisateurs du site. Aussi, cette refonte graphique et ergonomique à pour but d’augmenter le potentiel de vente du site e-commerce.

Les conseils et conclusions qui ont mené au résultat de cette refonte graphique :

Les points clés

  1. Rafraîchir l’aspect graphique du site e-commerce pour lui donner un « coup de jeune »,
  2. Prendre en compte les contraintes fonctionnelles du gestionnaire de contenu utilisé par le client,
  3. Revoir la structure du design du site pour l’adapter aux écrans d’ordinateurs, tablettes, et smartphones,
  4. Garder la logique de référencement naturel de l’ancien site au niveau des contenus et de leurs balisages en les remettant en forme.
  5. Simplifier la lecture de l’information sur les principales rubriques,
  6. Mettre en valeur les produits,
  7. Restructurer la page « Produit » pour augmenter son potentiel d’actions effectuées par les visiteurs et clients,
  8. Faire ressortir les boutons d’actions,
  9. Prévoir d’intégrer des vidéos de tutoriels dans les pages « produits » pour aider le visiteurs à l’utilisation des produits en mettant en forme les indications d’étapes et ajouter un espace pour une vidéo. Cela permet d’augmenter la qualité du contenu de la page pour le visiteur ainsi que pour le référencement naturel,
  10. Définir et réorganiser la mise en forme et les widgets de la sidebar (barre latérale) en fonction des pages pour une meilleure pertinence de l’information en fonction des mots clés de pages et son utilité dans chaque page.
  11. Faire attention aux principes du responsive design (Conception adaptative) en créant des éléments graphiques facilement intégrables et adaptables entre l’écran d’ordinateur, la tablette et le smartphone, pour faciliter le travail de l’intégrateur web.

Les maquettes graphiques pour écrans d’ordinateur

Les maquettes graphiques pour écrans de tablettes tactiles

Les maquettes graphiques pour écrans de smartphones

Défi : 5 jours pour refondre le site F4 Design !

Je suis excité de vous présenter le nouveau site F4-design, résultat de mon Defi‬ personnel : 5 jours pour refondre le site F4 Design !

Créer un site internet pour mobile, tablette et ordinateur

Explorez le nouveau site en commençant par la page d’accueil

Les contraintes personnelles du Défi :

  1. Repenser le parcours des utilisateurs, l’‪#‎ergonomie‬ et rendre le menu accessible en permanence
  2. Intégrer fortement l’‪#‎identité‬ visuelle du logo F4 Design dans le design du site avec des notions de ‪#‎flatdesign‬
  3. Mettre en avant les appels à l’action
  4. Faire respirer les informations pour le confort visuel
  5. Rendre le site ‪#‎adaptatif‬ aux écrans d’ordinateurs, tablettes et smartphones
  6. Insérer des attributs sémantiques ‪#‎Microdata‬ stratégiquement pour améliorer la lecture des informations par les moteurs de recherche.
  7. 5 Jours de délais !

Et en bonus une touche d’animation ‪#‎CSS3‬ pour dynamiser l’ensemble, et un pack d’icônes en .svg (100% de la qualité au redimensionnement ) 🙂

Bon surf !

The Hobbit blog, analyse du blog officiel

Suite à la sortie du film « The Hobbit » en Amérique, soit traduit littéralement « Le Hobbit » chez nous, j’ai voulu en savoir plus sur l’envers du décor du film et j’ai découvert les « making off » sur le blog officiel www.thehobbitblog.com .

Je vous invite à découvrir les moyens techniques et graphiques mis en place pour la création de ce blog officiel consacré à l’univers du film Le Hobbit. Le blog a été mis en place d’après des techniques de création, en somme, très simple à réaliser pour un professionnel de la création web et je vais vous expliquer pourquoi.

Crédits images « thehobbitblog.com »

Un blog officiel pour le film « The Hobbit »

Pour le film Le Hobbit, réalisé principalement par le célèbre Peter Jackson, qui a aussi réalisé la trilogie du Seigneur des anneaux, un blog officiel a été mis en place pour les fans. Celui-ci présente notamment  des vidéos de « making of » de la réalisation du film, des photos et des articles des évènements qui se passent autour du film et de ses stars.

Les techniques utilisées pour le développement du blog The Hobbit

Le coeur du blog :

Il faut savoir que les techniques de développement des blogs on bien évolué depuis les 10 dernières années. Il est de plus en plus courant pour les petites et moyennes entreprises d’avoir recours à l’utilisation de « CMS » ( Système de gestionnaire de contenu ) de type « Open Source » ( code source libre de droit et d’exploitation). Néanmoins, les grandes entreprises préconisent souvent la création de blogs sur mesure pour des besoins spécifiques. Ici, la première surprise, qui n’en est qu’une à moitié, c’est que le blog officiel du film The Hobbit a été créé en utilisant le CMS Open Source le plus utilisé dans le monde par les professionnels du blogging, c’est à dire WordPress. WordPress est une puissante plate-forme avec CMS  développé à l’origine pour créer des blogs. WordPress sert depuis quelques années déjà de CMS avec brio pour la création et la maintenance de sites internet professionnels, en plus des blogs professionnels.

Les fonctionnalités mises en place sur le blog :

Voici la première grande déception pour un blog officiel dédié à un film du cinéma

1- Pour les professionnels de la création de blogs, cela est visible au premier coup d’oeil, pour les non initiés, il suffit d’aller jeter un coup d’oeil dans le code source pour s’appercevoir que les fonctionnalités visibles proposées n’ont pas pris plus d’1 minute à être mises en place une fois WordPress installé. Car ici, les créateurs du blog ont utilisé un thème premium « Glow » de chez eleganthemes http://www.elegantthemes.com pour mettre en place le design et les fonctionnalités du site.

Coût total de l’opération pour l’agence web qui a créé le blog = 49$ soit moins de 40 euros pour mettre en place les fonctionnalités.

2- Un minimum de fonctionnalités a été mis en place sur la partie invisible pour l’utilisateur en utilisant des plug-ins gratuits. Ouf ! Sinon cela serait un vrai travail d’amateur, « l’honneur est sauf ? ». Nous retrouvons l’installation du plug-in « Yoast WordPress SEO plugin » qui est un plug-in dédié à l’amélioration du référencement naturel des pages. L’implantation du plug-in « Nextgen Gallery » qui sert à faire facilement des Galeries d’images, même depuis l’interface de gestion sans connaissance en développement web, donc utile pour les personnes en charge de la publication des articles du blogs. De même que le plug-in « Slideshow Gallery » pour la mise en place de diaporama d’images accompagné de titres et de textes modifiables.

Coût total de l’opération pour l’agence web qui a créé le blog = 0€ mais environ 1 ou 2 heures, le temps de mettre en place les plug-ins et de les intégrer au design pour les personnaliser, si besoin.

3- Ah désolé ! Mais, j’ai fait le tour des fonctionnalités spécifiques de ce blog qui ne sont pas fournies nativement avec WordPress ou dans le thème acheté 49$.

Conclusion sur le développement et les fonctionnalités du blog officiel The Hobbit

L’utilisation de WordPress ici semble prometteur et permettrait de gagner des coûts pour le développement de fonctionnalités spécifiques ou innovantes ou même de mettre en place un design personnalisé pourrait-on penser… Pourtant, il n’en est rien. Ici, WordPress n’utilise pas 20% de ses possibilités et le blog laisse grandement à désirer pour une qualité dite professionnelle au niveau de son développement. Je n’entrerai pas dans les détails des articles qui sont souvent le post de vidéos ou d’images accompagnés de 2 lignes de texte et sans aucun sens ou scénario de publication. Sauf la date peut être. Nous sommes bien loin d’un travail professionnel de grande agence web et plus proche d’un développement de blog amateur ou à très faible budget.

La création du design du blog The Hobbit

L’esprit du blog :

Oui, sur le blog The Hobbit, nous retrouvons les bases d’un blog :

  • Page d’articles avec texte, photos et vidéos,
  • recherches par catégorie,
  • archives,
  • galeries d’images,
  • widgets de bases,
  • et liens.

L’utilisation d’un thème graphique existant pose des bases solides sur le blog tel que nous le connaissons tous. Mais aucun travail de personnalisation n’a été réalisé pour le design de ce blog officiel. Sauf le haut de page qui laisse apparaître un plan monté avec le titre du film et l’un des héros du film « Gandalf » dans de vertes étendues. Une poignée d’heures de travail, tout au plus, pour la recherche de ce haut de page. Le menu de navigation, quant à lui, reste fidèle au thème acheté 49$ et a même perdu de son essence graphique pour ne laisser apparaître qu’un fond noir dénué de sens.

Une personnalisation graphique quasiment inexistante :

Quand on observe le reste du site, il n’y a malheureusement que peu de commentaires positifs à faire. Le graphiste a simplement changé la couleur des arrières plans des dates de chaque article. Ensuite, tout est identique au thème acheté à 49$ .

Donc, aucun travail graphique ou ergonomique n’a été réalisé pour ce blog officiel. Seul l’ajout d’un « Like » Facebook a été mis en place sur les pages des articles et les résumés d’article, ce qui est une idée qui est maintenant commune mais qui en vue du travail réalisé pour la création de ce blog pourrait être vue comme une innovation magistrale ! (Rire)

Un blog The Hobbit officiel, officiellement raté !

Un blog officiel pour un film de renommée mondiale avec, comme je l’imagine, un budget suffisant pour faire quelque chose de correct et qui me semble ici avoir fait, encore une fois, le bonheur des commerciaux. En vendant un blog à la limite de l’amateurisme pour un résultat que je vous laisserai juger mais que je trouve déplorable et qui ne représente pas la qualité de prestation habituellement vue pour la création de sites ou de blogs avec les partenaires et grands studios qui ont participé au film The Hobbit comme Warner Bros, MGM, New line cinema .

Un détail illégal pour un site officiel et qui mérite un carton rouge : le blog ne comporte ni page avec un plan de navigation ( non obligatoire ) , ni mentions légales ( obligatoires ), ni copyright ou de droits réservés ( obligatoires ).

La critique est facile quand on se place en tant que spectateur. Néanmoins, en tant qu’acteur de la création graphique et web et notamment créateur de blogs sur WordPress pour des entreprises et des associations, je me permets une critique, pour laquelle j’ai cherché à trouver des points positifs, en vain. Par contre, j’ai simplement listé les points négatifs et j’ai préféré le faire sans trop de détails pour ne pas choquer les moins avertis des arnaques et du business des sites et blogs sur internet.

Pour moi le blog The Hobbit officiel est très facilement chiffrable. Il vaut 250,00 euros maximum si l’on ne souhaite pas arnaquer le client. Soit 200,00 euros pour la mise en place de WordPress et le temps passé à installer le template acheté 49$, à le personnaliser graphiquement avec les éléments cités plus hauts, soit moins d’une demi journée. Ajoutez l’installation de 3 plug-ins gratuits en 5 minutes et vous obtenez un prix raisonnable de 250,00 euros pour ce blog.

Combien pensez-vous que les sociétés de production du film ont déboursé pour ce blog ?
Comment trouvez-vous le blog thehobbitblog.com ? je parle bien le blog en lui même techniquement et graphiquement, pas de son contenu.

F4 Design investit dans les logiciels Adobe

Déjà plus de 3 ans que j’ai créé le site f4-design.fr et que j’accompagne des entreprises dans la création de leur identité visuelle, leur communication visuelle, leur site internet, etc…

Noël approche et je souhaite offrir un cadeau à mon entreprise qui soit à la fois utile pour mes clients et agréable, pour me permettre de travailler toujours dans de meilleures conditions et avec passion. Pour cela, j’ai décidé d’offrir à F4 Design, avec mon plus grand plaisir, la master collection CS6 de chez Adobe regroupée dans la version « Creative Cloud ». C’est la plus grande et la plus efficace des suites de logiciels professionnels à disposition pour les projets créatifs en infographie. Cela implique que j’explore les nouveautés de ces logiciels à partir de janvier 2013. Je pourrai ainsi commencer la nouvelle année avec des nouveautés techniques et infographiques à proposer à mes clients. En priorité pour cette année, je vais tester les nouveautés sur les logiciels que j’utilise le plus : Photoshop, Illustrator, Dreamweaver, Flash et After Effect.

Je vous laisse découvrir la liste des applications qui sont maintenant à ma disposition pour répondre à vos demandes, sans limite dans les outils de création infographique.

Adobe Creative Cloud

Adobe Creative Cloud est un concentré de nouvelles technologies logicielles pour créer sans limite : 2d, 3d, animation, interactivité, vidéo, son, etc… Grâce à un stockage « cloud » synchronisé, les fichiers indispensables que vous avez sélectionnés restent stockés dans un espace dédié.

Les logiciels :

Découvrez les magnifiques miniatures des écrans de démarrage des logiciels de la Creative Cloud version CS6 de chez Adobe.




Crédits :

Adobe Systems Incorporated

Infos sur les logiciels Adobe :

Pour en savoir plus sur ces logiciels, je vous invite à visiter le site Adobe à cette adresse : http://www.adobe.com/fr/

F4 Design, 100/100 connecté en 2013

Une année 2013 qui s’annonce haute en créativité et en innovation :), j’espère avoir suffisamment de temps pour exploiter les nouveautés proposées sur mes logiciels favoris et vous partager quelques unes de mes expériences.

Répondez à ces questions

  • Avez-vous des questions sur le thème abordé ?
  • Quels sont vos projets avec les logiciels Adobe ?

Refonte de site internet pour l’Espace Thermal de Dax

Découvrez les dessous de la refonte du site internet vitrine dynamique avec la possibilité de réservations en ligne pour l’Espace thermal de Dax, en partenariat et sous la direction de l’agence web It and Co.

webdesigner-wordpress-template-espace-thermal

Mon rôle

Développer et intégrer le site sur le gestionnaire de contenu WordPress, implanter notamment un système de gestion multi-langues et une page de réservation en ligne.

Ci-dessous les différentes étapes du projet.

Analyse en pré-projet

Le cahier des charges fourni par l’agence web It and Co a permis d’analyser et déterminer les besoins techniques du clients pour son site internet. Le cahier des charges est utile lors de chaque phase du projet. Il sert de référence et permet de construire correctement le site internet, quel qu’il soit, de façon juste et précise grâce aux informations qui  le constituent et qui ont été déterminées en amont avec le client, le chef de projet, le développeur et le webdesigner notamment.

Webdesign

La phase de création graphique et les maquettes du projet été prises en charge par Frank Viviani, graphiste et directeur artistique  sous la direction de l’agence It and Co. 3 pages ont  été maquettées afin de déterminer la structure globale du site et les spécificités graphiques. Ces pages sont suffisantes pour me permettre d’intégrer l’ensemble des pages du site. La phase de découpage des éléments du design et d’intégration ont été réalisées par mes soins pour l’ensemble des pages et suivant les normes W3c. Le découpage, quant à lui, a été réalisé à l’aide du logiciel Photoshop comme j’en est l’habitude.

Développement sous WordPress

gestionnaire-de-contenu-multilangues-wordpress

Le site utilisant WordPress pour les besoins en terme de gestionnaire de contenu, fonctionnalités et debudget, j’ai procédé à l’installation et à la configuration de WordPress avec un certain nombre de fonctionnalités et de plug-ins permettant au client de :

  • Gérer l’intégralité du contenu de ses pages : textes, images, audio, vidéo.
  • Optimiser facilement certains éléments du site pour le référencement naturel : url « propres » personnalisables, plan du site généré automatiquement, balises META title/description/keywords.
  • Sauvegarder de façon automatique et programmée chaque semaine la base de donnée du site ( backup ).
  • Gérer le contenu multi-langues des pages du site. Ici Français/Anglais/ Espagnol avec personnalisation des urls et des balises META possible en fonction des langues pour le référencement naturel du site.
  • Personnaliser les widgets depuis l’interface de gestion et la possibilité d’afficher les widgets en fonction des pages et des langues du site.
  • Inscrire les visiteurs à la newsletter du site.
  • Etre contacté par un formulaire de contact depuis la page de contact.
  • Recevoir les demandes de réservation en ligne depuis la page de réservation du séjour.
  • Ouvrir une pop-up interne informative sur certain bouton d’information sur le site, sous forme de »div ajax » , bien plus propre, agréable pour l’utilisateur et pas considéré comme pop-up par les navigateurs.
  • Changer les images et les descriptions d’un diaporama animé « slider d’images » en page d’accueil. A savoir qu’il est aussi possible pour le client de mettre en place des diaporamas uniques sur n’importe quelle page de son site à l’aide d’un simple copier/coller d’un [short code]  à disposition.
  • Écrire des actualités composées de textes, images, audios ou vidéos. Ces actualités sont créées sur une page dédiée et génèrent dynamiquement une nouvelle page d’actualités à chaque publication. Cela est géré intégralement par le gestionnaire de contenu wordpress. Il est même possible de programmer la publication des pages d’actualités.

Conclusion

La refonte d’un site internet peut être graphique et technique. Cela va souvent de pair pour les sites qui ne possèdent pas de bases technique suffisamment solides pour pouvoir référencer les pages d’un site facilement et proprement ou pour les sites qui ne disposent pas de gestionnaire de contenu. Les sites qui ne disposent pas de gestionnaire de contenu vont coûter plus cher pour effectuer les mises à jour, même basiques, comme la modification du contenu d’une page. L’utilisation d’un gestionnaire de contenu va permettre au client d’effectuer plus facilement et rapidement certaines de ces mises à jour comme son propre contenu ou de le  faire faire par des prestataires qui n’ont pas forcément de connaissances techniques et qui pourront se concentrer tout de même sur celui-ci.

Le site Espace Thermal m’a permis notamment de découvrir comment implanter du multi-langues sur le gestionnaire de contenu WordPress, de mettre en place la gestion des widgets sur des pages uniques, et de développer une page de réservation sur mesure avec l’affichage de box dynamiques en fonction des choix. Il faut dire que pour cette page j’ai eu quelques conseils de Tony Fresneau, développeur web, qui s’occupe de temps en temps de développement de projet web pour F4 Design.

Voici le lien pour découvrir le nouveau site : http://www.espacethermal.fr

Je suis donc maintenant en mesure de créer des sites multi-langues prêts pour le référencement naturel des pages en multi-langues de façon propre et facilement gérable  pour le client depuis WordPress. J’en suis ravi !

Et vous, projetez-vous de faire un site multi-langues pour votre entreprise ? Ou de créer un site avec des réservations en ligne ?

Développement et référencement d’un site e-commerce pour la mode

La Maison Nicolas Messina pour qui j’avais eu le plaisir de développer le site de la marque m’a confié le développement de son site marchand ou site e-commerce.

Le site www.bar-a-collants.com est un concept né de l’idée de proposer des collants de créateurs qui fabriquent leurs produits exclusivement en France. Ainsi La Maison Nicolas Messina a maintenant à la fois une boutique pour vendre en ligne ses créations mais aussi une boutique permettant d’accueillir d’autres créateurs de mode. Chaque nouveau venu est sélectionné sur accord de La Maison Nicolas Messina. Ensuite une page dédiée est créée ainsi que la possibilité de vendre ses créations sur le site Bar à collants. De plus, chaque nouveau venu est mis en avant sur la première page du site durant une période donnée.

Création de site pour créateur de mode

La création du site e-commerce

Le design :

Les maquettes du design du site internet ont été réalisées par l’agence de communication Ryswyck. Je me suis chargé d’identifier les besoins en termes techniques et pour l’intégration afin que le design correspondent aux contraintes du gestionnaire de contenu utilisé, Prestashop.

L’intégration des pages dont je me suis occupée, s’est déroulée avec l’aide du développeur web Nicolas Chauchefoin, chargé de la configuration et de l’implémentation des pages ainsi que des modules du site sous Prestashop.

J’ai aussi pris le relais sur des détails graphiques afin de les faire coller aux contraintes de prestashop et en suivant le cahier des charges que j’ai établi avec le client.

Un « slider » d’images « jQuery » à été créé en page d’accueil et en fin de projet par rapport au contenu du client. Je suis aussi en charge de créer les visuels avec un collaborateur graphiste et illustrateur.

Le Développement :

Le développement et l’intégration des pages sous prestashop nécessitent des connaissances du gestionnaire de contenu notamment sur la syntaxe particulière de Prestashop.  J’ai demandé à mon collaborateur Nicolas Chauchefoin, qui a l’habitude du développement web, de prendre en charge cette partie pour me permettre de gérer le projet et de m’occuper aussi de la partie graphique ainsi que de l’optimisation des pages pour le référencement naturel, ce qui est davantage dans mes compétences et dans mes envies.

Exemple du processus de paiement ou tunnel de conversion de Prestashop :

Processus de payement visible depuis la page de récapitulatif de la commande

J’ai choisi Prestashop qui est une solution qui correspond au besoin du client en terme de fonctionnalités et de coût pour son projet. Prestashop permet de gérer une base de données avec un catalogue de produits conséquent, tout en pouvant y coupler des pages dynamiques, un système d’actualité, de commentaires, etc… Nous avons aussi envisagé de coupler Prestashop au gestionnaire de contenu WordPress pour ajouter un espace membre, avec des actualités privées. Projet en « stand by » pour le moment.

La gestion des emails :

Un site e-commerce a besoin d’un certain nombre d’emails automatisés pour les diverses actions comme la confirmation d’inscription, la confirmation de paiement, la facturation, etc… Prestashop prend en charge ces emails suivant son processus interne.

Néanmoins, pour gérer la newsletter et permettre à Bar à Collants de pouvoir gérer ses envois d’emails aux inscrits sur le site, j’ai opté pour une autre solution. Cette solution proposée par un prestataire externe permet aussi de personnaliser et d’automatiser les envois d’emails . Les adresses et informations sont stockées sur une base de données externe prise en charge par le prestataire. Ce prestataire propose aussi la préparation à l’avance des emails qui seront envoyés suivant un scénario précis. De plus, l’avantage de cette prise en charge et de permettre une meilleure délivrabilité des emails envoyés.

Je me suis donc occupé de mettre en place le système sur le site du client et de le configurer sur l’interface du prestataire SG Auto-répondeur.

Le référencement naturel :

La prestation de service de référencement naturel fait partie intégrante des services que je propose lors de la création de sites internet. Néanmoins, en fonction des besoins du client, j’offre une prestation plus ou moins importante en terme d’heures de travail et d’optimisation pour les moteurs de recherche, notamment pour les pages d’un site internet.

Le site bar-a-collants.com bénéficie d’une prestation spéciale de référencement naturel sur les mois à venir pour l’aider à mettre en place son positionnement sur le moyen et  long terme sur les moteurs de recherche et notamment Google. J’interviens sur la gestion technique du référencement naturel du site e-commerce avec l’aide d’Olivier Papaleukas, référenceur web spécialisé indépendant dont voici son site, Aucamville Référencement. Notre objectif principal est d’apporter dans un premier temps un flux de visiteurs constant et qualifié de 1500-2000 visiteurs par mois qui recherchent les produits proposés par le site bar-a-collants.com.
Nous pourrons, suite à cette période, améliorer le volume de visiteurs en fonction du retour sur investissement du client.  Des campagnes de référencement payant par le biais de la régie publicitaire de Google adwords sont déjà envisagées pour certains produits, afin de booster leur lancement.

Conclusion

Les collants et bas fabriqués en France et proposés par des créateurs de collants vont, j’espère, plaire aux femmes et feront l’objet d’idée cadeaux pour ces messieurs. La création du site e-commerce Bar à Collants m’a permis d’affiner mon estimation sur les délais nécessaires à la création d’un tel site avec une collaboration entre 5 personnes et suivant un cahier des charges que j’ai donc créé.

Je remercie donc La Maison Nicolas Messina qui m’a confié la gestion complète et le développement technique de ce projet. J’espère pouvoir apporter d’autres de mes conseils graphiques, ergonomiques et marketing en vue de l’évolution du projet.

Voir le site : http://www.bar-a-collants.com

Et vous ? Avez-vous un projet de site internet ?

Création du site « La Serre » espace de travail collaboratifs, bureaux et ateliers.

La Serre est un espace pour les entrepreneurs qui désirent échanger leurs connaissances et leur savoir-faire tout en partageant un espace de travail et de rencontre professionnel et évènementiel.

La Serre se compose de :

  • De résidences permanentes : « espace bureau » ou « espace atelier »,
  • De résidences ponctuelles : espace de travail « bureau » ou atelier et/ou utilisation de salles de réunion
  • Des résidences éphémères : organisation d’événements et accueil d’acteurs en résidence : éco-designers, entrepreneurs sociaux…

La création du site www.la-serre.org

Le site La Serre à été conçu à partir du « template Sight » proposé par wpshower.com et personnalisé par f4-design.fr. L’implantation du « template » à été très rapide, j’ai ensuite configuré le gestionnaire de contenu wordpress à l’aide de codes de ma composition personnelle ainsi que de plugin phare de wordpress pour gérer la structure sur l’optimisation de référencement naturel, le formulaire de contact, les galeries d’images, etc…

Concernant le Design, l’ensemble a gardé l’aspect du design d’origine, seuls des éléments capitaux comme le logo, le fond, ou le haut de page ont fondamentalement changé. Il y a eu aussi quelques personnalisations sur les polices d’écriture et leurs couleurs. Le slider d’image en page d’accueil a été légèrement personnalisé pour coller à la demande du client, notamment sur le nombre de caractères affichés sur chaque slide.

Un système de newsletter à été implanté. Il est géré de façon automatisée et personnalisée avec un prestataire spécialisé. Cela permet de gagner du temps et de créer des scénarios emailing. Je me suis donc occupé de mettre en place ce système de newsletter et de le paramétrer pour le compte du client. La page « Louer un espace » contient un formulaire relié a ce système de newsletter qui permet de stocker les données et d’envoyer ainsi des emails aux inscrits spécifiquement depuis ce formulaire. Néanmoins, il était important de laisser la possibilité d’inscription par courrier en joignant un fichier téléchargeable à remplir pour le visiteur.

Des pages de sites internet administrables

Grâce à l’implantation maîtrisée du gestionnaire de contenu wordpress et à sa simplicité d’administration des pages sans avoir à connaître un langage de programmation, la plupart des pages du site sont éditables à 100%.

La barre latérale des pages qui est identique sur chaque page suivant le modèle d’un blog, est éditable depuis une zone commune de gestion des « Widget » sur le gestionnaire de contenu. Cela m’a permis de créer et moduler l’emplacement de chaque bloc de widget, facilement et rapidement. Ainsi, j’ai implanté des liens vers les réseaux sociaux du site, le formulaire d’inscription à la newsletter, un bouton qui ramène vers la page d’adhésion, un générateur de miniatures qui est relié à la page de galerie d’images, ou encore l’affichage des article récents.

Les pages ont été créées dynamiquement depuis le gestionnaire de contenu et le menu du site est aussi gérable et modifiable en quelques clics.

Conclusion : Simple, rapide, propre et efficace pour le client

Le site répond donc à la demande du client :

  • Il reprend la structure globalle du design qu’il a choisi.
  • Il est personnalisé suivant ses couleurs.
  • Il est propre dans la compréhension de l’information.
  • Il est rapide et facile de mettre à jour son contenu.
  • Il est efficace dans ses fonctionnalités et ses possibilités de modification.

J’ai pris plaisir à créer ce site en sachant que La Serre est au final très satisfait du résultat obtenu pour un budget maîtrisé. De plus, le projet La Serre est un tremplin pour aider les entrepreneurs artisans et designers à partager leur idée et trouver des sources de créativité. Donc le projet m’a tout de suite séduit.

Découvrez le site La Serre en cliquant sur le lien suivant : http://www.la-serre.org