SlideShare ist ein Scribd-Unternehmen logo
1 von 41
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

Weitere ähnliche Inhalte

Was ist angesagt?

Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Christoph Mühlbauer
 
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streichESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streichRomano Roth
 
MVP - Methode richtig umgesetzt
MVP - Methode richtig umgesetztMVP - Methode richtig umgesetzt
MVP - Methode richtig umgesetztFLYACTS GmbH
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Webch.ch
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0thoemmes
 
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices Peter Rozek
 

Was ist angesagt? (6)

Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
 
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streichESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streich
 
MVP - Methode richtig umgesetzt
MVP - Methode richtig umgesetztMVP - Methode richtig umgesetzt
MVP - Methode richtig umgesetzt
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Web
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
 
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
 

Andere mochten auch

SEO Internation - SEO Campixx 2016
SEO Internation - SEO Campixx 2016SEO Internation - SEO Campixx 2016
SEO Internation - SEO Campixx 2016Carolin Hoffmeyer
 
SEO Projekte in der agilen Entwicklung nach Scrum | Learnings und Tipps
SEO Projekte in der agilen Entwicklung nach Scrum | Learnings und TippsSEO Projekte in der agilen Entwicklung nach Scrum | Learnings und Tipps
SEO Projekte in der agilen Entwicklung nach Scrum | Learnings und TippsBianca Zang
 
CAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
CAMPIXX 2016 Internationales SEO mit seinen Höhen und TiefenCAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
CAMPIXX 2016 Internationales SEO mit seinen Höhen und TiefenAlona Demchyk (Hakel)
 
SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)
SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)
SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)Mario Schwertfeger
 
WordPress Professional II
WordPress Professional IIWordPress Professional II
WordPress Professional IISebastian Blum
 

Andere mochten auch (7)

SEO Internation - SEO Campixx 2016
SEO Internation - SEO Campixx 2016SEO Internation - SEO Campixx 2016
SEO Internation - SEO Campixx 2016
 
SEO Projekte in der agilen Entwicklung nach Scrum | Learnings und Tipps
SEO Projekte in der agilen Entwicklung nach Scrum | Learnings und TippsSEO Projekte in der agilen Entwicklung nach Scrum | Learnings und Tipps
SEO Projekte in der agilen Entwicklung nach Scrum | Learnings und Tipps
 
CAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
CAMPIXX 2016 Internationales SEO mit seinen Höhen und TiefenCAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
CAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
 
App Indexing, Campixx 2016 Workshop
App Indexing, Campixx 2016 WorkshopApp Indexing, Campixx 2016 Workshop
App Indexing, Campixx 2016 Workshop
 
Next generation seo
Next generation seoNext generation seo
Next generation seo
 
SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)
SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)
SEO Campixx 2016 - Frühjahrsputz für die Website (SEO Geisterjagd)
 
WordPress Professional II
WordPress Professional IIWordPress Professional II
WordPress Professional II
 

Ähnlich wie SEO Produktspezifikation für RWD

Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
 
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...Rainer Stropek
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content ExperiencePeter Rozek
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft AG
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapGregor Biswanger
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda Wien
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden BlendMartin Hey
 
IA Konferenz 2009
IA Konferenz 2009IA Konferenz 2009
IA Konferenz 2009Jutta Korn
 
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der PraxisResponsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der PraxisRoberto Rizzi
 
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni MagdeburgResponsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburgmarmalade GmbH
 
Wie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
Wie Sie Mit Design Sprints Echten Digitalen Wandel SchaffenWie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
Wie Sie Mit Design Sprints Echten Digitalen Wandel SchaffeniTiZZiMO
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign ProcessSven Wolfermann
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Dominik Helleberg
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätPeter Rozek
 
2009 - Basta!: Agiles requirements engineering
2009 - Basta!: Agiles requirements engineering2009 - Basta!: Agiles requirements engineering
2009 - Basta!: Agiles requirements engineeringDaniel Fisher
 

Ähnlich wie SEO Produktspezifikation für RWD (20)

Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
 
Zinit.leistungen.webentwicklung.v1.0.de
Zinit.leistungen.webentwicklung.v1.0.deZinit.leistungen.webentwicklung.v1.0.de
Zinit.leistungen.webentwicklung.v1.0.de
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der Zukunft
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
 
IA Konferenz 2009
IA Konferenz 2009IA Konferenz 2009
IA Konferenz 2009
 
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der PraxisResponsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis
 
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni MagdeburgResponsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg
 
Wie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
Wie Sie Mit Design Sprints Echten Digitalen Wandel SchaffenWie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
Wie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
2009 - Basta!: Agiles requirements engineering
2009 - Basta!: Agiles requirements engineering2009 - Basta!: Agiles requirements engineering
2009 - Basta!: Agiles requirements engineering
 
design
designdesign
design
 

SEO Produktspezifikation für RWD

  • 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
  • 9. Und was passiert, wenn nicht?
  • 10. Und was passiert, wenn nicht?
  • 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
  • 26. Agenda 1. Mobile Optimierung: Umsetzungsvarianten 2. Konzept 3. Wireframing 4. Bilder, Touch Targets und Schriftgrößen 5. Technische Anforderungen 26
  • 27. Best Practices für Bilder und Fotos div
  • 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. 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
  • 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. 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…
  • 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