Post on 12-Apr-2017
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 KonzeptionDas Telefonbuch
Gelbe Seiten
Conny StierMünchen Flamenco-Tanz
Berge
2
Mama
Agenda
1. Mobile Optimierung: Umsetzungsvarianten2. Konzept3. Wireframing4. Bilder, Touch Targets und Schriftgrößen5. Technische Anforderungen
3
4
Was ist Responsive Webdesign?
Responsive Webdesign (RWD) ist eine Methode, bei der der Server immer denselben HTML-Code an alle Geräte sendet und CSS zum Einsatz kommt, um die Darstellung der Seite auf dem Gerät anzupassen.
Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de
5
Was sagt Google?
„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?
RESS heißt „Responsive Webdesign with serverside components“: Der Server ermittelt die Eigenschaften des Endgeräts
und liefert die Inhalte endgerätespezifisch und kontextabhängig aus. Das spart Ladezeit!
Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de
7
Was heißt Dynamische Bereitstellung?
Bei der dynamischen Bereitstellung übermittelt der Server unter derselben URL unterschiedlichen HTML- und CSS-Code. Das hängt davon ab, welcher User-Agent die Seite angefordert hat.
Quelle: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/index?hl=de
8
Was heißt unterschiedliche Versionen?
Bei unterschiedliche Versionen für unterschiedliche URLs gibt es für jede Desktop-URL eine zugehörige URL, über die für Mobilgeräte optimierte Inhalte bereitgestellt werden. Jede Version hat ihre eigene URL und ihr eigenes HTML.
Quelle: 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: Umsetzungsvarianten2. Konzept3. Wireframing4. Bilder, Touch Targets und Schriftgrößen5. Technische Anforderungen
11
Die Arbeit vor dem Konzept
□ AnalyseWieviel 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ärenResponsive Webdesign / RESSDynamische Bereitstellung Separate Versionen
Rahmen schaffen
□ Content, Content, ContentWas 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 Seitentypund mit den Ausprägungen für die jeweiligen Breakpoints bzw. Endgeräte
□ Technische AnforderungenTechnische Angaben abhängig von der UmsetzungsvariantePerformance-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 & Grafikenskalierenverändernein-/ausblenden
Ein-/Ausblendenvon Inhalten
Media Queries – die wichtigsten Werte
width/heightgibt Styles für bestimmte Breiten/Höhen des Browserfensters an.
Gültige Attribute:width | min-width | max-widthheight | 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
orientationgibt 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
…und es gibt noch viele mehr…https://www.w3.org/TR/css3-mediaqueries
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 dieverschiedenen Screens
Agenda
1. Mobile Optimierung: Umsetzungsvarianten2. Konzept3. Wireframing4. Bilder, Touch Targets und Schriftgrößen5. Technische Anforderungen
22
Wie hilft Wireframing?
Wireframes sind keine Designs!Position und Größe erfolgt erst im Layout.
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änderCa. 10px Ränder einplanenScrollbalken von ca. 15px einplanen
Tools, Tools, Tools
25
Agenda
1. Mobile Optimierung: Umsetzungsvarianten2. Konzept3. Wireframing4. Bilder, Touch Targets und Schriftgrößen5. Technische Anforderungen
26
Best Practices für Bilder und Fotos
div
Einbindung von Bildern in festen Größen,
die sich dann entsprechend skalieren:
• width für den Container (div)
• Skalierung des Bildes: max_width=100%
Responsive Images kosten Performance durch dynamisches Rendering bei Seitenaufruf! Daher nur für Seiten zu empfehlen,
die von ihren Bildern leben!
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;
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!
Google empfiehlt mind. 7 mm bzw.
48 CSS-Pixeln "Touch Target“
Selten verwendete, unwichtigere Elemente können kleiner gestaltet sein.Dann sollten die Abstände mind. 5 mm bzw. 32 CSS-Pixel betragen.
Abstand sollte mind. 2 mm bzw. 13 CSS-Pixel sein
Quelle: https://developers.google.com/speed/docs/insights/UseLegibleFontSizes
Google-Empfehlung für Schriftgrößen
Der Text muss ohne Zoomen gelesen werden können!
Google empfiehlt eine Basis-Schriftgröße von 16 CSS-Pixeln.Standard-Zeilenhöhe des
Browsers sollte 1,2em sein.
Quelle: https://developers.google.com/speed/docs/insights/UseLegibleFontSizes
Zeilen sollte maximal 80
Zeichen beinhalten.
Agenda
1. Mobile Optimierung: Umsetzungsvarianten2. Konzept3. Wireframing4. Bilder, Touch Targets und Schriftgrößen5. 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/heightBreite/Höhe des Darstellungsbereichs
als feste Pixel-Angaben oder in der Größe des Geräts
width=768 height=768width=device-width heigth=device-height
Viewport - „Das Guckfenster“
initial scaleZoom-Faktor bei Aufruf der Seite
Angabe von >0 bis 10-FachesSkala: 0.1 – 10.0 (1.0 = 100%)
initial-scale=1
Viewport - „Das Guckfenster“
user-scalableMöglichkeit für Nutzer zu zoomen
Angabe durch „0“ (nicht zoombar) oder „1“ (zoombar)
user-scalable=1
Viewport - „Das Guckfenster“
minimum-scale/maximum-scaleMinimale/Maximale Skalierung der Seite
Angabe von >0 bis 10-FachesSkala: 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 NutzersMinimale 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?
Designerkennt nun…
Template-Entwicklerkennt nun…
Breakpoints/Geräte Elemente Seitenaufbau Usability-Vorgaben
Umsetzungsvariante Breakpoints/Geräte Elemente CSS-Anforderungen
Umsetzungsvariante Elemente & Features Technische
Anforderungen
Developerkennt 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