mobile first
?
6 likes?3,139 views
This document discusses the concept of "mobile first" web design. It notes that mobile usage is growing rapidly, surpassing desktop in some countries. It also discusses how the constraints of mobile devices require designing first for mobile, with responsive frameworks to adapt sites for different screens. Key aspects are screen size, speed, touch interfaces, and using minimum code for cross-platform compatibility. The document advocates shifting to a mobile-first mindset when designing sites and applications.
Convert to study guideBETA
Transform any presentation into a summarized study guide, highlighting the most important points and key insights.
mobile first
- 1. mobile first Web Koji Ishimoto 2011.06.04 2011 UPGRADE JAPAN!!
- 3. Web Designer
- 5. Web Designer t32k.me/mol @t32k
- 6. Web Designer t32k.me/mol @t32k kanazawa.js
- 8. shift
- 9. shift growth
- 12. shift growth constraints capabilities 日 conclusion
- 13. What is mobile ?rst?
- 14. Luke Wroblewski
- 15. “ 方”
- 16. desktop
- 17. desktop
- 18. desktop mobile
- 19. mobile desktop
- 20. State of the mobile world
- 21. 5.3 Billion The World in 2010: ICT Facts and Figures
- 22. 25% of US is Mobile-Only 5.3 Billion The World in 2010: ICT Facts and Figures
- 23. 22.7% 8,550,000 Smartphone in Japan 37,640,000 ? ? ?
- 24. BlackBerry Windows Phone iOS 37 % .8 Android 57 % .4 ? ? ?
- 25. 476 % increase 7% 4,000,000 5% 3,000,000 4% 2,000,000 2% 1,000,000 0% 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
- 26. Designing for a mobile world
- 27. Screen Size
- 28. Speed
- 29. Touch
- 30. context 音 ? ? 音 ? ? ?? ? 文 文 ? ?
- 32. site goal recruitment ? 人 用 行 ? ? ? ?
- 33. 4,000 3,000 2,000 1,000 0 2010/1 2 3 4 5 6 7 8 9 10 11 12 2010/01-2010/12 DMM.com Labo Sessions
- 34. context New Graduates
- 35. Search Sign In Search Sign In Search Sign In Search Sign In Search Sign In 用
- 36. Search Sign In Search Sign In Search Sign In modify delete 革 Search Sign In Search Sign In 用
- 37. *mock-up
- 38. *mock-up
- 39. *mock-up
- 41. Coding for a mobile world
- 42. minimum responsive 用 framework
- 43. various platforms Flow
- 45. mobile apps: framework titanium mobile
- 46. Conclusion
- 48. 方 shift thinking
- 49. 方 shift thinking think context
- 50. 方 shift thinking think context use framework
- 51. Thank you!
- 52. information
- 53. 2011.06.18
- 55. see also ? Web | | ? allWeb : ? Web : could ? : could ? Web 1 | ? LukeW | Mobile First ? The State of (Mobile) Web Development 2011 | Web Directions
- 56. photo credit http://www.?ickr.com/photos/desiitaly/2286214012/ http://www.?ickr.com/photos/pete-karl/4637024524/ http://www.?ickr.com/photos/philscoville/400702638/ http://www.?ickr.com/photos/jking89/3291408977/ http://www.?ickr.com/photos/jorgecorrea/4359779134/ http://www.?ickr.com/photos/quacktaculous/2880445737/ http://www.?ickr.com/photos/nikio/3899114449/ http://www.?ickr.com/photos/freewine/3484000491/ http://www.?ickr.com/photos/tkgib58/4852316183/ http://www.?ickr.com/photos/tinkerszone/4233987708/ http://www.?ickr.com/photos/jennycu/5666833642/ http://www.?ickr.com/photos/andrec/4045953008/ http://www.?ickr.com/photos/55873579@N00/5398230281/ http://www.?ickr.com/photos/eyeliam/2255467740/
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: ADOBE GOOGLE FACEBOOK\n制約があるからこそコンテンツ自体に眼を向けることができ\n結果、デスクトップサイトの質も上がる\n
- #22: \n
- #23: \n
- #24: 総出荷台数は前年比9.3％増の3,764万台となった。\n2010年度通期のスマートフォン出荷台数は855万台で前年比約3.7倍に拡大し、総出荷台数の22.7％を占める結果となった。\n
- #25: \n
- #26: 1.3 -> 6.3\n38man -> 320man\n\n5000万セッション \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: 文脈を理解したデザインが求められている\n
- #32: \n
- #33: \n
- #34: 1.3 -> 6.3\n38man -> 320man\n\n5000万セッション \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n