SlideShare ist ein Scribd-Unternehmen logo
Responsive Webdesign
Was ist das und welche Vorteile kann es bringen?
Inhalt
1. Begriffserklärung
2. Bedeutung
3. Wann und warum?
4. Layouttypen
5. Vorteile
6. Zusammenfassung (Beispiele)
3
Begriffs-
erklärung
4
Was versteht man unter dem Begriff
Responsive Webdesign?
• „reagierendes“ Webdesign
• „Responsive Webdesign“ wurde erstmals von
Ethan Marcotte im Mai 2010 in einem Artikel für das
Magazin „A List Apart“ verwendet
• Inhalte auf jedem Bildschirm und jeder Bildschirmauflösung
optimal darstellen
• Nutzererlebnis und die Benutzerfreundlichkeit zu jeder Zeit optimal
5
Was versteht man unter dem Begriff
Responsive Webdesign?
• gesamtes Webdesign reagiert
(z. B. Bedienung und Reaktionen auf Eingaben)
• nicht nur das „Layout“ verschiebt sich!
• nicht nur gestalterische, sondern auch funktionelle Aspekte
werden situationsbedingt berücksichtigt
• nicht nur ein grafischer, sondern ein ganzheitlicher, strategischer
Ansatz für erfolgreiche Responsive Webseiten
6
Bedeutung
7
eine Entwicklung für mehrere Geräte!
nur eine
URL
nur einmal
Inhalt
nur eine
Programmierung
mit Hilfe von
Media Queries
„Einer für alle!“
8
• Media Queries ermöglichen eine ausreichende Abfrage
von Informationen zum Endgerät, um entsprechend
darauf reagieren zu können
• Zum Beispiel die Art des Ausgabemediums, die
Bildschirmauflösung oder der gerade genutzte Modus
(Landscape oder Portrait) werden in Erfahrung gebracht
• Media Queries können mehrere Bedingungen
integrieren. Sind diese erfüllt, werden bestimmte CSS-
Regeln aktiv bzw. komplette Stylesheets eingebunden
und somit Änderungen des Layouts realisiert.
Bedeutung
9
• Flexible Layouts, die sich optimal an die Bildschirmauflösung
des Endgeräts anpassen
• Auf diese Weise kann (z. B. auf Smartphones) immer die
gerätespezifische Variante der Website angezeigt werden
• Umsetzung durch neue Technologien (z. B. CSS3 und Media Queries)
• Mit Hilfe von JavaScript und Media Queries können strukturelle
Anpassungen vorgenommen werden, um den Besonderheiten
verschiedener Devices gerecht zu werden
Bedeutung
10
Viewports
1280 px 768 px 320 px
• „Ausschnitt“ des Browserfensters
• zur Verfügung stehender Bereich
• Display (z. B. Smartphone oder Tablet)
11
Breakpoints
mit Breakpoints ohne Breakpoints
• Breakpoints definieren, an welchen Stellen das Layout
einer Seite „umbrechen“ darf
• Webdesigner können so sicherstellen, dass ein Umbruch im Design, (z. B.
wenn sich die Seite verschmälert) nicht zu einem inhaltlichen Bruch führt.
12
Relative Einheiten
dynamische Prozent Werte fixe Pixel Werte
• Wenn die Größe des Bildschirms (auf der Inhalte angezeigt werden können)
variiert, ist auch die Pixeldichte der angezeigten Fläche nicht mehr in Stein
gemeißelt
• von festen Pixelvorgaben abrücken und relative Größeneinheiten definieren
(z. B. „50 Prozent des Screens“ oder „100 Prozent des Screens“)
13
Maximal- und Mindestwerte
mit Maximal-Breite ohne Maximal-Breite
• Verhindert, dass Inhalte zu klein dargestellt werden oder auf größeren
Bildschirmen zu sehr in die Breite gehen
• Eine Grenze (Pixelwert) wird für die maximale Breite definiert
(Verzerrungs-Effekt bleibt aus)
14
Wann und
warum?
15
Kontextsensitives Storytelling
• Jeder Screen und jedes darauf gespielte Format bieten für den User
unterschiedliche Kontexte
• spezielle Interaktionsmöglichkeiten (z. B. Gestensteuerung beim TV)
• situative Nutzwerte (z. B. geobasierte Services auf dem Smartphone)
• Möglichkeiten und Konventionen gilt es bei der Kommunikation von
Inhalten, Storys und reagierenden Webseiten zu beachten
16
Multi-Screen-Design
• SmartPhone, Tablets, Laptop, Desktop, ...
• SmartWatches, Glasses, SmartTVs, Spielekonsolen, Navigationsgeräte, ...
• Verschiedene Zugriffsquellen, unterschiedliche Displaygrößen
• Bedienung (Touchscreen vs. Tastatur) und Nutzungskontext
17
„Mobile First“ und „Desktop First“
Diese beiden Leitprinzipien des Responsive Webdesign geben an,
welcher Startpunkt für das Design einer Webseite gesetzt wird:
• Beginne ich auf dem kleinen Screen und passe das Design für größere
Auflösungen an ...
• oder starte ich mit der Desktop-Version und arbeite mich zu den kleineren
Smartphone-Größen vor
• Technisch gesehen gibt es keine großen Unterschiede
• Konzeptionell wichtig (Zielgruppenorientierung)
18
Layouttypen
19
Layouttypen
• Adaptive und Responsive (Adaptive Webseite vs. Responsive Webseite)
• Adaptive = stufenweise Anpassung (Technik: Pixel)
• Responsive = stufenlose Anpassung (Technik: Prozent)
Smartphone Tablet Desktop
20
Fixed Layout – Starr, nicht anpassungsfähig
+ Einfache Planung
+ Einfache Umsetzung
- Keine spezifische Optimierung für verschiedene Endgeräte
- Eingeschränkte Funktionalität durch abgeschnittenen Content
21
Adaptive Layout – Stufenweise anpassungsfähig
+ Passt sich an vordefinierte Darstellungsbereiche (Viewports) an
+ Content im Gegensatz zum Fixed Layout vollständig sichtbar
- Komplexere Planung als beim Fixed Layout, da mehrere Viewports
berücksichtigt werden müssen.
- Keine optimale Nutzung des Anzeigebereichs
22
Responsive Layout – Stufenlos anpassungsfähig
+ Optimale Nutzung des Viewports durch stufenlose Anpassung
+ In jeder beliebigen Darstellung ideales Nutzererlebnis
+ Geringerer Aufwand in der Content-Pflege
+ Zukunftsorientiert und flexibel
- Höherer Aufwand in Konzeption, Gestaltung und Entwicklung
23
Übersicht Layouttypen
Adaptive Layout –
Stufenweise anpassungsfähig
Fixed Layout –
Starr, nicht anpassungsfähig
Responsive Layout –
Stufenlos anpassungsfähig
24
Vorteile
25
Vorteile
WARUM EINE RESPONSIVE WEBSEITE?
Google empfiehlt Responsive:
Google erkennt, wenn Ihre Webseite für verschiedene Geräte
und Auflösungen optimiert ist und stuft sie somit höher im
Ranking ein.
Zufriedenere Besucher:
Die Aufenthaltsdauer, sowie die Aufmerksamkeit und Aktivität
der Besucher wird erhöht. Bei Online-Shops bedeutet das u.a.
steigende Verkaufszahlen.
Zukunftssicherheit:
Mit Responsive Webdesign kann Ihre Webseite dem User bei
jeder Displayauflösung optimal dargestellt werden.
Ersparnis:
Eine Entwicklung für mehrere Endgeräte. Es wird keine
gesonderte mobile Version programmiert, die separat gewartet
werden muss.
26
Zusammen-
fassung
27
Zusammenfassung
 „reagierendes“ Webdesign
 Optimales Nutzererlebnis und Benutzerfreundlichkeit
 Nicht nur grafischer, sondern ganzheitlicher, strategischer Ansatz (Technik)
 Flexible Layouts im Multi-Screen-Design
 Verschiedene Layouttypen (stufenweise und stufenlose Anpassung)
 Zukunftssicherheit
28
Beispiele
„BEST-OF“
www.g-star.com/de_de www.porsche.com/germany
29
Haben Sie Fragen?
Dann kontaktieren Sie uns unter info@avenit.de
oder
unter der Telefonnummer 0781/919 369 0.
Oder schreiben Sie uns auf Facebook
www.facebook.com/avenitag
Christian Seifert
CEO, Vorstandsvorsitzender

Weitere ähnliche Inhalte

Was ist angesagt?

Virtual worlds
Virtual worlds Virtual worlds
Virtual worlds
Melanie Swan
 
Presentation Virtual Reality and CAD
Presentation Virtual Reality and CADPresentation Virtual Reality and CAD
Presentation Virtual Reality and CAD
ontor omi
 
Virtual Retinal Display: their falling cost and rising performance
Virtual Retinal Display: their falling cost and rising performanceVirtual Retinal Display: their falling cost and rising performance
Virtual Retinal Display: their falling cost and rising performance
Jeffrey Funk
 
Web Devlopment ppt.pptx
Web Devlopment ppt.pptxWeb Devlopment ppt.pptx
Web Devlopment ppt.pptx
AartiVerma64
 
Responsive Design Presentation
Responsive Design PresentationResponsive Design Presentation
Responsive Design Presentation
Eugen Figursky
 
Headless CMS
Headless CMSHeadless CMS
Headless CMS
Erik Van de Water
 
Everything about flutter web development
Everything about flutter web developmentEverything about flutter web development
Everything about flutter web development
Katy Slemon
 
What is Web-scraping?
What is Web-scraping?What is Web-scraping?
What is Web-scraping?
Yu-Chang Ho
 
Building AR and VR Experiences
Building AR and VR ExperiencesBuilding AR and VR Experiences
Building AR and VR Experiences
Mark Billinghurst
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
Whitney Quesenbery
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
Karolina Coates
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
Global Media Insight
 
Introduction to Drupal Basics
Introduction to Drupal BasicsIntroduction to Drupal Basics
Introduction to Drupal Basics
Juha Niemi
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
Derin Dolen
 
2022 COMP4010 Lecture2: Perception
2022 COMP4010 Lecture2: Perception2022 COMP4010 Lecture2: Perception
2022 COMP4010 Lecture2: Perception
Mark Billinghurst
 
React Native
React NativeReact Native
React Native
Craig Jolicoeur
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
Mohammed Safwat
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework
Shyjal Raazi
 
Web development
Web developmentWeb development
Web development
RaziyaChoudhary
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
Mohammed Fazuluddin
 

Was ist angesagt? (20)

Virtual worlds
Virtual worlds Virtual worlds
Virtual worlds
 
Presentation Virtual Reality and CAD
Presentation Virtual Reality and CADPresentation Virtual Reality and CAD
Presentation Virtual Reality and CAD
 
Virtual Retinal Display: their falling cost and rising performance
Virtual Retinal Display: their falling cost and rising performanceVirtual Retinal Display: their falling cost and rising performance
Virtual Retinal Display: their falling cost and rising performance
 
Web Devlopment ppt.pptx
Web Devlopment ppt.pptxWeb Devlopment ppt.pptx
Web Devlopment ppt.pptx
 
Responsive Design Presentation
Responsive Design PresentationResponsive Design Presentation
Responsive Design Presentation
 
Headless CMS
Headless CMSHeadless CMS
Headless CMS
 
Everything about flutter web development
Everything about flutter web developmentEverything about flutter web development
Everything about flutter web development
 
What is Web-scraping?
What is Web-scraping?What is Web-scraping?
What is Web-scraping?
 
Building AR and VR Experiences
Building AR and VR ExperiencesBuilding AR and VR Experiences
Building AR and VR Experiences
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
 
Introduction to Drupal Basics
Introduction to Drupal BasicsIntroduction to Drupal Basics
Introduction to Drupal Basics
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
2022 COMP4010 Lecture2: Perception
2022 COMP4010 Lecture2: Perception2022 COMP4010 Lecture2: Perception
2022 COMP4010 Lecture2: Perception
 
React Native
React NativeReact Native
React Native
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework
 
Web development
Web developmentWeb development
Web development
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
 

Andere mochten auch

Schema.org - Strukturierte Daten und Rich Snippets
Schema.org - Strukturierte Daten und Rich SnippetsSchema.org - Strukturierte Daten und Rich Snippets
Schema.org - Strukturierte Daten und Rich Snippets
avenit AG
 
Transparency is the New Black
Transparency is the New BlackTransparency is the New Black
Transparency is the New Black
Dana Zezzo, CAS
 
The Digital Statstics 2014: Zahlen und Fakten zu Deutschland
The Digital Statstics 2014: Zahlen und Fakten zu DeutschlandThe Digital Statstics 2014: Zahlen und Fakten zu Deutschland
The Digital Statstics 2014: Zahlen und Fakten zu Deutschland
TWT
 
Webdesign für Blogger
Webdesign für BloggerWebdesign für Blogger
Webdesign für Blogger
Webdesign Journal
 
Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)
Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)
Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)
die.agilen GmbH
 
Webinale 14: Responsive Webdesign verkaufen / Pluswerk
Webinale 14: Responsive Webdesign verkaufen / PluswerkWebinale 14: Responsive Webdesign verkaufen / Pluswerk
Webinale 14: Responsive Webdesign verkaufen / Pluswerk
die.agilen GmbH
 
Responsive Webdesign für Grafiker & Entscheider
Responsive Webdesign für Grafiker & EntscheiderResponsive Webdesign für Grafiker & Entscheider
Responsive Webdesign für Grafiker & Entscheider
typovision GmbH
 
Responsive Webdesign verkaufen
Responsive Webdesign verkaufenResponsive Webdesign verkaufen
Responsive Webdesign verkaufen
die.agilen GmbH
 
Usability & Webdesign 2010
Usability & Webdesign 2010Usability & Webdesign 2010
Usability & Webdesign 2010
Benjamin Wiederkehr
 
Digitales Marketing 1 - Facebook für Unternehmen und Verbände
Digitales Marketing 1 - Facebook für Unternehmen und VerbändeDigitales Marketing 1 - Facebook für Unternehmen und Verbände
Digitales Marketing 1 - Facebook für Unternehmen und Verbände
Armin Ingo Müller
 
AZNetwork vers le très haut débit !
AZNetwork vers le très haut débit !AZNetwork vers le très haut débit !
AZNetwork vers le très haut débit !
AZNetwork
 
Palacio katerinski pps
Palacio katerinski   ppsPalacio katerinski   pps
Palacio katerinski pps
martahequera
 
Cuento 20
Cuento 20Cuento 20
Cuento 20
manueloyarzun
 
La quilla ecologica mes de agosto del 2013
La quilla ecologica mes de agosto del 2013La quilla ecologica mes de agosto del 2013
La quilla ecologica mes de agosto del 2013
manueloyarzun
 
Der CSMO als Content Provider - Veit Mathauer
Der CSMO als Content Provider - Veit MathauerDer CSMO als Content Provider - Veit Mathauer
Der CSMO als Content Provider - Veit Mathauer
csmo10
 
Informationskompetenz ?
Informationskompetenz ? Informationskompetenz ?
Informationskompetenz ?
BIS Biblio Info Suisse
 
Cuento 27
Cuento 27Cuento 27
Cuento 27
manueloyarzun
 
Table ronde n°1 - Denis Teyssou
Table ronde n°1 - Denis TeyssouTable ronde n°1 - Denis Teyssou
Table ronde n°1 - Denis Teyssou
Webullition
 
Presentación creo empleo
Presentación creo empleoPresentación creo empleo
Presentación creo empleo
Guadalinfo Bayarcal
 

Andere mochten auch (20)

Schema.org - Strukturierte Daten und Rich Snippets
Schema.org - Strukturierte Daten und Rich SnippetsSchema.org - Strukturierte Daten und Rich Snippets
Schema.org - Strukturierte Daten und Rich Snippets
 
Transparency is the New Black
Transparency is the New BlackTransparency is the New Black
Transparency is the New Black
 
The Digital Statstics 2014: Zahlen und Fakten zu Deutschland
The Digital Statstics 2014: Zahlen und Fakten zu DeutschlandThe Digital Statstics 2014: Zahlen und Fakten zu Deutschland
The Digital Statstics 2014: Zahlen und Fakten zu Deutschland
 
Webdesign für Blogger
Webdesign für BloggerWebdesign für Blogger
Webdesign für Blogger
 
Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)
Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)
Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)
 
Webinale 14: Responsive Webdesign verkaufen / Pluswerk
Webinale 14: Responsive Webdesign verkaufen / PluswerkWebinale 14: Responsive Webdesign verkaufen / Pluswerk
Webinale 14: Responsive Webdesign verkaufen / Pluswerk
 
Responsive Webdesign für Grafiker & Entscheider
Responsive Webdesign für Grafiker & EntscheiderResponsive Webdesign für Grafiker & Entscheider
Responsive Webdesign für Grafiker & Entscheider
 
Responsive Webdesign verkaufen
Responsive Webdesign verkaufenResponsive Webdesign verkaufen
Responsive Webdesign verkaufen
 
Usability & Webdesign 2010
Usability & Webdesign 2010Usability & Webdesign 2010
Usability & Webdesign 2010
 
Digitales Marketing 1 - Facebook für Unternehmen und Verbände
Digitales Marketing 1 - Facebook für Unternehmen und VerbändeDigitales Marketing 1 - Facebook für Unternehmen und Verbände
Digitales Marketing 1 - Facebook für Unternehmen und Verbände
 
AZNetwork vers le très haut débit !
AZNetwork vers le très haut débit !AZNetwork vers le très haut débit !
AZNetwork vers le très haut débit !
 
Palacio katerinski pps
Palacio katerinski   ppsPalacio katerinski   pps
Palacio katerinski pps
 
X09 00844
X09 00844X09 00844
X09 00844
 
Cuento 20
Cuento 20Cuento 20
Cuento 20
 
La quilla ecologica mes de agosto del 2013
La quilla ecologica mes de agosto del 2013La quilla ecologica mes de agosto del 2013
La quilla ecologica mes de agosto del 2013
 
Der CSMO als Content Provider - Veit Mathauer
Der CSMO als Content Provider - Veit MathauerDer CSMO als Content Provider - Veit Mathauer
Der CSMO als Content Provider - Veit Mathauer
 
Informationskompetenz ?
Informationskompetenz ? Informationskompetenz ?
Informationskompetenz ?
 
Cuento 27
Cuento 27Cuento 27
Cuento 27
 
Table ronde n°1 - Denis Teyssou
Table ronde n°1 - Denis TeyssouTable ronde n°1 - Denis Teyssou
Table ronde n°1 - Denis Teyssou
 
Presentación creo empleo
Presentación creo empleoPresentación creo empleo
Presentación creo empleo
 

Ähnlich wie Responsive Webdesign

SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
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
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
CS2 AG
 
Universal Theme vs. APEX mobile
Universal Theme vs. APEX mobileUniversal Theme vs. APEX mobile
Universal Theme vs. APEX mobile
Steven Grzbielok
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Mann beißt Hund Agentur für Kommunikation
 
Responsive design
Responsive designResponsive design
Responsive design
Thomas Bähr
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk innovationsagentur
 
design
designdesign
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
Mario Fink
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Web
ch.ch
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
Webdesign Fachbegriffe
Webdesign FachbegriffeWebdesign Fachbegriffe
Webdesign Fachbegriffe
sascha assbach
 
Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...
Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...
Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...
Klaus Rüggenmann
 
Facit Digital | Mobile User Interface Design
Facit Digital | Mobile User Interface DesignFacit Digital | Mobile User Interface Design
Facit Digital | Mobile User Interface Design
Serviceplan Group
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines Concepters
uxHH
 
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
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
Peter Grosskopf
 
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
André Scharf
 

Ähnlich wie Responsive Webdesign (20)

SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
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)
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
 
Universal Theme vs. APEX mobile
Universal Theme vs. APEX mobileUniversal Theme vs. APEX mobile
Universal Theme vs. APEX mobile
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
 
Responsive design
Responsive designResponsive design
Responsive design
 
Responsive Design Whitepaper
Responsive Design WhitepaperResponsive Design Whitepaper
Responsive Design Whitepaper
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Web
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Webdesign Fachbegriffe
Webdesign FachbegriffeWebdesign Fachbegriffe
Webdesign Fachbegriffe
 
Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...
Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...
Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus R...
 
Facit Digital | Mobile User Interface Design
Facit Digital | Mobile User Interface DesignFacit Digital | Mobile User Interface Design
Facit Digital | Mobile User Interface Design
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines Concepters
 
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
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
 

Responsive Webdesign

  • 1. Responsive Webdesign Was ist das und welche Vorteile kann es bringen?
  • 2. Inhalt 1. Begriffserklärung 2. Bedeutung 3. Wann und warum? 4. Layouttypen 5. Vorteile 6. Zusammenfassung (Beispiele)
  • 4. 4 Was versteht man unter dem Begriff Responsive Webdesign? • „reagierendes“ Webdesign • „Responsive Webdesign“ wurde erstmals von Ethan Marcotte im Mai 2010 in einem Artikel für das Magazin „A List Apart“ verwendet • Inhalte auf jedem Bildschirm und jeder Bildschirmauflösung optimal darstellen • Nutzererlebnis und die Benutzerfreundlichkeit zu jeder Zeit optimal
  • 5. 5 Was versteht man unter dem Begriff Responsive Webdesign? • gesamtes Webdesign reagiert (z. B. Bedienung und Reaktionen auf Eingaben) • nicht nur das „Layout“ verschiebt sich! • nicht nur gestalterische, sondern auch funktionelle Aspekte werden situationsbedingt berücksichtigt • nicht nur ein grafischer, sondern ein ganzheitlicher, strategischer Ansatz für erfolgreiche Responsive Webseiten
  • 7. 7 eine Entwicklung für mehrere Geräte! nur eine URL nur einmal Inhalt nur eine Programmierung mit Hilfe von Media Queries „Einer für alle!“
  • 8. 8 • Media Queries ermöglichen eine ausreichende Abfrage von Informationen zum Endgerät, um entsprechend darauf reagieren zu können • Zum Beispiel die Art des Ausgabemediums, die Bildschirmauflösung oder der gerade genutzte Modus (Landscape oder Portrait) werden in Erfahrung gebracht • Media Queries können mehrere Bedingungen integrieren. Sind diese erfüllt, werden bestimmte CSS- Regeln aktiv bzw. komplette Stylesheets eingebunden und somit Änderungen des Layouts realisiert. Bedeutung
  • 9. 9 • Flexible Layouts, die sich optimal an die Bildschirmauflösung des Endgeräts anpassen • Auf diese Weise kann (z. B. auf Smartphones) immer die gerätespezifische Variante der Website angezeigt werden • Umsetzung durch neue Technologien (z. B. CSS3 und Media Queries) • Mit Hilfe von JavaScript und Media Queries können strukturelle Anpassungen vorgenommen werden, um den Besonderheiten verschiedener Devices gerecht zu werden Bedeutung
  • 10. 10 Viewports 1280 px 768 px 320 px • „Ausschnitt“ des Browserfensters • zur Verfügung stehender Bereich • Display (z. B. Smartphone oder Tablet)
  • 11. 11 Breakpoints mit Breakpoints ohne Breakpoints • Breakpoints definieren, an welchen Stellen das Layout einer Seite „umbrechen“ darf • Webdesigner können so sicherstellen, dass ein Umbruch im Design, (z. B. wenn sich die Seite verschmälert) nicht zu einem inhaltlichen Bruch führt.
  • 12. 12 Relative Einheiten dynamische Prozent Werte fixe Pixel Werte • Wenn die Größe des Bildschirms (auf der Inhalte angezeigt werden können) variiert, ist auch die Pixeldichte der angezeigten Fläche nicht mehr in Stein gemeißelt • von festen Pixelvorgaben abrücken und relative Größeneinheiten definieren (z. B. „50 Prozent des Screens“ oder „100 Prozent des Screens“)
  • 13. 13 Maximal- und Mindestwerte mit Maximal-Breite ohne Maximal-Breite • Verhindert, dass Inhalte zu klein dargestellt werden oder auf größeren Bildschirmen zu sehr in die Breite gehen • Eine Grenze (Pixelwert) wird für die maximale Breite definiert (Verzerrungs-Effekt bleibt aus)
  • 15. 15 Kontextsensitives Storytelling • Jeder Screen und jedes darauf gespielte Format bieten für den User unterschiedliche Kontexte • spezielle Interaktionsmöglichkeiten (z. B. Gestensteuerung beim TV) • situative Nutzwerte (z. B. geobasierte Services auf dem Smartphone) • Möglichkeiten und Konventionen gilt es bei der Kommunikation von Inhalten, Storys und reagierenden Webseiten zu beachten
  • 16. 16 Multi-Screen-Design • SmartPhone, Tablets, Laptop, Desktop, ... • SmartWatches, Glasses, SmartTVs, Spielekonsolen, Navigationsgeräte, ... • Verschiedene Zugriffsquellen, unterschiedliche Displaygrößen • Bedienung (Touchscreen vs. Tastatur) und Nutzungskontext
  • 17. 17 „Mobile First“ und „Desktop First“ Diese beiden Leitprinzipien des Responsive Webdesign geben an, welcher Startpunkt für das Design einer Webseite gesetzt wird: • Beginne ich auf dem kleinen Screen und passe das Design für größere Auflösungen an ... • oder starte ich mit der Desktop-Version und arbeite mich zu den kleineren Smartphone-Größen vor • Technisch gesehen gibt es keine großen Unterschiede • Konzeptionell wichtig (Zielgruppenorientierung)
  • 19. 19 Layouttypen • Adaptive und Responsive (Adaptive Webseite vs. Responsive Webseite) • Adaptive = stufenweise Anpassung (Technik: Pixel) • Responsive = stufenlose Anpassung (Technik: Prozent) Smartphone Tablet Desktop
  • 20. 20 Fixed Layout – Starr, nicht anpassungsfähig + Einfache Planung + Einfache Umsetzung - Keine spezifische Optimierung für verschiedene Endgeräte - Eingeschränkte Funktionalität durch abgeschnittenen Content
  • 21. 21 Adaptive Layout – Stufenweise anpassungsfähig + Passt sich an vordefinierte Darstellungsbereiche (Viewports) an + Content im Gegensatz zum Fixed Layout vollständig sichtbar - Komplexere Planung als beim Fixed Layout, da mehrere Viewports berücksichtigt werden müssen. - Keine optimale Nutzung des Anzeigebereichs
  • 22. 22 Responsive Layout – Stufenlos anpassungsfähig + Optimale Nutzung des Viewports durch stufenlose Anpassung + In jeder beliebigen Darstellung ideales Nutzererlebnis + Geringerer Aufwand in der Content-Pflege + Zukunftsorientiert und flexibel - Höherer Aufwand in Konzeption, Gestaltung und Entwicklung
  • 23. 23 Übersicht Layouttypen Adaptive Layout – Stufenweise anpassungsfähig Fixed Layout – Starr, nicht anpassungsfähig Responsive Layout – Stufenlos anpassungsfähig
  • 25. 25 Vorteile WARUM EINE RESPONSIVE WEBSEITE? Google empfiehlt Responsive: Google erkennt, wenn Ihre Webseite für verschiedene Geräte und Auflösungen optimiert ist und stuft sie somit höher im Ranking ein. Zufriedenere Besucher: Die Aufenthaltsdauer, sowie die Aufmerksamkeit und Aktivität der Besucher wird erhöht. Bei Online-Shops bedeutet das u.a. steigende Verkaufszahlen. Zukunftssicherheit: Mit Responsive Webdesign kann Ihre Webseite dem User bei jeder Displayauflösung optimal dargestellt werden. Ersparnis: Eine Entwicklung für mehrere Endgeräte. Es wird keine gesonderte mobile Version programmiert, die separat gewartet werden muss.
  • 27. 27 Zusammenfassung  „reagierendes“ Webdesign  Optimales Nutzererlebnis und Benutzerfreundlichkeit  Nicht nur grafischer, sondern ganzheitlicher, strategischer Ansatz (Technik)  Flexible Layouts im Multi-Screen-Design  Verschiedene Layouttypen (stufenweise und stufenlose Anpassung)  Zukunftssicherheit
  • 29. 29 Haben Sie Fragen? Dann kontaktieren Sie uns unter info@avenit.de oder unter der Telefonnummer 0781/919 369 0. Oder schreiben Sie uns auf Facebook www.facebook.com/avenitag Christian Seifert CEO, Vorstandsvorsitzender