Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Responsive Design by Peter Grosskopf

    Hochgeladen von

    Peter Grosskopf
    265 Ansichten26 Seiten
    Responsive Design ist momentan in aller Munde. Häufig wird es gleichgesetzt mit Design für mobile Geräte. Dabei geht es eigentlich darum Design zu schaffen, welches unabhängig vom verwendeten Endgerät ist. Endgeräte sind heutzutage neben klassischen Desktopsystemen und Laptops, zunehmend auch mobile Endgeräte wie Smartphones und Tablets, welche andere Eigenschaften und Voraussetzungen haben, die es in Bezug auf Design und Usability zu berücksichtigen gilt. Der Vortrag zeigt auf, welche Chancen sich für Unternehmen ergeben, die mittels Responsive Design ihre Webangebote und Applikationen auf die gewandelte Nutzerschaft optimieren. Dabei werden sowohl technische Grundlagen vermittelt, aber auch fortgeschrittene Fragestellungen ("Mobile First" Entwicklungsansatz, Layout Patterns) behandelt.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    Responsive Design ist momentan in aller Munde. Häufig wird es gleichgesetzt mit Design für mobile Geräte. Dabei geht es eigentlich darum Design zu schaffen, welches unabhängig vom verwendeten Endgerät ist. Endgeräte sind heutzutage neben klassischen Desktopsystemen und Laptops, zunehmend auch mobile Endgeräte wie Smartphones und Tablets, welche andere Eigenschaften und Voraussetzungen haben, die es in Bezug auf Design und Usability zu berücksichtigen gilt. Der Vortrag zeigt auf, welche Chancen sich für Unternehmen ergeben, die mittels Responsive Design ihre Webangebote und Applikationen auf die gewandelte Nutzerschaft optimieren. Dabei werden sowohl technische Grundlagen vermittelt, aber auch fortgeschrittene Fragestellungen ("Mobile First" Entwicklungsansatz, Layout Patterns) behandelt.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    265 Ansichten26 Seiten

    Responsive Design by Peter Grosskopf

    Hochgeladen von

    Peter Grosskopf
    Responsive Design ist momentan in aller Munde. Häufig wird es gleichgesetzt mit Design für mobile Geräte. Dabei geht es eigentlich darum Design zu schaffen, welches unabhängig vom verwendeten Endgerät ist. Endgeräte sind heutzutage neben klassischen Desktopsystemen und Laptops, zunehmend auch mobile Endgeräte wie Smartphones und Tablets, welche andere Eigenschaften und Voraussetzungen haben, die es in Bezug auf Design und Usability zu berücksichtigen gilt. Der Vortrag zeigt auf, welche Chancen sich für Unternehmen ergeben, die mittels Responsive Design ihre Webangebote und Applikationen auf die gewandelte Nutzerschaft optimieren. Dabei werden sowohl technische Grundlagen vermittelt, aber auch fortgeschrittene Fragestellungen ("Mobile First" Entwicklungsansatz, Layout Patterns) behandelt.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 26

    RESPONSIVE DESIGN

    Status Quo - iico Berlin 2013 - Peter Grosskopf

    Vorstellung
    Peter Grosskopf (32) Geschftsfhrer Zweitag GmbH
    Entwickler/ Designer

    Grnder

    Dozent

    Mnster

    Motivation

    Mobile Browsing
    Mobile Browsing knackt die 10% Marke Weltweiter Anteil mobiler Endgerte an der Internetnutzung 12% 10% 8% 6% 4% 2% 0% 2009 2010 2011 2012
    7

    Okt 10,3%

    Quelle: NetMarketShare - Statista

    Mobile Browsing
    Anteil mobiler Endgerte an allen Seitenaufrufen im Mai 2011 und 2012 nach Kontinenten
    20 Anteil mobiler Endgerte 15 10 5 0

    Sdamerika

    Europa

    Ozeanien

    Nordamerika

    Welt

    Afrika Mai 2011

    Asien Mai 2012

    Quelle: Statcounter - Statista


    8

    Action

    required?

    Mobile-Strategie
    Erst Strategie, dann CGI!*
    Evaluation: Wer sind meine Nutzer? Welche Devices nutzen sie? In welchem Kontext nutzen sie mein Angebot? Danach: Auswahl der geeigneten Technologie
    *Gegeltes Wort aus den Anfangszeiten des Web :-)
    10

    Technologiewahl
    Je nach Zielsetzung und Strategie gibt es verschiedene technologische Anstze

    mobile site

    responsive

    hybrid

    native

    ...

    11

    Responsive Design
    Begriff von Ethan Marcotte erstmals erwhnt in Artikel bei A List Apart Seine Denition: Flexibles Raster, Flexible Graken, Media Queries

    12

    Beispiele

    http://rbmaradio.com

    13

    Beispiele

    *Inspirationen sammeln

    http://mediaqueri.es*

    14

    Funktionsweise
    Einbau von Media Queries
    Media Queries = Abfrage von Medieneigenschaften, wie Display-Breite und Ausrichtung
    examples.css

    @media only screen and (max-width: 1050px) { /* ... */ } @media only screen and (max-device-width: 480px) { /* ... */ } @media only screen and (orientation: landscape) { /* ... */ }
    15

    Breakpoints
    Breite, an dem das Design umbricht < 480 < 1024 >= 1024 ...
    Smartphone Portrait Mode High-End Smartphone, iPad Restliche Gerte, Desktop, ...
    16

    Layout Patterns

    Mostly Fluid

    Column Drop

    Layout Shifter

    Off Canvas
    http://www.lukew.com/ff/entry.asp?1514
    17

    Frameworks

    Helfen bei den ersten Schritten und bei der Fehlervermeidung

    foundation.zurb.com

    atthewhartman.github.io/base

    twitter.github.io/bootstrap

    18

    Vorteile von RWD


    + Geringer Wartungsaufwand + Konsistente Markendarstellung + Keine Redirects + Zukunftssicher + Nur eine Technologie (HTML/CSS)
    19

    Nachteile von RWD


    - Nur online nutzbar - hoher Testaufwand - Browseruntersttzung - Gerteoptimierung / Performance - keine UI-Komponenten
    20

    Herausforderung
    Gerte nach wie vor unterschiedlich!
    Konsequenz: Untersttzung unterschiedlicher Hardware und Interaktionskonzepte => Nicht mit Responsive Design alleine abbildbar

    21

    RWD meets Adaptive


    User Agent Snifng / Feature Detection
    Fr Gerteklassen optimierte Versionen

    Smartphone
    Responsive

    Tablet
    Responsive

    Desktop
    Responsive

    ...
    Responsive

    22

    Entwicklungsprozess
    Graceful Degredation

    Design fr Desktop-Nutzer Aufwndiges Design schlanker machen Performance? Kompromisse


    Mobile First

    Design fr Mobile-Nutzer Flache/Simple Navigation Wenig Graken/Slideshows - Performance optimiert Kann auf Desktop aufgeblasen wirken
    23

    Entwicklungsprozess
    Darber hinaus:

    Entwickler = Designer

    Mut zum Prototyping

    24

    Fazit
    Das Mobile Web ist da Mit Responsive Design lassen sich schnell Erfolge erzielen Aber: Design fr alternative Endgerte erfordert dedizierte Auseinandersetzung mit den Charakteristika des jeweiligen Gertes Responsive Design erfordert ein Umdenken im Entwicklungsprozess Responsive Design ist der erste Schritt ins Mobile Web

    25

    Danke

    26

    Das könnte Ihnen auch gefallen