Responsive Design 2014 / Morgenbooster

1,769 views

Published on

2013 var året hvor Responsive web design for alvor slog i igennem på alverdens platforme. På denne Morgenbooster fortalte vi om vores kunders erfaringer med responsive designog forsøgte samtidig at give et bud på, hvor responsive design er på vej hen i 2014.

Kom videre på:
http://1508.dk/services/website
http://1508.dk/services/responsive-design

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

  • Be the first to like this

No Downloads
Views
Total views
1,769
On SlideShare
0
From Embeds
0
Number of Embeds
764
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Design 2014 / Morgenbooster

  1. 1. 23. APRIL 2014MORGENBOOSTER
  2. 2. 23. APRIL 2014MORGENBOOSTER
  3. 3. 23. APRIL 2014MORGENBOOSTER
  4. 4. PROFORM PERFORMANCE 1450 TREADMILL 23. APRIL 2014MORGENBOOSTER
  5. 5. 10" FULL-COLOR TOUCHSCREEN DELUXE EXPERIENCE NOW YOU CAN GET ONLINE WHILE YOU WORK OUT. CONNECT TO YOUR HOME'S WIRELESS NETWORK TO CHECK THE NEWS, READ EMAIL, WATCH SPORTS HIGHLIGHTS, SOCIALIZE ON FACEBOOK, AND MORE WITH THIS 10-INCH TOUCH SCREEN WITH BROWSER POWERED BY ANDROID™. 23. APRIL 2014MORGENBOOSTER
  6. 6. 1508.DK – ON THE MOVE 23. APRIL 2014MORGENBOOSTER
  7. 7. TILBAGE TIL FORTIDEN - ANNO 1993 23. APRIL 2014MORGENBOOSTER
  8. 8. 23. APRIL 2014MORGENBOOSTER 30. APRIL 1993
  9. 9. 11. NOVEMBER 1993 23. APRIL 2014MORGENBOOSTER
  10. 10. 23. APRIL 2014MORGENBOOSTER
  11. 11. WEBDESIGN ANNO 1999 23. APRIL 2014MORGENBOOSTER
  12. 12. 23. APRIL 2014MORGENBOOSTER
  13. 13. 23. APRIL 2014MORGENBOOSTER
  14. 14. 23. APRIL 2014MORGENBOOSTER
  15. 15. 23. APRIL 2014MORGENBOOSTER
  16. 16. 23. APRIL 2014MORGENBOOSTER
  17. 17. 23. APRIL 2014MORGENBOOSTER
  18. 18. IWATCH 23. APRIL 2014MORGENBOOSTER
  19. 19. ALDRIG FØR HAR SÅ MANGE MENNESKER SURFET PÅ NETTET PÅ SÅ MANGE FORSKELLIGE ENHEDER, OG MED SÅ MANGE FORSKELLIGE OPLØSNINGER. 23. APRIL 2014MORGENBOOSTER 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/
  20. 20. MOBILE VS. DESKTOP BROWSING 23. APRIL 2014MORGENBOOSTER I 2014 VIL ADGANG TIL INTERNETTET VIA MOBILE ENHEDER OVERGÅ DESKTOP-ADGANG http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx
  21. 21. MOBILENHEDER SOM PRIMÆR INTERNETADGANGSPUNKT 23. APRIL 2014MORGENBOOSTER 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
  22. 22. 55% AF AL TID BRUGT PÅ DETAILHANDELSSTEDER FOREGÅR PÅ EN MOBIL ENHED 23. APRIL 2014MORGENBOOSTER Mobile 55% Desktop 45% Time spent COMSCORE, OKTOBER 2013
  23. 23. 3 MÅNEDER PÅ 1508.DK 3 måneder på 1508.dk 23. APRIL 2014MORGENBOOSTER 68 FORSKELLIGE MOBILE ENHEDER
  24. 24. 3 MÅNEDER PÅ 1508.DK 3 måneder på 1508.dk 23. APRIL 2014MORGENBOOSTER Ca.. 4500 Browserstørrelser
  25. 25. 23. APRIL 2014MORGENBOOSTER ZOOM LEVEL X 3 FONT-SIZE X 3 ORIENTATION X 2 SIZE = 30
  26. 26. 90% AF WEB-BRUGERE, DER BÅDE HAR MOBIL- OG STATIONÆR-ADGANG, SKIFTER MELLEM ENHEDER 23. APRIL 2014MORGENBOOSTER DET ER IKKE LÆNGERE ET SPØRGSMÅL OM, HVORVIDT BRUGEREN VIL FÅ VIST WEBSTEDET I EN TILSTAND ELLER EN ANDEN. BRUGEREN VIL SANDSYNLIGVIS BESØGE WEBSTEDET I FLERE TILSTANDE PÅ FORSKELLIGE ENHEDER. http://ssl.gstatic.com/think/docs/multi-screen-world-infographic_infographics.pdf
  27. 27. YOU SNOOZE YOU LOSE 23. APRIL 2014MORGENBOOSTER
  28. 28. SCHUH.EU 23. APRIL 2014MORGENBOOSTER TAMMYEVERTS - HOW SLOW PAGES HURT THE ENTIRE USER EXPERIENCE HTTP://WWW.WEBPERFORMANCETODAY.COM/2014/04/03/SLOW-PAGES-HURT-ENTIRE-USER-EXPERIENCE-SLIDES/
  29. 29. 23. APRIL 2014MORGENBOOSTER TAMMYEVERTS - HOW SLOW PAGES HURT THE ENTIRE USER EXPERIENCE HTTP://WWW.WEBPERFORMANCETODAY.COM/2014/04/03/SLOW-PAGES-HURT-ENTIRE-USER-EXPERIENCE-SLIDES/
  30. 30. ALDRIG FØR ER SÅ MEGET DATA INDSAMLET OM VORES BRUGERE, MEN VI VED STADIG IKKE RET MEGET OM DEM, FØR DET ER FOR SENT 23. APRIL 2014MORGENBOOSTER
  31. 31. 23. APRIL 2014MORGENBOOSTER ALT DET VI IKKE VED - HVEM DE ER
  32. 32. 23. APRIL 2014MORGENBOOSTER ALT DET VI IKKE VED – HVAD DE LAVER
  33. 33. 23. APRIL 2014MORGENBOOSTER ALT DET VI IKKE VED – HVORDAN DE MØDER OS TAK TIL BRAD FROST
  34. 34. HVOR, HVORNÅR OG HVORDAN 23. APRIL 2014MORGENBOOSTER 80% bruger mobil ved diverse nedetid ... 76% bruger mobil mens de venter i kø eller på en aftale ...
  35. 35. 23. APRIL 2014MORGENBOOSTER 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!!!
  36. 36. 23. APRIL 2014MORGENBOOSTER 62% bruger mobil mens de ser tv 69% bruger mobil på salgsstedet mens de shopper
  37. 37. DEVICE CONTEXT VS.USER INTENT 23. APRIL 2014MORGENBOOSTER MOBILE ISN'T JUST 'MOBILE'. IT'S ALSO THE COUCH, THE KITCHEN, THE THREE-HOUR LAYOVER, ALL PLACES WHERE WE HAVE TIME AND ATTENTION TO SPARE. 42 PER CENT OF MOBILE USERS SAY THEY USE IT FOR ENTERTAINMENT WHEN THEY'RE BORED. THOSE AREN'T 10-SECOND SESSIONS. THAT MEANS WE SHOULDN'T DESIGN ONLY FOR STUNTED SESSIONS OR LIMITED USE CASES. JOSH CLARK: WHY JAKOB NIELSEN IS WRONG ON MOBILE http://www.creativebloq.com/josh-clark-why-jakob-nielsen-wrong-mobile-4124168
  38. 38. 23. APRIL 2014MORGENBOOSTER CONTEXT SPECIFIC BROWSING MANGE AF DE FORDOMME, VI HAVDE OM KONTEKST SPECIFIK BROWSING HOLDER IKKE. 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...
  39. 39. CASE: HUSET MARKEDSFØRING 23. APRIL 2014MORGENBOOSTER
  40. 40. 23. APRIL 2014MORGENBOOSTER CASE: HUSET MARKEDSFØRING
  41. 41. CASE: HUSET MARKEDSFØRING 23. APRIL 2014MORGENBOOSTER
  42. 42. RESPONSIVE DESIGN ER IKKE LÆNGERE EN MULIGHED, SOM VI KAN VÆLGE AT IGNORERE 23. APRIL 2014MORGENBOOSTER
  43. 43. RESPONSIVE DESIGN 101 23. APRIL 2014MORGENBOOSTER 25. MAJ 2010 – A LIST APART 1. A flexible, grid based layout 2. Flexible images and media, and 3. Media Queries Ethan Marcotte, Responsive Web Design
  44. 44. TOOLS OF THE TRADE 23. APRIL 2014MORGENBOOSTER HTML 5 CSS 3 JAVASCRIPT
  45. 45. 23. APRIL 2014MORGENBOOSTER
  46. 46. 23. APRIL 2014MORGENBOOSTER
  47. 47. NYE SKÆRMSTØRRELSER = NYE INPUT-STØRRELSER 22. OKTOBER 2013ARKITEKTSKOLEN AARHUS: PRÆSENTATION
  48. 48. NYE INTERAKTIONER 22. OKTOBER 2013ARKITEKTSKOLEN AARHUS: PRÆSENTATION
  49. 49. DEN NYE NAVIGATION 22. OKTOBER 2013ARKITEKTSKOLEN AARHUS: PRÆSENTATION
  50. 50. 23. APRIL 2014MORGENBOOSTER
  51. 51. BUILD TO LAST 23. APRIL 2014MORGENBOOSTER I LIKE AN ESCALATOR BECAUSE AN ESCALATOR CAN NEVER BREAK, IT CAN ONLY BECOM STAIRS. -MITCH HEDBERG
  52. 52. “ADAPTIVEWEBDESIGNISABOUTCREATINGINTERFACESTHATADAPTTO THEUSER’SCAPABILITIES(INTERMSOFBOTHFORMANDFUNCTION). TOME,ADAPTIVEWEBDESIGNISJUSTANOTHERTERMFORPROGRESSIVE ENHANCEMENT…” RESPONSIVE WEBDESIGN ER ET SUB-SET ADAPTIVE WEBDESIGN 23. APRIL 2014MORGENBOOSTER ADAPTIVE WEB DESIGN RESPONSIVE Aaron Gustafson, Adaptive Web Design
  53. 53. ADAPTIVE WEB DESIGN 23. APRIL 2014MORGENBOOSTER FEATURE DETECTION DEVICE APIS PERFORMANCE CONDITIONAL LOADING CONTENT STRATEGY HTML5 TOUCH ERGONOMICS RWD
  54. 54. RESPONSIVE WEBDESIGN ER MEGET MERE END TEKNIK ET ÅR EFTER VERSION 1.0 23. APRIL 2014MORGENBOOSTER
  55. 55. MOBILE FIRST = CONTENT FIRST FROM SITE TO SERVICE (SITE) 23. APRIL 2014MORGENBOOSTER http://www.flickr.com/photos/teromakotero/8705861207
  56. 56. RESPONSIVE WEB DESIGN HANDLER IKKE OM AT LAVE SMARTERE BEHOLDERE, MEN OM AT LAVE SMARTERE INDHOLD TIL BEHOLDERNE INDHOLD I FOKUS 23. APRIL 2014MORGENBOOSTER
  57. 57. FRAGMENTINGOURCONTENTACROSSDIFFERENT“DEVICE- OPTIMIZED”EXPERIENCESISALOSINGPROPOSITION,ORAT LEASTANUNSUSTAINABLEONE. —ETHANMARCOTTERESPONSIVEWEBDESIGN 23. APRIL 2014MORGENBOOSTER
  58. 58. 23. APRIL 2014MORGENBOOSTER The device landscape is constantly changing. Capabilities are constantly changing. Properly structured content is portable to future platforms. Stephen Hay
  59. 59. COPE: CREATE ONCE PUBLISH EVERYWHERE 23. APRIL 2014MORGENBOOSTER
  60. 60. 23. APRIL 2014MORGENBOOSTER
  61. 61. THE INTERNET OF THINGS 23. APRIL 2014MORGENBOOSTER
  62. 62. PEOPLE'S CAPACITY FOR BULLSHIT IS RAPIDLY DIMINISHING 23. APRIL 2014MORGENBOOSTER BRAD FROST - For a Future-Friendly Web (Mobilism 2012)
  63. 63. CONTENT STRATEGY 23. APRIL 2014MORGENBOOSTER 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”
  64. 64. SIMPLICITY IS THE KEY TO A BETTER LIFE “ESSENTIALLY WHAT IS THE MESSAGE THAT NEEDS TO BE COMMUNICATED IF I WAS ONLY ABLE TO PROVIDE THE USER WITH UNSTYLED HTML?” — BRYAN RIEGER 23. APRIL 2014MORGENBOOSTER
  65. 65. HVOR OFTE ØNSKER DU AT DIT LIV VAR MERE KOMPLEKST? MORGENBOOSTER 23. APRIL 2014
  66. 66. HVORNÅR BAD DU SIDST OM EN MERE KOMPLEKS BRUGERGRÆNSEFLADE? MORGENBOOSTER 23. APRIL 2014
  67. 67. MORGENBOOSTER VI ØNSKER ALLE ENKELHED MEN VI BLIVER FRISTET AF KOMPLEKSITET 23. APRIL 2014
  68. 68. HVAD ER ENKELT? MORGENBOOSTER 23. APRIL 2014
  69. 69. LOGARITHMIC SPIRAL – THE GOLDEN RECTANGLE MORGENBOOSTER 23. APRIL 2014
  70. 70. HVORDAN DET ER BYGGET MORGENBOOSTER 23. APRIL 2014
  71. 71. HVORDAN DET SER UD MORGENBOOSTER 23. APRIL 2014
  72. 72. HVORDAN DET BRUGES MORGENBOOSTER 23. APRIL 2014
  73. 73. ENKELTHED ER OPLEVELSE MORGENBOOSTER STÆRK SVAG HVORDAN DET FØLES AT BRUGER DET HVORDAN DET ER BYGGET HVORDAN DET SER UD 23. APRIL 2014
  74. 74. DKS: RESPONSIVE AND BEYOND Expert Fokus på detaljer Perfektion Præcis styring Principper Tag det fra hinanden Detaljeret mental model Invester tid i at lære Mainstreamer Fokus på mål Afslutning? Nem kontrol Eksempler, fortællinger? Bange for at ødelægge Løs mental model Hvad betyder SLDM? OCTOBER 3RD 2013
  75. 75. CONTENT AND FORM ARE LOVERS, THEIR LOVE-CHILD IS DESIGN 23. APRIL 2014MORGENBOOSTER
  76. 76. MOBILE FIRST DESIGN! 23. APRIL 2014MORGENBOOSTER
  77. 77. I'M JUST GOING TO COME OUT AND SAY WHAT SOME OF US HAVE BEEN THINKING ABOUT RESPONSIVE DESIGN. IT BREEDS BORING. 23. APRIL 2014MORGENBOOSTER Jonathan Longnecker http://www.netmagazine.com/opinions/responsive-web-design-boring
  78. 78. GENERALLY SPEAKING, A COMP IS A COMPREHENSIVE, HIGH FIDELITY, PHOTOSHOPPED LAYOUT OF A WEBSITE—OR RATHER, WHAT APPEARS TO BE A WEBSITE. BUILDING A BETTER USER EXPERIENCE BY DESIGNING IN THE BROWSER 23. APRIL 2014MORGENBOOSTER
  79. 79. DESIGN I BROWSEREN IKKE PÅ LÆRRED 22. OKTOBER 2013ARKITEKTSKOLEN AARHUS: PRÆSENTATION • Photoshop-filen ≠ Browser-renderingen • Flade filer er ikke interaktive • Generelt mindre tværfaglighed • Dyrt og endegyldigt • Svært at forventningsafstemme
  80. 80. THE COMP IS DEAD! 23. APRIL 2014MORGENBOOSTER “I don’t think we’re in post-PSD era, but I do think we’re movin towards post-‘full-comp’ era.” DAN MALL - RESPONSIVE DESIGN IS HARD/EASY! BE AFRAID/DON'T WORRY!
  81. 81. LONG LIVE THE STYLETIL.ES 23. APRIL 2014MORGENBOOSTER Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.
  82. 82. MORGENBOOSTER No matter how cool your user interface... ...it would be better if there were less of it Alan Cooper Father of Visual Basic, 23. APRIL 2014
  83. 83. “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 23. APRIL 2014MORGENBOOSTER Mark Boulton, on responsive workflow
  84. 84. PROCESSEN – V. 0 23. APRIL 2014MORGENBOOSTER
  85. 85. 23. APRIL 2014MORGENBOOSTER
  86. 86. PROCESSEN – V. 1.0 23. APRIL 2014MORGENBOOSTER
  87. 87. PROCESSEN – V. 1.0 23. APRIL 2014MORGENBOOSTER
  88. 88. PROCESSEN – V. 1.0 23. APRIL 2014MORGENBOOSTER
  89. 89. 23. APRIL 2014MORGENBOOSTER PROCESSEN – V. 2.0 STRATEGIINDSIGT KONCEPT DIGITAL DESIGN HTML MOCKUP SKETCH WIREFRAME INTERFACE DESIGN PROTOTYPETEST BASERETPÅ Pon Kattera Senior Interaction Designer LIVE PROTOTYPE INDHOLD
  90. 90. LEAN UX 23. APRIL 2014MORGENBOOSTER
  91. 91. LEAN UX 23. APRIL 2014MORGENBOOSTER
  92. 92. LEAN UX 23. APRIL 2014MORGENBOOSTER
  93. 93. 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 23. APRIL 2014MORGENBOOSTER James Young – http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
  94. 94. DE MEST ALMINDELIGE PROBLEMER MED RESPONSIVE WEBDESIGN 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 23. APRIL 2014MORGENBOOSTER
  95. 95. RESPOSNIVE DESIGN IS NOT A PANACEA RATHER A GREAT STEP IN THE RIGHT DIRECTION 23. APRIL 2014MORGENBOOSTER BRAD FROST
  96. 96. NÆSTE MORGENBOOSTER: DIGITAL STRATEGI: EKSEKVER, EKSEKVER, EKSEKVER. DATO: 14. MAJ 2014 23. APRIL 2014MORGENBOOSTER
  97. 97. TAK @PSOLOW 1508.DK

×