O slideshow foi denunciado.

SEO Campixx 2018 - Webdesign, Performance und SEO

2

Compartilhar

Carregando em…3
×
1 de 27
1 de 27

SEO Campixx 2018 - Webdesign, Performance und SEO

2

Compartilhar

Baixar para ler offline

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.

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.

Mais Conteúdo rRelacionado

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

Notas

  • Starten wir mit einer kleinen Begriffsdefinition: Was ist Design? Design ist keine Kunst, meistens auch keine Katzenbilder, sondern alles, was wir im Internet präsentieren, dient einer Funktion.
  • Design definiert sich kaum durch Geschmack, sondern durch die Funktion und Ästhetik.
  • SEO ist nicht
  • SEO ist
  • Performance
  • KPI
  • Oder
  • Conversions / Formulare
  • Übrigens: Bei Website-Angeboten würde ich immer Gialdini‘s Prinzipien der Reziprozität beachten:

    Reziprozität/ Gegenseitigkeit: Durch Entgegenkommen in Form kostenloser Analysen, Test, Probefahrten und Events bei Nutzern das Gefühl wecken, etwas zurück geben zu müssen und zu Kaufen
    Sympathie: Ähnlichkeit zum Nutzer, Vertrautheit und Lob & Anerkennung in gemäßigter Form. Außerdem kann auch die äußere Attraktivität der Person, die überzeugen möchte, sympathisch auf uns wirken.
    Soziale Bewährtheit: Unsicherheit durch Erfahrungen anderer nehmen, also Bewertungen darstellen.
    Autorität: Starke Marken, Vergleichstests oder Expertenstimmen nutzen, denen Nutzer vertrauen.
    Verknappung: Knappe Güter sind wertvoller für uns, da wir eine Grundangst besitzen, dass eine Gelegenheit nicht mehr zur Verfügung stehen wird.
    Commitment und Konsistenz: (Potenzielle) Kunden durchwegs gleich ansprechen und so die Messages auf gesamter Kommunikations durchziehen.
    Zusammengehörigkeit: Wir lassen uns eher von etwas überzeugen, wenn wir es zu unserer Gruppe gehörend ansehen.
  • Rezensionen
  • Risiken von User Generated Content beheben
  • Beispiel für Menüführung mit Breadcrumbs
  • Vollbild-Probleme vermeiden
  • Beispiel für Menüführung mit Breadcrumbs
  • Ein konservativerer Ansatz mit Sublinks
  • Ein anderes Beispiel für Menüs mit Breadcrumbs und Sublinks
  • Zukunftsmusik: Man könnte aber noch einen Schritt weiter gehen bei komplexen Webseiten und so einen bleibenden Eindruck hinterlassen
  • Apropos Bewegtbild: Schauen wir uns mal die optimale Einbettung von Videos an: Diese lassen sich auch problemlos auf „Vollbild“ darstellen.
  • Medien: Videos und Typos
  • Medien: Bilder
    Hier ein Beispiel aus der vorhin gezeigten Seite mit den anfänglichen Rendering-Problemen.
    Links habe ich das Bild der Agentur mal in 1 Minute optimiert.: Das Bild ist danach 1% so groß.
    Rechts habe ich in 20 Minuten das Bild als SVG und als HTML nachgebaut: Das „Bild“ ist danach 0,1% so groß wie ursprünglich.
    Ich nenne sowas Verschwendung von Ressourcen.

    Apropos Bilder: Wer benutzt noch Alt-Tags? Wozu? Google hat eine KI und kann Bilder erkennen. Bilder-SEO ist praktisch tot.
  • Medien: Bilder
    Hier ein Beispiel aus der vorhin gezeigten Seite mit den anfänglichen Rendering-Problemen.
    Links habe ich das Bild der Agentur mal in 1 Minute optimiert.: Das Bild ist danach 1% so groß.
    Rechts habe ich in 20 Minuten das Bild als SVG und als HTML nachgebaut: Das „Bild“ ist danach 0,1% so groß wie ursprünglich.
    Ich nenne sowas Verschwendung von Ressourcen.

    Apropos Bilder: Wer benutzt noch Alt-Tags? Wozu? Google hat eine KI und kann Bilder erkennen. Bilder-SEO ist praktisch tot.
  • Medien: Videos und Typos
  • Weitere Inspiration zum Design
  • 2018 bewegt sich viel
  • ×