Post on 26-Dec-2014
description
ATELIER A11 : NOS SITES INTERNET SE REFONT UNE JEUNESSE : HTML 5- CSS3
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 ?
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émantiqueMultimédiaMode déconnectéStockage3D / JeuxGéolocation
WEB APP TOURISTIQUE !!
- 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.
Transformations 2D/3DTransitionsWebFontsRegion & ColonnesBorder 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 prestataireBenjamin Bastien – GMT Editions
Le web VS l’imprimerieResponsive Layout : Penser global, ni mobile, ni desktop, juste le web
Casser les codes
Prototyper
Un utilisateur = plusieurs modes de consultations (cross-device experience)Un utilisateur = un recruteur
Je consulte, tu consultes...
La poule et l’oeuf ?Dégradation de l’experience ou amélioration progressive ?
Le choix du «mobile first»
... nous prototypons...
Vers des prototypes interactifsde toutes les tailles,dans tous les sens mais dans l’ordreautomatiser en utilisant des frameworks
... vous validez
Développer
Un duo de choc
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é ?
Certains resterons sur la touche
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
Illustrer
Occuper l’espace visibleManipuler des contenus fixes
images : qualité, performance ?vidéos : formats, ratios ?cartes interactives ?
Optimiser les médias
Recetter
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é
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’entretenirPas besoin d’applications mobile ?
Le point de vue institutionnelBérangère Faure – Saint Etienne Tourisme
Saint-Etienne
Tourisme
saint-etiennetourisme.com
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.
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.
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 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
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 attentionBérangère FAURE
b.faure@saint-etiennetourisme.com
saint-etiennetourisme.com
Merci de votre attentionBérangère FAURE
b.faure@saint-etiennetourisme.com
Benjamin BASTIEN
bbastien@gmt-editions.fr