SEO Produktspezifikation für RWD

502 Aufrufe

Veröffentlicht am

Das Konzept: Für jeden verständlich und übersichtlich, gemacht für Designer, Template-Entwickler und IT. Alle Anforderungen, alle Besonderheiten für mobile Optimierung müssen spezifiziert sein und dabei soll alles auch noch so einfach wie möglich aufbereitet sein. Gar nicht so einfach, oder?

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

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
502
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
11
Aktionen
Geteilt
0
Downloads
7
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

SEO Produktspezifikation für RWD

  1. 1. SEO Produktspezifikation für RWD Konzeption mit Wireframing Das Konzept: Für jeden verständlich und übersichtlich, gemacht für Designer, Template-Entwickler und IT. Alle Anforderungen, alle Besonderheiten für mobile Optimierung müssen spezifiziert sein und dabei soll alles auch noch so einfach wie möglich aufbereitet sein. Gar nicht so einfach, oder? Conny Stier | SEO CAMPIXX Berlin | 12.03.2016
  2. 2. Wer bin ich? 5 Jahre SEO SEARCHTEQ SEO Konzeption Das Telefonbuch Gelbe Seiten Conny Stier München Flamenco-Tanz Berge 2 Mama
  3. 3. Agenda 1. Mobile Optimierung: Umsetzungsvarianten 2. Konzept 3. Wireframing 4. Bilder, Touch Targets und Schriftgrößen 5. Technische Anforderungen 3
  4. 4. Was ist Responsive Webdesign? 4Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de
  5. 5. Was sagt Google? 5 „Responsive Webdesign ist der von Google empfohlene Ansatz.“ Google Developers …das heißt aber nicht, dass nichts anderes erlaubt wäre…
  6. 6. Was ist RESS? 6Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de
  7. 7. Was heißt Dynamische Bereitstellung? 7Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de
  8. 8. Was heißt unterschiedliche Versionen? 8Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de
  9. 9. Und was passiert, wenn nicht?
  10. 10. Und was passiert, wenn nicht?
  11. 11. Agenda 1. Mobile Optimierung: Umsetzungsvarianten 2. Konzept 3. Wireframing 4. Bilder, Touch Targets und Schriftgrößen 5. Technische Anforderungen 11
  12. 12. Die Arbeit vor dem Konzept □ Analyse Wieviel Mobile-Traffic von Phone und Tablet habt Ihr aktuell?  Potential erkennen Quelle: http://gs.statcounter.com/#desktop+mobile+tablet-comparison-DE-monthly-201501-201601 70% Desktop 23% Mobile 7% Tablet
  13. 13. Die Arbeit vor dem Konzept □ Umsetzungsvariante klären Responsive Webdesign / RESS Dynamische Bereitstellung Separate Versionen  Rahmen schaffen □ Content, Content, Content Was soll die Seite bieten? Welche Contents sind die wichtigsten – für ALLE Endgeräte? Welche Contents sind Zusatzcontents für größere Screens?  Überblick für den Seitenaufbau gewinnen
  14. 14. Die Arbeit vor dem Konzept Macht pro Seitentyp eine Liste der Elemente, um einen Überblick zu haben: Element/ Content Desktop Tablet Phone Wichtigkeit Breadcrumb x - - niedrig Navigation x x x mittel Suche x x x mittel Teaser x x x hoch Produktliste x x x hoch Filter x x x mittel Verlinkungen Inspiration x - - niedrig
  15. 15. Was muss alles ins Konzept? □ Umsetzungsvariante □ Breakpoints (Responsive Webdesign) bzw. User-Agents (Dynamische Bereitstellung) □ Contents, Grafiken und weitere Elemente pro Seitentyp und mit den Ausprägungen für die jeweiligen Breakpoints bzw. Endgeräte □ Technische Anforderungen Technische Angaben abhängig von der Umsetzungsvariante Performance-Anforderungen
  16. 16. Breakpoints Breakpoints macht man um Inhalte angepasst auf unterschiedlichen Screengrößen darzustellen. Quelle: http://www.sonataweb.co.uk/essay/breakpoints.png Breakpoints werden aber nicht anhand der Auflösung der Geräte, sondern auf Basis des Inhalts definiert!
  17. 17. Minor und Major Breakpoints Minor Breakpoints • Elemente brechen im „fluid grid layout“ um • Zeilenbreiten verkürzen sich • Schriftgrößen werden kleiner Major Breakpoints • Es werden Elemente ein- oder ausgeblendet • Es wird das Layout essentiell verändert Quelle: http://i.stack.imgur.com/OwGIf.jpg
  18. 18. Breakpoints & Media Queries Breakpoints (Sprungmarken) pro Seitentyp nach Auflösungen definieren! Das Layout ändert sich bei verschiedenen Auflösungen hinsichtlich:  Diese Änderungen werden über Media Queries gesteuert: Das sind Medienabfragen, auf die einzelne CSS-Stile angewendet werden. Schriftgrößen Menüdarstellung Bilder & Grafiken skalieren verändern ein-/ausblenden Ein-/Ausblenden von Inhalten
  19. 19. Media Queries – die wichtigsten Werte width/height gibt Styles für bestimmte Breiten/Höhen des Browserfensters an. Gültige Attribute: width | min-width | max-width height | min-height | max-heigth Angaben in Pixel <link rel="stylesheet" media="(max-width: 480px)" href=„mobile.css"> Quelle: https://www.w3.org/TR/css3-mediaqueries/
  20. 20. Media Queries – die wichtigsten Werte orientation gibt Styles die Ausrichtung des Geräts an. Angaben: portrait landscape <link rel="stylesheet" media="(orientation: portrait)" href=„portrait.css“> Quelle: https://www.w3.org/TR/css3-mediaqueries/ landscape portrait
  21. 21. Seiten konzipieren Welche Elemente gibt es auf der Seite? Was sind die wichtigsten? Darstellungsvarianten scribblen Darstellung der Elemente für verschiedene Screens Elemente im Detail beschreiben mit ihren Ausprägungen für die verschiedenen Screens
  22. 22. Agenda 1. Mobile Optimierung: Umsetzungsvarianten 2. Konzept 3. Wireframing 4. Bilder, Touch Targets und Schriftgrößen 5. Technische Anforderungen 22
  23. 23. Wie hilft Wireframing?
  24. 24. Wireframing: Was muss man beachten? □ Erstellt ein Wireframe für jeden Major Breakpoint, also auch für Quer- und Hochformat für Tablet und Phone □ Welcher Inhalt ist wo? Wie strukturiert sich der Inhalt? Wie verändert sich die Navigation? Was wird ein- und ausgeblendet? □ Bedenkt dabei, welche Contents sind die wichtigsten? Welche Elemente müssen auf alle Endgeräte - welche sind nur Zusatz? □ Denkt an die Ränder Ca. 10px Ränder einplanen Scrollbalken von ca. 15px einplanen
  25. 25. Tools, Tools, Tools 25
  26. 26. Agenda 1. Mobile Optimierung: Umsetzungsvarianten 2. Konzept 3. Wireframing 4. Bilder, Touch Targets und Schriftgrößen 5. Technische Anforderungen 26
  27. 27. Best Practices für Bilder und Fotos div
  28. 28. Best Practices für Grafiken Verwendung von CSS-Sprites für User Interface Grafiken Im HTML-Quellcode wird hier nur ein <div> eingebunden und mit einer Klasse bzw. ID gekennzeichnet: <div id="pic">&nbsp;</div> Per CSS wird das Bild dann angesteuert: #pic { background:url('/sprite.jpg'); background-position: 0px -303px; width: 101px; height: 99px;
  29. 29. Google-Empfehlung für Touch Targets Die Touch Targets (Buttons, Links, Eingabefelder) müssen so groß sein, dass Nutzer sie auf Tablet und Phone auch treffen! Selten verwendete, unwichtigere Elemente können kleiner gestaltet sein. Dann sollten die Abstände mind. 5 mm bzw. 32 CSS-Pixel betragen. Quelle: https://developers.google.com/speed/docs/insights/UseLegibleFontSizes
  30. 30. Google-Empfehlung für Schriftgrößen Der Text muss ohne Zoomen gelesen werden können! Quelle: https://developers.google.com/speed/docs/insights/UseLegibleFontSizes
  31. 31. Agenda 1. Mobile Optimierung: Umsetzungsvarianten 2. Konzept 3. Wireframing 4. Bilder, Touch Targets und Schriftgrößen 5. Technische Anforderungen 31
  32. 32. Technische Anforderungen Responsive Webdesign Dynamische Bereitstellung Separate Desktop- und Mobilversion Vary-HTTP-Header: Vary: User-Agent Viewport Annotationen rel=“alternate“ rel=“canonical“ Umsetzungsvariante Technische Angaben zur Darstellung auf diversen Geräten
  33. 33. Viewport - „Das Guckfenster“ Für Responsive Webdesign muss ein Meta-Element für den Darstellungsbereich angegeben werden – der Viewport: Wie soll der Browser Abmessungen und Skalierungen der Seite steuern? <meta name=viewport content=”width=device-width, height=device-heigth, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1″>
  34. 34. Viewport - „Das Guckfenster“ width/height Breite/Höhe des Darstellungsbereichs als feste Pixel-Angaben oder in der Größe des Geräts width=768 height=768 width=device-width heigth=device-height
  35. 35. Viewport - „Das Guckfenster“ initial scale Zoom-Faktor bei Aufruf der Seite Angabe von >0 bis 10-Faches Skala: 0.1 – 10.0 (1.0 = 100%) initial-scale=1
  36. 36. Viewport - „Das Guckfenster“ user-scalable Möglichkeit für Nutzer zu zoomen Angabe durch „0“ (nicht zoombar) oder „1“ (zoombar) user-scalable=1
  37. 37. Viewport - „Das Guckfenster“ minimum-scale/maximum-scale Minimale/Maximale Skalierung der Seite Angabe von >0 bis 10-Faches Skala: 0.1 – 10.0 (1.0 = 100%) minimum-scale=1 maximum-scale=5
  38. 38. Viewport - „Das Guckfenster“ <meta name=viewport content=”width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=5″> Darstellungsbreite Skalierung der Seite bei Aufruf Zoom-Möglichkeit des Nutzers Minimale Skalierung Maximale Skalierung
  39. 39. □ Kleine Bilder durch korrekte Formatierung und Komprimierung □ Auf das Rendering der Seite blockierende Elemente verzichten, alternativ asynchron □ Browser-Caching und Komprimierung aktivieren □ Wichtige Seiteninhalte “above the fold” als erstes laden lassen □ JavaScript & CSS möglichst am Ende der Seite laden □ Möglichst wenig JavaScript verwenden □ Server-Antwortzeit max. 200 ms □ Weiterleitungen vermeiden Optimierungen für PageSpeed
  40. 40. Alle glücklich?  Designer kennt nun… Template-Entwickler kennt nun…  Breakpoints/Geräte  Elemente  Seitenaufbau  Usability-Vorgaben  Umsetzungsvariante  Breakpoints/Geräte  Elemente  CSS-Anforderungen  Umsetzungsvariante  Elemente & Features  Technische Anforderungen Developer kennt nun…
  41. 41. Conny Stier | SEARCHTEQ GmbH Kontakt https://www.xing.com/profile/Conny_Stier https://www.linkedin.com/in/conny-stier-31181ba2 http://de.slideshare.net/ConnyStier1 0160-99421213

×