Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

mobile first

2,959 views

Published on

Published in: Design

mobile first

  1. 1. mobile first Web Koji Ishimoto 2011.06.042011 UPGRADE JAPAN!!
  2. 2. Web Designer
  3. 3. Web Designert32k.me/mol
  4. 4. Web Designert32k.me/mol @t32k
  5. 5. Web Designert32k.me/mol @t32kkanazawa.js
  6. 6. NyarsiPhone App
  7. 7. shift
  8. 8. shiftgrowth
  9. 9. shiftgrowthconstraints
  10. 10. shiftgrowthconstraintscapabilities
  11. 11. shift growth constraints capabilities日 conclusion
  12. 12. What is mobile first?
  13. 13. Luke Wroblewski
  14. 14. “ 方”
  15. 15. desktop
  16. 16. desktop
  17. 17. desktop mobile
  18. 18. mobile desktop
  19. 19. State of the mobile world
  20. 20. 5.3 Billion The World in 2010: ICT Facts and Figures
  21. 21. 25% of US is Mobile-Only5.3 Billion The World in 2010: ICT Facts and Figures
  22. 22. 22.7%8,550,000Smartphone in Japan 37,640,000      
  23. 23. BlackBerry Windows PhoneiOS37 % .8 Android 57 % .4      
  24. 24. 476 % increase7% 4,000,0005% 3,000,0004% 2,000,0002% 1,000,0000% 0 2010/5 6 7 8 9 10 11 12 2011/1 2 3 4 2010/05-2011/04 DMM.com Smartphone(iPhone/Android/BlackBerry) Sessions
  25. 25. Designing for a mobile world
  26. 26. Screen Size
  27. 27. Speed
  28. 28. Touch
  29. 29. context 音     音   ά ˈɔ  文 文   
  30. 30. site goal recruitment   人 用 行        
  31. 31. 4,0003,0002,0001,000 0 2010/1 2 3 4 5 6 7 8 9 10 11 12 2010/01-2010/12 DMM.com Labo Sessions
  32. 32. context New Graduates
  33. 33. Search Sign In Search Sign InSearch Sign In Search Sign In Search Sign In 用
  34. 34. Search Sign In Search Sign In Search Sign In modify delete 革 Search Sign In Search Sign In 用
  35. 35. *mock-up
  36. 36. *mock-up
  37. 37. *mock-up
  38. 38. Coding for a mobile world
  39. 39. minimum responsive用 framework
  40. 40. various platforms Flow
  41. 41. mobile sites: framework
  42. 42. mobile apps: framework titanium mobile
  43. 43. Conclusion
  44. 44. 方 shift thinking
  45. 45. 方 shift thinking think context
  46. 46. 方 shift thinking think context use framework
  47. 47. Thank you!
  48. 48. information
  49. 49. 2011.06.18
  50. 50. kanazawa.js v1.52011.07.23
  51. 51. see also • Web | | • allWeb : • Web : could • : could • Web 1 | • LukeW | Mobile First • The State of (Mobile) Web Development 2011 | Web Directions
  52. 52. photo credit http://www.flickr.com/photos/desiitaly/2286214012/ http://www.flickr.com/photos/pete-karl/4637024524/ http://www.flickr.com/photos/philscoville/400702638/ http://www.flickr.com/photos/jking89/3291408977/ http://www.flickr.com/photos/jorgecorrea/4359779134/ http://www.flickr.com/photos/quacktaculous/2880445737/ http://www.flickr.com/photos/nikio/3899114449/ http://www.flickr.com/photos/freewine/3484000491/ http://www.flickr.com/photos/tkgib58/4852316183/ http://www.flickr.com/photos/tinkerszone/4233987708/ http://www.flickr.com/photos/jennycu/5666833642/ http://www.flickr.com/photos/andrec/4045953008/ http://www.flickr.com/photos/55873579@N00/5398230281/ http://www.flickr.com/photos/eyeliam/2255467740/

×