Drupagora 2015
Échapper à la refonte complète pour passer
au Mobile. Avec le témoignage de Bouygues Immobilier
SOMMAIRE
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
1.PRÉSENTATION
2. LE MOBILE EN 2015
3. AJOUTER UNE COUCHE MOBILE
4. L'APPROCHE DE BOUYGUES IMMOBILIER
5. ET LES FRAMEWORK JS ?
2/12
1. PrésentationNos intervenantsActency - 100% powered by DrupalBouygues Immobilier
3/12Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
1. Nos intervenants
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
4/12
Notre Intervenant
Fort de plus de trois années de développement front et back-end chez Bouygues Immobilier, Heidi Derras a su mettre à profit sa bonne maîtrise de Drupal dans ses versions 6 & 7 dans un contexte grand compte. Orienté solutions, Heidi a su allier l'agilité demandée par le monde digital et la rigueur nécessaire à la chaîne de production dans un contexte cadré par des process et des enjeux de sécurité.
Heidi DerrasLead développeur sur les projets internes@Bouygues Immobilier
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
5/12
Nos intervenants
Passionné par le web tout particulièrement axé sur Drupal et les produits SaaS. Sa spécialité trouver les solutions les plus optimisées pour les problématiques les plus complexes.
Mathieu GrosDirecteur Général@Actency
Damien LotéChef de projet technique@Actency
Entrepreneur dans l’âme, c’est avec le statut de free-lance que Mathieu Gros démarre sa carrière de Développeur/Business Analyst.Il devra très vite passer à la vitesse supérieure pour répondre à la demande de l’un de ses clients, entreprise internationale du secteur des Télécoms : une école d’exigence à laquelle peu d’entreprises sont confrontées aussi tôt dans leur existence. Il crée Actency en 2007, l’équipe comprend alors 4 personnes.Le choix de Drupal s’impose peu de temps après.
1. Nos intervenants
1. Actency – 100% powered by Drupal
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
6/12
Actency
L’agence :
● 65 experts du web● Agence fondée en 2007● Sur Strasbourg (siège social) et Paris● Des projets de 50 à 2000 jrs/h● Classée en 2013 par l’Express & EY au 66ème rang des
« 141 plus belles entreprises d'avenir »
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
7/12
Bouygues Immobiler
En Chiffre : ● 1701 collaborateurs
(Secteur immobilier)
● 2775 M€ de CA
● 11 776 Logements réservés en France et à l’International
● 36 Implantations sur le territoire
● Logements
● Immobilier d’Entreprise
● Développeur opérateur Urbain
Missions :
Domaines d’interventions
● Proposer des produits et des services de hautes qualités ● Des réalisations innovantes, responsables et durables● Pour une vraie qualité de vie dans la ville.
1. Présentation de Bouygues Immobilier
2. Le mobile en 2015
8/12Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
2. Le mobile en 2015
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
9/12
Les Français et le mobile
2. Le mobile en 2015
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
10/12
Ensemble des internautes de 15 ans et plus.Source : web observatoire
Taux de pénétration en Smartphones auprès des internautes
Des Français de plus en plus connectés :
2. Le mobile en 2015
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
11/12
Base : Utilisateurs de 13 ans et plus (34 37 000) Source : ComScore, Mobilens, moyenne sur 3 mois se terminant en Juin 2014, France.
Comportement des mobinautes
Evolution des recherches web par plateforme :
2. Le mobile en 2015
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
12/12
Les enjeux du mobile : être visible
L’algorithme de Google prend désormais en compte dans son classement de recherche effectué depuis des appareils mobiles, le fait qu’une page soit « mobile friendly » ou non. Et celui ci va encore évoluer dans les prochaines semaines...
Source : Google
+ 4,7% Hausse des sites compatibles mobile depuis le 21 Avril 2015
Impact de l’annonce google
Les recherches mobiles dépassent celles sur desktop dans 10 pays!
2. Le mobile en 2015
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
13/12
Les enjeux du mobile : proposer une expérience positive sur mobile
Source : ComScore,Mobilens, capture du The Mobile Play Book, de Google.
57% des mobinautes affirment qu’ils ne recommanderaient pas une entreprise dont le site mobile est mal conçu
40% des personnes interrogées se sont tournées vers le site d’un concurrent après une mauvaise expérience sur leur mobile
Priorité N°1 Créer un site web pour mobile
2. Le mobile en 2015
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
14/12
État des lieux des sites “mobile friendly”
Administrations Immobilier Voyages & tourisme
E-commerce
Actualités& Médias
Cuisine
Secteurs d’activité : Part des sites “mobile friendly” en France
Part des sites :“No mobile - friendly” en France
3. Ajouter une couche mobile
15/12Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
3. Ajouter une couche mobile
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
16/12
L’approche traditionnelle par le Responsive
La refonte du thème desktop engage des travaux pouvant aller jusqu’à 50% du projet initial
Cette approche est envisagée dans la majorité des cas
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
17/12
Approche traditionnelle
2ème thème Mobile + Détection
Ne nécessite pas de refaire la version Desktop
mobile_toolsmobile_switch
3. Ajouter une couche mobile
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
18/12
3. Ajouter une couche mobile
4. L'approche de Bouygues Immobilier
19/12Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
4. L’approche de Bouygues Immobilier
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
20/12
Les objectifs stratégiques
● Simplification de l’expérience utilisateur● Augmenter la compatibilité (notamment Windows Phone)● Augmenter le taux de transformation ● Réaliser un projet rapidement sans impacter le site actuel● Éviter la refonte du projet ● Avoir une approche Mobile-First pour évoluer vers le Desktop● Internaliser la maîtrise des développements
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
21/12
Les contraintes
● Ne pas toucher à la version Desktop : Maintenance et évolutions en cours.
● Obsolescence des Webservices en place
● Difficulté à faire évoluer les SI (plusieurs prestataires et différentes infrastructures)
● Audit du code obligatoire avant de déployer
● Pour le métier, il y a deux sites à éditer ou recetter donc deux fois plus de travail
● Enjeux stratégiques et politiques forts sur le respect de la qualité et des délais (entreprise du CAC 40)
4. L’approche de Bouygues Immobilier
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
22/12
Approche Bouygues Immobilier
Services
m.bouygues-immobilier.comwww.bouygues-immobilier.com
www.bouygues-immobilier.comm.bouygues-immobilier.com
4. L’approche de Bouygues Immobilier
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
23/12
● PHASE 1 : Choix stratégique○ Soit refonte complète○ Soit site mobile
● PHASE 2 : Spécification Métier○ Portage de l’application mobile (“faites comme”)○ Compatibilité de toutes les plateformes
● PHASE 3 : Adaptation du SI & Développement ○ Mise en conformité des flux SI○ Développement de la plateforme mobile○ Intégration des contraintes métiers
● PHASE 4 : Réception○ Réception des environnements○ Recette fonctionnelle
● PHASE 5 : Déploiement○ Gestion des redirections
4. L’approche de Bouygues Immobilier
Approche Bouygues Immobilier
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
24/12
Résultats
● Déploiement en Mars 2015
● Délai : 5 mois
● Nb jours : ~250 jours
● Trafic: 110 369 visites en 2 mois
● Taux de transformation augmentede 69% sur mobile (2015)
● Gain de 7% de la qualitédes transformations
“Notre passage au mobile s’est effectué sans refonte du site principal”
4. L’approche de Bouygues Immobilier
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
25/12
4. L’approche de Bouygues Immobilier
26/12Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
5. Et les Frameworks JS ?
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
27/12
L’approche Framework JS
Une équipe distincte sait ajouter la couche mobile
Cache system : VarnishApache user agent detect ...
Module : Services
5. Et les Framwork JS?
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
28/12
L’approche Framework JS
Utiliser un Framework JS est un bon moyen de migrer vers Drupal sans engager un lourd projet de refonte.
Permet de migrer plus facilement vers Drupal
Cache system : VarnishApache user agent detect ...
5. Et les Framwork JS?
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
29/12
L'intérêt des Framework JS
Actuellement les projets se limitent à 3 devices
5. Et les Framwork JS?
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
30/12
Il existe déjà plus de 10 périphériques prêts à afficher vos contenus
5. Et les Framwork JS?
L'intérêt des Framework JS
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
31/12
L’approche Framework JS >
+
Les AppStore sont désormais à portée de Drupal
Framework JS
5. Et les Framwork JS?
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
32/12
L’approche Framework JS
Backbone est embarqué dans Drupal 8
5. Et les Framwork JS?
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
33/12
Logique métierAffichage des données...
Stockage des donnéesGestion des données
Drupal 8 répond aux challenges des objets connectés
5. Et les Framwork JS?
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
34/12
L’avantage de Drupal pour utiliser les Framework JS
VidéoTitre, Date, Images, Vidéos, Résumé, Texte, etc...
Titre, DateTitre, Date, Images, Texte
La qualité native de la structuration des données
5. Et les Framwork JS?
Drupagora 2015 - Échapper à la refonte complète pour passer au Mobile. Avec le témoignage de Bouygues Immobilier Twitter : #drupactency
35/12
Conclusion : 4 solutions
La meilleure solution dépend des contraintes et des ambitions Business
Responsive • Refonte
Desktop• Dépendance
Maintenance
2 Thèmes+Switch• Évolution• Dépendance
Maintenance
2e Site + Synchro (BI)• Sans Refonte• Indépendance
Maintenance
Framework JS• Sans Refonte• Indépendance
Maintenance• Techno-Agnostic
5. Et les Framework JS?
Drupagora 2015 - Industrialisation de Drupal : Usines à Sites, retour sur le cas CCI Alsace Twitter : #drupactency
36/12
MERCIEn savoir plus,
Visitez notre site, téléchargez nos supports
www.actency.frwww.twitter.com/actency
www.facebook.com/actency
Notre Book de références www.actency.fr/book
Notre Factsheet Drupalwww.actency.fr/drupal
37
Drupagora 2015 - Conférence Drupal 8, regards croisés par Paul Bismuth et John Doo - Twitter : #drupactency
Vous avez une question ? Un projet ? Une demande de devis ? Besoin d’un renseignement ?
N’hésitez pas à contacter nos équipes commerciales et techniques :
ACTENCY PARIS 82, rue d'Hauteville 75020 Paris • Tél : 01 47 70 47 70 • Fax : 01 47 70 54 80
ACTENCY STRASBOURG 45, avenue de Colmar 67000 Strasbourg • Tél : 03 88 45 30 60 • Fax : 03 88 41 51 70