Smart First, Phones Later (V2 extended)

Smart First, Phones Later (V2 extended)

An extended version of the talk, given at the following conferences
May 16 2015 #WCUC15, Riga, Latvia
June 4 2015 #FILIVE, Las Vegas, USA

Edec1d92a12c318ecfe087532c84be24?s=128

Tin Kadoic

May 16, 2015
Tweet

Transcript

  1. @tinkadoic #smartfirst Jun 4 2015 #FILIVE smart first,
 phones later

    Taking Responsive a Step Further
  2. @tinkadoic #smartfirst Jun 4 2015 #FILIVE smart first,
 phones later

    Taking Responsive a Step Further
  3. @tinkadoic @fivenyc

  4. None
  5. None
  6. http://www.lukew.com/ff/entry.asp?1943

  7. None
  8. @tinkadoic #smartfirst r rozo romeo

  9. @tinkadoic #smartfirst Please, can the application do the hard work,

    so I don't have to.
  10. @tinkadoic #smartfirst responsive /1

  11. @tinkadoic #smartfirst 1,25 M 1,000 M 750 M 500 M

    250 M 0 1995 1999 2003 2007 2011 Smartphones & Tablets PCs
  12. @tinkadoic #smartfirst from desktop to mobile LukeW

  13. f-st.co/TbPSuLr

  14. @tinkadoic #smartfirst .lasvegas { float: left; margin-left: -17.0886076%; width: 14.556962%;

    }
  15. @tinkadoic #smartfirst responsive web design rwd = crafting sites to

    provide an optimal viewing experience 1. A flexible, grid-based layout 2. Flexible images and media 3. Media queries
  16. None
  17. screen size

  18. The web is 95% typography.

  19. @tinkadoic #smartfirst http://viljamis.com/blog/2012/typography/

  20. @tinkadoic #smartfirst

  21. @tinkadoic #smartfirst Century Expanded

  22. @tinkadoic #smartfirst iA Writer

  23. @tinkadoic #smartfirst http://webdesign.maratz.com/lab/responsivetypography/

  24. @tinkadoic #smartfirst

  25. @tinkadoic #smartfirst

  26. @tinkadoic #smartfirst http://www.staggeringbeauty.com/

  27. @tinkadoic #smartfirst The Rain Room

  28. School of Design Zagreb

  29. None
  30. None
  31. None
  32. None
  33. None
  34. @tinkadoic #smartfirst beyond rwd

  35. Designing responsive experiences rather than responsive sites, apps, software.

  36. @tinkadoic #smartfirst scenarios /2

  37. context location user needs history user patterns ecosystem brand people

    hardware time screen size body feelings content trends
  38. @tinkadoic #smartfirst 1 Responsive to location

  39. None
  40. None
  41. None
  42. None
  43. None
  44. @tinkadoic #smartfirst if !airplaneMode { showStandupReminder(); }

  45. @tinkadoic #smartfirst 2 Responsive to user needs

  46. Foursquare

  47. @tinkadoic #smartfirst The data is already there.

  48. Density

  49. Product Hunt

  50. Timeful

  51. None
  52. None
  53. @tinkadoic #smartfirst 3 Responsive to context

  54. None
  55. None
  56. Google Now

  57. 1 2 3

  58. Now on Tap

  59. @tinkadoic #smartfirst 4 Responsive to history

  60. Runkeeper

  61. @tinkadoic #smartfirst 5 Responsive to people

  62. Nuzzel

  63. None
  64. @tinkadoic #smartfirst 6 Responsive to ecosystem

  65. Gmail

  66. None
  67. None
  68. @tinkadoic #smartfirst 7 Responsive to user pattern

  69. iTunes

  70. Foursquare

  71. Croatia @tinkadoic Meaning full comment @tinkadoic location Meaning full comment

    @tinkadoic Existing Proposed Periscope
  72. DO by IFTTT

  73. @tinkadoic #smartfirst 8 Responsive to hardware

  74. Ministry of Sound

  75. None
  76. @tinkadoic #smartfirst Amazon Dash

  77. Bret Victor

  78. @tinkadoic #smartfirst 9 Responsive to brand

  79. Timehop

  80. Sleepbot

  81. @tinkadoic #smartfirst 10 Responsive to time

  82. e.flux

  83. @tinkadoic #smartfirst 11 Responsive to emotion

  84. VS positive negative

  85. Swarm

  86. Citymapper

  87. @tinkadoic #smartfirst 12 Responsive to body

  88. None
  89. Hangry

  90. None
  91. @tinkadoic #smartfirst 13 Responsive to content

  92. Luka

  93. Biophilia / Polyfauna

  94. @tinkadoic #smartfirst 14 Responsive to trends

  95. None
  96. None
  97. None
  98. Yo B*****

  99. context location user needs history user patterns ecosystem brand people

    hardware time screen size body feelings content trends
  100. @tinkadoic #smartfirst ixd laws /3

  101. The Three Laws Of Robotics IxD

  102. @tinkadoic #smartfirst harm your work waste your time be humane

    /1 /2 /3
  103. @tinkadoic #smartfirst conclusion /5

  104. @tinkadoic #smartfirst Polite software has common sense. Polite software is

    responsive.
  105. momify the interface

  106. @tinkadoic #smartfirst responsive = Intelligent?

  107. @tinkadoic #smartfirst In a mobile-first world,
 can we finally start

    designing smart first and phones later?
  108. @tinkadoic #smartfirst highfive http://bit.ly/smartfirst-v2

  109. @tinkadoic #smartfirst Resources — http://uxdiogenes.com/blog/the-three-laws-of-interaction-design — http://www.amazon.com/gp/product/0201379376 — http://wwword.com/2387/style/on-design/ways-of-seeing/ —

    https://developers.google.com/webmasters/mobile-sites/get-started/ — http://czechandslovakpavilion.cz/ — http://www.trypap.com/ — http://webdesign.maratz.com/lab/responsivetypography/realtime/ — http://alistapart.com/column/font-hinting-and-the-future-of-responsive-typography/ #figure2 — http://viljamis.com/blog/2013/prototyping-responsive-typography/ — http://informationarchitects.net/blog/the-web-is-all-about-typography-period/