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

Wer bin ich?
5 Jahre SEO
SEARCHTEQ
SEO Konzeption
Das Telefonbuch
Gelbe Seiten
Conny Stier
München
Flamenco-Tanz
Berge
2
Mama

Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. Technische Anforderungen
3

Was ist Responsive Webdesign?
4Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de

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…

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/configurations/index?hl=de

Was heißt unterschiedliche Versionen?
8Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de

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. Technische Anforderungen
11

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

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

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

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

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!

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

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

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/

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

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

Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. Technische Anforderungen
22

Wie hilft Wireframing?

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

Tools, Tools, Tools
25

Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. Technische Anforderungen
26

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

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

Google-Empfehlung für Schriftgrößen
Der Text muss ohne Zoomen gelesen werden können!
Quelle: https://developers.google.com/speed/docs/insights/UseLegibleFontSizes

Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. Technische Anforderungen
31

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

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

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

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

Viewport - „Das Guckfenster“
user-scalable
Möglichkeit für Nutzer zu zoomen
Angabe durch „0“ (nicht zoombar) oder „1“ (zoombar)
user-scalable=1

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

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

□ 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

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…

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