Échapper à la refonte complète pour passer au Mobile

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


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


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

http://www.actency.fr/fr

1. Actency – 100% powered by Drupal


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 »


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




9/12

Les Français et le mobile



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 :



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 :



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!



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



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




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


17/12

Approche traditionnelle

2ème thème Mobile + Détection

Ne nécessite pas de refaire la version Desktop

mobile_toolsmobile_switch



18/12


4. L'approche de Bouygues Immobilier


4. L’approche de Bouygues Immobilier


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


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)



22/12

Approche Bouygues Immobilier

Services

m.bouygues-immobilier.comwww.bouygues-immobilier.com

www.bouygues-immobilier.comm.bouygues-immobilier.com



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


Approche Bouygues Immobilier


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”



25/12



5. Et les Frameworks JS ?


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?


28/12


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 ...



29/12

L'intérêt des Framework JS

Actuellement les projets se limitent à 3 devices



30/12

Il existe déjà plus de 10 périphériques prêts à afficher vos contenus


L'intérêt des Framework JS


31/12

L’approche Framework JS >

+

Les AppStore sont désormais à portée de Drupal

Framework JS



32/12


Backbone est embarqué dans Drupal 8



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



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



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

http://www.actency.fr/

http://www.twitter.com/actency

http://www.facebook.com/actency

http://www.actency.fr/book

http://www.actency.fr/fr/agence-web/pourquoi-choisir-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

Internet

Échapper à la refonte complète pour passer au Mobile