Responsive oder Flat Design war gestern. Heute geht SEO und Performance über alles, oder? Ich zeige anhand von Beispielen großer und kleiner Firmen auf, wo Fallstricke in der Gestaltung und Arbeit mit CMS liegen, wie man diese beheben kann. Es gibt einen Mittelweg zwischen optimalen Ladezeiten, bestmöglicher SEO Wirkung und individuellem Design. Präsentation zum Vortrag von Severin Lucks auf der SEO Campixx 2018 in Berlin.

1. Webdesign, Performance und SEO -
Gegensätze oder Chancen?
Severin Lucks
• Geschäftsführer und-Berater @ DELUCKS.com
• Speaker
• SEO-Trainer @ eMBIS.de/seminare/seo-seminar.html

2. Was ist Design? Eigentlich nicht subjektive
Kreativität sondern…
Quelle: Confetti Webdesign

3. f f f
… die Form folgt der Funktion

4. Wir optimieren in der SEO nicht für Google,
sondern für Nutzer
Quelle: Lentz Detektei

5. SEO bedeutet relevante, originale und aktuelle Inhalte zu entwickeln, die
zu dem Bedürfnissen der Nutzer passen. Damit bauen wir Reputation
auf (nicht im Sinne von Linkbuilding, sondern von PR)

6. Werbung Kommunikation Information Konversion
SEO
DESIGN
Design und SEO in der Customer Journey bzw.
im Online-Marketing-Funnel

7. Impress-
ionen &
Rankings
Reaktionen
& Klicks
Ladezeit &
Klickpfade
Verweil-
dauer
Wieder-
kehrende
Nutzer
Click
through
Rate
Conversion
Rate
KPI (Messwerte) im Online-Marketing-Funnel: Es geht
zwar auch um Reichweite, doch um Conversions zu
erreichen, müssen auch Nutzersignale stimmen

8. content
usability
leads
Kurz gesagt:

9. Beispiel zur Lead-Generierung
Quelle: Giving what we can

10. Berücksichtige bei der Conversion-
Optimierung die Cialdini‘s Prinzipien
Quelle: Galbani Mozzarella

11. Beispiel: Bewertungen auf eigener Website abbilden und so
Zweifel an Fehlentscheidungen bei Nutzern nehmen und
zusätzlich mit Sternchen in Google erscheinen
Quelle: phoenixbad.de, Google

12. Wenn man aber mit nutzergenerierten Inhalten auf Angebotsseiten arbeitet, muss
man drauf achten dass durch Contents der Nutzer die Relevanz der eigenen
(statischen) Inhalte nicht negativ beeinflusst werden. Eine Möglichkeit mit kaum
Cloaking-Risiko ist, Bewertungen und Kommentare per Ajax nachzuladen
Quelle: Google

13. Bewertungsstern funktionieren am besten als
„Creative Work“ in den strukturierten Daten
Quelle: Google

14. Bei Fullscreen-Designs muss das Rendering beachtet werden
Quelle: Google

15. Ein weiteres Beispiel ist die Navigation.
Konzentriert euch auf das Wesentliche!
Quelle: DELUCKS

16. Apple zeigt auf Unterseiten beim Scrollen auch nur noch
die relevanten Links und Call-to-Action-Buttons
Quelle: Apple

17. Die Mittelbayerische kombiniert Breadcrumbs
mit Dropdowns
Quelle: Mittelbayerische

18. Noch Zukunftsmusik ist die Spektrumnavigation,
die auch per Gesten gesteuert werden kann
Quelle: Pinterest

19. Apropos Bewegdbild: Auch bei Videos sollte
man ein paar Tricks beachten
Quelle: BMW

20. Einfaches YouTube-Einbetten bremst oft Seiten aus und ist auch aus
Datenschutz-Sicht nicht empfehlenswert. Deswegen sollten Videos per
Cookieless-Domain eingebettet und nachgeladen werden.
http://bit.ly/lazy-youtube
Quelle: WebPagetest

21. Beispiele zur Bildoptimierung
Original PNG 24bit von Agentur: 662kb
Zugeschnitten in PS als PNG 8bit: 10kb
PNG Komprimiert mit Compressor.io: 6kb
Quelle: Fenestra

22. Original PNG 24bit von Agentur: 662kb
Nachgebaut in Illustrator als SVG: 1kb
Nachgebaut in Dreamweaver als HTML: 0,6kb
Quelle: Fenestra

23. http://bit.ly/analytics-lokal http://bit.ly/fonts-lokal
Weiteres Einsparpotenzial zum PageSpeed liegt in
Google Analytics/ Tag Manager und Fonts
Quelle: Google

24. ★★★★★
★★★★
★★★★★
Warum eigentlich nicht mal die Sonderzeichen
ausprobieren und per CSS und JavaScript animieren?

25. Lasse dich inspirieren!
http://bit.ly/webdesign-2018
Quelle: Pinterest

26. Übrigens: WordPress bringt heuer den
Gutenberg-Editor raus
Und wir ein kostenloses, leicht individualisierbares Gutenberg-Theme
Quelle: WordPress

27. Danke!
Vernetzen wir uns auf Xing, LinkedIn
oder Facebook: Severin Lucks