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