Vous êtes concepteur web ? Genre un vrai de vrai ? Vous êtes presque l’inventeur
du Responsive Web Design et pensez que le Web mobile n’a plus de secret pour
vous ?
Je vous propose pourtant de découvrir une poignée de subtilités encore méconnues, même de vous (ouais enfin j’espère) !
On évoquera le media handheld, les tailles d’écran, les valeurs de pixels indépendants, le retina, @viewport en CSS, la meta width=device-width, l’accélération matérielle, les unités nouvelles telles que vw, vh, ou encore dpi, dppx, etc.
Soyons joueurs et faisons un pari : si vous n’avez rien appris pendant cette
présentation, je vous paye une bière alsacienne (ou un jus de kiwi) !
Responsive Web Design : best practices et retour d'expérience de Backelite et...Idean France
Retour d'expérience sur le Responsibe Web Design par l'agence Backelite: spécificités et enjeux du RWD, les best practices, étapes clés d'un projet, approche content first, framework, cas pratique et témoignages des Galeries Lafayette
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiacti
Le mobile marketing est en pleine évolution : site mobile, application, flashcode, QR code.. alors, effet de mode ou moyens stratégiques?
acti Interactive Performance est une agence web basée à Lyon : création de sites web, conseil en stratégie digitale, SEO, SEM, e-reputation, community management, showreel…
La grande majorité des sites actuels offrent une expérience utilisateur désastreuse sur un écran réduit : textes et menus de navigation minuscules, zoom obligatoire, débordements qui “cassent” le design, multi-colonnes non adaptées, contenus superflus, etc.
Cette présentation a pour objectif de proposer des solutions concrètes pour adapter rapidement un site web existant au média mobile à travers quelques exercices pratiques fondés sur les possibilités avancées du langage CSS en Responsive Web Design.
Vous êtes concepteur web ? Genre un vrai de vrai ? Vous êtes presque l’inventeur
du Responsive Web Design et pensez que le Web mobile n’a plus de secret pour
vous ?
Je vous propose pourtant de découvrir une poignée de subtilités encore méconnues, même de vous (ouais enfin j’espère) !
On évoquera le media handheld, les tailles d’écran, les valeurs de pixels indépendants, le retina, @viewport en CSS, la meta width=device-width, l’accélération matérielle, les unités nouvelles telles que vw, vh, ou encore dpi, dppx, etc.
Soyons joueurs et faisons un pari : si vous n’avez rien appris pendant cette
présentation, je vous paye une bière alsacienne (ou un jus de kiwi) !
Responsive Web Design : best practices et retour d'expérience de Backelite et...Idean France
Retour d'expérience sur le Responsibe Web Design par l'agence Backelite: spécificités et enjeux du RWD, les best practices, étapes clés d'un projet, approche content first, framework, cas pratique et témoignages des Galeries Lafayette
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiacti
Le mobile marketing est en pleine évolution : site mobile, application, flashcode, QR code.. alors, effet de mode ou moyens stratégiques?
acti Interactive Performance est une agence web basée à Lyon : création de sites web, conseil en stratégie digitale, SEO, SEM, e-reputation, community management, showreel…
La grande majorité des sites actuels offrent une expérience utilisateur désastreuse sur un écran réduit : textes et menus de navigation minuscules, zoom obligatoire, débordements qui “cassent” le design, multi-colonnes non adaptées, contenus superflus, etc.
Cette présentation a pour objectif de proposer des solutions concrètes pour adapter rapidement un site web existant au média mobile à travers quelques exercices pratiques fondés sur les possibilités avancées du langage CSS en Responsive Web Design.
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
"It's an App World", nous disait Flurry (solution de mobile analytics) en 2014. Pourtant, les marques font face à des coûts de déploiement et de maintien des applications souvent élevés. Pire encore, selon Google, seules 3 applications - sur la moyenne de 15 qu'en compte un smartphone en France - seraient régulièrement utilisées par un mobinaute. Alors avec ses 20% de temps passé sur mobile, le navigateur web présente-t-il une alternative efficace aux stores ? Etat des lieux des usages, des solutions techniques, des expériences créatives et des enjeux marketing que le Mobile Web permet encore d'adresser. Avec beaucoup d'exemples concrets à la clé !
Les 10 Tendances Webdesign de 2014 by VanksenVanksen
Découvrez les tendances webdesign de l'année 2014 selon Vanksen.
This presentation is also available IN ENGLISH, here : https://fr.slideshare.net/Vanksen/10-webdesign-trends-for-2014
Les secrets du développement d'une application mobileEutech SSII
Présentation du 25 septembre 2012 dans le cadre d'un atelier technique à destination de clients, partenaires et prospects d'Eutech SSII. Dans un format court, il est question des jalons du développement d'une application mobile, iOs, Android, Webmobile
Formation : "Concevoir et promouvoir son site Internet"Synerg'hetic
Créer un site Internet pour sa structure n'est plus un atout mais est devenu un passage obligé. Le tout étant de ne pas laisser ce site se fondre dans la masse. Pour cela nous vous proposons de découvrir ou redécouvrir les bonnes pratiques pour communiquer efficacement autour de leur site Internet.
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...Peak Ace
Avec plus de 200 consultations par jour et par personne, et 49% des requêtes effectuées sur mobile, les parcours clients n'ont jamais été aussi nombreux et complexes. Durant cette conférence nous répondrons aux questions qui nous semblent essentielles pour booster votre ROI : Votre site mobile répond-t-il aux critères actuels ? Le poids donné au mobile dans votre stratégie SEA est-il suffisant ? Exploitez-vous les bons formats d'annonces ? Et enfin, nous verrons comment assurer efficacement les performances mobile pour lui attribuer la place qu'il mérite.
Réussir son projet mobile (Livre blanc)Olivier Robé
Réussir sont projet mobile (Livre blanc par l'agence web & mobile www.imagescreations.fr) : Répartition des environnements, quels usages, quelle consommation, les étapes clés d'un projet mobile.
6 années au siège du Groupe Banque populaire comme Responsable Webdesign / AMOA
« Médiatrice » entre la technique, la pertinence et l’esthétisme !
Présentation "Métier" auprès de la Direction des Technologies pour expliquer la démarche d'un projet, les différentes étapes. L'objectif était de sensibiliser les développeurs pour arriver à travailler ensemble, leur faire prendre conscience qu'il est important d'être solliciter en amont et valoriser leur travail.
Approche mobile First : pourquoi privilégier les supports mobiles ?Anaïs Vivion
Vous souhaitez prendre le virage du mobile ? Introduire la mobilité au coeur des innovations de votre entreprise ? Le mobile est devenu l’outil indispensable qui nous permet de surfer sur le net dans toutes nos situations de mouvement. Cette présentation explique l'intérêt de l'approche mobile first et comment retourner les contraintes du mobile en avantage.
L’iPhone et Android existent maintenant depuis plus de 10 ans. Dans le but d’optimiser et de simplifier le développement d’applications mobiles afin d’être présent sur les plateformes iOS et Android, des Frameworks ont émergés via des technologies hybrides et X-Platform.
Ces solutions alternatives aux plateformes natives sont régulièrement remises en cause (entre autre par Apple), qui évoque les failles de sécurité et les dettes technologiques liées à ces solutions.
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirBrioude Internet
1. E-‐tourisme et internet : les chiffres clés
2. Référencement : les notions clés
3. La prise de pouvoir du mobile
4. Évolutions : référencer pour mobile
HTML 5, applications natives ou hybrides : comment choisir ?Philippe Dumont
Avant de vous lancer dans votre prochain développement, il est important de faire les bons choix technologiques.
Ce webinaire vous permettra de comprendre et de sélectionner les meilleures approches à la fois en terme de développements mobiles mais également en terme d'intégration au système d'information en fonction de vos objectifs marketing.
Developpement mobile hybride avec Visual Studio, Apache CordovaMicrosoft
Session Ebiznext : Développer une application mobile nécessite des efforts importants en termes de coûts et de compétences. Apache Cordova résout ce problème en permettant de développer des applications multiplateformes: iOS, Windows Phone, Android. Visual Studio intègre désormais les outils nécessaires au développement d’applications mobiles hybrides fournis par Cordova. Les applications hybrides permettent au développeur d’accéder aux fonctionnalités natives des téléphones en utilisant HTML5/Javascript. Durant cette session, nous aborderons les concepts fondamentaux d’une application hybride Cordova et nous présenterons l’extension Visual Studio Tools for Apache Cordova permettant de développer, déboguer, et déployer une application mobile au travers de Visual Studio.
Introduction aux concepts de Responsive Web Design, méthodos, outils et REX sur ces méthodes (Avantages, inconvénients, coûts...) pour le BreizhCamp 2013
Les défis d’une application mobile multi-périphériques avec HTML5davrous
Aujourd’hui, on peut s’approcher de plus en plus des capacités des applications dites « natives » grâce à HTML5. Il y a 2 manières pour atteindre ce but. Utiliser les capacités intrinsèques d’HTML5 en faisant un site web moderne ou étendre ses capacités avec des frameworks comme PhoneGap. Mais ce n’est pas tout. Il y a ensuite de nombreux défis à relever : gestion du tactile, identité visuelle de chacune des plateformes, performances très différentes du desktop, etc. Nous verrons comme adresser certains de ces points via des exemples parfois issus du monde du jeu vidéo pour égayer cette présentation !
http://conf2013.web-5.org/speaker/david-rousset-les-defis-dune-application-mobile-multi-peripheriques-avec-html5/
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
"It's an App World", nous disait Flurry (solution de mobile analytics) en 2014. Pourtant, les marques font face à des coûts de déploiement et de maintien des applications souvent élevés. Pire encore, selon Google, seules 3 applications - sur la moyenne de 15 qu'en compte un smartphone en France - seraient régulièrement utilisées par un mobinaute. Alors avec ses 20% de temps passé sur mobile, le navigateur web présente-t-il une alternative efficace aux stores ? Etat des lieux des usages, des solutions techniques, des expériences créatives et des enjeux marketing que le Mobile Web permet encore d'adresser. Avec beaucoup d'exemples concrets à la clé !
Les 10 Tendances Webdesign de 2014 by VanksenVanksen
Découvrez les tendances webdesign de l'année 2014 selon Vanksen.
This presentation is also available IN ENGLISH, here : https://fr.slideshare.net/Vanksen/10-webdesign-trends-for-2014
Les secrets du développement d'une application mobileEutech SSII
Présentation du 25 septembre 2012 dans le cadre d'un atelier technique à destination de clients, partenaires et prospects d'Eutech SSII. Dans un format court, il est question des jalons du développement d'une application mobile, iOs, Android, Webmobile
Formation : "Concevoir et promouvoir son site Internet"Synerg'hetic
Créer un site Internet pour sa structure n'est plus un atout mais est devenu un passage obligé. Le tout étant de ne pas laisser ce site se fondre dans la masse. Pour cela nous vous proposons de découvrir ou redécouvrir les bonnes pratiques pour communiquer efficacement autour de leur site Internet.
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...Peak Ace
Avec plus de 200 consultations par jour et par personne, et 49% des requêtes effectuées sur mobile, les parcours clients n'ont jamais été aussi nombreux et complexes. Durant cette conférence nous répondrons aux questions qui nous semblent essentielles pour booster votre ROI : Votre site mobile répond-t-il aux critères actuels ? Le poids donné au mobile dans votre stratégie SEA est-il suffisant ? Exploitez-vous les bons formats d'annonces ? Et enfin, nous verrons comment assurer efficacement les performances mobile pour lui attribuer la place qu'il mérite.
Réussir son projet mobile (Livre blanc)Olivier Robé
Réussir sont projet mobile (Livre blanc par l'agence web & mobile www.imagescreations.fr) : Répartition des environnements, quels usages, quelle consommation, les étapes clés d'un projet mobile.
6 années au siège du Groupe Banque populaire comme Responsable Webdesign / AMOA
« Médiatrice » entre la technique, la pertinence et l’esthétisme !
Présentation "Métier" auprès de la Direction des Technologies pour expliquer la démarche d'un projet, les différentes étapes. L'objectif était de sensibiliser les développeurs pour arriver à travailler ensemble, leur faire prendre conscience qu'il est important d'être solliciter en amont et valoriser leur travail.
Approche mobile First : pourquoi privilégier les supports mobiles ?Anaïs Vivion
Vous souhaitez prendre le virage du mobile ? Introduire la mobilité au coeur des innovations de votre entreprise ? Le mobile est devenu l’outil indispensable qui nous permet de surfer sur le net dans toutes nos situations de mouvement. Cette présentation explique l'intérêt de l'approche mobile first et comment retourner les contraintes du mobile en avantage.
L’iPhone et Android existent maintenant depuis plus de 10 ans. Dans le but d’optimiser et de simplifier le développement d’applications mobiles afin d’être présent sur les plateformes iOS et Android, des Frameworks ont émergés via des technologies hybrides et X-Platform.
Ces solutions alternatives aux plateformes natives sont régulièrement remises en cause (entre autre par Apple), qui évoque les failles de sécurité et les dettes technologiques liées à ces solutions.
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirBrioude Internet
1. E-‐tourisme et internet : les chiffres clés
2. Référencement : les notions clés
3. La prise de pouvoir du mobile
4. Évolutions : référencer pour mobile
HTML 5, applications natives ou hybrides : comment choisir ?Philippe Dumont
Avant de vous lancer dans votre prochain développement, il est important de faire les bons choix technologiques.
Ce webinaire vous permettra de comprendre et de sélectionner les meilleures approches à la fois en terme de développements mobiles mais également en terme d'intégration au système d'information en fonction de vos objectifs marketing.
Developpement mobile hybride avec Visual Studio, Apache CordovaMicrosoft
Session Ebiznext : Développer une application mobile nécessite des efforts importants en termes de coûts et de compétences. Apache Cordova résout ce problème en permettant de développer des applications multiplateformes: iOS, Windows Phone, Android. Visual Studio intègre désormais les outils nécessaires au développement d’applications mobiles hybrides fournis par Cordova. Les applications hybrides permettent au développeur d’accéder aux fonctionnalités natives des téléphones en utilisant HTML5/Javascript. Durant cette session, nous aborderons les concepts fondamentaux d’une application hybride Cordova et nous présenterons l’extension Visual Studio Tools for Apache Cordova permettant de développer, déboguer, et déployer une application mobile au travers de Visual Studio.
Introduction aux concepts de Responsive Web Design, méthodos, outils et REX sur ces méthodes (Avantages, inconvénients, coûts...) pour le BreizhCamp 2013
Les défis d’une application mobile multi-périphériques avec HTML5davrous
Aujourd’hui, on peut s’approcher de plus en plus des capacités des applications dites « natives » grâce à HTML5. Il y a 2 manières pour atteindre ce but. Utiliser les capacités intrinsèques d’HTML5 en faisant un site web moderne ou étendre ses capacités avec des frameworks comme PhoneGap. Mais ce n’est pas tout. Il y a ensuite de nombreux défis à relever : gestion du tactile, identité visuelle de chacune des plateformes, performances très différentes du desktop, etc. Nous verrons comme adresser certains de ces points via des exemples parfois issus du monde du jeu vidéo pour égayer cette présentation !
http://conf2013.web-5.org/speaker/david-rousset-les-defis-dune-application-mobile-multi-peripheriques-avec-html5/
Découvrez ce “MobiliteaTime” de 50 pages pour mieux comprendre ces deux méthodes de conception :
> Commencez par plonger dans la navigation web d’aujourd’hui. Entre diversité des devices utilisés, mobinautes de plus en plus nombreux et actifs, la navigation se fait de plus en plus sous le prisme du multidevice et surtout du mobile. Découvrez les solutions qui s’offrent à vous.
> Faites le point sur les concepts de bases liés au responsive et à l’adaptive design (breakpoints, design fluide, résolution d’écran, etc) et les avantages liés à ces stratégies (des sites plus rapides à charger, moins coûteux en data, etc).
> Explorez les différentes possibilités de design au sein d’un site responsive ou adaptif, ainsi que les contraintes techniques associées.
> Ressortez de cette lecture avec (nous l’espérons) une meilleure compréhension du responsive et de l’adaptive design et les clefs pour mettre en place la stratégie adaptée à vos besoins.
Présentation proposée lors de la T3UNI12. Analyse technique des solutions de chargement d'images dynamiques pour le responsive design.
Etude des possibilités proposées nativement par TYPO3 pour intégrer en responsive design.
Bilan et état des lieux
Méthodes agiles, frameworks javascript: optimisez votre time to marketmichael_bailly
Cette présentation (en français) explique les fondamentaux de l'innovation Agile des 10 dernières années, et propose un panorama des frameworks JavaScript client, serveur, desktop et mobiles permettant d'accélérer votre processus d'ingénierie, de l'idée au produit.
10 tips pour améliorer les performances de vos applications Windows 8Microsoft
S’il est très simple de réaliser des applications Windows 8 de qualité, il est moins évident de créer des applications ultra performantes. Windows tourne désormais sur tout type d’appareils, des PC de gamers aux tablettes peu puissantes. Pour ces dernières, il est nécessaire de tirer parti au maximum des API fournies par WinRT. Cette session vous propose de découvrir 10 astuces afin d’améliorer visiblement les performances de vos applications.
Guide de survie en milieu responsive - Paris Web 2013Guillaume Abel
Le responsive web design est une approche relativement jeune sous sa forme actuelle et manque encore de bonnes pratiques reconnues et éprouvées dans l’industrie. Du coup, à nouvelle approche, nouvelles questions :
Le designer d'expérience utilisateur se demandera « Quels sont les usages ? Quel sont les bonnes pratiques RWD ? Comment je vais adapter la méthodologie UX ? Comment avoir une expérience qui soit cohérente sur plusieurs écrans ? »
Le développeur Front se demandera « Comment je vais utiliser les break-points ? Et les media queries ? Comment je vais éviter le snifing ? Et concevoir des blocs responsive ? Et les animations ? Comment je vais gérer le grand-écart entre IE7 et les autres navigateurs ? Et le débug sur les différents terminaux ? »
L’architecte se demandera « Comment je vais garantir la meilleure productivité possible ? Et la meilleure qualité ? Tout en utilisant le data binding, l'injection de dépendance, les tests unitaires, etc. ? »
Autour d’un projet concret, nous partagerons avec vous les enseignements retirés de cette aventure qui vous permettrons d’en sortir vivant… ou pas.
PS : N’oubliez pas votre serviette de bain.
L’expérience utilisateur, plus importante que jamais: le cas STM.infoTP1
Alors que tablettes et téléphones intelligents s’imposent comme les nouveaux écrans de référence pour beaucoup de consommateurs, comment penser l’interface et l’expérience utilisateur? Comment s’assurer que les efforts déployés seront durables, et que les résultats seront au rendez-vous?
Lors de cette présentation, Jan-Nicolas Vanderveken de TP1 et Nicole Gruslin de la STM détailleront l’exercice stratégique derrière le projet stm.info, partageront leurs analyses sur l’impératif mobile, en plus de démontrer les leçons retenues de ce redesign d’envergure.
#ScalaBigDay
Jeudi 12 juin 2014
"Saisir les nouveaux enjeux de la mobilité et exploiter le potentiel du mobile" (Salle 5, 16h30 - 17h30)
Speaker : Mathieu Molinaro (@MatMolinaro)
A partir du 7 octobre 2013 et durant toute l’année, Air France célèbre ses 80 ans.
FullSIX a conçu un site dédié à l'événement graphiquement remarquable, relayant les événements organisés pour l'anniversaire et traduisant les objectifs futurs pour la marque.
Comment créer une campagne grand public sans utiliser la TV (limitation sectorielle du contenu, déperdition géographique pour un réseau de 55 points de vente) et qui soit l’occasion de faire revenir la marque dans le champ de choix ?
Par la création d'une nouvelle plateforme de marque soutenue par un dispositif mass media @TV.
Par la création d'une campagne vidéo de masse online, capable à la fois de mettre en avant le message au cœur de sa campagne et de garantir une haute performance en terme de ciblage, impact et retour sur investissement.
Cas FullSIX - SFR Business Team_ Livre blanc SocialFullSIX Group
SFR Business Team présente « Au-delà du cloud », un livre blanc 100% digital et collaboratif dédié à la transformation numérique des entreprises
« Au-delà du cloud » est un livre blanc dont l'ambition est d'ouvrir le débat sur l'accélération de la transformation numérique des entreprises apportée par le cloud computing.
Ce livre est le fruit des échanges entre trente experts de l'innovation et du cloud qui se sont réunis en octobre 2012 pour répondre à quatre questions :
- Comment le cloud peut-il améliorer les conditions de travail et la performance de mes collaborateurs ?
- Comment le cloud peut-il être un levier de transformation de l'organisation de mon entreprise ?
- Quelle nouvelle relation client avec le cloud ?
- En quoi le cloud permet-il de développer de nouveaux business ?
« Au-delà du cloud » restitue ainsi les analyses et les conseils des experts, des journalistes et des dirigeants d'entreprise et start-ups sous forme d'éditoriaux, d'infographies ou de vidéos. Afin de prolonger le débat, il invite également les lecteurs à exposer leur retour d'expérience ou encore à partager ces contenus grâce aux modules Linkedin, Twitter, Google+ ou Viadeo présents dans le livre en ligne.
Le cloud computing devenant incontournable pour les entreprises, SFR Business Team souhaite, à travers ce livre blanc, mieux les accompagner dans le « nuage » en leur présentant les bénéfices que le cloud peut leur apporter.
Pour concevoir et réaliser ce livre blanc, SFR s'est appuyé sur les compétences des agences FullSIX et FaberNovel.
Accédez au livre blanc : http://www.audeladucloud.com/
Evènementialisation de la nouvelle formule de Metro autour de la mise en scène du départ de l’ancien format METRO pour mieux célébrer l’arrivée du nouveau (Buzz Event, vidéos virales, annonces presse, jeu concours online)
The TrendWatch Luxe #2 / FR par FullSIX FranceFullSIX Group
The TrendWatch Luxe #2
FullSIX, en partenariat avec l' Association des Professionnels du Luxe, présente la nouvelle édition de son observatoire de tendances digitales Luxe. La thématique de ce numéro est consacrée à la manière dont les grandes maisons ont su être inventives en renonçant à la technologie flash. Ce TrendWatch Luxe aborde aussi la tendance du "see-commerce", le revival low tech passant par le web social, ainsi que la dimension instore digital... Au total 6 grandes tendances sont abordées dans ce nouveau numéro du TrendWatch Luxe.
FullSIX Group is the leading independent marketing communications group in Europe
Our focus is on delivering accountable and measurable ROI, leveraging an upgraded brand vision and central customer intelligence to attract, recruit and retain through the most effective multi-channel action plans.
The Digital age requires
a new generation of full service agencies
We believe Digital has deeply changed consumers behavior and that this change is far more important than "just another channel" and that advertisers need a new generation of "digital native" marketing communications agencies to help them win in this fast changing and radically new environment.
Groupe FullSIX : Qui sommes nous ? 04/13FullSIX Group
FullSIX est le premier groupe de communication indépendant en Europe
Le Digital a bouleversé à la fois le comportement des consommateurs et la capacité des marques à construire et agir pour les séduire et les convaincre. Cette évolution radicale va bien au-delà de l'apparition de nouveaux canaux de communication et d'interaction, créant chez les annonceurs le besoin d'une nouvelle génération d'agences réellement partenaires les aidant à bénéficier du changement plutôt que de le subir.
Une nouvelle génération d’agences pensée pour accompagner les annonceurs à l’Ere digitale
Le numérique n'est pas uniquement une série de nouveaux canaux de communication. Son impact sur les consommateurs a amené l'industrie de la communication à un point de rupture. Les annonceurs ont besoin d'une nouvelle génération d'agences qui n'ignorent pas le changement mais qui le mettent au service des marques pour plus de créativité et de résultats.
Extraits du 1er baromètre de l’Internet BtoB en France par Infopro Communicat...FullSIX Group
« Le ROI, objectif n°1 pour 65% des professionnels »
1er baromètre de l’Internet BtoB en France par Infopro Communications et OTO Research
Paris le 29 Octobre 2012 - L’utilisation et l’efficacité des outils digitaux est mesurée de manière très inégale en France : s’il existe beaucoup de données sur les cibles BtoC, il n’y en a presque aucune dans le BtoB. Dans ce contexte, INFOPRO Communications, groupe leader d'information et de services professionnels, et OTO Research, institut d’études du groupe FullSIX ont mis en place le 1er baromètre de l’Internet BtoB.
Les résultats de cette étude exclusive (voir extraits en pièce jointe) démontrent l’exigence des acteurs du BtoB français : 65% des acheteurs de solutions digitales BtoB sont à la recherche de ROI. Ils ne sont que 57% à avoir des objectifs de notoriété. Les professionnels du BtoB sont au fait des possibilités qu’offre Internet pour atteindre leurs objectifs de rentabilité : tracking, génération de contacts qualifiés…
Deuxième constat, les sites BtoB/spécialisés sont perçus comme des outils d’aide à la décision par 70% des professionnels. Ces derniers utilisent des sites spécialisés / professionnels plus pertinents pour faire leurs achats.
Enfin, alors que les investissements sont de manière générale en baisse en période de crise, les solutions digitales BtoB poursuivent leur croissance : 37% des professionnels déclarent de manière certaine qu’ils vont augmenter leurs investissements, alors que seulement 4% anticipent des investissements à la baisse.
Cette enquête a été menée par OTO Research, institut indépendant, sur un échantillon de plus de 1 000 interviews conforte Infopro Communications dans sa stratégie de développement de solutions digitales pour les professionnels.
Pour en savoir plus sur les résultats de cette étude, Stéphanie Alabert, Directrice des pôles Etudes et E-Réputation OTO Research groupe FullSIX, se tient à votre disposition pour commenter ces chiffres.
Une prise de recul annuelle sur la réalité des chiffres de l'Ere Digitale. A la fois exhaustif, stratégique et synthétique, le Consumer Pulse permet de s’extraire du bruit pour voir le monde tel qu’il est.
2. 2
1. Constat : La grande fragmentation
2. Comment s’armer face à tous ses écrans
3. Un projet responsive
4. Les enjeux techniques du responsive
5. Conclusion
3. 3
Ethan Marcotte
lance le terme de
Responsive Web Design
en mai 2010 dans un article de
A List Appart
12. 12
Un trafic mondial du smartphone
qui Triple
Q1 2012
8,67%
Q1 2013
14,3%
Q1 2014
24,16%
31,5%
30%
25%
20%
15%
10%
5%
0%
2011-1 2012-1 2013-1 2014-1 2011 2012 2013 2014
13. 13
La majorité des navigateurs
supportent HTML5
90
80
70
60
50
40
30
20
10
0
Très bon support Bon support Pas ou peu de support Autre / Non déterminé
2011-1 2011-2 2011-3 2011-4 2012-1 2012-2 2012-3 2012-4 2013-1 2013-2 2013-3 2013-4 2014-1
14. 14
Une chose est sûr.
Ceci est un parcours frustrant, l’utilisateur ne l’a pas choisit
15. 15
Les contextes de navigation
évoluent au fil de la journée.
Les constructeurs offrent la récupération de la navigation
Un type de parcours qui augmente chaque jour.
16. 16
PENSER à l’usage, à l’utilisateur
La première chose que vous devez faire
est d’oublier les buzzwords et autre jargon
et vous concentrer sur les besoins réels
de votre entreprise.
Christina Warren
“
http://mashable.com/2013/08/06/responsive-vs-native-app/
18. 18
Une diversification des supports :
Un nombre de support à traiter très important
(tablettes / desktop / smartphones, phablets,…)
De plus en plus de résolutions à traiter.
Une fragmentation des devices Android non
maitrisée.
≠
Monde
opensignalmap
• La fragmentation peut aussi être
liée au contexte d’utilisation :
• Ex : Un mobile en WiFi n’offre pas le même
contexte qu’un ordinateur en 3G avec faible
réception.
19. 19
Changer notre mode de
support
On ne doit plus concevoir en fonction des
navigateurs … mais en fonction des formats
d’écran.
DU
SUPPORT
NAVIGATEUR
AU
SUPPORT
FORMAT
20. 20
Un pattern de conception
éprouvé
Design fluide
Le RESPONSIVE WEB DESIGN
Un fonctionnement par paliers de tailles d’écrans RWD RWD
Taille de texte adaptée
Réorganisation du layout
{
22. 22
Pour anticiper l’avenir, il faut respecter les
standards
• Les fonctionnalités des nouveaux navigateurs
seront simulées sur les plus anciens:
• Flash pour balise Vidéo,
• Javascript pour les animations,
• Des subtilités graphiques ou animations ne
seront pas présentes:
• coins arrondis,
• motion,
• text-shadows,
Une expérience optimale pour les derniers
navigateurs et les mobiles performants
Une expérience fonctionnelle pour les autres
Un fonctionnement par paliers de fonctionnalités
Standards
23. 23
Il s’agit donc de définir deux niveaux de paliers :
Les paliers sont liés à la technicité du sujet:
• Beaucoup de métier – applicatif
• Beaucoup d’animations
• Institutionnel
• Etc…
Un support par paliers
TAILLES D’ÉCRANS FONCTIONNALITÉS
27. 27
Le responsive
implique d’oublier le
cycle en V
De nouvelles “best
practices” projet
Le prototype est
indispensable
L’utilisateur est au
centre de la
conception
28. 28
Le prototype
C’est le seul moyen d’adapter les
comportements sur chacun des
terminaux en observant
l’expérience qui leur est propre
29. 29
Définir le palier minimum et le palier
Les techniques de design maximum
évoluent
Créer des éléments plus que des mises
en pages
D’un design statique à une maquette
HTML vivante
30. 30
De nouveaux outils
créatifs …
… en opposition avec le pixel perfect.
Adobe Edge Reflow
31. 31
Un nouveau Processus de validation
Processus
itératif
BRIEF
PSD fluide
Proto
HTML
Croquis
32. 32
Un nouveau Processus de validation
Processus
itératif
Concept
Créa
PSD fluide
Proto
HTML
Croquis
33. 33
http://loic/prototype_fspp
Le prototype, pierre angulaire
http://renault-fspp.dev.ekino.com/
planProduit.html
http://www.renault.fr/gamme-renault/vehicules-particuliers/
clio/clio-berline/
34. 34
Une phase de conception décisive
Des workshops au
plus près du client pour :
Comprendre le besoin
Comprendre les enjeux métier
Pérenniser la réflexion
Anticiper au mieux les innovations
Définir les contextes d’utilisation
Prioriser les éléments à afficher
Déterminer quel « layout » adopter
Client
35. 35
Une méthodologie agile
Les enjeux du RWD
impliquent un
fonctionnement agile
Tout au long de la phase de conception et de
développement, il faut faire des itérations pour
assurer :
Une bonne expérience utilisateur
Un support optimal des terminaux à la
sortie du site
36. 36
Une équipe d’experts
Une équipe modulaire,
dédiée, aux
expériences multiples
et travaillant de façon
collaborative
Le consultant UX, au
centre, est garant de la
cohésion de l’équipe et
du fonctionnel
Développeurs :
Front / Back
Chef de projet
Experts :
Front / Back /Mobile -
AX
PRODUCT
OWNER
Créatif
Consultant UX
37. 37
La contribution
Les outils de contribution, CMS, doivent s’adapter au
responsive web design :
Ces outils doivent permettre
D’adresser des visuels adaptés à chacun des écrans
De les redimensionner
De gérer les vidéos provenant de plateformes externes
De gérer les différences fonctionnelles
D’adapter le contenu
De visualiser sur les différents formats
40. 40
La PERFORMANCE au coeur de
l’expérience
Les utilisateurs s’attendent un temps de chargement de 2
secondes.
Au-delà de 3s, 40% vont abandonner votre site.
Gomez.com
“
41. 41
Les 3 piliers de la WebPerf
Réseau Affichage Exécution
42. 42
Optimiser Le Réseau
Diminuer les temps de réponse :
Le bon média pour chaque device
Concaténation et minification des ressources locales
Bonne gestion du cache navigateur
Utiliser les nouveautés HTML5 si possible
Cache manifest
Service Worker
43. 43
LES médias, un enjeu majeur
Il faut adresser la bonne image pour chaque écran.
Solution historique : utiliser le user-agent ?
La liste de user-agents ou la base de donnée sera-t-elle toujours à jour ?
Pouvons-nous être sûrs que un device = une taille d’écran ?
• Seul le navigateur connaît sa résolution au moment de
son usage
44. 44
LES IMAGES, LE VRAI CHALLENGE
DU FLUIDE
RÉSOLUTION ECRAN
QUALITÉ DE
L’IMAGE
BANDE
PASSANTE
Netbook
en wifi
Galaxy Note 2
en 4g
Iphone 5
en edge
Windows surface
en 3g
Télévision 4k
en bas débit
Laptop
en fibre
45. 45
Les images, le vrai challenge du fluide
RÉSOLUTION ECRAN
BANDE
PASSANTE
QUALITÉ DE
L’IMAGE
Galaxy Note 2
en 4g
Netbook
en wifi
Iphone 5
en edge
Windows surface
en 3g
Télévision 4k
en bas débit
Laptop
en fibre
• Résolutions d’écrans &
capacité réseau
ne sont désormais plus liés
46. 46
Les points d’action
LE
CHARGEMENT
LA
BONNE IMAGE
PAR DEVICE
Mise en place d’un polyfill
de détection de bande passante
Utilisation native de l’api
W3C network information dès que possible
Participation à la réflexion W3C sur l’implémentation de la balise picture et
d’autres solutions
Support du RETINA par le pattern 2x
47. 47
Sélection de la bonne image
Le w3c et ses participants sont enfin d’accord sur un format HTML
PICTURE
ELEMENT SRC SET SIZES
48. 48
Les vidéos
L’utilisation de la balise HTML5 vidéo induit un nombre conséquent de types de sources.
Navigateur / Device Formats Vidéo Encodage Audio
Chrome MP4*, WebM AAC, MP3, Vorbis
Firefox MP4, WebM AAC, MP3, Vorbis
Internet Explorer 9+ MP4 AAC, MP3
Safari MP4 AAC, MP3
iOS MP4 AAC, MP3
Android MP4 AAC, MP3
Opéra WebM Vorbis
* Chrome a annoncé qu’ils allait arrêter
le support du MP4 mais ne l’ont jamais fait
49. 49
Les vidéos
DES PLATEFORMES
existent et adressent déjà les différents écrans.
C’est à ces plateformes d’adresser les problématiques de mobilité liées aux différences
de formats et à la bande passante
50. 50
Optimiser l’affichage
Il faut charger ce que l’utilisateur voit
Un chargement des médias « on demand »
La prise en compte des spécificités de chaque support
accélération 3D
animations en CSS3 / Javascript ou SVG selon le cas
51. 51
Viewport
On affiche uniquement les images qui
apparaissent à l’écran
Un chargement sur
mesure
Sous le Viewport
Les images et les fonctionnalités ne sont pas
chargées
Le lazyloading
Va chercher les élements quand on en a besoin
52. 52
Maîtriser les zones à accélérer
Zone accélérée GPU
Il ne faut accélérer
que les zones qui
ont besoin d’être
animées.
54. 54
Prendre en compte les contraintes
d’éxecution
Il faut adapter les fonctionnalités au contexte d’utilisation
Il faut récupérer les bonnes pratiques des langages back au JS
55. Un tunnel d’achat sur smartphone ne doit pas avoir les mêmes champs et les
mêmes étapes que sur ordinateur à part si l’utilisateur l’a choisit
55
Il s’agit donc d’adapter le parcours au support
RESS / RESPONSIVE &
SERVER-SIDE COMPONENTS
DES PARCOURS
Adaptés
Les medias-queries et
matchmedia
permettent de
distinguer les tailles
d’écrans, pas les
supports.
56. 56
RESS : FONCTIONNEMENT
Une galerie média en layer La galerie sur mobile est dans une
nouvelle page
57. 57
RESS : FONCTIONNEMENT
SERVEUR
DÉTECTION UA
page.html
composant_support2.html
58. 58
Un petit mot sur le seo
Que pense Google
du responsive web design ?
https://developers.google.com/webmasters/smartphone-sites/
59. 59
Le seo reste un enjeux majeur pour
les webapp
Dans le cadre d’une application web, le contenu peut être généré en
AJAX.
Le SEO redevient donc un problème.
60. 60
Mettre en place une couverture de tests
unitaires côté JS/CSS La RECETTE côté DEV
Automatiser pour éviter
les régressions
Mettre des tests de navigation
Automatiser les tests de rendu multi-device
66. 66
Et c’est quoi l’Adaptive Web Design?
Adapter le site aux capacités du navigateur.
67. 67
Ca coûte combien ?
Si vous ne changez pas grand chose à vos habitudes, ca va vous coûter très cher
L’agence créa va refaire ses maquettes 10 fois
L’intégrateur prendra du retard en attendant les maquettes
« faire et défaire, c’est toujours travailler », « tout travail mérite salaire »
Si vous changez vos habitudes, que vous utilisez une méthodologie adaptée
Une phase de conception différente (ateliers, proto)
Entre + 20 et +30% vs un site desktop d’il y a 2 ans
…finalement pas tant que ca puisque à la fin on a un site mobile, tablette, desktop et « future-proof
»
Si votre besoin « rentre » dans une solution du marché, beaucoup moins cher
site éditorial avec un thème bootstrap / wordpress
68. 68
Un site responsive ou Dédié?
RESPONSIVE
WEB DESIGN
Le contenu est fluide et réagit
pour s’adapter à n’importe quelle
taille d’écran et type de format.
69. 69
Un site responsive ou Dédié?
SITE
DÉDIÉ
Le contenu va être modifié selon
des formats et types d’écrans
prédéfinis.
70. 70
Cost–Benefit Analysis :
The benefits of platform-optimized user interfaces are clear :
• Usability is increased.
• Users are more likely to accomplish their goals.
• Conversion rates increase.
• You make more money.
But, of course, optimization is more costly than repurposing. So, the real question is
whether this cost is bigger or smaller than the additional money you make from
increased usability.
Nielsen
Un site responsive ou Dédié?
71. 71
Un site responsive ou Dédié?
Un site lourd présentant un fonctionnel très riche ne devrait pas se retrouver tel quel sur mobile :
Facebook
Gmail
Flickr
Youtube
Un site dont le contenu doit être adapté au support ne se prête pas au RWD
Ligne éditoriale spécifique au mobile
72. 72
Du Fluide pour le SMARTPHONE
Ne pas faire de responsive
ne signifie pas pour autant
un layout fixe.
Un site mobile doit être adapté à tous les
mobiles et orientations et utilisera donc certains
aspects du package « responsive » ≠
73. 73
Ekino
157, rue Anatole France
92300 Levallois-Perret
@3k1n0
@NewsDuFront
www.ekino.com