SlideShare une entreprise Scribd logo
1  sur  42
Télécharger pour lire hors ligne
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
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
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

Contenu connexe

Tendances

Vive les tableaux de mise en page !
Vive les tableaux de mise en page !Vive les tableaux de mise en page !
Vive les tableaux de mise en page !Raphaël Goetter
 
Mieux travailler le css avec sass:compass
Mieux travailler le css avec sass:compassMieux travailler le css avec sass:compass
Mieux travailler le css avec sass:compassGuy Verville
 
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)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)Khaled Djebloun
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
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
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 
ENIB 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 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 JSHoracio Gonzalez
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebYoann Gotthilf
 
Le graphisme d'un site internet !
Le graphisme d'un site internet !Le graphisme d'un site internet !
Le graphisme d'un site internet !elaugier
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
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 niveauxFrédéric Harper
 
Conception de thèmes WordPress : construire et optimiser son espace de travail
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 travailFrédérique Game
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du FrontYannick Croissant
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPressChi Nacim
 
Scraper avec excel et google spreadsheet - google black day
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 dayMadeline Pinthon
 

Tendances (20)

Vive les tableaux de mise en page !
Vive les tableaux de mise en page !Vive les tableaux de mise en page !
Vive les tableaux de mise en page !
 
Mieux travailler le css avec sass:compass
Mieux travailler le css avec sass:compassMieux travailler le css avec sass:compass
Mieux travailler le css avec sass:compass
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
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)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
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
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
ENIB 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 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
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Html
HtmlHtml
Html
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
SASS
SASSSASS
SASS
 
Le graphisme d'un site internet !
Le graphisme d'un site internet !Le graphisme d'un site internet !
Le graphisme d'un site internet !
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
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
 
Conception de thèmes WordPress : construire et optimiser son espace de travail
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
 
CSS 3
CSS 3CSS 3
CSS 3
 
WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
 
Scraper avec excel et google spreadsheet - google black day
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
 

En vedette

Présentation ma ville_changsha
Présentation ma ville_changshaPrésentation ma ville_changsha
Présentation ma ville_changshafangqiong319
 
Manipulation Circuits Logiques : Manipulation n 2
Manipulation Circuits Logiques : Manipulation n 2Manipulation Circuits Logiques : Manipulation n 2
Manipulation Circuits Logiques : Manipulation n 2Mohamed Khalfaoui
 
Bremen sommer universität-2010-partizipativedidaktik20
Bremen sommer universität-2010-partizipativedidaktik20Bremen sommer universität-2010-partizipativedidaktik20
Bremen sommer universität-2010-partizipativedidaktik20Karsten D. Wolf
 
Chancen Fallstricke E Assessment
Chancen Fallstricke E AssessmentChancen Fallstricke E Assessment
Chancen Fallstricke E AssessmentKarsten D. Wolf
 
Komponenten-basierender Review-Prozess - Toni Breitschmid
Komponenten-basierender Review-Prozess - Toni BreitschmidKomponenten-basierender Review-Prozess - Toni Breitschmid
Komponenten-basierender Review-Prozess - Toni Breitschmidtecom
 
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...
Lastvariable Elektroenergietarife in der Kältetechnik (Martin Vesper, Yello S...co2online gem. GmbH
 
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...
Forschung ohne Patienten? Patientenperspektive zur Gründung der Deutschen CML...jangeissler
 
Une revolution en_marche
Une revolution en_marcheUne revolution en_marche
Une revolution en_marchedesintocx
 
Universidad central del ecuador
Universidad central del ecuadorUniversidad central del ecuador
Universidad central del ecuadorcrissvgm
 
Ma ville .meknes
Ma ville   .meknesMa ville   .meknes
Ma ville .meknesmerico2
 
1 encountering
1 encountering1 encountering
1 encounteringGilfordtL
 
Les 10 facteurs qui poussent vos employés à démissionner
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émissionnerDrake International
 
Yunohost language
Yunohost language  Yunohost language
Yunohost language mermouy
 
Travailler avec enfants_autistes
Travailler avec enfants_autistesTravailler avec enfants_autistes
Travailler avec enfants_autistesMarta Montoro
 

En vedette (20)

Présentation ma ville_changsha
Présentation ma ville_changshaPrésentation ma ville_changsha
Présentation ma ville_changsha
 
Manipulation Circuits Logiques : Manipulation n 2
Manipulation Circuits Logiques : Manipulation n 2Manipulation Circuits Logiques : Manipulation n 2
Manipulation Circuits Logiques : Manipulation n 2
 
Bremen sommer universität-2010-partizipativedidaktik20
Bremen sommer universität-2010-partizipativedidaktik20Bremen sommer universität-2010-partizipativedidaktik20
Bremen sommer universität-2010-partizipativedidaktik20
 
Chancen Fallstricke E Assessment
Chancen Fallstricke E AssessmentChancen Fallstricke E Assessment
Chancen Fallstricke E Assessment
 
Komponenten-basierender Review-Prozess - Toni Breitschmid
Komponenten-basierender Review-Prozess - Toni BreitschmidKomponenten-basierender Review-Prozess - Toni Breitschmid
Komponenten-basierender Review-Prozess - Toni Breitschmid
 
__made by men for women.ppt_2011
  __made by men for women.ppt_2011  __made by men for women.ppt_2011
__made by men for women.ppt_2011
 
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...
Lastvariable Elektroenergietarife in der Kältetechnik (Martin Vesper, Yello S...
 
GTR Setup Guide
GTR Setup GuideGTR Setup Guide
GTR Setup Guide
 
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...
Forschung ohne Patienten? Patientenperspektive zur Gründung der Deutschen CML...
 
Patient 1
Patient 1Patient 1
Patient 1
 
Une revolution en_marche
Une revolution en_marcheUne revolution en_marche
Une revolution en_marche
 
Universidad central del ecuador
Universidad central del ecuadorUniversidad central del ecuador
Universidad central del ecuador
 
byMii
byMiibyMii
byMii
 
Ma ville .meknes
Ma ville   .meknesMa ville   .meknes
Ma ville .meknes
 
Catalog Vaze Degardo
Catalog Vaze DegardoCatalog Vaze Degardo
Catalog Vaze Degardo
 
1 encountering
1 encountering1 encountering
1 encountering
 
Les 10 facteurs qui poussent vos employés à démissionner
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
 
Juristische gutachten #1
Juristische gutachten #1Juristische gutachten #1
Juristische gutachten #1
 
Yunohost language
Yunohost language  Yunohost language
Yunohost language
 
Travailler avec enfants_autistes
Travailler avec enfants_autistesTravailler avec enfants_autistes
Travailler avec enfants_autistes
 

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

Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heureRaphaël Goetter
 
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 !
Les dernières avancées HTML5 & CSS3 en action !Microsoft Technet France
 
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 !
Les dernières avancées html5 & css3 en action !davrous
 
L'histoire d'html5 pour les développeurs windows phone 8
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
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalActency
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans DrupalAdyax
 
Nouveautés html5 et css3 dans internet explorer 10
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 10davrous
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } ManagementDavid Roessli
 
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013MBA Multimedia
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
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 workshopFrédéric Harper
 
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013Julien LE THUAUT
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignFrédéric Harper
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsLa FeWeb
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basicsAlinoa
 
Développement d'interfaces web
Développement d'interfaces webDéveloppement d'interfaces web
Développement d'interfaces webDavid Desrousseaux
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 

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

Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
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 !
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 !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
L'histoire d'html5 pour les développeurs windows phone 8
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
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
Nouveautés html5 et css3 dans internet explorer 10
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
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
 
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
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
 
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
 
Cv dridi-lotfi
Cv dridi-lotfiCv dridi-lotfi
Cv dridi-lotfi
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Développement d'interfaces web
Développement d'interfaces webDéveloppement d'interfaces web
Développement d'interfaces web
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 

Plus de Raphaël Goetter

10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web MobileRaphaël Goetter
 
Futur du-positionnement-css
Futur du-positionnement-cssFutur du-positionnement-css
Futur du-positionnement-cssRaphaël Goetter
 
Le Futur du positionnement CSS
Le Futur du positionnement CSSLe Futur du positionnement CSS
Le Futur du positionnement CSSRaphaël Goetter
 
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Raphaël Goetter
 
Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Raphaël Goetter
 
Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)Raphaël Goetter
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Raphaël Goetter
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Raphaël Goetter
 

Plus de Raphaël Goetter (10)

10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
 
Futur du-positionnement-css
Futur du-positionnement-cssFutur du-positionnement-css
Futur du-positionnement-css
 
Le Futur du positionnement CSS
Le Futur du positionnement CSSLe Futur du positionnement CSS
Le Futur du positionnement CSS
 
Quiz finalistes
Quiz finalistesQuiz finalistes
Quiz finalistes
 
Quiz
QuizQuiz
Quiz
 
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
 
Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011
 
Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
 

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
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 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
  • 17.
  • 18.
  • 19.
  • 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