mobile first           Web                         Koji Ishimoto 2011.06.042011 UPGRADE JAPAN!!
Web Designer
Web Designert32k.me/mol
Web Designert32k.me/mol   @t32k
Web Designert32k.me/mol   @t32kkanazawa.js
NyarsiPhone App
shift
shiftgrowth
shiftgrowthconstraints
shiftgrowthconstraintscapabilities
shift    growth    constraints    capabilities日   conclusion
What is mobile first?
Luke Wroblewski
“    方”
desktop
desktop
desktop   mobile
mobile   desktop
State of the mobile world
5.3 Billion      The World in 2010: ICT Facts and Figures
25% of US is Mobile-Only5.3 Billion       The World in 2010: ICT Facts and Figures
22.7%8,550,000Smartphone in Japan              37,640,000                     
BlackBerry      Windows PhoneiOS37 %  .8                          Android                          57 %                   ...
476 % increase7%                                                                            4,000,0005%                   ...
Designing for a mobile world
Screen Size
Speed
Touch
context    音           音       ά       ˈɔ  文                 文                             
site goal            recruitment                 人   用   行              
4,0003,0002,0001,000   0        2010/1 2   3    4     5     6     7    8     9     10   11   12                   2010/01-...
context    New Graduates
Search                      Sign In       Search                      Sign InSearch            Sign In   Search           ...
Search   Sign In       Search              Sign In             Search                               Sign In               ...
*mock-up
*mock-up
*mock-up
Coding for a mobile world
minimum    responsive用   framework
various platforms     Flow
mobile sites: framework
mobile apps: framework                         titanium mobile
Conclusion
方   shift thinking
方   shift thinking    think context
方   shift thinking    think context    use    framework
Thank you!
information
2011.06.18
kanazawa.js v1.52011.07.23
see also •                        Web                             |         | • allWeb                         : •        ...
photo credit http://www.flickr.com/photos/desiitaly/2286214012/ http://www.flickr.com/photos/pete-karl/4637024524/ http://ww...
mobile first
mobile first
mobile first
mobile first
Upcoming SlideShare
Loading in...5
×

mobile first

1,484

Published on

Published in: Design
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,484
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ADOBE GOOGLE FACEBOOK\n制約があるからこそコンテンツ自体に眼を向けることができ\n結果、デスクトップサイトの質も上がる\n
  • \n
  • \n
  • 総出荷台数は前年比9.3%増の3,764万台となった。\n2010年度通期のスマートフォン出荷台数は855万台で前年比約3.7倍に拡大し、総出荷台数の22.7%を占める結果となった。\n
  • \n
  • 1.3 -> 6.3\n38man -> 320man\n\n5000万セッション \n
  • \n
  • \n
  • \n
  • \n
  • 文脈を理解したデザインが求められている\n
  • \n
  • \n
  • 1.3 -> 6.3\n38man -> 320man\n\n5000万セッション \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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/

    ×