Morgenbooster / Responsive Design 2.0 - Mobile Revolution / 9. oktober 2013

985 views

Published on

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
985
On SlideShare
0
From Embeds
0
Number of Embeds
167
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Morgenbooster / Responsive Design 2.0 - Mobile Revolution / 9. oktober 2013

  1. 1. RESPONSIVE DESIGN 2.0 – MOBILE REVOLUTION PETER SOLOW – HEAD OF INTERFACE DEVELOPMENT FACEBOOK.COM/1508DK LINKEDIN.COM/COMPANY/1508-AS
  2. 2. 9. OKTOBER 2013MORGENBOOSTER
  3. 3. PROFORM TRAILRUNNER 4.0 TREADMILL 9. OKTOBER 2013MORGENBOOSTER
  4. 4. NU MED INDBYGGET BROWSER 9. OKTOBER 2013MORGENBOOSTER
  5. 5. OG SOM BORDPLADE 9. OKTOBER 2013MORGENBOOSTER
  6. 6. DET SKETE I DE DAGE… 9. OKTOBER 2013MORGENBOOSTER
  7. 7. 9. OKTOBER 2013MORGENBOOSTER
  8. 8. 9. OKTOBER 2013MORGENBOOSTER
  9. 9. 9. OKTOBER 2013MORGENBOOSTER
  10. 10. DEN NYE NAVIGATION 9. OKTOBER 2013MORGENBOOSTER
  11. 11. ONE GIANT LEAP 9. OKTOBER 2013MORGENBOOSTER
  12. 12. 9. OKTOBER 2013MORGENBOOSTER
  13. 13. 9. OKTOBER 2013MORGENBOOSTER
  14. 14. GOOGLE’S GLASS GOOGLE GLASSES 9. OKTOBER 2013MORGENBOOSTER
  15. 15. IWATCH 9. OKTOBER 2013MORGENBOOSTER
  16. 16. ALDRIG FØR HAR SÅ MANGE SURFET INTERNETTET MED SÅ MANGE FORSKELLIGE ENHEDER OG SÅ MANGE FORSKELLIGE BROWSERSTØRRELSER 9. OKTOBER 2013MORGENBOOSTER Disruption will only accelerate. The quantity and diversity of connected devices— many of which we haven’t imagined yet—will explode, as will the quantity and diversity of the people around the world who use them. FUTURE FRIENDLY http://futurefriend.ly/
  17. 17. MOBIL VS STATIONÆR-BROWSING 9. OKTOBER 2013MORGENBOOSTER I 2014 OVERSTIGER BRUGEN AF INTERNET VIA MOBILE ENHEDER BRUGEN VIA STATIONÆRE ENHEDER. http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx
  18. 18. MOBILE ENHEDER SOM PRIMÆR INTERNET ACCESS POINT 9. OKTOBER 2013MORGENBOOSTER D: 42% UK: 42%USA: 67% F: 40% Q4: HOW DO YOU TYPICALLY GO ONLINE TO SURF THE WEB? HTTP://ONDEVICERESEARCH.COM/BLOG/POST-PC-ERA-IN-THE-US-#STHASH.OASIRZ7D.DPBS
  19. 19. 3 MÅNEDER PÅ 1508.DK 3 måneder på 1508.dk 9. OKTOBER 2013MORGENBOOSTER 39 FORSKELLIGE MOBIL-DEVICES
  20. 20. 9. OKTOBER 2013MORGENBOOSTER ZOOM LEVEL X 3 FONT-SIZE X 3 ORIENTATION X 2 SIZE = 30
  21. 21. 3 MÅNEDER PÅ 1508.DK 3 måneder på 1508.dk 9. OKTOBER 2013MORGENBOOSTER Ca. 1400 browserstørrelser
  22. 22. 90% AF BRUGERNE SHUFFLER MELLEM ENHEDER 9. OKTOBER 2013MORGENBOOSTER DET ER IKKE LÆNGERE ET SPØRGSMÅL OM, AT BRUGERE BESØGER ET SITE I DEN ENE ELLER DEN ANDEN TILSTAND. BRUGERE BESØGER SITET I MANGE TILSTANDE. http://ssl.gstatic.com/think/docs/multi-screen-world-infographic_infographics.pdf
  23. 23. YOU SNOOZE YOU LOSE 9. OKTOBER 2013MORGENBOOSTER
  24. 24. 9. OKTOBER 2013MORGENBOOSTER
  25. 25. ALDRIG FØR HAR VI SAMLET SÅ MEGET DATA OM VORES BRUGERE, MEN VI VED STADIG INTET OM DEM, FØR DET ER FOR SENT 9. OKTOBER 2013MORGENBOOSTER
  26. 26. 9. OKTOBER 2013MORGENBOOSTER ALT DET VI IKKE VED – HVEM DE ER
  27. 27. 9. OKTOBER 2013MORGENBOOSTER ALT DET VI IKKE VED – HVAD DE LAVER
  28. 28. 9. OKTOBER 2013MORGENBOOSTER ALT DET VI IKKE VED – HVORDAN DE SER OS TAK TIL BRAD FROST
  29. 29. HVOR, HVORNÅR OG HVORFOR 9. OKTOBER 2013MORGENBOOSTER 80% bruger mobil under diverse nedetider... 76% bruger mobil, mens de venter i kø eller på en aftale...
  30. 30. 9. OKTOBER 2013MORGENBOOSTER HTTPS://TWITTER.COM/TOMCOATES/STATUS/51734242991947778 Just been picked up at the airport by a limo driver who looked me up on the Internet so he'd recognize me and have stuff to talk about. !!!
  31. 31. 9. OKTOBER 2013MORGENBOOSTER 62% bruger mobil mens de ser TV 69% bruger mobil til salgs- research mens de køber ind
  32. 32. 9. OKTOBER 2013MORGENBOOSTER CONTEXT SPECIFIC BROWSING MANGE AF DE FORUDINDTAGEDE IDEER VI HAR HAFT OM BRUGEN AF MOBILE ENHEDER, HAR VIST SIG IKKE AT HOLDE STIK 38 million Americans 'shop online on the toilet 82% of smartphone users check and send email with their device. Google – “The Mobile Movement” (April 2011) I’m definitely moving, I’m definitely in a car. I’m going to look at your website. This doesn’t mean my intent is to find an address, or quickly use a news site...
  33. 33. CASE: FINANSMINISTERIET 9. OKTOBER 2013MORGENBOOSTER
  34. 34. 9. OKTOBER 2013MORGENBOOSTER CASE: FINANSMINISTERIET
  35. 35. 9. OKTOBER 2013MORGENBOOSTER CASE: FINANSMINISTERIET
  36. 36. 9. OKTOBER 2013MORGENBOOSTER
  37. 37. RESPONSIVE DESIGN ER IKKE LÆNGERE EN MULIGHED, MAN KAN FRAVÆLGE 9. OKTOBER 2013MORGENBOOSTER
  38. 38. ANGIV EMNE RESPONSIVE DESIGN FOR LET ØVEDE 25. Maj 2010 – A List Apart 9. OKTOBER 2013MORGENBOOSTER 1. A flexible, grid based layout 2. Flexible images and media, and 3. Media Queries Ethan Marcotte, Responsive Web Design
  39. 39. ANGIV EMNE TOOLS OF THE TRADE 9. OKTOBER 2013MORGENBOOSTER HTML 5 CSS 3 JAVASCRIPT
  40. 40. 9. OKTOBER 2013MORGENBOOSTER Se videoen: https://vimeo.com/65717488
  41. 41. ANGIV EMNE RESPONSIVE WEBDESIGN ER EN DELMÆNGDE AF ADAPTIVE WEBDESIGN “Adaptive web design is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function). To me, Adaptive web design is just another term for progressive enhancement…” 9. OKTOBER 2013MORGENBOOSTER ADAPTIVE WEB DESIGN RESPONSIVE Aaron Gustafson, Adaptive Web Design
  42. 42. BUILD TO LAST 9. OKTOBER 2013MORGENBOOSTER I LIKE AN ESCALATOR BECAUSE AN ESCALATOR CAN NEVER BREAK, IT CAN ONLY BECOM STAIRS. -MITCH HEDBERG
  43. 43. ADAPTIVE WEB DESIGN 9. OKTOBER 2013MORGENBOOSTER FEATURE DETECTION DEVICE APIS PERFORMANCE CONDITIONAL LOADING CONTENT STRATEGY HTML5 TOUCH ERGONOMICS RWD
  44. 44. RESPONSIVE WEBDESIGN ER MEGET MERE END TEKNIK OG DESIGN ET ÅR EFTER VERSION 1.0 9. OKTOBER 2013MORGENBOOSTER
  45. 45. MOBILE FIRST = CONTENT FIRST FROM SITE TO SERVICE (SITE) 9. OKTOBER 2013MORGENBOOSTER
  46. 46. RESPONSIVE WEBDESIGN GÅR IKKE UD PÅ AT LAVE SMARTERE BEHOLDERE, MEN SMARTERE INDHOLD TIL BEHOLDERNE INDHOLD I FOKUS 9. OKTOBER 2013MORGENBOOSTER
  47. 47. INDHOLDSSTRATEGI 9. OKTOBER 2013MORGENBOOSTER Kristina Halvorson, Content Strategy for the Web “Generally speaking, your web content is useless unless it does one or both of the following: - Supports a key business objective - Supports a user (or customer) in completing a task”
  48. 48. INDHOLD OG PRIOTERING ER NØGLEN TIL ET BEDRE RESPONSIVE LIV 9. OKTOBER 2013MORGENBOOSTER THE DEVICE LANDSCAPE IS CONSTANTLY CHANGING. CAPABILITIES ARE CONSTANTLY CHANGING. PROPERLY STRUCTURED CONTENT IS PORTABLE TO FUTURE PLATFORMS. -STEPHENHAY
  49. 49. PEOPLE'S CAPACITY FOR BULLSHIT IS RAPIDLY DIMINISHING 9. OKTOBER 2013MORGENBOOSTER BRAD FROST - For a Future-Friendly Web (Mobilism 2012)
  50. 50. HAR DU NOGLE SINDE ØNSKET ET MERE KOMPLEKST LIV? MORGENBOOSTER 9. OKTOBER 2013
  51. 51. HVORNÅR SÅ DU SIDST ET INTERFACE DER BARE VAR FOR ENKELT? MORGENBOOSTER 9. OKTOBER 2013
  52. 52. MORGENBOOSTER VI ØNSKER ALLE ENKELTHED MEN VI BLIVER FRISTET AF KOMPLEKSITET 9. OKTOBER 2013 THANKS TO GILES COLBORNE
  53. 53. HVAD ER ENKELT? MORGENBOOSTER 9. OKTOBER 2013
  54. 54. DET GYLDNE SNIT MORGENBOOSTER 9. OKTOBER 2013
  55. 55. HVORDAN DET ER BYGGET MORGENBOOSTER 9. OKTOBER 2013
  56. 56. HVORDAN DET SER UD MORGENBOOSTER 9. OKTOBER 2013
  57. 57. HVORDAN DET FØLES AT BRUGE DET MORGENBOOSTER 9. OKTOBER 2013
  58. 58. ENKELTHED ER OPLEVELSESBASERET MORGENBOOSTER STÆRK SVAG HVORDAN DET FØLES AT BRUGE DET HVORDAN DET ER LAVET HVORDAN DET SER UD 9. OKTOBER 2013
  59. 59. MORGENBOOSTER The Yerkes–Dodson law 9. OKTOBER 2013
  60. 60. CONTENT AND FORM ARE LOVERS, THEIR LOVE-CHILD IS DESIGN 9. OKTOBER 2013MORGENBOOSTER
  61. 61. MOBILE FIRST DESIGN. 9. OKTOBER 2013MORGENBOOSTER
  62. 62. I'M JUST GOING TO COME OUT AND SAY WHAT SOME OF US HAVE BEEN THINKING ABOUT RESPONSIVE DESIGN. IT BREEDS BORING. 9. OKTOBER 2013MORGENBOOSTER Jonathan Longnecker http://www.netmagazine.com/opinions/responsive-web-design-boring
  63. 63. “RWD COMES UNDER CRITICISM FOR NOT BEING COMMERCIALLY VIABLE. IT’S BECAUSE IT’S TRYING TO BE SHOE-HORNED INTO AN EXISTING, FIXED-CANVAS, INFLEXIBLE PROCESS.” DEN PERFEKTE PROCES 9. OKTOBER 2013MORGENBOOSTER Mark Boulton, on responsive workflow
  64. 64. DESIGN I BROWSEREN IKKE PÅ LÆRRED 9. OKTOBER 2013MORGENBOOSTER • Photoshop filen ≠ Browser renderingen • Flade filer er ikke interaktive • Generelt mindre tværfaglighed • Dyrt og endegyldigt • Svært at forventningsafstemme
  65. 65. MOBILE FIRST GODT RESPONSIVE WEBDESIGN KRÆVER EN INDGÅENDE FORSTÅELSE AF MEDIET 9. OKTOBER 2013MORGENBOOSTER
  66. 66. 9. OKTOBER 2013MORGENBOOSTER
  67. 67. MOBILE FIRST WIREFRAMES 9. OKTOBER 2013MORGENBOOSTER 1 2 3 4 5 1 2 3 4 1 2 4 3 5
  68. 68. PROCESSEN – V. 0 9. OKTOBER 2013MORGENBOOSTER
  69. 69. 9. OKTOBER 2013MORGENBOOSTER
  70. 70. PROCESSEN – V. 1.0 9. OKTOBER 2013MORGENBOOSTER
  71. 71. PROCESSEN – V. 1.0 9. OKTOBER 2013MORGENBOOSTER
  72. 72. PROCESSEN – V. 1.0 9. OKTOBER 2013MORGENBOOSTER
  73. 73. 9. OKTOBER 2013MORGENBOOSTER PROCESSEN – V. 2.0 STRATEGIINDSIGT KONCEPT DIGITAL DESIGN HTML MOCKUP SKETCH WIREFRAME INTERFACE DESIGN PROTOTYPETEST BASERETPÅ Pon Kattera Senior Interaction Designer LIVE PROTOTYPE
  74. 74. SCOPING 9. OKTOBER 2013MORGENBOOSTER SCOPE BREAKDOWN MAX 2 DAGE? RESCOPE
  75. 75. RESPONSIVE FLOW 9. OKTOBER 2013MORGENBOOSTER
  76. 76. LEAN UX 9. OKTOBER 2013MORGENBOOSTER
  77. 77. LEAN UX 9. OKTOBER 2013MORGENBOOSTER
  78. 78. LEAN UX 9. OKTOBER 2013MORGENBOOSTER
  79. 79. RESPONSIVE WEBDESIGN HAR ÆNDRET VORES TILGANG TIL NETTET PÅ TVÆRS AF SAMTLIGE FAGDICIPLINER 9. OKTOBER 2013MORGENBOOSTER
  80. 80. JEG HAR EN FANTASTISK IDE TIL EN APP DET ER IKKE LÆNGERE ET SPØRGSMÅL OM, HVORVIDT VI SKAL UDVIKLE ”NATIVE ELLER RESPONSIVE”, MEN HVORDAN VI LAVER LØSNINGER, DER UNDERSTØTTER BÅDE MOBILE WEBSITES OG NATIVE APPS NU OG I FREMTIDEN 9. OKTOBER 2013MORGENBOOSTER
  81. 81. EXERGI 9. OKTOBER 2013MORGENBOOSTER
  82. 82. APP, MOBILE OG DESKTOP 9. OKTOBER 2013MORGENBOOSTER
  83. 83. DESPITE RESPONSIVE DESIGN ALREADY HAVING BEEN AROUND MORE THAN TWO YEARS, IT’S STILL IN MANY WAYS A FLEDGLING METHODOLOGY. DESIGNERS ARE FACED WITH AN EVER-CHANGING LANDSCAPE OF DEVICES, CODE FRAMEWORKS AND SCRIPTS – AND, OF COURSE, THE NEED TO WORK IN A NEW WAY WITH CLIENTS TO MANAGE THE PROCESS OF CREATING RESPONSIVE WEBSITES. RESPONSIVE WEBDESIGN – UDFORDRINGER OG LØSNINGER 9. OKTOBER 2013MORGENBOOSTER James Young – http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
  84. 84. DE MEST ALMINDELIGE PROBLEMER MED RESPONSIVE WEB DESIGN 1. EXPLAINING RWD TO CLIENTS 2. THE LACK OF A STATIC DESIGN PHASE 3. NAVIGATION 4. IMAGES 5. TABLES 6. CONVERTING OLD FIXED-WIDTH SITES 7. WHAT TO SERVE USERS OF OLD VERSIONS OF IE 8. TESTING TIME AND COST 9. OKTOBER 2013MORGENBOOSTER
  85. 85. RESPOSNIVE DESIGN IS NOT A PANACEA RATHER A GREAT STEP IN THE RIGHT DIRECTION 9. OKTOBER 2013MORGENBOOSTER BRAD FROST
  86. 86. TAK @PSOLOW 1508.DK NÆSTE MORGNEBOOSTER 30. OKTOBER: DESIGNING FOR INSIGHTS – HVAD HAR DIT WEBSITE LÆRT DIG I DAG?

×