Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SEO Campixx 2018 - Webdesign, Performance und SEO

422 views

Published on

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.

Published in: Internet
  • Be the first to comment

SEO Campixx 2018 - Webdesign, Performance und SEO

  1. 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. 2. Was ist Design? Eigentlich nicht subjektive Kreativität sondern… Quelle: Confetti Webdesign
  3. 3. f f f … die Form folgt der Funktion
  4. 4. Wir optimieren in der SEO nicht für Google, sondern für Nutzer Quelle: Lentz Detektei
  5. 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. 6. Werbung Kommunikation Information Konversion SEO DESIGN Design und SEO in der Customer Journey bzw. im Online-Marketing-Funnel
  7. 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. 8. content usability leads Kurz gesagt:
  9. 9. Beispiel zur Lead-Generierung Quelle: Giving what we can
  10. 10. Berücksichtige bei der Conversion- Optimierung die Cialdini‘s Prinzipien Quelle: Galbani Mozzarella
  11. 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. 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. 13. Bewertungsstern funktionieren am besten als „Creative Work“ in den strukturierten Daten Quelle: Google
  14. 14. Bei Fullscreen-Designs muss das Rendering beachtet werden Quelle: Google
  15. 15. Ein weiteres Beispiel ist die Navigation. Konzentriert euch auf das Wesentliche! Quelle: DELUCKS
  16. 16. Apple zeigt auf Unterseiten beim Scrollen auch nur noch die relevanten Links und Call-to-Action-Buttons Quelle: Apple
  17. 17. Die Mittelbayerische kombiniert Breadcrumbs mit Dropdowns Quelle: Mittelbayerische
  18. 18. Noch Zukunftsmusik ist die Spektrumnavigation, die auch per Gesten gesteuert werden kann Quelle: Pinterest
  19. 19. Apropos Bewegdbild: Auch bei Videos sollte man ein paar Tricks beachten Quelle: BMW
  20. 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. 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. 22. Original PNG 24bit von Agentur: 662kb Nachgebaut in Illustrator als SVG: 1kb Nachgebaut in Dreamweaver als HTML: 0,6kb Quelle: Fenestra
  23. 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. 24. ★★★★★ ★★★★ ★★★★★ Warum eigentlich nicht mal die Sonderzeichen ausprobieren und per CSS und JavaScript animieren?
  25. 25. Lasse dich inspirieren! http://bit.ly/webdesign-2018 Quelle: Pinterest
  26. 26. Übrigens: WordPress bringt heuer den Gutenberg-Editor raus Und wir ein kostenloses, leicht individualisierbares Gutenberg-Theme Quelle: WordPress
  27. 27. Danke! Vernetzen wir uns auf Xing, LinkedIn oder Facebook: Severin Lucks

×