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.

1. Die Gefahren von Webdesign Trends.
@MadeMyDay(//(Marc(Hinse(//(Webkongress(Erlangen(21.03.2014

2. Was heißt hier „Trends“?
Parallax
Webfonts
HTML5
CSS3
Flat Design
Responsive
Storytelling
Onepager
backgroundVideos
Heroe Areas
große Typographie

3. Was schief gehen kann…

4. geht schief.

7. 180 Requests.
EINHUNDERTACHTZIG!
> 32MB.
ZWEIUNDDREISSIG!

8. 180 Requests.
EINHUNDERTACHTZIG!
> 32MB.
ZWEIUNDDREISSIG!

9. PArallax.

10. Seit ca. 2008 verbreitet. Echt jetzt.

11. Aber erst in letzter Zeit der richtig heisse scheiss.

12. Flash ist tot und begraben.
…und wir graben die verweste Leiche wieder aus

13. parallax.Pros: [
“dezentes(!) Enhancement“,
“räumlicher Eindruck“,
“WOW-Effekt“,
“einfache Implementierung“
]

14. Parallax.Contras: [
“Ladezeit“,
“Performance“,
“Ablenkung vom Content“,
“Responsive?“
]

16. Was tun, wenn der DEsigner oder
Kunde unbedingt Parallax will?

17. Nachdenken!

18. Dev Tools nutzen.

20. 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?“
]

21. Tipps.Parallax.css: [
“3D-Beschleunigung nutzen
(transform3d statt
position)“,
“position: fixed ist
kritisch“,
“Touch-Gerät? Grundregel:
bleiben lassen“]

22. Tipps.Parallax.js: [
“RequestAnimationFrame statt
onScroll“,
“window.pageYOffset statt
offset().top“,
“Kalkulationen der Positionen
speichern“,
“nur das Animieren, was auch zu
sehen ist“
]

23. backgroundvideos.

25. Was ist mit Smartphones?

27. Backgroundvideos.Pros: [
“Aufmerksamkeit“,
“erzeugt Stimmung“,
“WOW-Effekt“,
“einfache Implementierung“
]

28. Backgroundvideos.Contras: [
“Ladezeit“,
“Performance“,
“Ablenkung vom Content“,
“Touchgeräte?“
]

29. Was tun, wenn der DEsigner oder Kunde
unbedingt backgroundVideos will?

30. Nachdenken!

31. Tipps.backgroundVideos.allgemein: [
“Nur Deko, kein wichtiger Inhalt
(klingt blöd, ist aber so)“,
“darf nicht ablenken“,
“muss zum Website-Thema passen“
]

32. Tipps.backgroundVideos.technik: [
“Komprimieren!“,
“Pattern drüberlegen.“,
“Flash-Fallback? Weglassen!“,
“Touchgerät? Weglassen!“,
“out of Viewport? pausieren!“,
“HTML5 Video erlaubt media
queries!“
]

34. Responsive Webdesign.

35. Kein Trend, sondern Notwendigkeit.

37. missverstaendnisse.responsive: [
“muss trotzdem alles laden /
blendet vermeintlich
unwichtiges einfach aus“,
“sieht langweilig aus.“,
“kein Platz für Corporate
Design“
]

40. responsive.Pros: [
“eine Website“,
“ein CMS“,
“einmal Content (Text)“,
“einmal Medien (Bilder)“,
“eine Redaktion“
]

41. responsive.Contras: [
]
“umdenken“,
“nachdenken“,
“testen“

42. 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“
]

43. Bilder verursachen über 50% des Traffics.

44. Frech geklaut bei @maddesigns

45. Lösung: Responsive Images.

48. Tipps.responsive.css: [
“mobile first ist mehr als
ein Buzzword“,
“Präprozessoren helfen“,
“Breakpoints sinnvoll wählen“
]

49. Tipps.responsive.js: [
“nur laden was nötig ist
(Beispiel enquire.js)“,
“Polyfills (Fluch und Segen)“
]

51. Typographie (Webfonts).

56. Das web besteht nicht mehr nur aus Arial und verdana.
…zum Glück.

57. webfonts.pro: [
“dem Einheitsbrei entfliehen“,
“Corporate Schrift nutzen“,
“Typographie als
gestalterisches Element“
]

58. 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“
]

59. 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“
]

60. Flat design.

61. Remarkable!

65. 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“
]

66. Noch Zeit? Noch Wach?

67. Allgemeine Tipps

68. Nachdenken!

69. Hungrig sein!

70. Verstehen (wollen)!

72. Eigenen Kram schreiben
…und wenns mal wieder nicht klappt, was fertiges nehmen.

74. yay o/

75. Fail. Fail often. Fail hard.
…and learn.

76. Fragen?

77. Danke
@MadeMyDay
http://siebennull.com
http://mademyday.de