RESPONSIVE WEBDESIGN

Transcription

1 RESPONSIVE WEBDESIGN

2 PRÉAMBULE Pour répondre à la consultation concernant la mise en place du responsive webdesign sur carredeshalles.fr, nous avons effectué un benchmark de votre site web afin de déterminer ses forces et faiblesses. Selon nous, les versions mobile de votre site web doivent permettre de proposer une expérience enrichissante aux utilisateurs. Cela passe notamment par une navigation simple, une interface moderne et un accès rapide à l information. L analyse et la connaissance de vos clients mobiles vous permettra d adapter votre offre mobile aux usages. Vous pourrez, par la suite, juger de la nécessité d enrichir les fonctionnalités offertes pour la version mobile. Le point de réflexion originel est le consommateur et le développement d une stratégie mobile ne doit pas différer sur ce point. Il ne faut pas optimiser son site internet car les consommateurs le consultent sur plusieurs écrans différents mais parce qu ils le consultent différemment. Ceci n est possible que si l on pense son site mobile d une manière différente de son site web dit classique. Il est également important d optimiser les temps de chargement des pages. L ergonomie et les performances sont des éléments essentiels à une meilleure expérience sur mobile et tablette.

3 RESPONSIVE WEBDESIGN La multiplication des supports rend difficile l adaptation de votre site à ces différents formats. Le responsive Webdesign (Design Web adaptable) résout cette problématique en proposant un site unique adaptant l agencement des contenus en fonction des résolutions. Terre de Café a été pionnier dans le développement de site web responsive en l intégrant parmi ses prestations dès Toujours dans cet effort de vous rendre accessible à une plus forte audience en situation de mobilité, nous vous préconisons l utilisation de cette technologie. Envie d en savoir plus? Consultez notre présentation sur responsive.terredecafe.fr

4 KESKECÉ? :) LE RESPONSIVE WEBDESIGN EN QUELQUES LIGNES... Le responsive design consiste à créer une page web permettant à un site de s adapter à l ensemble des supports : ordinateurs, tablettes et smartphones. Le but est de proposer une meilleure expérience utilisateur. Le responsive webdesign évite de développer une version spéciale pour mobile. En effet, les développeurs créent plusieurs feuilles de style CSS pour la même page web pour l adapter aux différents supports. En conséquence, le code HTML peut être réaffecté au lieu de devoir réécrire un nouveau site mobile. Cela permet de gagner à la fois du temps et de l argent.

5 POURQUOI L ADOPTER? 1. Le responsive web design (RWD) est le meilleur moyen de cibler les utilisateurs mobiles. D un point de vue du référencement, Google favorise les sites optimisés lors de la présentation des résultats de recherche. 2. Le RWD permet de maintenir les liens entrants. Les liens étant dirigés vers un seul domaine, cela constitue un réel avantage pour le référencement. 3. Le RWD permet de lutter contre le taux de rebond (pourcentage de visites au cours desquelles l'internaute n'a consulté qu'une seule page de votre site). 4. Le RWD est encouragé par Google tant il propose une réelle expérience de navigation pour les utilisateurs. 5. Le RWD engendre un meilleur taux de conversions et un avantage concurrentiel durable. Le RWD étant encore peu répand, proposer aux visiteurs une expérience nouvelle influencera positivement le capital sympathie de votre marque.

6 NOTRE MÉTHODOLOGIE ERGONOMIE TACTILE CLAVIER WEBDESIGN INTÉGRATION Dans le cadre d une création ou d une refonte de l interface en RWD, nous raisonnons par blocs de contenus. Au vu des tailles d écrans de plus en plus larges, il est très commun de voir des interfaces construites sur 3 à 4 colonnes. Nous anticipons la transposition RWD sur des supports tactiles. Nous prêtons attention à la zone des interactions ainsi qu à la taille des éléments cliquables. Sur les interfaces tactiles, le clavier occupe généralement 50% de l écran. Nous veillons donc à adapter le confort de navigation. Nos choix graphiques nous permettent d aller à l essentiel, l objectif étant de réduire le bruit visuel. Nous déterminons les points de rupture et rendons l interface et les médias flexibles.

7 UNE SEULE MÉTHODE, TOUT SIMPLEMENT LA BONNE!

8 LES RÔLES À JOUER LE RÔLE DU CLIENT Valider les phases de choix (graphisme, ergonomie, technique, contenus), Fournir les informations techniques requises avant la rédaction du cahier des charges par Terre de Café, Adhérer au cahier des charges, Fournir les contenus de base (textes, images, photos), Respecter les délais sur la remises d'éléments. LE RÔLE DE TERRE DE CAFÉ Rédiger le cahier des charges en accord avec les pré-requis techniques et les besoins du client, Proposer des solutions graphiques, ergonomiques, techniques, d interface d administration et de contenus, Concevoir et re aliser l'intégration web responsive du site web, Proposer un planning de re alisation en accord avec le client, Respecter les de lais.

9 PLANNING DE RÉALISATION Le client Terre de Café Point de validation

10 ÉQUIPE DÉDIÉE AU PROJET SEULEMENT LES PLUS BEAUX :) Magaly Virginie Olivier Directrice d agence Chef de pub Chef de projet web Alice John Jean-Baptiste Ludovic Chargée de webmarketing Directeur artistique Assistant Chef de pub Maquettiste web

11 RECOMMANDATIONS PUREMENT TECHNIQUES!

12 TECHNOLOGIES Terre de Cafe travaille avec les dernie res technologies du web en s efforc ant d e tre compatible sur le maximum de plate-formes. Nous supportons actuellement les navigateurs suivants : Firefox Safari Chrome Internet Explorer 8+ Pour parvenir à un support le plus large possible, nous n utilisons pas de modules Flash et privilégions les possibilités offertes par HTML 5. Mobile ios/android

13 ACCESSIBILITÉ WEB Le web est devenu incontournable dans les secteurs de l éducation, de l emploi, du commerce et du loisir. L accessibilité web permet l accès à l information aux personnes handicapées ou âgées. En France, 1 personne sur 6 est reconnue comme étant handicapée, soit près de 12 millions de personnes! Un site accessible signifie donc une plus grande audience. Nous sommes sensibilisés aux questions de l accessibilité, de l utilisabilité et c est pourquoi nous mènerons le projet en tenant compte de ces contraintes.

14 LE BUDGET, IL FAUT BIEN EN PARLER!

15 GESTION DE PROJET De tail de l arborescence Validation du planning Re cupe ration des e le ments (Textes + photos) Rédaction du cahier des charges En phase de production : Suivi du dossier au quotidien Mise a disposition d un interlocuteur unique Respect du planning Total gestion de projet : HT

16 WEBDESIGN Page d accueil du site web 2 pistes vous seront pre sente es 2 a/r de corrections sur la piste retenue Page SAS De clinaison sur la base de la page d accueil sélectionnée 2 a/r de corrections Page de contenu type 2 a/r de corrections Total webdesign : HT

17 INTÉGRATION HTML/CSS RESPONSIVE WEBDESIGN Site vitrine Page d accueil Qui sommes nous Nos Magasins Nos producteurs Nos produits Tous en cuisine Promotions Formulaires des contact Site marchand Fiche produit Espace client Panier de commande Paiement Confirmation Total intégration HTML/CSS : HT Total Site Web : HT

18 ING DE LANCEMENT La conception de vos newsletters tiendra compte des principaux clients . Comme pour le site web, nous préconisons la réalisation d ing responsive qui pourront ainsi être lus sur les terminaux mobiles. Notre outil de routage de newsletter a la particularité de proposer les fonctionnalités suivantes : Qualifier les bases d adresse s importées afin de collecter des informations précieuses sur ces s. Connecter les campagnes d ing aux réseaux sociaux tels que Facebook ou Twitter. Cet outil est aujourd hui reconnu par les plus grands fournisseurs d accès et fait parti de leurs liste blanche. En d autres terme, le taux de delivrabilité de vos newsletters est optimal. Notre prestation Webdesign (1 a/r de correction) Conception / tests (1 a/r de correction) Routage* et reporting Compris dans le budget * Hors frais de routage. Frais de routage en fonction de la taille de la base de données clients.

19 MAIS AU FAIT... TERRE DE CAFÉ C EST QUI?

20 OUVREZ GRAND LES YEUX, ET LAISSEZ VOUS GUIDER PAR LA MAGIE DE TERRE DE CAFE! Terre de Cafe est une agence de communication implante e a Lille et Be thune. Du conseil a la re alisation, nous concevons et de veloppons des solutions sur mesure. L avantage de notre approche est de permettre a nos clients de se positionner sur une vision globale ou au contraire sur un besoin spe cifique. Pour l ensemble de nos projets, nous de butons toujours notre travail par une phase d e tude... quel est le contexte? Comment faire agir les cibles? Comment atteindre les objectifs? Notre but? Donner a votre communication un ve ritable fil conducteur et une cohe rence par rapport a votre positionnement et vos objectifs. Arre tez de passer inaperçu! Responsive web design, Identite visuelle, Ergonomie, Web Marketing, Cre ation Graphique, Image de marque, SEO, Campagne multi-canal,... : ces quelques mots n ont aucun secret pour notre e quipe!

21 NOS MÉTIERS RÉFLEXION, CRÉATION, ÉVOLUTION CONSEIL PRINT WEB TRAFFIC Accompagnement stratégique, étude des besoins, suivi... Votre communication est entre de bonnes mains! Création graphique, image de marque, conception/rédaction, illustration... Le tout rythmé par une bonne dose de créativité! Création de site, responsive web design, maitrise des solutions open source... Bénéficiez de notre expertise et donnez un nouvel élan à votre image Référencement, E-publicité, Newsletter, ing... Boostez votre communication grâce à ces différents leviers!

22 CLIENT : HORIZON PROJET : SITE WEB DE LA RADIO

23 CLIENT : CHAUFFE ECO PROJET : SITES WEB

24 CLIENT : BAVARIA CONCEPT PROJET : SITE WEB RESPONSIVE

25 CLIENT : OLENDO PROJET : SITE E-COMMERCE RESPONSIVE

26 CLIENT : O SUSHI PROJET : CAMPAGNE COLLECTION HIVER

27 CLIENT : SIVOM DU BÉTHUNOIS PROJET : REFONTE DU LOGOTYPE

28 TERRE DE CAFÉ, UNE ENTREPRISE DE GROUPE FORCE 1 LENS-BETHUNE Régie publicitaire de Skyrock, Virgin Radio, Horizon, RTL2 & Lensois. com Solutions web Trafic Performance, re fe rencement payant & naturel, display, sms, ing Édition & diffusion du programme Virgin Radio sur les agglome rations de Lens & Be thune Édition & diffusion du programme Horizon sur les agglome rations de Arras, Lens & Be thune Édition des contenus du site internet lensois. com CRÉATION LILLE Régie publicitaire de Skyrock, Galaxie & Lensois. com MÉDIAS PUBLICITÉ DEPUIS PLUS DE 25 ANS, GROUPE FORCE 1 S EST IMPOSE COMME UN ACTEUR MAJEUR DE LA COMMUNICATION SUR LE NORD PAS-DE-CALAIS AU TRAVERS DE TROIS PO LES COMPLÉMENTAIRES : Groupe Force 1 en quelques chiffres : Chiffre d affaire en 2013 : 4.5 millions Nombre de salarie s en 2013 : 35 personnes Anne e de cre ation de Groupe Force 1 : 1986 Agence de communication globale conseil, image de marque, création print & web, web marketing

29 ENVIE DE NOUS RENDRE VISITE? LILLE 629, Av. de la République Lille BÉTHUNE 21 rue Édouard Herriot Béthune

30 Béthune : 21 rue Édouard Herriot - Lille : 629 Avenue de la république Tél. :