Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)

Raphaël Goetter
Raphaël GoetterGérant at Alsacréations
Un site mobile en 1h ? O !
                      N
        Raphaël Goetter           TOP CHRO




                    Crédits : flickr.com/photos/st3f4n
Raphaël Goetter
                           www.alsacreations.com
                           www.goetter.fr
                           www.ie7nomore.com
                           @goetter


Un site mobile en une heure, top chrono !
et aussi...
                               Techniques CSS avancées
                               Positionnement avancé
                               (inline-block, modèle
                               tabulaire, modèle de boîte
                               flexible et autres
                               positionnements CSS3)
                depu           Gestion de projet
                     is le
                17 m           (conventions, optimisation
                     ars       des performances,
                               frameworks)
                               HTML5, CSS3
                               Résolution de bogues
                               Multimédia
                               (web mobile, e-mailing,
                               impression, projection,...)


    Un site mobile en une heure, top chrono !
Au menu :
Un site mobile en 1h ?
Posons le décor et les contraintes
iPhone : Maître du monde ?
Tout est une question de taille !
CSS3 : et tout devient possible
Atelier : barcamp-bordeaux.com mobile !
Un site mobile c'est quoi ?




          Crédits : flickr.com/photos/bfishadow
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Démo !
En une heure, vous avez dit ?
                  Crédits : flickr.com/photos/st3f4n
Applications natives
Langages Java, Objective-C, C++
Applications natives
Langages Java, Objective-C, C++


Sites web dédiés
Nouvelle structure HTML, médias
optimisés
Applications natives
Langages Java, Objective-C, C++


Sites web dédiés
Nouvelle structure HTML, médias
optimisés


Adaptation de design
existant
Adapter aux mobiles grâce à CSS
Iphone Maître du monde ?




              Crédits : flickr.com/photos/mastrobiggo
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Conclusion :
Faire un design pour mobile...
Ce n’est pas faire un
site pour iPhone !
Tout est une question de taille !




                    Crédits : .flickr.com/photos/st3f4n
Un écran, plusieurs largeurs :
 Screen width
 Device width
 Viewport
Viewport :
« Surface virtuelle
qu’un mobile accepte
d’afficher par défaut à
l’écran »
La balise HTML Meta « Viewport »
width=980   width=480    width=320
Adapter le viewport à la
largeur du terminal
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width">
Adapter le viewport à la
largeur du terminal




                Bingo !
Démo !
viewport
CSS3 : et tout devient possible




                  Crédits : flickr.com/photos/udono
Media Queries :
« requête CSS3
permettant de cibler
selon des conditions
déterminées »
Sans Media Queries (cible = tous écrans) :
<link rel="stylesheet"
<link rel="stylesheet"
     media="screen"
     media="screen"
     href="styles.css"
     href="styles.css"
     type="text/css" />
     type="text/css" />
Sans Media Queries (cible = tous écrans) :
<link rel="stylesheet"
     media="screen"
     href="styles.css"
     type="text/css" />




Avec MQ (cible = écrans de moins de 640px) :
<link rel="stylesheet"
<link rel="stylesheet"
     media="screen and (max-width: 640px)"
     media="screen and (max-width: 640px)"
     href="mobile.css"
     href="mobile.css"
     type="text/css" />
     type="text/css" />
Au sein d'une feuille de style :
@media (max-width:640px) {
@media (max-width:640px) {
  body { width: auto; }
  body { width: auto; }
}
}
Au sein d'une feuille de style :
@media (max-width:640px) {
  body { width: auto; }
}



En pratique :
body { background-color: black; }
body { background-color: black; }

@media (max-width:640px) {
@media (max-width:640px) {
  body { background-color: red; }
  body { background-color: red; }
}
}
Résultat :




Écran de largeur supérieure à 640px   Moins de 640px
Démo !
media queries
Au boulot :
www.barcamp-bordeaux.com
adapté pour
terminaux mobiles
→
→

Zoom nécessaire      Textes lisibles
Bugs d’affichage     Tailles adaptées
Navigation aveugle   Navigation aisée
Au programme :
Viewport automatique
Media Queries
Largeurs fluides
Gestion des débordements
Adaptation des tailles de textes
Suppression d’éléments inutiles
goetter.fr/conf/
2011-bordeaux/
Crédits




Photos, illustrations :
www.flickr.com
Police :
MegalopolisExtra
by SMeltery
Icones et pictos :
www.iconfider.net


Raphaël Goetter   alsacreations.com   @goetter
Merci !
Raphaël Goetter   alsacreations.com




                      Crédits : flickr.com/photos/st3f4n
1 of 42

Recommended

Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS... by
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Raphaël Goetter
6.3K views54 slides
Des CSS efficaces avec KNACSS by
Des CSS efficaces avec KNACSSDes CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSSRaphaël Goetter
15.8K views59 slides
Intégrateurs, bousculez vos habitudes by
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesRaphaël Goetter
22.5K views104 slides
CSS Grid Layout, le futur de vos mises en page by
CSS Grid Layout, le futur de vos mises en pageCSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en pagematparisot
6.9K views70 slides
HTML5 / CSS3 : Mythes et realite by
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteRaphaël Goetter
4.7K views56 slides
Introduction à la performance web by
Introduction à la performance webIntroduction à la performance web
Introduction à la performance webRaphaël Goetter
12K views45 slides

More Related Content

What's hot

Vive les tableaux de mise en page ! by
Vive les tableaux de mise en page !Vive les tableaux de mise en page !
Vive les tableaux de mise en page !Raphaël Goetter
20.2K views108 slides
Mieux travailler le css avec sass:compass by
Mieux travailler le css avec sass:compassMieux travailler le css avec sass:compass
Mieux travailler le css avec sass:compassGuy Verville
1.6K views58 slides
HTML5, le nouveau buzzword by
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzwordFrédéric Harper
297 views36 slides
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie) by
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)Khaled Djebloun
1.7K views28 slides
Découverte HTML5/CSS3 by
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3François-Guillaume Ribreau
1.8K views221 slides
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2 by
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2Horacio Gonzalez
1.2K views39 slides

What's hot(20)

Vive les tableaux de mise en page ! by Raphaël Goetter
Vive les tableaux de mise en page !Vive les tableaux de mise en page !
Vive les tableaux de mise en page !
Raphaël Goetter20.2K views
Mieux travailler le css avec sass:compass by Guy Verville
Mieux travailler le css avec sass:compassMieux travailler le css avec sass:compass
Mieux travailler le css avec sass:compass
Guy Verville1.6K views
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie) by Khaled Djebloun
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun1.7K views
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2 by Horacio Gonzalez
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Horacio Gonzalez1.2K views
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript by codedarmor
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor1.9K views
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS by Horacio Gonzalez
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
Horacio Gonzalez495 views
Développement Web - HTML5, CSS3, APIs Web by Yoann Gotthilf
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
Yoann Gotthilf1.4K views
Le graphisme d'un site internet ! by elaugier
Le graphisme d'un site internet !Le graphisme d'un site internet !
Le graphisme d'un site internet !
elaugier4.1K views
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux by Frédéric Harper
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Frédéric Harper1.6K views
Conception de thèmes WordPress : construire et optimiser son espace de travail by Frédérique Game
Conception de thèmes WordPress : construire  et optimiser son espace de travailConception de thèmes WordPress : construire  et optimiser son espace de travail
Conception de thèmes WordPress : construire et optimiser son espace de travail
Frédérique Game5.6K views
Création de themes WordPress by Chi Nacim
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
Chi Nacim4.9K views
Scraper avec excel et google spreadsheet - google black day by Madeline Pinthon
Scraper avec excel et google spreadsheet - google black dayScraper avec excel et google spreadsheet - google black day
Scraper avec excel et google spreadsheet - google black day
Madeline Pinthon8.9K views

Viewers also liked

Présentation ma ville_changsha by
Présentation ma ville_changshaPrésentation ma ville_changsha
Présentation ma ville_changshafangqiong319
316 views12 slides
Manipulation Circuits Logiques : Manipulation n 2 by
Manipulation Circuits Logiques : Manipulation n 2Manipulation Circuits Logiques : Manipulation n 2
Manipulation Circuits Logiques : Manipulation n 2Mohamed Khalfaoui
537 views6 slides
Bremen sommer universität-2010-partizipativedidaktik20 by
Bremen sommer universität-2010-partizipativedidaktik20Bremen sommer universität-2010-partizipativedidaktik20
Bremen sommer universität-2010-partizipativedidaktik20Karsten D. Wolf
993 views98 slides
Chancen Fallstricke E Assessment by
Chancen Fallstricke E AssessmentChancen Fallstricke E Assessment
Chancen Fallstricke E AssessmentKarsten D. Wolf
1.8K views94 slides
Komponenten-basierender Review-Prozess - Toni Breitschmid by
Komponenten-basierender Review-Prozess - Toni BreitschmidKomponenten-basierender Review-Prozess - Toni Breitschmid
Komponenten-basierender Review-Prozess - Toni Breitschmidtecom
747 views18 slides

Viewers also liked(20)

Présentation ma ville_changsha by fangqiong319
Présentation ma ville_changshaPrésentation ma ville_changsha
Présentation ma ville_changsha
fangqiong319316 views
Manipulation Circuits Logiques : Manipulation n 2 by Mohamed Khalfaoui
Manipulation Circuits Logiques : Manipulation n 2Manipulation Circuits Logiques : Manipulation n 2
Manipulation Circuits Logiques : Manipulation n 2
Mohamed Khalfaoui537 views
Bremen sommer universität-2010-partizipativedidaktik20 by Karsten D. Wolf
Bremen sommer universität-2010-partizipativedidaktik20Bremen sommer universität-2010-partizipativedidaktik20
Bremen sommer universität-2010-partizipativedidaktik20
Karsten D. Wolf993 views
Chancen Fallstricke E Assessment by Karsten D. Wolf
Chancen Fallstricke E AssessmentChancen Fallstricke E Assessment
Chancen Fallstricke E Assessment
Karsten D. Wolf1.8K views
Komponenten-basierender Review-Prozess - Toni Breitschmid by tecom
Komponenten-basierender Review-Prozess - Toni BreitschmidKomponenten-basierender Review-Prozess - Toni Breitschmid
Komponenten-basierender Review-Prozess - Toni Breitschmid
tecom747 views
Lastvariable Elektroenergietarife in der Kältetechnik (Martin Vesper, Yello S... by co2online gem. GmbH
Lastvariable Elektroenergietarife in der Kältetechnik (Martin Vesper, Yello S...Lastvariable Elektroenergietarife in der Kältetechnik (Martin Vesper, Yello S...
Lastvariable Elektroenergietarife in der Kältetechnik (Martin Vesper, Yello S...
GTR Setup Guide by guestde4176
GTR Setup GuideGTR Setup Guide
GTR Setup Guide
guestde41761.1K views
Forschung ohne Patienten? Patientenperspektive zur Gründung der Deutschen CML... by jangeissler
Forschung ohne Patienten? Patientenperspektive zur Gründung der Deutschen CML...Forschung ohne Patienten? Patientenperspektive zur Gründung der Deutschen CML...
Forschung ohne Patienten? Patientenperspektive zur Gründung der Deutschen CML...
jangeissler1.9K views
Une revolution en_marche by desintocx
Une revolution en_marcheUne revolution en_marche
Une revolution en_marche
desintocx506 views
Universidad central del ecuador by crissvgm
Universidad central del ecuadorUniversidad central del ecuador
Universidad central del ecuador
crissvgm523 views
Ma ville .meknes by merico2
Ma ville   .meknesMa ville   .meknes
Ma ville .meknes
merico21.2K views
1 encountering by GilfordtL
1 encountering1 encountering
1 encountering
GilfordtL273 views
Les 10 facteurs qui poussent vos employés à démissionner by Drake International
Les 10 facteurs qui poussent vos employés à démissionnerLes 10 facteurs qui poussent vos employés à démissionner
Les 10 facteurs qui poussent vos employés à démissionner
Yunohost language by mermouy
Yunohost language  Yunohost language
Yunohost language
mermouy334 views
Travailler avec enfants_autistes by Marta Montoro
Travailler avec enfants_autistesTravailler avec enfants_autistes
Travailler avec enfants_autistes
Marta Montoro 608 views

Similar to Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)

Un site web responsive en une heure by
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heureRaphaël Goetter
44.8K views79 slides
Drupal & Mobilité by
Drupal & MobilitéDrupal & Mobilité
Drupal & MobilitéJean-Baptiste Guerraz
2.7K views53 slides
Les dernières avancées HTML5 & CSS3 en action ! by
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Microsoft Technet France
1.1K views39 slides
Les dernières avancées html5 & css3 en action ! by
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !davrous
1.7K views39 slides
L'histoire d'html5 pour les développeurs windows phone 8 by
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
1.2K views38 slides
DrupalCamp Paris 2013 : Sites mobiles avec Drupal by
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalActency
2.2K views49 slides

Similar to Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)(20)

Un site web responsive en une heure by Raphaël Goetter
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
Raphaël Goetter44.8K views
Les dernières avancées html5 & css3 en action ! by davrous
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
davrous1.7K views
L'histoire d'html5 pour les développeurs windows phone 8 by davrous
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous1.2K views
DrupalCamp Paris 2013 : Sites mobiles avec Drupal by Actency
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
Actency2.2K views
La mobilité dans Drupal by Adyax
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax4.2K views
Nouveautés html5 et css3 dans internet explorer 10 by davrous
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
davrous1.6K views
Web { Design Project } Management by David Roessli
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
David Roessli6.3K views
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013 by MBA Multimedia
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
MBA Multimedia1.4K views
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop by Frédéric Harper
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Frédéric Harper921 views
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013 by Julien LE THUAUT
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
Julien LE THUAUT785 views
HTML5mtl - 2012-02-22 - Responsive Web Design by Frédéric Harper
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
Frédéric Harper1.6K views
Cv dridi-lotfi by Lotfi Dridi
Cv dridi-lotfiCv dridi-lotfi
Cv dridi-lotfi
Lotfi Dridi2.3K views
RWD - Back to Basics par Ruben Pieraerts by La FeWeb
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
La FeWeb834 views
Responsive Web Design : back to basics by Alinoa
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
Alinoa2.3K views
HTML5... La révolution maintenant! by CARA_Lyon
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon985 views

More from Raphaël Goetter

10 Revelations sur le Web Mobile by
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web MobileRaphaël Goetter
15.5K views99 slides
Futur du-positionnement-css by
Futur du-positionnement-cssFutur du-positionnement-css
Futur du-positionnement-cssRaphaël Goetter
3.5K views45 slides
Le Futur du positionnement CSS by
Le Futur du positionnement CSSLe Futur du positionnement CSS
Le Futur du positionnement CSSRaphaël Goetter
3K views64 slides
Quiz finalistes by
Quiz finalistesQuiz finalistes
Quiz finalistesRaphaël Goetter
857 views13 slides
Quiz by
QuizQuiz
QuizRaphaël Goetter
1.1K views21 slides
Soyez revolutionnaire, utilisez CSS2 ! by
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Raphaël Goetter
2.8K views58 slides

More from Raphaël Goetter(10)

Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)

  • 1. Un site mobile en 1h ? O ! N Raphaël Goetter TOP CHRO Crédits : flickr.com/photos/st3f4n
  • 2. Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetter Un site mobile en une heure, top chrono !
  • 3. et aussi... Techniques CSS avancées Positionnement avancé (inline-block, modèle tabulaire, modèle de boîte flexible et autres positionnements CSS3) depu Gestion de projet is le 17 m (conventions, optimisation ars des performances, frameworks) HTML5, CSS3 Résolution de bogues Multimédia (web mobile, e-mailing, impression, projection,...) Un site mobile en une heure, top chrono !
  • 4. Au menu : Un site mobile en 1h ? Posons le décor et les contraintes iPhone : Maître du monde ? Tout est une question de taille ! CSS3 : et tout devient possible Atelier : barcamp-bordeaux.com mobile !
  • 5. Un site mobile c'est quoi ? Crédits : flickr.com/photos/bfishadow
  • 12. En une heure, vous avez dit ? Crédits : flickr.com/photos/st3f4n
  • 14. Applications natives Langages Java, Objective-C, C++ Sites web dédiés Nouvelle structure HTML, médias optimisés
  • 15. Applications natives Langages Java, Objective-C, C++ Sites web dédiés Nouvelle structure HTML, médias optimisés Adaptation de design existant Adapter aux mobiles grâce à CSS
  • 16. Iphone Maître du monde ? Crédits : flickr.com/photos/mastrobiggo
  • 20. Conclusion : Faire un design pour mobile... Ce n’est pas faire un site pour iPhone !
  • 21. Tout est une question de taille ! Crédits : .flickr.com/photos/st3f4n
  • 22. Un écran, plusieurs largeurs : Screen width Device width Viewport
  • 23. Viewport : « Surface virtuelle qu’un mobile accepte d’afficher par défaut à l’écran »
  • 24. La balise HTML Meta « Viewport » width=980 width=480 width=320
  • 25. Adapter le viewport à la largeur du terminal <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
  • 26. Adapter le viewport à la largeur du terminal Bingo !
  • 28. CSS3 : et tout devient possible Crédits : flickr.com/photos/udono
  • 29. Media Queries : « requête CSS3 permettant de cibler selon des conditions déterminées »
  • 30. Sans Media Queries (cible = tous écrans) : <link rel="stylesheet" <link rel="stylesheet" media="screen" media="screen" href="styles.css" href="styles.css" type="text/css" /> type="text/css" />
  • 31. Sans Media Queries (cible = tous écrans) : <link rel="stylesheet" media="screen" href="styles.css" type="text/css" /> Avec MQ (cible = écrans de moins de 640px) : <link rel="stylesheet" <link rel="stylesheet" media="screen and (max-width: 640px)" media="screen and (max-width: 640px)" href="mobile.css" href="mobile.css" type="text/css" /> type="text/css" />
  • 32. Au sein d'une feuille de style : @media (max-width:640px) { @media (max-width:640px) { body { width: auto; } body { width: auto; } } }
  • 33. Au sein d'une feuille de style : @media (max-width:640px) { body { width: auto; } } En pratique : body { background-color: black; } body { background-color: black; } @media (max-width:640px) { @media (max-width:640px) { body { background-color: red; } body { background-color: red; } } }
  • 34. Résultat : Écran de largeur supérieure à 640px Moins de 640px
  • 37.
  • 38. → Zoom nécessaire Textes lisibles Bugs d’affichage Tailles adaptées Navigation aveugle Navigation aisée
  • 39. Au programme : Viewport automatique Media Queries Largeurs fluides Gestion des débordements Adaptation des tailles de textes Suppression d’éléments inutiles
  • 41. Crédits Photos, illustrations : www.flickr.com Police : MegalopolisExtra by SMeltery Icones et pictos : www.iconfider.net Raphaël Goetter alsacreations.com @goetter
  • 42. Merci ! Raphaël Goetter alsacreations.com Crédits : flickr.com/photos/st3f4n