Websites, der virker overalt

1,155 views

Published on

Internettet er tilgængeligt overalt. Er dit website også? Eller hænger det gevaldigt i bremsen udenfor de trygge rammer af en gammeldags PC-browser?

Lær hvordan du bygger websites, der er bedre, mere simple, mere tilgængelige og mere brugbare end dine konkurrenters sløve gamle desktop mastodonter.

Published in: Mobile
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,155
On SlideShare
0
From Embeds
0
Number of Embeds
712
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Websites, der virker overalt

  1. 1. Websites, der virker overalt @clausstadel #mc14dk
  2. 2. Responsive web design
  3. 3. Mobile matters
  4. 4. Global trafikandel fra mobile devices 0 % 10 % 20 % 30 % 2008 Q4 2010 Q3 2012 Q2 2014 Q1 gs.statcounter.com
  5. 5. Global trafikandel fra mobile devices 0 % 10 % 20 % 30 % 2008 Q4 2010 Q3 2012 Q2 2014 Q1 gs.statcounter.com
  6. 6. pureawesomeness.com
  7. 7. pureawesomeness.comm.
  8. 8. 77% af mobile Google søgninger foretages hjemme eller på arbejde Google/Nielsen Life360 Mobile Search Moments Q4 2012
  9. 9. Whether you like it or not, if you're a web designer, you're also a mobile web designer. Brad Frost
  10. 10. web designResponsive
  11. 11. web designAdaptive
  12. 12. web designBest practice
  13. 13. Web design
  14. 14. UX på det moderne web
  15. 15. Learning by doing
  16. 16. Introducing multiple content types further down the page requires users to go on a scavenger hunt to find them. Brad Frost
  17. 17. Retrofitting
  18. 18. Mobile first
  19. 19. Så bredt er dit website
  20. 20. Lidt er aldrig lidt nok
  21. 21. Hvor er jeg og hvor kan jeg komme hen? Hvad kan jeg på denne side? Hvad får jeg hvis jeg scroller?
  22. 22. Hvor er jeg og hvor kan jeg komme hen? Hvad kan jeg på denne side? Hvad får jeg hvis jeg scroller?
  23. 23. Hvor er jeg og hvor kan jeg komme hen? Hvad kan jeg på denne side? Hvad får jeg hvis jeg scroller?
  24. 24. Lister Tilbage i tiden Fordybelse
  25. 25. Performance by design
  26. 26. If your website is 15MB it’s not HTML5, it’s stupid. Christian Heilmann
  27. 27. WiFi
  28. 28. 3G
  29. 29. Building the damn thing
  30. 30. UX designer Visuel designer Udvikler
  31. 31. UX designer Visuel designer Udvikler
  32. 32. HTML + CSS
  33. 33. Klik
  34. 34. Tryk
  35. 35. 44px
  36. 36. delay: 300ms
  37. 37. fastclick.js
  38. 38. Billeder
  39. 39. PNG
  40. 40. JPEG
  41. 41. Retina
  42. 42. Low Hi 325x225 px 650x450 px 29 kB Kvalitet 80 Kvalitet 30 27 kB
  43. 43. PNG
  44. 44. SVG
  45. 45. Scalable Vector Graphics
  46. 46. Kittyshop PNG SVG 3 kB 1 kB
  47. 47. Tabeller
  48. 48. Tabeller er et hack
  49. 49. body { font-size: 16px; }
  50. 50. I think there is a profound and enduring beauty in simplicity. In clarity. In efficiency. True simplicity is derived from so much more than just the absence of clutter and ornamentation. It’s about bringing order to complexity.
  51. 51. Flat is better
  52. 52. .nifty-box { border-radius: 1em; box-shadow: 0 0 1em black; background: url(‘pattern.png’); }
  53. 53. Click me
  54. 54. Click me
  55. 55. Edge Relflow
  56. 56. 320px 568px 768px 1280px
  57. 57. Deviceagnostisk
  58. 58. Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! Stephen Hay
  59. 59. Dit content afgør dine breakpoints
  60. 60. Test på rigtige devices
  61. 61. Test på rigtigt gamle devices
  62. 62. Edge Inspect
  63. 63. Mobile first Performance by design Farvel Photoshop. Hallo HTML + CSS. 44x44px links med fastclick.js JPEG og SVG i stedet for PNG Content-baserede breakpoints Test på rigtige devices
  64. 64. Ha’ det sjovt og lav noget fedt
  65. 65. @clausstadel clausstadel.comclaus.stadel@gmail.com

×