SEO Produktspezifikation für RWD

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">&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!

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