Websites, der virker overalt
@clausstadel #mc14dk
Responsive web design
Mobile matters
Global trafikandel fra mobile devices
0 %
10 %
20 %
30 %
2008 Q4 2010 Q3 2012 Q2 2014 Q1
gs.statcounter.com
Global trafikandel fra mobile devices
0 %
10 %
20 %
30 %
2008 Q4 2010 Q3 2012 Q2 2014 Q1
gs.statcounter.com
pureawesomeness.com
pureawesomeness.comm.
77% af mobile Google søgninger
foretages hjemme eller på arbejde
Google/Nielsen Life360 Mobile Search Moments Q4 2012
Whether you like it or not, if you're a
web designer, you're also a mobile
web designer.
Brad Frost
web designResponsive
web designAdaptive
web designBest practice
Web design
UX på det moderne web
Learning by doing
Introducing multiple content types
further down the page requires users to
go on a scavenger hunt to find them.
Brad Frost
Retrofitting
Mobile first
Så bredt er dit website
Lidt er aldrig lidt nok
Hvor er jeg og hvor
kan jeg komme hen?
Hvad kan jeg på
denne side?
Hvad får jeg hvis jeg
scroller?
Hvor er jeg og hvor
kan jeg komme hen?
Hvad kan jeg på
denne side?
Hvad får jeg hvis jeg
scroller?
Hvor er jeg og hvor
kan jeg komme hen?
Hvad kan jeg på
denne side?
Hvad får jeg hvis jeg
scroller?
Lister Tilbage i tiden Fordybelse
Performance by design
If your website is 15MB it’s not HTML5,
it’s stupid.
Christian Heilmann
WiFi
3G
Building the damn thing
UX designer Visuel designer Udvikler
UX designer
Visuel designer
Udvikler
HTML + CSS
Klik
Tryk
44px
delay: 300ms
fastclick.js
Billeder
PNG
JPEG
Retina
Low
Hi
325x225 px
650x450 px
29 kB
Kvalitet 80
Kvalitet 30
27 kB
PNG
SVG
Scalable Vector Graphics
Kittyshop
PNG
SVG
3 kB
1 kB
Tabeller
Tabeller er et hack
body {
font-size: 16px;
}
I think there is a profound and enduring beauty in
simplicity. In clarity. In efficiency. True simplicity is derived
from so...
Flat is better
.nifty-box {
border-radius: 1em;
box-shadow: 0 0 1em black;
background: url(‘pattern.png’);
}
Click me
Click me
Edge Relflow
320px
568px
768px
1280px
Deviceagnostisk
Start with the small screen first, then
expand until it looks like shit. Time for a
breakpoint!
Stephen Hay
Dit content afgør dine breakpoints
Test på rigtige devices
Test på rigtigt gamle devices
Edge Inspect
Mobile first
Performance by design
Farvel Photoshop. Hallo HTML + CSS.
44x44px links med fastclick.js
JPEG og SVG i stedet ...
Ha’ det sjovt og lav noget fedt
@clausstadel clausstadel.comclaus.stadel@gmail.com
Websites, der virker overalt
Websites, der virker overalt
Websites, der virker overalt
Websites, der virker overalt
Websites, der virker overalt
Websites, der virker overalt
Websites, der virker overalt
Websites, der virker overalt
Websites, der virker overalt
Websites, der virker overalt
Websites, der virker overalt
Websites, der virker overalt
Websites, der virker overalt
Upcoming SlideShare
Loading in...5
×

Websites, der virker overalt

970

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
970
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×