Think                            Mobile                            First                            Then                  ...
@karlpro   Karl Dubost           Opera Software           Developer Relations             Think Mobile First, Then Enhance...
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 faris thescreen?    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 orSemi-LiquidLayout     Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
www.                                                 m.   Think Mobile First, Then Enhance - Karl Dubost - http://my.opera...
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                                ...
mediaqueries    Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
mediaqueriesSee @ppkhttp://www.quirksmode.org/blog/archives/2010/09/combining_meta.htmlbody {// basic styles}@media all an...
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… againThink 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 ThinkThink 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
mediaqueriesSee @ppkhttp://www.quirksmode.org/blog/archives/2010/09/combining_meta.htmlbody {// basic styles}@media all an...
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 firsthow come thismore usableon desktop too           Think Mobile First, Then Enhance - Karl Dubost - http://...
Karl Dubost@karlpromy.opera.com/karlcowquestions?                Think Mobile First, Then Enhance - Karl Dubost - http://m...
Upcoming SlideShare
Loading in...5
×

Think Mobile First, Then Enhance

1,081
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,081
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Think Mobile First, Then Enhance

  1. 1. Think Mobile First Then EnhanceThink Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  2. 2. @karlpro Karl Dubost Opera Software Developer Relations Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  3. 3. Toys?Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  4. 4. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  5. 5. Mobile? Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  6. 6. Mobile? Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  7. 7. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  8. 8. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  9. 9. How faris thescreen? Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  10. 10. Screens… Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  11. 11. WAP, C-HTML, …Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  12. 12. Do Nothing Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  13. 13. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  14. 14. Liquid orSemi-LiquidLayout Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  15. 15. www. m. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  16. 16. User Agent Sniffing? Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  17. 17. User Agent Sniffing! Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  18. 18. User Agents… Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  19. 19. Cookies… if not then Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  20. 20. HTML Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  21. 21. viewport Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  22. 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. 23. mediaqueries Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  24. 24. mediaqueriesSee @ppkhttp://www.quirksmode.org/blog/archives/2010/09/combining_meta.htmlbody {// 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. 25. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  26. 26. user experience Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  27. 27. Mobile strategy… mess. Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  28. 28. Logs & Market Share Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  29. 29. Ouch! Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  30. 30. User agent… againThink Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  31. 31. Meh… Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  32. 32. Time To ThinkThink Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  33. 33. Simplicity, Basics, Users Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  34. 34. mediaqueriesSee @ppkhttp://www.quirksmode.org/blog/archives/2010/09/combining_meta.htmlbody {// 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. 35. Tools & Techniques Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  36. 36. Co-hosted files Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  37. 37. Sprites Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  38. 38. gzip Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  39. 39. remote debugging Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  40. 40. Opera Dragonfly Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  41. 41. love hate Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  42. 42. Understand Users Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  43. 43. Think mobile firsthow come thismore usableon desktop too Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  44. 44. Karl Dubost@karlpromy.opera.com/karlcowquestions? Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×