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

Qui ?
Bérangère Faure Benjamin Bastien
Responsable etourisme GMT Editions
Saint Etienne Tourisme www.gmt-editions.fr
www.saint-etiennetourisme.com Twitter > @GMTEdition
Animé par
Vincent Vandevelde
Fisheye Communication - IDREZO
www.fisheye-communication.com
pioupiou : @v_vandevelde

INTRODUCTION

HTML5 – CSS3 ?

- 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

Web sémantique
Multimédia
Mode déconnecté
Stockage
3D / Jeux
Géolocation
WEB APP TOURISTIQUE !!

- CSS3
CSS (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.

Transformations 2D/3D
Transitions
WebFonts
Region & Colonnes
Border radius, ombres, …
Media Queries
RESPONSIVE WEBDESIGN !!

RESPONSIVE WEBDESIGN ?

- 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

Le point de vue prestataire
Benjamin Bastien – GMT Editions

Casser les codes
Le web VS l’imprimerie
Responsive Layout : Penser global, ni
mobile, ni desktop, juste le web

Prototyper

Je consulte, tu consultes...
Un utilisateur = plusieurs modes de
consultations (cross-device experience)
Un utilisateur = un recruteur

... nous prototypons...
La poule et l’oeuf ?
Dégradation de l’experience ou amélioration
progressive ?
Le choix du «mobile first»

... vous validez
Vers des prototypes interactifs
de toutes les tailles,dans tous les sens mais dans
l’ordre
automatiser en utilisant des frameworks

Développer

Un duo de choc

Quelle compatibilité ?
Les navigateurs issus du webkit : Chrome,
Safari et versions mobiles
Les autres : Firefox et Opéra dans la course
Le cas IE :
IE9 et + la révélation
IE8 sous perfusion

Certains resterons sur la touche

L’heure des choix
Une certitude : éviter les ascenseurs
mise en page fluide ? élastique ? breackpoint ?
mobile portrait, mobile paysage/tablette portrait,
tablette paysage, écran, grand écran

Illustrer

Optimiser les médias
Occuper l’espace visible
Manipuler des contenus fixes
images : qualité, performance ?
vidéos : formats, ratios ?
cartes interactives ?

Recetter

Un contrôle qualité allongé
De nouveaux outils pour les prestataires
logiciels, plateformes de test etc.
De nouveaux équipements pour les clients
la caverne d’Ali Baba

Conclusion

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’entretenir
Pas besoin d’applications mobile ?

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

Saint-Etienne Tourisme

saint-etiennetourisme.com

Les 3 fondamentaux du projet
Exploiter notre base de données
Proposer un site créatif - innovant
Rendre accessible le site sur tablettes
dans un 1er temps, dans un 2ème temps sur
Smartphones.

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 sont
conçus pour une navigation sur tablette.

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.

Affichage sur un ordinateur

Affichage sur une tablette

Affichage sur une tablette

Affichage sur un smartphone

Focus sur l’expérience utilisateur
Dés lors commence la phase d’identification des
contenus prioritaires et de la prise en compte de la
navigation 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

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)

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.

Merci de votre attention
Bérangère FAURE
b.faure@saint-etiennetourisme.com
saint-etiennetourisme.com

Merci de votre attention
Bérangère FAURE
b.faure@saint-etiennetourisme.com
Benjamin BASTIEN
bbastien@gmt-editions.fr

ENQUÊTE DE SATISFACTION
HTTP://BIT.LY/ET8PAU