atelier "nos sites internet se refont une jeunesse html5 css3" - et8

48
ATELIER A11 : NOS SITES INTERNET SE REFONT UNE JEUNESSE : HTML 5- CSS3

Upload: vincent-vandevelde

Post on 26-Dec-2014

424 views

Category:

Documents


2 download

DESCRIPTION

Présentation projetée lors de l'atelier "Nos sites internet se refont une jeunesse HTML5 / CSS3" lors des 8èmes Rencontres Nationales du etourisme Institutionnel. Focalisée autour du Responsive Webdesign l'atelier à vu la participation de Bérangère Faure de Saint Etienne Tourisme, de Benjamin Bastien de GMT Editions et animée par Vincent Vandevelde de Fisheye Communication / IDREZO

TRANSCRIPT

Page 1: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

ATELIER A11 : NOS SITES INTERNET SE REFONT UNE JEUNESSE : HTML 5- CSS3

Page 2: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Bérangère FaureBérangère FaureResponsable etourisme Saint Etienne Tourismewww.saint-etiennetourisme.com

Benjamin BastienBenjamin BastienGMT Editionswww.gmt-editions.fr Twitter > @GMTEdition

Animé par

Vincent VandeveldeVincent VandeveldeFisheye Communication - IDREZOwww.fisheye-communication.com

pioupiou : @v_vandevelde

Qui ?

Page 3: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

INTRODUCTION

Page 4: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

HTML5 – CSS3  ?

Page 5: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

- HTML5

HTML > Format de données (langage) conçu pour représenter les pages web

HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML

Page 6: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Web sémantiqueMultimédiaMode déconnectéStockage3D / JeuxGéolocation

WEB APP TOURISTIQUE !!

Page 7: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

- CSS3CSS (Cascading Style Sheet) langage informatique qui sert à décrire la présentation des documents HTML et XML.CSS3 > Dénomination employée pour caractériser l’ensemble des nouveautés depuis le CSS2.1.

Page 8: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Transformations 2D/3DTransitionsWebFontsRegion & ColonnesBorder radius, ombres, …Media Queries

RESPONSIVE WEBDESIGN !!

Page 9: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

RESPONSIVE WEBDESIGN ?

Page 10: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

- RESPONSIVE WEBDESIGN

Regroupe différents principes et technologies indiquant qu'un site est conçu pour s'adapter aux différentes tailles d'écran et aux différents terminaux permettant de l'afficher

Page 11: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Le point de vue prestataireBenjamin Bastien – GMT Editions

Page 12: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Le web VS l’imprimerieResponsive Layout : Penser global, ni mobile, ni desktop, juste le web

Casser les codes

Page 13: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Prototyper

Page 14: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Un utilisateur = plusieurs modes de consultations (cross-device experience)Un utilisateur = un recruteur

Je consulte, tu consultes...

Page 15: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Page 16: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

La poule et l’oeuf ?Dégradation de l’experience ou amélioration progressive ?

Le choix du «mobile first»

... nous prototypons...

Page 17: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Vers des prototypes interactifsde toutes les tailles,dans tous les sens mais dans l’ordreautomatiser en utilisant des frameworks

... vous validez

Page 18: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Page 19: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Développer

Page 20: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Un duo de choc

Page 21: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Les navigateurs issus du webkit : Chrome, Safari et versions mobilesLes autres : Firefox et Opéra dans la courseLe cas IE :

IE9 et + la révélationIE8 sous perfusion

Quelle compatibilité ?

Page 22: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Certains resterons sur la touche

Page 23: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Une certitude : éviter les ascenseursmise en page fluide ? élastique ? breackpoint ?mobile portrait, mobile paysage/tablette portrait, tablette paysage, écran, grand écran

L’heure des choix

Page 24: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Illustrer

Page 25: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Occuper l’espace visibleManipuler des contenus fixes

images : qualité, performance ?vidéos : formats, ratios ?cartes interactives ?

Optimiser les médias

Page 26: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Recetter

Page 27: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

De nouveaux outils pour les prestataireslogiciels, plateformes de test etc.

De nouveaux équipements pour les clients

la caverne d’Ali Baba

Un contrôle qualité allongé

Page 28: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Page 29: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Conclusion

Page 30: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Et après ?

Une stratégie web mono-canale pour économiser du temps et du budget...... prévoir que malgré tout un site responsive doit s’entretenirPas besoin d’applications mobile ?

Page 31: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Le point de vue institutionnelBérangère Faure – Saint Etienne Tourisme

Page 32: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Saint-Etienne

Tourisme

Page 33: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

saint-etiennetourisme.com

Page 34: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Les 3 fondamentaux du projet

Exploiter notre base de donnéesProposer un site créatif - innovantRendre accessible le site sur tablettes dans un 1er temps, dans un 2ème temps sur Smartphones.

Page 35: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Proposition du prestataire Une navigation verticale du type

tablette, en isotope et infinite scroll.Un affichage du contenu sous forme de blocs qui s’agencent dans tout type de page de manière aléatoire.

Les gabarits à ce stade du projet sontconçus pour une navigation sur

tablette.

Page 36: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Responsive webdesign à 100 %

Au lancement, le site est accessible sur tablette. La 2ème

étape commence, le rendre accessible sur mobiles.

La façon dont avait été pensée le site en amont a permis de faciliter l’adaptation sur mobile.

L’affichage sous forme de blocs n’a pas demandé un changement de mise en page. Les contenus s’affichent dès lors sur une colonne.

Page 37: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Affichage sur un ordinateur

Page 38: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Affichage sur une tablette

Page 39: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Affichage sur une tablette

Page 40: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Affichage sur un smartphone

Page 41: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Focus sur l’expérience utilisateur 

Dés lors commence la phase d’identification descontenus prioritaires et de la prise en compte de lanavigation sur mobile.

Réagencement d’éléments

Activation de la fonction numéros de téléphone

Menu de navigation s’ouvre comme une application

Liens du header déplacés dans le footer sauf le carnet de voyage

Page 42: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Déroulement de la phase de test

Une plateforme de test a permis de prendre en compte le rendu avant la mise en ligne.

Nous avons testé le site sur 2 environnements différents. (iPhone et Android)

Page 43: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Pourquoi le choix de l’approche responsive webdesign ? 

Réduction des coûts (pas de création de site mobile, pas d’achat de nom de domaine supplémentaire).

Réponse aux nouveaux usages, nos internautes sont de plus en plus des mobinautes.

Volonté d’anticiper les besoins par rapport aux usages et de se positionner dans une démarche innovante à la pointe de la technologie et des avancées du web.

Page 44: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Merci de votre attentionBérangère FAURE

[email protected]

saint-etiennetourisme.com

Page 45: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

Merci de votre attentionBérangère FAURE

[email protected]

Benjamin BASTIEN

[email protected]

Page 46: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8

HTTP://BIT.LY/ET8PAU

ENQUÊTE DE SATISFACTION

Page 47: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Page 48: Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8