The document discusses the importance of designing websites with mobile users in mind first before enhancing the experience for desktop users. It recommends starting with a fluid or semi-fluid layout, using responsive design techniques like viewports and media queries to customize styles for different screen sizes, keeping file sizes small with techniques like image sprites and gzip compression, and testing on actual mobile devices using tools like Opera Dragonfly. The overall message is to prioritize simplicity, usability and the mobile experience early in the design process.

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