SEO Produktspezifikation für RWD
Konzeption mit Wireframing
Das Konzept: Für jeden verständlich und übersichtlich,
gemacht...
Wer bin ich?
5 Jahre SEO
SEARCHTEQ
SEO Konzeption
Das Telefonbuch
Gelbe Seiten
Conny Stier
München
Flamenco-Tanz
Berge
2
M...
Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. ...
Was ist Responsive Webdesign?
4Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/ind...
Was sagt Google?
5
„Responsive Webdesign
ist der von Google
empfohlene Ansatz.“
Google Developers
…das heißt aber nicht,
d...
Was ist RESS?
6Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de
Was heißt Dynamische Bereitstellung?
7Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurati...
Was heißt unterschiedliche Versionen?
8Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurat...
Und was passiert, wenn nicht?
Und was passiert, wenn nicht?
Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. ...
Die Arbeit vor dem Konzept
□ Analyse
Wieviel Mobile-Traffic von Phone und Tablet habt Ihr aktuell?
 Potential erkennen
Qu...
Die Arbeit vor dem Konzept
□ Umsetzungsvariante klären
Responsive Webdesign / RESS
Dynamische Bereitstellung
Separate Vers...
Die Arbeit vor dem Konzept
Macht pro Seitentyp eine Liste der Elemente, um einen Überblick zu haben:
Element/
Content
Desk...
Was muss alles ins Konzept?
□ Umsetzungsvariante
□ Breakpoints (Responsive Webdesign)
bzw. User-Agents (Dynamische Bereits...
Breakpoints
Breakpoints macht man um Inhalte angepasst auf unterschiedlichen
Screengrößen darzustellen.
Quelle: http://www...
Minor und Major Breakpoints
Minor Breakpoints
• Elemente brechen im
„fluid grid layout“ um
• Zeilenbreiten verkürzen sich
...
Breakpoints & Media Queries
Breakpoints (Sprungmarken) pro Seitentyp nach Auflösungen
definieren!
Das Layout ändert sich b...
Media Queries – die wichtigsten Werte
width/height
gibt Styles für bestimmte Breiten/Höhen des Browserfensters
an.
Gültige...
Media Queries – die wichtigsten Werte
orientation
gibt Styles die Ausrichtung des Geräts an.
Angaben: portrait
landscape
<...
Seiten konzipieren
Welche Elemente gibt es auf der Seite?
Was sind die wichtigsten?
Darstellungsvarianten scribblen
Darste...
Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. ...
Wie hilft Wireframing?
Wireframing: Was muss man beachten?
□ Erstellt ein Wireframe für jeden Major Breakpoint,
also auch für Quer- und Hochforma...
Tools, Tools, Tools
25
Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. ...
Best Practices für Bilder und Fotos
div
Best Practices für Grafiken
Verwendung von CSS-Sprites
für User Interface Grafiken
Im HTML-Quellcode wird hier nur ein
<di...
Google-Empfehlung für Touch Targets
Die Touch Targets (Buttons, Links, Eingabefelder) müssen so groß sein,
dass Nutzer sie...
Google-Empfehlung für Schriftgrößen
Der Text muss ohne Zoomen gelesen werden können!
Quelle: https://developers.google.com...
Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. ...
Technische Anforderungen
Responsive
Webdesign
Dynamische
Bereitstellung
Separate Desktop-
und Mobilversion
Vary-HTTP-Heade...
Viewport - „Das Guckfenster“
Für Responsive Webdesign muss ein Meta-Element für den
Darstellungsbereich angegeben werden –...
Viewport - „Das Guckfenster“
width/height
Breite/Höhe des Darstellungsbereichs
als feste Pixel-Angaben oder in der Größe d...
Viewport - „Das Guckfenster“
initial scale
Zoom-Faktor bei Aufruf der Seite
Angabe von >0 bis 10-Faches
Skala: 0.1 – 10.0 ...
Viewport - „Das Guckfenster“
user-scalable
Möglichkeit für Nutzer zu zoomen
Angabe durch „0“ (nicht zoombar) oder „1“ (zoo...
Viewport - „Das Guckfenster“
minimum-scale/maximum-scale
Minimale/Maximale Skalierung der Seite
Angabe von >0 bis 10-Fache...
Viewport - „Das Guckfenster“
<meta name=viewport content=”width=device-width, initial-scale=1,
user-scalable=1, minimum-sc...
□ Kleine Bilder durch korrekte Formatierung und Komprimierung
□ Auf das Rendering der Seite blockierende Elemente verzicht...
Alle glücklich? 
Designer
kennt nun…
Template-Entwickler
kennt nun…
 Breakpoints/Geräte
 Elemente
 Seitenaufbau
 Usab...
Conny Stier | SEARCHTEQ GmbH
Kontakt
https://www.xing.com/profile/Conny_Stier
https://www.linkedin.com/in/conny-stier-3118...
Nächste SlideShare
Wird geladen in …5
×

SEO Produktspezifikation für RWD

452 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
452
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

×