SlideShare ist ein Scribd-Unternehmen logo
CMS|SESSION.
Responsive Design | Fluid | Mobile.




Dani Kalt
CEO




Einführung | Früher/Heute | Multiscreen | Nutzungsszenario | Responsive Design   #CS2session
RESPONSIVE DESIGN.




Früher...
> PC-Benutzer stationär
> Laptop-Benutzer stationär
> Wenige Browser
> Auflösung 800x600
> Fixes Layout / Pixelgenau
> Die Webseite auf einem Kanal
RESPONSIVE DESIGN.




Heute...
…existiert eine Vielzahl an
Bildschirmauflösungen – eine
Situation mit einschneidenden
Konsequenzen.


… nicht mehr nur Quer- sondern
immer mehr Hochformat.
RESPONSIVE DESIGN.
  Multi Screen Situation – Das Web ist überall.

960x640px           4:3
                                                  1024x788px
                             16:9




                          2048x1536px             1280x720px




480x320px                                 von 240x320px
      1920x1080px                         bis 2280x1800px
RESPONSIVE DESIGN.

Doch das ist noch nicht alles...
…nebst den Multiscreens gibt es
auch die Nutzungs-Szenarien:
RESPONSIVE DESIGN.
Nutzungs-Szenarien.
RESPONSIVE DESIGN.
Nutzungs-Szenarien.




            „Device-Hopper“



  Benutzer wechselt die Geräte innerhalb eines Tages mehrfach.
RESPONSIVE DESIGN.




                     Quelle: http://www.multiscreen-experience.com/?page_id=56
RESPONSIVE DESIGN.
Mobile Internetnutzung auf dem Vormarsch.


  „44% der Schweizer Web-User surften 2011 im mobilen Web“
RESPONSIVE DESIGN.




 „Ein Design – viele Layouts“


 Bei Responsive Design handelt es sich um einen neuen Ansatz –
 eine Layout-Struktur, welche sich an die Vielfalt der Auflösungen
                     von Endgeräten anpasst.
RESPONSIVE DESIGN.




Grundprinzipien...
> Flexibles Raster
> Variable Anzeige von Inhalten
> Anpassung der Navigationselemente
> Relative Grösse der Typografie
> Flexible Grösse der Bilder
RESPONSIVE DESIGN.
Das Layout passt sich dem Ausgabegerät an.
Beispiel:
RESPONSIVE DESIGN.
RESPONSIVE DESIGN.
Der Ansatz: Mobile First / Tablet First




> Weniger ist mehr
> Wachsende mobile Nutzung
> Verzicht auf unwesentliche Informationen
> Optisch angenehm reduziertes Design
> Einheitlicher Aufbau
RESPONSIVE DESIGN.
      Livetest: http://mattkersley.com/responsive/




>   Masse des Displays
>   Auflösungen
>   Format / Betrachtungswinkel (hoch/quer)
>   Eingabemöglichkeiten wie
    Tastatur, Maus, Finger und Sprache
RESPONSIVE DESIGN.




  „Was heisst das für Sie?“

                 Visuell / Inhaltlich
          > Wie gehen wir mit den Geräten um?
      > Wie gehen wir mit der Benutzersituation um?
          > Herausforderungen an das Layout?
           > Herausforderungen an den Inhalt?
          > Herausforderungen an das Konzept?
RESPONSIVE DESIGN.




  „Was erwartet der User?“

       Design und Inhalt ist unabhängig
            > Usability – Maus vs. Finger
        > Bedürfnis an den Inhalt vs. Situation
          > Inhaltsdichte vs. Ausgabegerät
        > Zugänge (NL, Advertising, SM, etc.)
RESPONSIVE DESIGN.




    „Wann macht‘s Sinn?“


          Responsive Design – Ja?
         > Einfache, überschaubare Seiten
            > Bei Relaunch von Seiten
           > Bei passenden Zielgruppen
RESPONSIVE DESIGN.




 „Wann wird es schwierig?“

           Responsive Design – zu prüfen!
        > Bei sehr komplexen Seiten - eher schwierig
           > Bei reinem Facelifting - eher schwierig
        > Bei vielen grossflächigen Applikationsteilen
   > Bei vielen technischen Angaben die nicht fehlen dürfen
         > Bei unterschiedlichem Benutzerbedürfnis
RESPONSIVE DESIGN.




     „Vorteile im Überblick“

                     Responsive Design
> Eine Webseite deckt mit verschiedenen Layouts alle Endgeräte ab
       > Kein zusätzlicher Aufwand bei Erstellung/Wartung
             separater Seiten (z.B. mobile Webseite)
          > Perfekte Grundlage für barrierefreies Design
           > Grundlage für eine gute Corporate Identity
   > Das responsive Design strukturiert die Inhalte automatisch
RESPONSIVE DESIGN.




                     Beispiel: foodsense.is/
RESPONSIVE DESIGN.




                     Beispiel: bostonglobe.com
CUSTOMER RELATIONSHIP MANAGEMENT
ELECTRONIC COMMERCE
ONLINE MARKETING




 VIELEN DANK!
 CS2 AG
 PLATINUM MEMBER TYPO3 ASSOCIATION
 MAGENTO GOLD PARTNER
 SUGAR SILVER PARTNER



 Gerbegässlein 1 | CH-4450 Sissach
 Feldeggstrasse 55 | CH-8008 Zürich
 Telefon: +41 61 333 22 22
 Twitter: @CS2switzerland
 www.cs2.ch

Weitere ähnliche Inhalte

Andere mochten auch

Window top transfer Western, central, harbour local train
Window top transfer Western, central, harbour local trainWindow top transfer Western, central, harbour local train
Window top transfer Western, central, harbour local train
Vivek Tiwari
 
Diario Resumen 20141004
Diario Resumen 20141004Diario Resumen 20141004
Diario Resumen 20141004
Diario Resumen
 
Presentación Javier Sanz- Primer Congreso Ecommerce de Alicante by @ecommaster
Presentación Javier Sanz- Primer Congreso Ecommerce de Alicante by @ecommasterPresentación Javier Sanz- Primer Congreso Ecommerce de Alicante by @ecommaster
Presentación Javier Sanz- Primer Congreso Ecommerce de Alicante by @ecommaster
Ecommaster
 
Turismo cusqueño.ppt
Turismo cusqueño.pptTurismo cusqueño.ppt
Turismo cusqueño.ppt
majuso
 
Mejora de OEE: Presentación en 5 minutos y en 30 segundos
Mejora de OEE: Presentación en 5 minutos y en 30 segundosMejora de OEE: Presentación en 5 minutos y en 30 segundos
Mejora de OEE: Presentación en 5 minutos y en 30 segundos
Diego Marqueta
 
Salco - OFERTA WSPÓŁPRACY DLA FIZJOTERAPEUTÓW
Salco - OFERTA WSPÓŁPRACY DLA FIZJOTERAPEUTÓWSalco - OFERTA WSPÓŁPRACY DLA FIZJOTERAPEUTÓW
Salco - OFERTA WSPÓŁPRACY DLA FIZJOTERAPEUTÓW
paulina_bezliku
 
TSBC - Introduction to Enterprise Learning
TSBC - Introduction to Enterprise LearningTSBC - Introduction to Enterprise Learning
TSBC - Introduction to Enterprise Learning
David C Roberts
 
Projecte RESALTTECH
Projecte RESALTTECHProjecte RESALTTECH
Boots uses Huddle up for efficient working practices.
Boots uses Huddle up for efficient working practices.Boots uses Huddle up for efficient working practices.
Boots uses Huddle up for efficient working practices.
HuddleHQ
 
Revista diseño editorial para STREET 106
Revista diseño editorial para STREET 106Revista diseño editorial para STREET 106
Revista diseño editorial para STREET 106
Luis Indie Pop
 
Caso de estudio unidad 3 capitulo 7
Caso de estudio unidad 3 capitulo 7Caso de estudio unidad 3 capitulo 7
Caso de estudio unidad 3 capitulo 7
JUAN ENRIQUE
 
TRAVELOG USAHAWAN MUDA: RAMADHAN AKU DATANG
TRAVELOG USAHAWAN MUDA: RAMADHAN AKU DATANGTRAVELOG USAHAWAN MUDA: RAMADHAN AKU DATANG
TRAVELOG USAHAWAN MUDA: RAMADHAN AKU DATANG
Kaizan Nazlan
 
Cómo licenciar obras artísticas con Creative Commons
Cómo licenciar obras artísticas con Creative CommonsCómo licenciar obras artísticas con Creative Commons
Cómo licenciar obras artísticas con Creative Commons
ZEMOS98
 
Bladettromso 20050209
Bladettromso 20050209Bladettromso 20050209
Bladettromso 20050209
Din Utvikling AS
 
A Holistic Approach to Property Valuations
A Holistic Approach to Property ValuationsA Holistic Approach to Property Valuations
A Holistic Approach to Property Valuations
Cognizant
 
Razas 2 (clase 6 y 7)
Razas 2 (clase 6 y 7)Razas 2 (clase 6 y 7)
Razas 2 (clase 6 y 7)
tecnicoveterinario
 
Maintainable API Docs and Other Rainbow Colored Unicorns
Maintainable API Docs and Other Rainbow Colored UnicornsMaintainable API Docs and Other Rainbow Colored Unicorns
Maintainable API Docs and Other Rainbow Colored Unicorns
Neil Mansilla
 
Bulletin Global It Delivery Shifts To Spain
Bulletin Global It Delivery Shifts To SpainBulletin Global It Delivery Shifts To Spain
Bulletin Global It Delivery Shifts To Spain
Value Shore
 
Part2 (1 Examen)
Part2 (1 Examen)Part2 (1 Examen)
Part2 (1 Examen)
guestcf14bd2
 
Medios
MediosMedios
Medios
Eddary Ruíz
 

Andere mochten auch (20)

Window top transfer Western, central, harbour local train
Window top transfer Western, central, harbour local trainWindow top transfer Western, central, harbour local train
Window top transfer Western, central, harbour local train
 
Diario Resumen 20141004
Diario Resumen 20141004Diario Resumen 20141004
Diario Resumen 20141004
 
Presentación Javier Sanz- Primer Congreso Ecommerce de Alicante by @ecommaster
Presentación Javier Sanz- Primer Congreso Ecommerce de Alicante by @ecommasterPresentación Javier Sanz- Primer Congreso Ecommerce de Alicante by @ecommaster
Presentación Javier Sanz- Primer Congreso Ecommerce de Alicante by @ecommaster
 
Turismo cusqueño.ppt
Turismo cusqueño.pptTurismo cusqueño.ppt
Turismo cusqueño.ppt
 
Mejora de OEE: Presentación en 5 minutos y en 30 segundos
Mejora de OEE: Presentación en 5 minutos y en 30 segundosMejora de OEE: Presentación en 5 minutos y en 30 segundos
Mejora de OEE: Presentación en 5 minutos y en 30 segundos
 
Salco - OFERTA WSPÓŁPRACY DLA FIZJOTERAPEUTÓW
Salco - OFERTA WSPÓŁPRACY DLA FIZJOTERAPEUTÓWSalco - OFERTA WSPÓŁPRACY DLA FIZJOTERAPEUTÓW
Salco - OFERTA WSPÓŁPRACY DLA FIZJOTERAPEUTÓW
 
TSBC - Introduction to Enterprise Learning
TSBC - Introduction to Enterprise LearningTSBC - Introduction to Enterprise Learning
TSBC - Introduction to Enterprise Learning
 
Projecte RESALTTECH
Projecte RESALTTECHProjecte RESALTTECH
Projecte RESALTTECH
 
Boots uses Huddle up for efficient working practices.
Boots uses Huddle up for efficient working practices.Boots uses Huddle up for efficient working practices.
Boots uses Huddle up for efficient working practices.
 
Revista diseño editorial para STREET 106
Revista diseño editorial para STREET 106Revista diseño editorial para STREET 106
Revista diseño editorial para STREET 106
 
Caso de estudio unidad 3 capitulo 7
Caso de estudio unidad 3 capitulo 7Caso de estudio unidad 3 capitulo 7
Caso de estudio unidad 3 capitulo 7
 
TRAVELOG USAHAWAN MUDA: RAMADHAN AKU DATANG
TRAVELOG USAHAWAN MUDA: RAMADHAN AKU DATANGTRAVELOG USAHAWAN MUDA: RAMADHAN AKU DATANG
TRAVELOG USAHAWAN MUDA: RAMADHAN AKU DATANG
 
Cómo licenciar obras artísticas con Creative Commons
Cómo licenciar obras artísticas con Creative CommonsCómo licenciar obras artísticas con Creative Commons
Cómo licenciar obras artísticas con Creative Commons
 
Bladettromso 20050209
Bladettromso 20050209Bladettromso 20050209
Bladettromso 20050209
 
A Holistic Approach to Property Valuations
A Holistic Approach to Property ValuationsA Holistic Approach to Property Valuations
A Holistic Approach to Property Valuations
 
Razas 2 (clase 6 y 7)
Razas 2 (clase 6 y 7)Razas 2 (clase 6 y 7)
Razas 2 (clase 6 y 7)
 
Maintainable API Docs and Other Rainbow Colored Unicorns
Maintainable API Docs and Other Rainbow Colored UnicornsMaintainable API Docs and Other Rainbow Colored Unicorns
Maintainable API Docs and Other Rainbow Colored Unicorns
 
Bulletin Global It Delivery Shifts To Spain
Bulletin Global It Delivery Shifts To SpainBulletin Global It Delivery Shifts To Spain
Bulletin Global It Delivery Shifts To Spain
 
Part2 (1 Examen)
Part2 (1 Examen)Part2 (1 Examen)
Part2 (1 Examen)
 
Medios
MediosMedios
Medios
 

Ähnlich wie Responsive Design | Fluid | Mobile

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
 
design
designdesign
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
 
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
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
curtis newton gmbh (formerly known as dw capital gmbh)
 
Grenzen von Responsive Design | Werbeplanung.at Summit 2014
Grenzen von Responsive Design | Werbeplanung.at Summit 2014Grenzen von Responsive Design | Werbeplanung.at Summit 2014
Grenzen von Responsive Design | Werbeplanung.at Summit 2014
Fonda Wien
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und Webapps
Maria Herrmann
 
Responsive goes Agile!
Responsive goes Agile!Responsive goes Agile!
Responsive goes Agile!
Dirk Pogrzeba
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
avenit AG
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
Ergosign GmbH
 
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestaltenBTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX GmbH
 
Hovida design ppt
Hovida design pptHovida design ppt
Hovida design ppt
PatrickN12
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Webmontag MRN
 
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
 
Webdesign
WebdesignWebdesign
Webdesign
PriCons
 
Responsive design
Responsive designResponsive design
Responsive design
Thomas Bähr
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
Sevenval Company Presentation 2017 (DE)
Sevenval Company Presentation 2017 (DE)Sevenval Company Presentation 2017 (DE)
Sevenval Company Presentation 2017 (DE)
Avenga Germany GmbH
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
Gregor Biswanger
 

Ähnlich wie Responsive Design | Fluid | Mobile (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)
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
 
Grenzen von Responsive Design | Werbeplanung.at Summit 2014
Grenzen von Responsive Design | Werbeplanung.at Summit 2014Grenzen von Responsive Design | Werbeplanung.at Summit 2014
Grenzen von Responsive Design | Werbeplanung.at Summit 2014
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und Webapps
 
Responsive goes Agile!
Responsive goes Agile!Responsive goes Agile!
Responsive goes Agile!
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
 
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestaltenBTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
 
Hovida design ppt
Hovida design pptHovida design ppt
Hovida design ppt
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
 
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
 
Webdesign
WebdesignWebdesign
Webdesign
 
Responsive design
Responsive designResponsive design
Responsive design
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Sevenval Company Presentation 2017 (DE)
Sevenval Company Presentation 2017 (DE)Sevenval Company Presentation 2017 (DE)
Sevenval Company Presentation 2017 (DE)
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 

Mehr von CS2 AG

It Takes Two
It Takes TwoIt Takes Two
It Takes Two
CS2 AG
 
Update TYPO3 V4.5 > 6.2 LTS
Update TYPO3 V4.5 > 6.2 LTSUpdate TYPO3 V4.5 > 6.2 LTS
Update TYPO3 V4.5 > 6.2 LTS
CS2 AG
 
22 Web Tipps
22 Web Tipps22 Web Tipps
22 Web Tipps
CS2 AG
 
TYPO3 | Das zukunftsichere Enterprise CMS
TYPO3 | Das zukunftsichere Enterprise CMSTYPO3 | Das zukunftsichere Enterprise CMS
TYPO3 | Das zukunftsichere Enterprise CMS
CS2 AG
 
Solr the intelligent search engine
Solr the intelligent search engineSolr the intelligent search engine
Solr the intelligent search engine
CS2 AG
 
Increase your conversion rate
Increase your conversion rateIncrease your conversion rate
Increase your conversion rate
CS2 AG
 
SOM Campus Talk: Social. Driving, Stringent. Von 0 auf 100 im B2B Online-Mark...
SOM Campus Talk: Social. Driving, Stringent. Von 0 auf 100 im B2B Online-Mark...SOM Campus Talk: Social. Driving, Stringent. Von 0 auf 100 im B2B Online-Mark...
SOM Campus Talk: Social. Driving, Stringent. Von 0 auf 100 im B2B Online-Mark...
CS2 AG
 
TYPO3 4.5 LTS - Was ist neu?
TYPO3 4.5 LTS - Was ist neu?TYPO3 4.5 LTS - Was ist neu?
TYPO3 4.5 LTS - Was ist neu?
CS2 AG
 
TYPO3 Version 4.5 LTS - Preview / Vorschau
TYPO3 Version 4.5 LTS - Preview / VorschauTYPO3 Version 4.5 LTS - Preview / Vorschau
TYPO3 Version 4.5 LTS - Preview / Vorschau
CS2 AG
 
TYPO3 Version 4.4 Neuerungen
TYPO3 Version 4.4 NeuerungenTYPO3 Version 4.4 Neuerungen
TYPO3 Version 4.4 Neuerungen
CS2 AG
 

Mehr von CS2 AG (10)

It Takes Two
It Takes TwoIt Takes Two
It Takes Two
 
Update TYPO3 V4.5 > 6.2 LTS
Update TYPO3 V4.5 > 6.2 LTSUpdate TYPO3 V4.5 > 6.2 LTS
Update TYPO3 V4.5 > 6.2 LTS
 
22 Web Tipps
22 Web Tipps22 Web Tipps
22 Web Tipps
 
TYPO3 | Das zukunftsichere Enterprise CMS
TYPO3 | Das zukunftsichere Enterprise CMSTYPO3 | Das zukunftsichere Enterprise CMS
TYPO3 | Das zukunftsichere Enterprise CMS
 
Solr the intelligent search engine
Solr the intelligent search engineSolr the intelligent search engine
Solr the intelligent search engine
 
Increase your conversion rate
Increase your conversion rateIncrease your conversion rate
Increase your conversion rate
 
SOM Campus Talk: Social. Driving, Stringent. Von 0 auf 100 im B2B Online-Mark...
SOM Campus Talk: Social. Driving, Stringent. Von 0 auf 100 im B2B Online-Mark...SOM Campus Talk: Social. Driving, Stringent. Von 0 auf 100 im B2B Online-Mark...
SOM Campus Talk: Social. Driving, Stringent. Von 0 auf 100 im B2B Online-Mark...
 
TYPO3 4.5 LTS - Was ist neu?
TYPO3 4.5 LTS - Was ist neu?TYPO3 4.5 LTS - Was ist neu?
TYPO3 4.5 LTS - Was ist neu?
 
TYPO3 Version 4.5 LTS - Preview / Vorschau
TYPO3 Version 4.5 LTS - Preview / VorschauTYPO3 Version 4.5 LTS - Preview / Vorschau
TYPO3 Version 4.5 LTS - Preview / Vorschau
 
TYPO3 Version 4.4 Neuerungen
TYPO3 Version 4.4 NeuerungenTYPO3 Version 4.4 Neuerungen
TYPO3 Version 4.4 Neuerungen
 

Responsive Design | Fluid | Mobile

  • 1. CMS|SESSION. Responsive Design | Fluid | Mobile. Dani Kalt CEO Einführung | Früher/Heute | Multiscreen | Nutzungsszenario | Responsive Design #CS2session
  • 2. RESPONSIVE DESIGN. Früher... > PC-Benutzer stationär > Laptop-Benutzer stationär > Wenige Browser > Auflösung 800x600 > Fixes Layout / Pixelgenau > Die Webseite auf einem Kanal
  • 3. RESPONSIVE DESIGN. Heute... …existiert eine Vielzahl an Bildschirmauflösungen – eine Situation mit einschneidenden Konsequenzen. … nicht mehr nur Quer- sondern immer mehr Hochformat.
  • 4. RESPONSIVE DESIGN. Multi Screen Situation – Das Web ist überall. 960x640px 4:3 1024x788px 16:9 2048x1536px 1280x720px 480x320px von 240x320px 1920x1080px bis 2280x1800px
  • 5. RESPONSIVE DESIGN. Doch das ist noch nicht alles... …nebst den Multiscreens gibt es auch die Nutzungs-Szenarien:
  • 7. RESPONSIVE DESIGN. Nutzungs-Szenarien. „Device-Hopper“ Benutzer wechselt die Geräte innerhalb eines Tages mehrfach.
  • 8. RESPONSIVE DESIGN. Quelle: http://www.multiscreen-experience.com/?page_id=56
  • 9. RESPONSIVE DESIGN. Mobile Internetnutzung auf dem Vormarsch. „44% der Schweizer Web-User surften 2011 im mobilen Web“
  • 10. RESPONSIVE DESIGN. „Ein Design – viele Layouts“ Bei Responsive Design handelt es sich um einen neuen Ansatz – eine Layout-Struktur, welche sich an die Vielfalt der Auflösungen von Endgeräten anpasst.
  • 11. RESPONSIVE DESIGN. Grundprinzipien... > Flexibles Raster > Variable Anzeige von Inhalten > Anpassung der Navigationselemente > Relative Grösse der Typografie > Flexible Grösse der Bilder
  • 12. RESPONSIVE DESIGN. Das Layout passt sich dem Ausgabegerät an. Beispiel:
  • 14. RESPONSIVE DESIGN. Der Ansatz: Mobile First / Tablet First > Weniger ist mehr > Wachsende mobile Nutzung > Verzicht auf unwesentliche Informationen > Optisch angenehm reduziertes Design > Einheitlicher Aufbau
  • 15. RESPONSIVE DESIGN. Livetest: http://mattkersley.com/responsive/ > Masse des Displays > Auflösungen > Format / Betrachtungswinkel (hoch/quer) > Eingabemöglichkeiten wie Tastatur, Maus, Finger und Sprache
  • 16. RESPONSIVE DESIGN. „Was heisst das für Sie?“ Visuell / Inhaltlich > Wie gehen wir mit den Geräten um? > Wie gehen wir mit der Benutzersituation um? > Herausforderungen an das Layout? > Herausforderungen an den Inhalt? > Herausforderungen an das Konzept?
  • 17. RESPONSIVE DESIGN. „Was erwartet der User?“ Design und Inhalt ist unabhängig > Usability – Maus vs. Finger > Bedürfnis an den Inhalt vs. Situation > Inhaltsdichte vs. Ausgabegerät > Zugänge (NL, Advertising, SM, etc.)
  • 18. RESPONSIVE DESIGN. „Wann macht‘s Sinn?“ Responsive Design – Ja? > Einfache, überschaubare Seiten > Bei Relaunch von Seiten > Bei passenden Zielgruppen
  • 19. RESPONSIVE DESIGN. „Wann wird es schwierig?“ Responsive Design – zu prüfen! > Bei sehr komplexen Seiten - eher schwierig > Bei reinem Facelifting - eher schwierig > Bei vielen grossflächigen Applikationsteilen > Bei vielen technischen Angaben die nicht fehlen dürfen > Bei unterschiedlichem Benutzerbedürfnis
  • 20. RESPONSIVE DESIGN. „Vorteile im Überblick“ Responsive Design > Eine Webseite deckt mit verschiedenen Layouts alle Endgeräte ab > Kein zusätzlicher Aufwand bei Erstellung/Wartung separater Seiten (z.B. mobile Webseite) > Perfekte Grundlage für barrierefreies Design > Grundlage für eine gute Corporate Identity > Das responsive Design strukturiert die Inhalte automatisch
  • 21. RESPONSIVE DESIGN. Beispiel: foodsense.is/
  • 22. RESPONSIVE DESIGN. Beispiel: bostonglobe.com
  • 23. CUSTOMER RELATIONSHIP MANAGEMENT ELECTRONIC COMMERCE ONLINE MARKETING VIELEN DANK! CS2 AG PLATINUM MEMBER TYPO3 ASSOCIATION MAGENTO GOLD PARTNER SUGAR SILVER PARTNER Gerbegässlein 1 | CH-4450 Sissach Feldeggstrasse 55 | CH-8008 Zürich Telefon: +41 61 333 22 22 Twitter: @CS2switzerland www.cs2.ch