SlideShare une entreprise Scribd logo
1  sur  44
Télécharger pour lire hors ligne
Think
                            Mobile
                            First
                            Then
                            Enhance
Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
@karlpro   Karl Dubost
           Opera Software
           Developer Relations




             Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Toys?




Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Mobile?




      Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Mobile?




      Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
How far
is the
screen?




    Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Screens…




           Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
WAP, C-HTML, …




Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Do Nothing




             Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Liquid or
Semi-Liquid
Layout




     Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
www.                                                 m.




   Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
User Agent Sniffing?




            Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
User Agent Sniffing!




 Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
User Agents…




          Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Cookies… if not then




     Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
HTML




       Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
viewport




           Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
viewport


  <meta name="viewport" content="wi




                                   See @goetter
                                   http://slidesha.re/ew4LVM

             Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
media
queries




    Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
mediaqueries
See @ppk
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html



body {// basic styles}

@media all and (max-width: 600px) {
  body {// extra styles for mobile}}




                           Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
user experience




            Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Mobile strategy… mess.




           Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Logs & Market Share




            Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Ouch!




        Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
User agent… again




Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Meh…




       Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Time To Think




Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Simplicity, Basics, Users




         Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
mediaqueries
See @ppk
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html



body {// basic styles}

@media all and (max-width: 600px) {
  body {// extra styles for mobile}}

@media all and (min-width: 600px) {
  body {// extra styles for desktop}}




                           Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Tools & Techniques




            Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Co-hosted files




           Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Sprites




          Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
gzip




       Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
remote debugging




           Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Opera Dragonfly




           Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
love hate




            Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Understand Users




           Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Think mobile first

how come this
more usable
on desktop too



           Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
Karl Dubost
@karlpro
my.opera.com/karlcow


questions?




                Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Contenu connexe

Plus de ConFoo

The business behind open source
The business behind open sourceThe business behind open source
The business behind open sourceConFoo
 
Security 202 - Are you sure your site is secure?
Security 202 - Are you sure your site is secure?Security 202 - Are you sure your site is secure?
Security 202 - Are you sure your site is secure?ConFoo
 
OWASP Enterprise Security API
OWASP Enterprise Security APIOWASP Enterprise Security API
OWASP Enterprise Security APIConFoo
 
Opensource Authentication and Authorization
Opensource Authentication and AuthorizationOpensource Authentication and Authorization
Opensource Authentication and AuthorizationConFoo
 
Introduction à la sécurité des WebServices
Introduction à la sécurité des WebServicesIntroduction à la sécurité des WebServices
Introduction à la sécurité des WebServicesConFoo
 
Le bon, la brute et le truand dans les nuages
Le bon, la brute et le truand dans les nuagesLe bon, la brute et le truand dans les nuages
Le bon, la brute et le truand dans les nuagesConFoo
 
The Solar Framework for PHP
The Solar Framework for PHPThe Solar Framework for PHP
The Solar Framework for PHPConFoo
 
Décrire un projet PHP dans des rapports
Décrire un projet PHP dans des rapportsDécrire un projet PHP dans des rapports
Décrire un projet PHP dans des rapportsConFoo
 
Server Administration in Python with Fabric, Cuisine and Watchdog
Server Administration in Python with Fabric, Cuisine and WatchdogServer Administration in Python with Fabric, Cuisine and Watchdog
Server Administration in Python with Fabric, Cuisine and WatchdogConFoo
 
Marrow: A Meta-Framework for Python 2.6+ and 3.1+
Marrow: A Meta-Framework for Python 2.6+ and 3.1+Marrow: A Meta-Framework for Python 2.6+ and 3.1+
Marrow: A Meta-Framework for Python 2.6+ and 3.1+ConFoo
 
Metaprogramming in Ruby
Metaprogramming in RubyMetaprogramming in Ruby
Metaprogramming in RubyConFoo
 
Scalable Architecture 101
Scalable Architecture 101Scalable Architecture 101
Scalable Architecture 101ConFoo
 
As-t-on encore besoin d'un framework web ?
As-t-on encore besoin d'un framework web ?As-t-on encore besoin d'un framework web ?
As-t-on encore besoin d'un framework web ?ConFoo
 
Pragmatic Guide to Git
Pragmatic Guide to GitPragmatic Guide to Git
Pragmatic Guide to GitConFoo
 
Building servers with Node.js
Building servers with Node.jsBuilding servers with Node.js
Building servers with Node.jsConFoo
 
An Overview of Flash Storage for Databases
An Overview of Flash Storage for DatabasesAn Overview of Flash Storage for Databases
An Overview of Flash Storage for DatabasesConFoo
 
Android Jump Start
Android Jump StartAndroid Jump Start
Android Jump StartConFoo
 
Develop mobile applications with Flex
Develop mobile applications with FlexDevelop mobile applications with Flex
Develop mobile applications with FlexConFoo
 
WordPress pour le développement d'aplications web
WordPress pour le développement d'aplications webWordPress pour le développement d'aplications web
WordPress pour le développement d'aplications webConFoo
 
Graphs, Edges & Nodes: Untangling the Social Web
Graphs, Edges & Nodes: Untangling the Social WebGraphs, Edges & Nodes: Untangling the Social Web
Graphs, Edges & Nodes: Untangling the Social WebConFoo
 

Plus de ConFoo (20)

The business behind open source
The business behind open sourceThe business behind open source
The business behind open source
 
Security 202 - Are you sure your site is secure?
Security 202 - Are you sure your site is secure?Security 202 - Are you sure your site is secure?
Security 202 - Are you sure your site is secure?
 
OWASP Enterprise Security API
OWASP Enterprise Security APIOWASP Enterprise Security API
OWASP Enterprise Security API
 
Opensource Authentication and Authorization
Opensource Authentication and AuthorizationOpensource Authentication and Authorization
Opensource Authentication and Authorization
 
Introduction à la sécurité des WebServices
Introduction à la sécurité des WebServicesIntroduction à la sécurité des WebServices
Introduction à la sécurité des WebServices
 
Le bon, la brute et le truand dans les nuages
Le bon, la brute et le truand dans les nuagesLe bon, la brute et le truand dans les nuages
Le bon, la brute et le truand dans les nuages
 
The Solar Framework for PHP
The Solar Framework for PHPThe Solar Framework for PHP
The Solar Framework for PHP
 
Décrire un projet PHP dans des rapports
Décrire un projet PHP dans des rapportsDécrire un projet PHP dans des rapports
Décrire un projet PHP dans des rapports
 
Server Administration in Python with Fabric, Cuisine and Watchdog
Server Administration in Python with Fabric, Cuisine and WatchdogServer Administration in Python with Fabric, Cuisine and Watchdog
Server Administration in Python with Fabric, Cuisine and Watchdog
 
Marrow: A Meta-Framework for Python 2.6+ and 3.1+
Marrow: A Meta-Framework for Python 2.6+ and 3.1+Marrow: A Meta-Framework for Python 2.6+ and 3.1+
Marrow: A Meta-Framework for Python 2.6+ and 3.1+
 
Metaprogramming in Ruby
Metaprogramming in RubyMetaprogramming in Ruby
Metaprogramming in Ruby
 
Scalable Architecture 101
Scalable Architecture 101Scalable Architecture 101
Scalable Architecture 101
 
As-t-on encore besoin d'un framework web ?
As-t-on encore besoin d'un framework web ?As-t-on encore besoin d'un framework web ?
As-t-on encore besoin d'un framework web ?
 
Pragmatic Guide to Git
Pragmatic Guide to GitPragmatic Guide to Git
Pragmatic Guide to Git
 
Building servers with Node.js
Building servers with Node.jsBuilding servers with Node.js
Building servers with Node.js
 
An Overview of Flash Storage for Databases
An Overview of Flash Storage for DatabasesAn Overview of Flash Storage for Databases
An Overview of Flash Storage for Databases
 
Android Jump Start
Android Jump StartAndroid Jump Start
Android Jump Start
 
Develop mobile applications with Flex
Develop mobile applications with FlexDevelop mobile applications with Flex
Develop mobile applications with Flex
 
WordPress pour le développement d'aplications web
WordPress pour le développement d'aplications webWordPress pour le développement d'aplications web
WordPress pour le développement d'aplications web
 
Graphs, Edges & Nodes: Untangling the Social Web
Graphs, Edges & Nodes: Untangling the Social WebGraphs, Edges & Nodes: Untangling the Social Web
Graphs, Edges & Nodes: Untangling the Social Web
 

Dernier

Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 

Dernier (20)

Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 

Think Mobile First, Then Enhance

  • 1. Think Mobile First Then Enhance Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 2. @karlpro Karl Dubost Opera Software Developer Relations Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 3. Toys? Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 4. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 5. Mobile? Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 6. Mobile? Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 7. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 8. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 9. How far is the screen? Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 10. Screens… Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 11. WAP, C-HTML, … Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 12. Do Nothing Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 13. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 14. Liquid or Semi-Liquid Layout Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 15. www. m. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 16. User Agent Sniffing? Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 17. User Agent Sniffing! Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 18. User Agents… Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 19. Cookies… if not then Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 20. HTML Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 21. viewport Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 22. viewport <meta name="viewport" content="wi See @goetter http://slidesha.re/ew4LVM Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 23. media queries Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 24. mediaqueries See @ppk http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html body {// basic styles} @media all and (max-width: 600px) { body {// extra styles for mobile}} Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 25. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 26. user experience Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 27. Mobile strategy… mess. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 28. Logs & Market Share Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 29. Ouch! Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 30. User agent… again Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 31. Meh… Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 32. Time To Think Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 33. Simplicity, Basics, Users Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 34. mediaqueries See @ppk http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html body {// basic styles} @media all and (max-width: 600px) { body {// extra styles for mobile}} @media all and (min-width: 600px) { body {// extra styles for desktop}} Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 35. Tools & Techniques Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 36. Co-hosted files Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 37. Sprites Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 38. gzip Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 39. remote debugging Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 40. Opera Dragonfly Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 41. love hate Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 42. Understand Users Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 43. Think mobile first how come this more usable on desktop too Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  • 44. Karl Dubost @karlpro my.opera.com/karlcow questions? Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow