Travail de fin de formation Spécialisation en Webdesign - Cepegra Bruxelles. Développement du site Internet de la Gourmandise.

Transcription

1 Travail de fin de formation Spécialisation en Webdesign - Cepegra Bruxelles Développement du site Internet de la Gourmandise

2

3 Briefing client La Gourmandise est une Brasserie du terroir située à Rochefort en Province de Namur. Dans le cadre de grandes rénovations et du développent des activités, j ai proposé à la direction de développer un nouveau site Internet. Le client souhaitait un site simple et accessible. Il devait impérativement être optimisé pour tous les supports et navigateurs, desktop ou mobiles. Outre ces impératifs de base, le site devait respecter les contraintes suivantes : - Etre disponible en 4 langues - Proposer un champ de récolte d adresses - Etre administrable pour les news et pour les pages - Présenter un contenu de qualité (textes et photos) - Etre correctement référencé - Présenter un formulaire de contact - Proposer un lien vers la page Facebook Le site devait respecter la charte graphique et refléter les valeurs de la maison : - Proximité - Esprit familial - Terroir et tradition mais dans un style moderne Suite à ce briefing, un premier projet graphique a été présenté au client. Celui-ci a directement été validé et une longue aventure de développement a commencé.

4 Planning de réalisation Planning site Internet LA GOURMANDISE - Février Graphisme de la homepage de votre site Graphisme de la homepage de votre site et présentation du projet pour accord par vos soins Déclinaison des différents types de pages Déclinaison des différents types de pages Présentation et accord par vos soins sur les différentes pages Découpe HTML et CSS Corrections éventuelles et mise au net avant découpe Découpe HTML et CSS Livraison par vos soins de toutes les photos Découpe HTML et CSS et adaptation du site en responsive Découpe HTML et CSS et adaptation du site en responsive Adaptation du site en responsive Présentation de la version statique finie Installation du CMS Installation du CMS Livraison par vos soins des textes FR définitifs et corrigés Installation du CMS Installation du CMS et intégration des textes en FR Présentation du site FR, accord par vos soins et extraction et livraison de tous les textes pour traduction Testing CMS Traduction des textes Testing CMS Traduction des textes Testing CMS Traduction des textes Livraison par vos soins de l ensemble des textes traduits en format Word Intégration des textes NL et EN Intégration des textes NL et EN + dernières corrections avant mise en ligne Dernières corrections, présentation de la version traduite pour accord Mise en ligne du site sur l hébergement actuel Référencement Référencement Référencement

5 Structure menus MENU PRATIQUE Accueil (home) : News : La Gourmandise : Contact : présentation générale + coordonnées + dernières news liste des news avec vignette photo + titre + lien vers la news présentation de l établissement, ses valeurs, son histoire coordonnées + formulaire de contact MENU DE PRESENTATION DES SERVICES Brasserie du terroir : présentation brasserie (texte + photos) + lien carte Notre grill au feu de bois : présentation grill (texte + photos) + lien carte Boutique : présentation boutique (texte + photos) Grenier de la Trappiste : présentation musée (texte + photos) Formules business : présentation services aux entreprises (texte + photos) A emporter : présentation formules à emporter (texte + photos) MENU DE LANGUES FR I NL I EN HOME NL FR EN Accueil News La Gourmandise Contact Brasserie Grill Boutique Musée Business A emporter

6 Wireframing

7 Maquettes en Photoshop

8

9

10 Design & contenu Le design du site a été pensé de manière sobre mais moderne. Je suis partie sur un design de type flat, bien en phase avec les tendances actuelles. Les couleurs plus peps rappellent celles de la carte resto et des autres supports imprimés. Elles ont été choisies pour éviter un effet vieillot souvent lié à la cusine du terroir. J ai volontairement exclu du site les animations. En effet, je souhaitais donner la priorité à l efficacité de chargement du site. De plus, le site présentant beaucoup de contenu, je souhaitais faire part belle aux textes et photos d illustration. Concernant les photos, je me suis chargée de superviser un shooting dans le restaurant, en collaboration avec un photographe avec lequel j ai l habitude de travailler. En effet, pour moi, les photos sont des éléments primordiaux dans le cadre du design d un site et je souhaitais pouvoir transmettre mes souhaits par rapport à celles-ci. les textes quant à eux ont été rédigées par un journaliste, membre de la famille du client. Si le client n avait pas bénéficié d une telle ressource, je lui aurais suggéré de travailler avec une personne dont c est le métier, un copywriter avec lequel j ai l habitude de travailler. En effet, au même titre que les images, des textes pertinants et percutants font partie de la réussite d un site. Afin que les textes soient tout de même rédigés dans une logique web et dans une optique de référencement, j ai transmis au client quelques conseils de rédaction.

11 Développement Wordpress La plus grande partie des éléments du site est administrable par le client via l interface : - La homepage - Le texte des pages - Les photos des pages de contenu - Les news La difficulté principale a été de garantir ces fonctionnalités tout en proposant un site multilingue et un référencement naturel correct. Pour cela, plusieurs extensions ont été installées : Qtranslate pour gérer le multilinguise Qtranslate slug pour pouvoir traduire les permaliens Qtranslate Meta pour pouvoir proposer des meta et title différents D autres extensions ont également été installées pour les besoins du site : Add logo to admin pour personnaliser l admin du site Admin menu editor pour réorganiser l interface d admin Contact form 7 pour les différents formulaires de contact Contact form 7 minlenght pourcompléter les options de contact form Mail chimp pour faire le lien avec l interface et récolter les adresses Really simple Captacha pour sécuriser le formulaire Types pour créer des champs personnalisés Under construction pour afficher une page d attente lors du développement

12 Compatibilité & responsive Le site de la gourmandise a été conçu pour être visible sur un maximum de navigateurs. Il a par ailleurs été validé en HTML5 et CSS3. Liste des navigateurs compatibles : - Internet Explorer 7 et + - Chrome - Opera - Safari - Firefox - Opéra mini -... Par ailleurs, le site a été développé en responsive. Il a également été testé dans une multitude de supports mobiles pour lesquels l affichage ne présente plus aucune anomalie. - IPHONE 4 - IPHONE 5 - IPAD MINI - IPAD 2 - Wiko Cink Peax - Blackberry bold - Windows Phone - Samsung galaxy note 2 - Tablette Samsung -...

13 Responsive design

14 Référencement naturel Le référencement me semble être un métier à part entière car il touche à de nombreux domaines. Je n ai pas proposé à mon client de plancher sur un référencement poussé. Si il le souhaite, je pourrai le mettre plus tard en relation avec des spécialistes. A chacun son métier! Je me suis par contre fixé un point d honneur à ce que les paramétrages de base nécessaires à un bon référencement naturel soient respectés: - Soumission sitemap - Robot.txt - Ecriture Meta description - Ecriture title - Réécriture des titres - Nommage des fichiers images - Inscription Google Analytics - Inscriptions aux webmaster tools - Validation du site - Inscription google Address La difficulté a été de rendre tout ceci administrable via Wordpress et surtout sur base de Qtranslate. Après plusieurs essais de plugin, j ai trouvé des solutions efficaces qui répondaient à mes besoins. Le site étant en projet depuis plusieurs mois, j ai directement acheté le nom de domaine et un hébergement sur lequel j ai placé une page d attente afin que le référencement naturel puisse faire son effet le plus rapidement possible.

15 La newsletter La newsletter créée se veut simple. Il a en effet été convenu avec le client qu elle fera office de template de base pour plusieurs envois. Un compte a été créé pour le client via Mailchimp. La Newsletter y est installée et le client devra pouvoir utiliser le template de base et en modifier le contenu. La newsletter a été testée avec succès dans différents clients mail : - Outlook en ligne - Gmail - Mac Mail - Outlook Rem : newsletter validée au W3C.

16 Administration site Différents niveaux d administration ont été créés. Le premier donne accès à l ensemble de l admin et le second, dédié au client, ne lui donne accès qu à la mise à jour de contenus basiques. Manager : Login : gourmcms013 Mot de passe : gourm-cms-013-* Contributeur : Login : la-gourmandise Mot de passe : gourmandise-2013*