• 1. 27 MARS I ATELIER FRENCHWEB : COMMENT TESTER EFFICACEMENT SON SITE RESPONSIVE ?
  • 2. DE QUOI NOUS NE PARLERONS PAS ?? !  Pourquoi développer un site Responsive Design? !  Faut-il un site Responsive ou un site Optimisé ? !  Comment fonctionne le Responsive Design ? !  Comment concevoir un site Responsive Design ? !  Comment développer un site Responsive Design ?
  • 3. DE QUOI VA-T-ON PARLER AUJOURD’HUI ?? !  Les enjeux du test !  Les spécificités du test Responsive Design !  Concevoir son échantillon de configurations de test !  Comment organiser ses tests ? !  Quels tests? Quelles étapes? Quels outils ? !  Quels efforts prévoir en maintenance ?
  • 4. StarDust est une société franco-canadienne spécialisée dans la validation de sites internet et applications mobiles. Nous offrons à nos clients des services de tests de leurs solutions digitales permettant de réduire les risques, améliorer les performances et promouvoir un développement pérenne. NOTRE ACTIVITÉ MÉTIER CHASSEUR DE BUGS
  • 5. CARTE D’IDENTITÉ STARDUST tests effectués 25 000 bugs remontés 150 plans de test écrits 650 000 160  projets   PRODUCTION 2013   1 nouvel écran acheté/jour 1800  écrans   132   versions d’OS différentes 71 résolutions différentes professionnels du test 25  PRO- JETS   Exp. moyenne par testeur 100  %   < 10%   Turn over annuel   Geeks  100   %   LABORATOIRE   ÉQUIPE DE TEST   ans d’ancienneté   120%   Croissance 2013   Fidélité Client   90%   3   150 clients LA SOCIÉTÉ  
  • 6. RÉFÉRENCES §  ACCOR SA §  AD4SCREEN §  ADL PARTNERS §  AEDIAN §  AFNIC §  AIRWEB §  AXA §  BACKELITE §  BEEAD §  BEEZIK §  BNP PARIBAS §  BOUYGUES TELECOM §  CANALPLUS OVERSEAS §  CAISSE D’EPARGNE §  CITADIUM §  CITROEN §  CREDIT AGRICOLE §  DIGITICK §  e-TF1 §  EKINO §  GFI §  HSBC FRANCE §  ISOBAR §  KEYNOTE §  L’EQUIPE §  LA FRANCAISE DES JEUX §  LA REDOUTE §  LAST MINUTE   §  LE FIGARO §  LE POINT.FR §  LECLERC DRIVE §  LEGRAND §  LEKIOSQUE §  LEROY MERLIN §  LOGITECH §  MAIF §  MAZARINE DIGITAL §  NESPRESSO §  NETSIZE §  NOVEDIA AGENCY §  ORANGE LAB §  PAGES JAUNES   §  PARKEON §  PMU §  RADIO FRANCE §  RTL §  SANOFI §  SOCIETE GENERALE §  SOFIALYS §  UBISOFT §  USERADGENTS §  VENTE PRIVEE §  VIADEO §  VIAMICHELIN §  VISUA MOBILE §  VOYAGE PRIVÉ §  VOYAGES SNCF.COM  
  • 7. NOS OFFRES MY TESTING LAB Prenez les rênes du centre de test StarDust   LABEL STARDUST   Associez- vous à un tiers de confiance reconnu   GO TO MARKET TESTING Faîtes-nous tester vos services avant de les lancer   !  Simplicité : à joindre à vos offres commerciales !  Transparence : votre capacité à délivrer !  Efficacité : focus sur votre cœur de métier !  Sécurité financière : réduction du nombre de correctifs suite à la mise en prod !  Simplicité : accompagnement global !  Sécurité budgétaire : maîtrise des coûts !  Adaptabilité : sur mesure / intégration des outils du client !  Productivité : recours à une société de service dont c’est le cœur de métier !  Flexibilité : ressources à disposition !  Réactivité : délais courts !  Souplesse administrative : formule d’abonnement !  Efficacité : accès direct à un parc de 1800 terminaux et sollicitation des testeurs
  • 8. MULTIPLICITÉ, DIVERSITÉ, ÉVOLUTION permanente des terminaux et des OS POURQUOI FAIRE DU TEST ? PROBLÈMES récurrents   FREEZE   LAG   CRASH   70% des mobinautes suppriment immédiatement une application jugée instable   Jusqu’à 10% DU CA sécurisé  
  • 9. QUELQUES CHIFFRES 17% du trafic mondial vient du mobile 40% des achats du Black Friday réalisé depuis un mobile 1,2 Mds d’humains accèdent au Web via mobile 48% des utilisateurs disent qu’ils se sentent frustrés et agacés lorsqu’ils sont sur un site qui n’est pas mobile-friendly. 61% des utilisateurs déclarent que, s’ils n’ont pas trouvé facilement ce qu’ils cherchaient sur le site mobile, ils vont directement sur un autre site.   “Mobile users will do anything and everything desktop users will do, provided it's presented in a usable way.” – Brad Frost   Sources : Google │ Think Insights, July 2012 www.supermonitoring.com/blog/state-of-mobile-2013/
  • 10. LE RWD
  • 11. LE RWD : UN PETIT RAPPEL !   Site web !   HTML 5 !   Ergonomie adaptée aux différentes tailles d’écran !   Approche « Mobile First » ? Avantages Inconvénients !   Expérience utilisateur privilégiée sur chaque terminal !   Economies (temps & argent) !   Maintenance + facile !   Mise à jour transparente et déploiement multiplateformes   !   Projet complexe (cadrage, définition) !   Projet + long !   Maîtrise indispensable des aspects techniques du RWD (wireframes, media queries, …) !   Tests nombreux et variés tout au long du projet
  • 12. DANS LE DETAIL
  • 13. CE QUE L’ON CHERCHE A EVITER
  • 14. CE QUE L’ON CHERCHE A EVITER
  • 15. LA REALITE
  • 16. LA REALITE
  • 17. LES POINTS DE VIGILANCE? Graphismes Navigateurs Type de réseaux Opérateurs Langue et localisation Fonctionnalités Terminaux supportés OS et Versions Performance Ressources
  • 18. CAS DE TEST RESPONSIVE? RESOLUTIONS BREAKPOINTS ACTIONS COMPORTEMENTS BLOCS DE CONTENU IMAGES RESEAUX NAVIGATION COMPOSANTS EXTERNES Portrait   Paysage   FCT PLATEFORMES
  • 19. SELECTION DES CONFIGURATIONS? BREAKPOINTS RESOLUTIONS STATISTIQUES VENTE TRAFIC NAVIGATEURS SUPPORTES USAGES CIBLES MKT
  • 20. DIFFERENTES ETAPES, DIFFERENTS TESTS Spécification Développement Intégration Pré-production Production Fonctionnel Ergonomie Portabilité Performance Rece.e  sta/que   Rece.e  u/lisateur   Qualifica/on   fonc/onnelle   Maintenance  &  montée  de  version   Focus  Group  
  • 21. METHODES & OUTILS : QUELQUES BONNES PRATIQUES Impliquer les équipes de test au plus tôt Au cas où ils aient des bonnes idées Typer les cas de tests Pour connaître les forces et faiblesses du service Scénariser les tests On ne peut pas toujours tout tester S’assurer de la stabilité des environnements de test C’est bête (et cher) de perdre du temps ! Définir un formalisme clair et explicite On se comprend ? Mettre en place des outils de gestion des anomalies (plan de test, bug tracker, …) Sinon, c’est l’anarchie ! Planifier les tests sur plusieurs jours avec 1 seul testeur sur la première journée puis une montée en puissance Ca évite encore de perdre du temps, et c’est de l’argent ! Ne pas sous-estimer la charge de project management Tout est une question d’organisation !
  • 22. Matrice d’exécution : Avoir la bonne granularité
  • 23. OUTILS POSSIBLES Spécification Développement Intégration Pré-production Production Fonctionnel Ergonomie Portabilité Performance Nealite,Axance,LudoTIC,Testapic,…     Emulateurs  :   resizeMyBrowser   Respondr   Screenfly   Responsive.is   …   Automates   Neoload   LoadRunner   …   Nouvelles  configura/ons   Terminaux   Terminaux  
  • 24. OUTILS EN LIGNE
  • 25. MAINTENANCE & MONTEE DE VERSION? Prévoir les scénarios de non-régression Nouvelles versions Nouveaux terminaux
  • 26. LES CHARGES A PREVOIR POUR UNE PHASE DE RECETTE? “If you think compliance is expensive, try noncompliance.” Paul McNulty - Former U.S. Deputy Attorney General
  • 27. LES CHARGES A PREVOIR POUR UNE PHASE DE RECETTE? Test  d’un  site  e-­‐commerce   Min   Max   Moy   Défini/on  de  la  stratégie  de  test   1  j.h   8  j.h   2  j.h   Rédac/on  des  documents  de  test   2  j.h   20  j.h   6  j.h   Produc/on  des  tests   8  j.h   80  j.h   20  j.h   Suivi  des  anomalies   4  j.h   40  j.h   10  j.h   Project  Management   4  j.h   40  j.h   10  j.h   Maintenance  mensuelle   1  j.h   4  j.h   2  j.h  
  • 28. LES CHARGES A PREVOIR POUR UNE PHASE DE RECETTE? Test  d’un  site  e-­‐commerce  en  mode  agile   Min   Max   Moy   Défini/on  de  la  stratégie  de  test   2  j.h   8  j.h   2  j.h   Rédac/on  des  documents  de  test   4  j.h   30  j.h   8  j.h   Par  itéra8on   Produc/on  des  tests   1  j.h   6j.h   3j.h   Project  Management   0,5  j.h   2j.h   1  j.h   Rece:e  intermédiaire   Produc/on  des  tests   6  j.h   30j.h   10  j.h   Project  Management   2  j.h   10j.h   3  j.h   Rece:e  finale   Produc/on  des  tests   8  j.h   40  j.h   10  j.h   Suivi  des  anomalies   4  j.h   20  j.h   5  j.h   Project  Management   4  j.h   20  j.h   5  j.h   Maintenance  mensuelle   1  j.h   4  j.h   2  j.h  
  • 29. OFFRES SPECIALES FRENCHWEB€ ANALYSE EXPLORATOIRE POST LANCEMENT : 6500€ à 5400€ Formalisation d’une grille d’analyse spécifique Analyse des statistiques de trafic et sélection des configurations à tester Tests exploratoires sur 15 configurations RECETTE UTILISATEUR FRONT RESPONSIVE : 10-15 K€ à 10% FRENCHWEB Définition des scénarios utilisateurs sur le périmètre fonctionnel principal Rédaction des cahiers de recette Choix de 30 configurations à tester Production des tests, reporting et suivi des anomalies RECETTE COMPLETE SITE RESPONSIVE : 25-45 K€ à 10% FRENCHWEB Analyse des périmètres fonctionnels: back-office, front, … Scénarios utilisateurs et cahiers de recette Sélection des configurations à tester Production des tests, reporting et suivi des anomalies Suivi montée de version et maintenance pendant 3 mois Ces offres sont valables pendant 1 mois à compter du 27 Mars 2014 Pour toute question : [email protected]
  • 30. EN CONCLUSION “On se souvient de la qualité bien plus longtemps que du prix” Guccio Gucci
  • 31. François Joseph VIALLON Président [email protected] 06 37 74 29 36 Skype : fviallon  
    Please download to view
  • All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
    ...

    [atelier Frenchweb] Tester efficacement son site Responsive design

    by stardusttesting

    on

    Report

    Category:

    Software

    Download: 0

    Comment: 0

    6,720

    views

    Comments

    Description

    Atelier online Frenchweb, le Jeudi 27 Mars à 11h, animé par StarDust.

    Depuis l’avènement des tablettes et des mobiles, le Responsive Web Design fait de plus en plus d’adeptes. Il faut dire qu’adresser les différents écrans depuis un code unique est une promesse séduisante.
    Si l’on comprend rapidement l’intérêt et le gain que le RWD apporte pour le développement et la maintenance du service, il est plus difficile d’évaluer l’effort de test nécessaire pour valider efficacement un service avant son lancement.
    Download [atelier Frenchweb] Tester efficacement son site Responsive design

    Transcript

    • 1. 27 MARS I ATELIER FRENCHWEB : COMMENT TESTER EFFICACEMENT SON SITE RESPONSIVE ?
  • 2. DE QUOI NOUS NE PARLERONS PAS ?? !  Pourquoi développer un site Responsive Design? !  Faut-il un site Responsive ou un site Optimisé ? !  Comment fonctionne le Responsive Design ? !  Comment concevoir un site Responsive Design ? !  Comment développer un site Responsive Design ?
  • 3. DE QUOI VA-T-ON PARLER AUJOURD’HUI ?? !  Les enjeux du test !  Les spécificités du test Responsive Design !  Concevoir son échantillon de configurations de test !  Comment organiser ses tests ? !  Quels tests? Quelles étapes? Quels outils ? !  Quels efforts prévoir en maintenance ?
  • 4. StarDust est une société franco-canadienne spécialisée dans la validation de sites internet et applications mobiles. Nous offrons à nos clients des services de tests de leurs solutions digitales permettant de réduire les risques, améliorer les performances et promouvoir un développement pérenne. NOTRE ACTIVITÉ MÉTIER CHASSEUR DE BUGS
  • 5. CARTE D’IDENTITÉ STARDUST tests effectués 25 000 bugs remontés 150 plans de test écrits 650 000 160  projets   PRODUCTION 2013   1 nouvel écran acheté/jour 1800  écrans   132   versions d’OS différentes 71 résolutions différentes professionnels du test 25  PRO- JETS   Exp. moyenne par testeur 100  %   < 10%   Turn over annuel   Geeks  100   %   LABORATOIRE   ÉQUIPE DE TEST   ans d’ancienneté   120%   Croissance 2013   Fidélité Client   90%   3   150 clients LA SOCIÉTÉ  
  • 6. RÉFÉRENCES §  ACCOR SA §  AD4SCREEN §  ADL PARTNERS §  AEDIAN §  AFNIC §  AIRWEB §  AXA §  BACKELITE §  BEEAD §  BEEZIK §  BNP PARIBAS §  BOUYGUES TELECOM §  CANALPLUS OVERSEAS §  CAISSE D’EPARGNE §  CITADIUM §  CITROEN §  CREDIT AGRICOLE §  DIGITICK §  e-TF1 §  EKINO §  GFI §  HSBC FRANCE §  ISOBAR §  KEYNOTE §  L’EQUIPE §  LA FRANCAISE DES JEUX §  LA REDOUTE §  LAST MINUTE   §  LE FIGARO §  LE POINT.FR §  LECLERC DRIVE §  LEGRAND §  LEKIOSQUE §  LEROY MERLIN §  LOGITECH §  MAIF §  MAZARINE DIGITAL §  NESPRESSO §  NETSIZE §  NOVEDIA AGENCY §  ORANGE LAB §  PAGES JAUNES   §  PARKEON §  PMU §  RADIO FRANCE §  RTL §  SANOFI §  SOCIETE GENERALE §  SOFIALYS §  UBISOFT §  USERADGENTS §  VENTE PRIVEE §  VIADEO §  VIAMICHELIN §  VISUA MOBILE §  VOYAGE PRIVÉ §  VOYAGES SNCF.COM  
  • 7. NOS OFFRES MY TESTING LAB Prenez les rênes du centre de test StarDust   LABEL STARDUST   Associez- vous à un tiers de confiance reconnu   GO TO MARKET TESTING Faîtes-nous tester vos services avant de les lancer   !  Simplicité : à joindre à vos offres commerciales !  Transparence : votre capacité à délivrer !  Efficacité : focus sur votre cœur de métier !  Sécurité financière : réduction du nombre de correctifs suite à la mise en prod !  Simplicité : accompagnement global !  Sécurité budgétaire : maîtrise des coûts !  Adaptabilité : sur mesure / intégration des outils du client !  Productivité : recours à une société de service dont c’est le cœur de métier !  Flexibilité : ressources à disposition !  Réactivité : délais courts !  Souplesse administrative : formule d’abonnement !  Efficacité : accès direct à un parc de 1800 terminaux et sollicitation des testeurs
  • 8. MULTIPLICITÉ, DIVERSITÉ, ÉVOLUTION permanente des terminaux et des OS POURQUOI FAIRE DU TEST ? PROBLÈMES récurrents   FREEZE   LAG   CRASH   70% des mobinautes suppriment immédiatement une application jugée instable   Jusqu’à 10% DU CA sécurisé  
  • 9. QUELQUES CHIFFRES 17% du trafic mondial vient du mobile 40% des achats du Black Friday réalisé depuis un mobile 1,2 Mds d’humains accèdent au Web via mobile 48% des utilisateurs disent qu’ils se sentent frustrés et agacés lorsqu’ils sont sur un site qui n’est pas mobile-friendly. 61% des utilisateurs déclarent que, s’ils n’ont pas trouvé facilement ce qu’ils cherchaient sur le site mobile, ils vont directement sur un autre site.   “Mobile users will do anything and everything desktop users will do, provided it's presented in a usable way.” – Brad Frost   Sources : Google │ Think Insights, July 2012 www.supermonitoring.com/blog/state-of-mobile-2013/
  • 10. LE RWD
  • 11. LE RWD : UN PETIT RAPPEL !   Site web !   HTML 5 !   Ergonomie adaptée aux différentes tailles d’écran !   Approche « Mobile First » ? Avantages Inconvénients !   Expérience utilisateur privilégiée sur chaque terminal !   Economies (temps & argent) !   Maintenance + facile !   Mise à jour transparente et déploiement multiplateformes   !   Projet complexe (cadrage, définition) !   Projet + long !   Maîtrise indispensable des aspects techniques du RWD (wireframes, media queries, …) !   Tests nombreux et variés tout au long du projet
  • 12. DANS LE DETAIL
  • 13. CE QUE L’ON CHERCHE A EVITER
  • 14. CE QUE L’ON CHERCHE A EVITER
  • 15. LA REALITE
  • 16. LA REALITE
  • 17. LES POINTS DE VIGILANCE? Graphismes Navigateurs Type de réseaux Opérateurs Langue et localisation Fonctionnalités Terminaux supportés OS et Versions Performance Ressources
  • 18. CAS DE TEST RESPONSIVE? RESOLUTIONS BREAKPOINTS ACTIONS COMPORTEMENTS BLOCS DE CONTENU IMAGES RESEAUX NAVIGATION COMPOSANTS EXTERNES Portrait   Paysage   FCT PLATEFORMES
  • 19. SELECTION DES CONFIGURATIONS? BREAKPOINTS RESOLUTIONS STATISTIQUES VENTE TRAFIC NAVIGATEURS SUPPORTES USAGES CIBLES MKT
  • 20. DIFFERENTES ETAPES, DIFFERENTS TESTS Spécification Développement Intégration Pré-production Production Fonctionnel Ergonomie Portabilité Performance Rece.e  sta/que   Rece.e  u/lisateur   Qualifica/on   fonc/onnelle   Maintenance  &  montée  de  version   Focus  Group  
  • 21. METHODES & OUTILS : QUELQUES BONNES PRATIQUES Impliquer les équipes de test au plus tôt Au cas où ils aient des bonnes idées Typer les cas de tests Pour connaître les forces et faiblesses du service Scénariser les tests On ne peut pas toujours tout tester S’assurer de la stabilité des environnements de test C’est bête (et cher) de perdre du temps ! Définir un formalisme clair et explicite On se comprend ? Mettre en place des outils de gestion des anomalies (plan de test, bug tracker, …) Sinon, c’est l’anarchie ! Planifier les tests sur plusieurs jours avec 1 seul testeur sur la première journée puis une montée en puissance Ca évite encore de perdre du temps, et c’est de l’argent ! Ne pas sous-estimer la charge de project management Tout est une question d’organisation !
  • 22. Matrice d’exécution : Avoir la bonne granularité
  • 23. OUTILS POSSIBLES Spécification Développement Intégration Pré-production Production Fonctionnel Ergonomie Portabilité Performance Nealite,Axance,LudoTIC,Testapic,…     Emulateurs  :   resizeMyBrowser   Respondr   Screenfly   Responsive.is   …   Automates   Neoload   LoadRunner   …   Nouvelles  configura/ons   Terminaux   Terminaux  
  • 24. OUTILS EN LIGNE
  • 25. MAINTENANCE & MONTEE DE VERSION? Prévoir les scénarios de non-régression Nouvelles versions Nouveaux terminaux
  • 26. LES CHARGES A PREVOIR POUR UNE PHASE DE RECETTE? “If you think compliance is expensive, try noncompliance.” Paul McNulty - Former U.S. Deputy Attorney General
  • 27. LES CHARGES A PREVOIR POUR UNE PHASE DE RECETTE? Test  d’un  site  e-­‐commerce   Min   Max   Moy   Défini/on  de  la  stratégie  de  test   1  j.h   8  j.h   2  j.h   Rédac/on  des  documents  de  test   2  j.h   20  j.h   6  j.h   Produc/on  des  tests   8  j.h   80  j.h   20  j.h   Suivi  des  anomalies   4  j.h   40  j.h   10  j.h   Project  Management   4  j.h   40  j.h   10  j.h   Maintenance  mensuelle   1  j.h   4  j.h   2  j.h  
  • 28. LES CHARGES A PREVOIR POUR UNE PHASE DE RECETTE? Test  d’un  site  e-­‐commerce  en  mode  agile   Min   Max   Moy   Défini/on  de  la  stratégie  de  test   2  j.h   8  j.h   2  j.h   Rédac/on  des  documents  de  test   4  j.h   30  j.h   8  j.h   Par  itéra8on   Produc/on  des  tests   1  j.h   6j.h   3j.h   Project  Management   0,5  j.h   2j.h   1  j.h   Rece:e  intermédiaire   Produc/on  des  tests   6  j.h   30j.h   10  j.h   Project  Management   2  j.h   10j.h   3  j.h   Rece:e  finale   Produc/on  des  tests   8  j.h   40  j.h   10  j.h   Suivi  des  anomalies   4  j.h   20  j.h   5  j.h   Project  Management   4  j.h   20  j.h   5  j.h   Maintenance  mensuelle   1  j.h   4  j.h   2  j.h  
  • 29. OFFRES SPECIALES FRENCHWEB€ ANALYSE EXPLORATOIRE POST LANCEMENT : 6500€ à 5400€ Formalisation d’une grille d’analyse spécifique Analyse des statistiques de trafic et sélection des configurations à tester Tests exploratoires sur 15 configurations RECETTE UTILISATEUR FRONT RESPONSIVE : 10-15 K€ à 10% FRENCHWEB Définition des scénarios utilisateurs sur le périmètre fonctionnel principal Rédaction des cahiers de recette Choix de 30 configurations à tester Production des tests, reporting et suivi des anomalies RECETTE COMPLETE SITE RESPONSIVE : 25-45 K€ à 10% FRENCHWEB Analyse des périmètres fonctionnels: back-office, front, … Scénarios utilisateurs et cahiers de recette Sélection des configurations à tester Production des tests, reporting et suivi des anomalies Suivi montée de version et maintenance pendant 3 mois Ces offres sont valables pendant 1 mois à compter du 27 Mars 2014 Pour toute question : [email protected]
  • 30. EN CONCLUSION “On se souvient de la qualité bien plus longtemps que du prix” Guccio Gucci
  • 31. François Joseph VIALLON Président [email protected] 06 37 74 29 36 Skype : fviallon  
  • Fly UP