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?
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. Wer bin ich?
5 Jahre SEO
SEARCHTEQ
SEO Konzeption
Das Telefonbuch
Gelbe Seiten
Conny Stier
München
Flamenco-Tanz
Berge
2
Mama
3. Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. Technische Anforderungen
3
4. Was ist Responsive Webdesign?
4Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de
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. Was ist RESS?
6Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de
7. Was heißt Dynamische Bereitstellung?
7Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de
8. Was heißt unterschiedliche Versionen?
8Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de
11. Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. Technische Anforderungen
11
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. Technische Anforderungen
22
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
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"> </div>
Per CSS wird das Bild dann angesteuert:
#pic {
background:url('/sprite.jpg');
background-position: 0px -303px;
width: 101px;
height: 99px;
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. 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. Agenda
1. Mobile Optimierung: Umsetzungsvarianten
2. Konzept
3. Wireframing
4. Bilder, Touch Targets und Schriftgrößen
5. Technische Anforderungen
31
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. 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. 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. Viewport - „Das Guckfenster“
user-scalable
Möglichkeit für Nutzer zu zoomen
Angabe durch „0“ (nicht zoombar) oder „1“ (zoombar)
user-scalable=1
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. 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. □ 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. 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…
