Die Gefahren von Webdesign Trends.
@MadeMyDay(//(Marc(Hinse(//(Webkongress(Erlangen(21.03.2014
Was heißt hier „Trends“?
Parallax
Webfonts
HTML5
CSS3
Flat Design
Responsive
Storytelling
Onepager
backgroundVideos
Heroe ...
Was schief gehen kann…
geht schief.
180 Requests.
EINHUNDERTACHTZIG!
> 32MB.
ZWEIUNDDREISSIG!
180 Requests.
EINHUNDERTACHTZIG!
> 32MB.
ZWEIUNDDREISSIG!
PArallax.
Seit ca. 2008 verbreitet. Echt jetzt.
Aber erst in letzter Zeit der richtig heisse scheiss.
Flash ist tot und begraben.
…und wir graben die verweste Leiche wieder aus
parallax.Pros: [
“dezentes(!) Enhancement“,
“räumlicher Eindruck“,
“WOW-Effekt“,
“einfache Implementierung“
]
Parallax.Contras: [
“Ladezeit“,
“Performance“,
“Ablenkung vom Content“,
“Responsive?“
]
Was tun, wenn der DEsigner oder
Kunde unbedingt Parallax will?
Nachdenken!
Dev Tools nutzen.
Tipps.Parallax.allgemein: [
“Konzept prüfen. Oder besser:
überhaupt mal eine Konzeption
machen (lorem ipsum ZEUGT
NICHT VO...
Tipps.Parallax.css: [
“3D-Beschleunigung nutzen
(transform3d statt
position)“,
“position: fixed ist
kritisch“,
“Touch-Gerä...
Tipps.Parallax.js: [
“RequestAnimationFrame statt
onScroll“,
“window.pageYOffset statt
offset().top“,
“Kalkulationen der P...
backgroundvideos.
Was ist mit Smartphones?
Backgroundvideos.Pros: [
“Aufmerksamkeit“,
“erzeugt Stimmung“,
“WOW-Effekt“,
“einfache Implementierung“
]
Backgroundvideos.Contras: [
“Ladezeit“,
“Performance“,
“Ablenkung vom Content“,
“Touchgeräte?“
]
Was tun, wenn der DEsigner oder Kunde
unbedingt backgroundVideos will?
Nachdenken!
Tipps.backgroundVideos.allgemein: [
“Nur Deko, kein wichtiger Inhalt
(klingt blöd, ist aber so)“,
“darf nicht ablenken“,
“...
Tipps.backgroundVideos.technik: [
“Komprimieren!“,
“Pattern drüberlegen.“,
“Flash-Fallback? Weglassen!“,
“Touchgerät? Wegl...
Responsive Webdesign.
Kein Trend, sondern Notwendigkeit.
missverstaendnisse.responsive: [
“muss trotzdem alles laden /
blendet vermeintlich
unwichtiges einfach aus“,
“sieht langwe...
responsive.Pros: [
“eine Website“,
“ein CMS“,
“einmal Content (Text)“,
“einmal Medien (Bilder)“,
“eine Redaktion“
]
responsive.Contras: [
]
“umdenken“,
“nachdenken“,
“testen“
Tipps.responsive.allgemein: [
“Sinnvolle Konzeption
unabdingbar (Content first)“,
„es gibt nicht nur das
iPhone“,
“mobile ...
Bilder verursachen über 50% des Traffics.
Frech geklaut bei @maddesigns
Lösung: Responsive Images.
Tipps.responsive.css: [
“mobile first ist mehr als
ein Buzzword“,
“Präprozessoren helfen“,
“Breakpoints sinnvoll wählen“
]
Tipps.responsive.js: [
“nur laden was nötig ist
(Beispiel enquire.js)“,
“Polyfills (Fluch und Segen)“
]
Typographie (Webfonts).
Das web besteht nicht mehr nur aus Arial und verdana.
…zum Glück.
webfonts.pro: [
“dem Einheitsbrei entfliehen“,
“Corporate Schrift nutzen“,
“Typographie als
gestalterisches Element“
]
webfonts.contra: [
“müssen erst geladen werden“,
“sehen teilweise scheiße aus
im IE“,
“Größen stimmen mit
Fallbackschrift ...
Tipps.webfonts: [
“Größe Fallbackschrift über
extra Klasse definieren“,
“Während Konzeption im IE
testen“,
“Größen im Auge...
Flat design.
Remarkable!
Vorteile_Nachteile_Tipps.Flat_design: [
“austauschbar, aber User sieht
vertraute UI“,
“passt nicht immer
(Konzeption!)“,
“...
Noch Zeit? Noch Wach?
Allgemeine Tipps
Nachdenken!
Hungrig sein!
Verstehen (wollen)!
Eigenen Kram schreiben
…und wenns mal wieder nicht klappt, was fertiges nehmen.
yay o/
Fail. Fail often. Fail hard.
…and learn.
Fragen?
Danke
@MadeMyDay
http://siebennull.com
http://mademyday.de
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014
Nächste SlideShare
Wird geladen in …5
×

"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014

1.714 Aufrufe

Veröffentlicht am

Aktuelle Trends der Webentwicklung sowie die vermeintlich überall verfügbare hohe Bandbreite verleiten Agenturen, aufwändig produzierte Websites zu gestalten – ohne Rücksicht auf Verluste in Usability, Performance und Kompatibilität.

In diesem Talk werden negative Beispiele genannt und wie diese Stolperfallen vermieden werden können. Ebenso soll anhand positiver Beispiele aufgezeigt werden, wie sowohl Zielgruppe als auch deren vielfältige technische Ausstattung in die Konzeption einbezogen werden kann.

Im Vortrag waren einige Videos integriert, die hier natürlich so nicht zu sehen sind. Es wird ein Video des Talks geben, einfach mal beim Webkongress Erlangen auf der Seite schauen.

Veröffentlicht in: Design
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.714
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
5
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf dem Webkongress Erlangen 2014

  1. 1. Die Gefahren von Webdesign Trends. @MadeMyDay(//(Marc(Hinse(//(Webkongress(Erlangen(21.03.2014
  2. 2. Was heißt hier „Trends“? Parallax Webfonts HTML5 CSS3 Flat Design Responsive Storytelling Onepager backgroundVideos Heroe Areas große Typographie
  3. 3. Was schief gehen kann…
  4. 4. geht schief.
  5. 5. 180 Requests. EINHUNDERTACHTZIG! > 32MB. ZWEIUNDDREISSIG!
  6. 6. 180 Requests. EINHUNDERTACHTZIG! > 32MB. ZWEIUNDDREISSIG!
  7. 7. PArallax.
  8. 8. Seit ca. 2008 verbreitet. Echt jetzt.
  9. 9. Aber erst in letzter Zeit der richtig heisse scheiss.
  10. 10. Flash ist tot und begraben. …und wir graben die verweste Leiche wieder aus
  11. 11. parallax.Pros: [ “dezentes(!) Enhancement“, “räumlicher Eindruck“, “WOW-Effekt“, “einfache Implementierung“ ]
  12. 12. Parallax.Contras: [ “Ladezeit“, “Performance“, “Ablenkung vom Content“, “Responsive?“ ]
  13. 13. Was tun, wenn der DEsigner oder Kunde unbedingt Parallax will?
  14. 14. Nachdenken!
  15. 15. Dev Tools nutzen.
  16. 16. Tipps.Parallax.allgemein: [ “Konzept prüfen. Oder besser: überhaupt mal eine Konzeption machen (lorem ipsum ZEUGT NICHT VON KONZEPTION)“, “weniger ist mehr“, “unterstützt der Effekt meinen Content oder lenkt er ab?“ ]
  17. 17. Tipps.Parallax.css: [ “3D-Beschleunigung nutzen (transform3d statt position)“, “position: fixed ist kritisch“, “Touch-Gerät? Grundregel: bleiben lassen“]
  18. 18. Tipps.Parallax.js: [ “RequestAnimationFrame statt onScroll“, “window.pageYOffset statt offset().top“, “Kalkulationen der Positionen speichern“, “nur das Animieren, was auch zu sehen ist“ ]
  19. 19. backgroundvideos.
  20. 20. Was ist mit Smartphones?
  21. 21. Backgroundvideos.Pros: [ “Aufmerksamkeit“, “erzeugt Stimmung“, “WOW-Effekt“, “einfache Implementierung“ ]
  22. 22. Backgroundvideos.Contras: [ “Ladezeit“, “Performance“, “Ablenkung vom Content“, “Touchgeräte?“ ]
  23. 23. Was tun, wenn der DEsigner oder Kunde unbedingt backgroundVideos will?
  24. 24. Nachdenken!
  25. 25. Tipps.backgroundVideos.allgemein: [ “Nur Deko, kein wichtiger Inhalt (klingt blöd, ist aber so)“, “darf nicht ablenken“, “muss zum Website-Thema passen“ ]
  26. 26. Tipps.backgroundVideos.technik: [ “Komprimieren!“, “Pattern drüberlegen.“, “Flash-Fallback? Weglassen!“, “Touchgerät? Weglassen!“, “out of Viewport? pausieren!“, “HTML5 Video erlaubt media queries!“ ]
  27. 27. Responsive Webdesign.
  28. 28. Kein Trend, sondern Notwendigkeit.
  29. 29. missverstaendnisse.responsive: [ “muss trotzdem alles laden / blendet vermeintlich unwichtiges einfach aus“, “sieht langweilig aus.“, “kein Platz für Corporate Design“ ]
  30. 30. responsive.Pros: [ “eine Website“, “ein CMS“, “einmal Content (Text)“, “einmal Medien (Bilder)“, “eine Redaktion“ ]
  31. 31. responsive.Contras: [ ] “umdenken“, “nachdenken“, “testen“
  32. 32. Tipps.responsive.allgemein: [ “Sinnvolle Konzeption unabdingbar (Content first)“, „es gibt nicht nur das iPhone“, “mobile first ist mehr als ein Buzzword“, “Breakpoints sinnvoll wählen“ ]
  33. 33. Bilder verursachen über 50% des Traffics.
  34. 34. Frech geklaut bei @maddesigns
  35. 35. Lösung: Responsive Images.
  36. 36. Tipps.responsive.css: [ “mobile first ist mehr als ein Buzzword“, “Präprozessoren helfen“, “Breakpoints sinnvoll wählen“ ]
  37. 37. Tipps.responsive.js: [ “nur laden was nötig ist (Beispiel enquire.js)“, “Polyfills (Fluch und Segen)“ ]
  38. 38. Typographie (Webfonts).
  39. 39. Das web besteht nicht mehr nur aus Arial und verdana. …zum Glück.
  40. 40. webfonts.pro: [ “dem Einheitsbrei entfliehen“, “Corporate Schrift nutzen“, “Typographie als gestalterisches Element“ ]
  41. 41. webfonts.contra: [ “müssen erst geladen werden“, “sehen teilweise scheiße aus im IE“, “Größen stimmen mit Fallbackschrift nicht überein“, “Kommerzielle Fonts i.d.R. nur als SaaS“ ]
  42. 42. Tipps.webfonts: [ “Größe Fallbackschrift über extra Klasse definieren“, “Während Konzeption im IE testen“, “Größen im Auge behalten“, “Nur die Schnitte/Characters laden, die man auch wirklich braucht“ ]
  43. 43. Flat design.
  44. 44. Remarkable!
  45. 45. Vorteile_Nachteile_Tipps.Flat_design: [ “austauschbar, aber User sieht vertraute UI“, “passt nicht immer (Konzeption!)“, “Gestaltung lässt sich fast ausschließlich über CSS steuern“ ]
  46. 46. Noch Zeit? Noch Wach?
  47. 47. Allgemeine Tipps
  48. 48. Nachdenken!
  49. 49. Hungrig sein!
  50. 50. Verstehen (wollen)!
  51. 51. Eigenen Kram schreiben …und wenns mal wieder nicht klappt, was fertiges nehmen.
  52. 52. yay o/
  53. 53. Fail. Fail often. Fail hard. …and learn.
  54. 54. Fragen?
  55. 55. Danke @MadeMyDay http://siebennull.com http://mademyday.de

×