SlideShare ist ein Scribd-Unternehmen logo

Responsive Web Design am Beispiel von Virato (Social News Aggregator)

In diesem Kurzvortrag gibt Markus Dermietzel (Senior User Experience Designer bei curtis newton gmbh, vor 2013 bekannt als dw capital gmbh) Einblicke in das Responsive Web Design des Social News Aggregators virato.de. Dazu erschien im Juli 2012 ein Online-Artikel auf WEAVE.de: http://www.weave.de/weblog/interview-mit-markus-dermietzel-zu-responsive-design-beim-relaunch-von-virato. Bei Fragen melden Sie sich bei press@curtis-newton.com (Chérine De Bruijn).

1 von 25
Downloaden Sie, um offline zu lesen
BOSTONGLOBE.COM – RELAUCH SEPT. 2011
http://upstatement.com/portfolio/boston-globe/




                                                 Responsive [Web]Design
Design für verschiedene Devices

    Responsive Webdesign

    virato.de

    Entstehung von virato.de

    Chancen und Herausforderungen

    Ausblick

    Resümee




                                    2
Design für verschiedene Devices
Die neue IPTV-Welt von sevenload 4.0 (2010) – ein Beispiel für deviceübergreifendes Design
mit identischem Content




                  FLASH- /HTML5-PLAYER




                                                                                     IPAD




             IPHONE APP

                                            DESKTOP




                                                                   PHILLIPS NET TV


                             NINTENDO WII
                                                                                            3
Design für verschiedene Devices

Responsive Webdesign

    virato.de

    Entstehung von virato.de

    Chancen und Herausforderungen

    Ausblick

    Resümee




                                      4
Responsive Webdesign
Ein Design für alle Devices


                              ETHAN MARCOTTE
                              RESPONSIVE WEBDESIGN

                              Verlag: A Book Apart, New York, 2011
                              http://www.abookapart.com/products/
                              responsive-web-design




                              » responsive (engl.)
                              » ansprechbar; antwortend;
                                reagierend; empfänglich {adj}



                                                                5
Design für verschiedene Devices

    Responsive Webdesign

virato.de

    Entstehung von virato.de

    Chancen und Herausforderungen

    Ausblick

    Resümee




                                      6

Recomendados

Start small, think big - Responsive Web Design
Start small, think big - Responsive Web DesignStart small, think big - Responsive Web Design
Start small, think big - Responsive Web Designintuio GmbH
 
Go-Mobile-Strategien für Early Birds und Late Risers - Benno Bartels
Go-Mobile-Strategien für Early Birds und Late Risers - Benno BartelsGo-Mobile-Strategien für Early Birds und Late Risers - Benno Bartels
Go-Mobile-Strategien für Early Birds und Late Risers - Benno BartelsinsertEFFECT GmbH
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011Alexander Beck
 
Mobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & WebsitesMobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & WebsitesAdrian Oggenfuss
 
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
 
Politische Kommunikation mit Apps
Politische Kommunikation mit AppsPolitische Kommunikation mit Apps
Politische Kommunikation mit Appscompuccino
 

Más contenido relacionado

Was ist angesagt?

„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
„Context is King and Device is Queen!“ in der mobilen Markenkommunikation„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
„Context is King and Device is Queen!“ in der mobilen MarkenkommunikationOliver Zils
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Bokowsky + Laymann GmbH
 
Android tablet webmontag_benno_bartels
Android tablet webmontag_benno_bartelsAndroid tablet webmontag_benno_bartels
Android tablet webmontag_benno_bartelsinsertEFFECT GmbH
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-AnimationsPeter Rozek
 
2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"Johannes Waibel
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content ExperiencePeter Rozek
 
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Bokowsky + Laymann GmbH
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Bokowsky + Laymann GmbH
 
Weptun Vortrag Bicc.Net Innovation Forum: 1Code=4Apps
Weptun Vortrag Bicc.Net Innovation Forum: 1Code=4AppsWeptun Vortrag Bicc.Net Innovation Forum: 1Code=4Apps
Weptun Vortrag Bicc.Net Innovation Forum: 1Code=4AppsDominik Ueblacker
 
Mobile App Entwicklung
Mobile App EntwicklungMobile App Entwicklung
Mobile App Entwicklungmediaman
 

Was ist angesagt? (20)

„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
„Context is King and Device is Queen!“ in der mobilen Markenkommunikation„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
 
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
 
Benno Bartels
Benno BartelsBenno Bartels
Benno Bartels
 
Android tablet webmontag_benno_bartels
Android tablet webmontag_benno_bartelsAndroid tablet webmontag_benno_bartels
Android tablet webmontag_benno_bartels
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-Animations
 
Die Android Plattform
Die Android PlattformDie Android Plattform
Die Android Plattform
 
Mobile Applikationen: Idee und Planung
Mobile Applikationen: Idee und  PlanungMobile Applikationen: Idee und  Planung
Mobile Applikationen: Idee und Planung
 
2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"
 
Mobile Applikationen: Es gibt für alles eine App! - Auch für Sie?
Mobile Applikationen: Es gibt für alles eine App! - Auch für Sie?Mobile Applikationen: Es gibt für alles eine App! - Auch für Sie?
Mobile Applikationen: Es gibt für alles eine App! - Auch für Sie?
 
Responsive design
Responsive designResponsive design
Responsive design
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Mobile Applikationen: Cross-Plattform-Entwicklung
Mobile Applikationen: Cross-Plattform-EntwicklungMobile Applikationen: Cross-Plattform-Entwicklung
Mobile Applikationen: Cross-Plattform-Entwicklung
 
Mobile Apps und die Bedeutung für den Handel
Mobile Apps und die Bedeutung für den HandelMobile Apps und die Bedeutung für den Handel
Mobile Apps und die Bedeutung für den Handel
 
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
 
BUILD 2011 in Anaheim.
BUILD 2011 in Anaheim.BUILD 2011 in Anaheim.
BUILD 2011 in Anaheim.
 
Weptun Vortrag Bicc.Net Innovation Forum: 1Code=4Apps
Weptun Vortrag Bicc.Net Innovation Forum: 1Code=4AppsWeptun Vortrag Bicc.Net Innovation Forum: 1Code=4Apps
Weptun Vortrag Bicc.Net Innovation Forum: 1Code=4Apps
 
Mobile App Entwicklung
Mobile App EntwicklungMobile App Entwicklung
Mobile App Entwicklung
 

Ähnlich wie Responsive Web Design am Beispiel von Virato (Social News Aggregator)

Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileCS2 AG
 
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 Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign ProcessSven Wolfermann
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfPeter Grosskopf
 
Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung Martin Reiher
 
Responsive Design
Responsive DesignResponsive Design
Responsive DesignMario Fink
 
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
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign GmbH
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapGregor Biswanger
 
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, NotizenWebmontag MRN
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Wolfram Nagel
 
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
 
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...Unic
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Wolfram Nagel
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
Agile for Mobile - Agile Entwicklung von Anforderungen an mobile Business App...
Agile for Mobile - Agile Entwicklung von Anforderungen an mobile Business App...Agile for Mobile - Agile Entwicklung von Anforderungen an mobile Business App...
Agile for Mobile - Agile Entwicklung von Anforderungen an mobile Business App...microTOOL GmbH
 
Gestaltete Interaktion von erweiterten Realitäten – Perspektive und Freiräume
Gestaltete Interaktion von erweiterten Realitäten – Perspektive und FreiräumeGestaltete Interaktion von erweiterten Realitäten – Perspektive und Freiräume
Gestaltete Interaktion von erweiterten Realitäten – Perspektive und FreiräumeTilman Zitzmann
 

Ähnlich wie Responsive Web Design am Beispiel von Virato (Social News Aggregator) (20)

Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
 
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...
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 
Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung
 
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
 
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)
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
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
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)
 
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
 
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
 
Agile for Mobile - Agile Entwicklung von Anforderungen an mobile Business App...
Agile for Mobile - Agile Entwicklung von Anforderungen an mobile Business App...Agile for Mobile - Agile Entwicklung von Anforderungen an mobile Business App...
Agile for Mobile - Agile Entwicklung von Anforderungen an mobile Business App...
 
Gestaltete Interaktion von erweiterten Realitäten – Perspektive und Freiräume
Gestaltete Interaktion von erweiterten Realitäten – Perspektive und FreiräumeGestaltete Interaktion von erweiterten Realitäten – Perspektive und Freiräume
Gestaltete Interaktion von erweiterten Realitäten – Perspektive und Freiräume
 

Responsive Web Design am Beispiel von Virato (Social News Aggregator)

  • 1. BOSTONGLOBE.COM – RELAUCH SEPT. 2011 http://upstatement.com/portfolio/boston-globe/ Responsive [Web]Design
  • 2. Design für verschiedene Devices Responsive Webdesign virato.de Entstehung von virato.de Chancen und Herausforderungen Ausblick Resümee 2
  • 3. Design für verschiedene Devices Die neue IPTV-Welt von sevenload 4.0 (2010) – ein Beispiel für deviceübergreifendes Design mit identischem Content FLASH- /HTML5-PLAYER IPAD IPHONE APP DESKTOP PHILLIPS NET TV NINTENDO WII 3
  • 4. Design für verschiedene Devices Responsive Webdesign virato.de Entstehung von virato.de Chancen und Herausforderungen Ausblick Resümee 4
  • 5. Responsive Webdesign Ein Design für alle Devices ETHAN MARCOTTE RESPONSIVE WEBDESIGN Verlag: A Book Apart, New York, 2011 http://www.abookapart.com/products/ responsive-web-design » responsive (engl.) » ansprechbar; antwortend; reagierend; empfänglich {adj} 5
  • 6. Design für verschiedene Devices Responsive Webdesign virato.de Entstehung von virato.de Chancen und Herausforderungen Ausblick Resümee 6
  • 7. Virato.de Ein Social News Aggregator mit Responsive UI 7
  • 8. Virato.de Responsive Webdesign am Beispiel des Social News Aggregators APPLE IPHONE AMAZON KINDLE PORTRAIT MODE DESKTOP (320 PX BREIT) (600 PX BREIT) (>975 PX BREIT) 8
  • 9. Design für verschiedene Devices Responsive Webdesign virato.de Entstehung von virato.de Chancen und Herausforderungen Ausblick Resümee 9
  • 11. Entstehung von virato.de Basicdesign Screens für den Desktop / Style: Newspaper Retro-Look »Ein emotional aufgeladener Retro- Zeitungslook mit Grunge-Elementen, der das Design des Newsaggregators der Anmutung einer Printzeitung annä- hert und so die Kluft zwischen den beiden Elementen schmälert.« blog.virato.de 11
  • 12. Entstehung von virato.de Auswahl repräsentativer Device-Breiten, Festlegen der Breakpoints 12
  • 13. Entstehung von virato.de Verhalten der Layoutraster / fließende Layoutänderung 13
  • 14. Entstehung von virato.de HTML/CSS: @mediaqueries und »Breakpoints« für stellvertretende Devices, »mobile first« @media only screen and (min-width:480px) {...} 14
  • 16. Entstehung von virato.de Testing auf verschiedenen Devices HTTP://WWW.RESPONSINATOR.COM/?URL=WWW.VIRATO.DE 16
  • 17. Design für verschiedene Devices Responsive Webdesign virato.de Entstehung von virato.de Chancen und Herausforderungen Ausblick Resümee 17
  • 18. Chancen und Herausforderungen Responsive Webdesign Vor- und Nachteile + – » Ein Design für alle Devices funktioniert » Ein Design für alle Devices funktioniert immer und ist die Zukunft (Meinung u.a. nicht wenn der Usecase auf den Devices Jeffrey Zeldman) verschieden ist (Meinung u.a. linkedIn und Jacob Nielsen) » Möglichkeiten der Weiterverwendung für Hybrid Apps (linkedIn iPad App wurde zu » Anpassungen im Interaction Design sind je 95% in HTML5/CSS erstellt) nach Device nötig. » Immer noch experimentelles Stadium, aber » Herausforderung Projektmanagement und grundsätzlich machbar, insbesondere durch klassischer Aufteilung von Konzeption/ Kompatibiltät mit älteren Browsern mit Information Architecture, Designerstellung, HTML5 Boilerplate, Modernizr Umsetzung. >>> in »Wasserfall«- Workflowstrukturen schwierig » Ideal für kollaboratives Zusammenarbeiten von Designern und Entwicklern in iterativen Schritten 18
  • 19. Chancen und Herausforderungen Responsive Webdesign für alle Usecases? LINKEDIN IPAD APP – 95% HTML5/CSS, NO RESPONSIVE DESIGN http://venturebeat.com/2012/05/02/linkedin- ipad-app-engineering/ 19
  • 20. Design für verschiedene Devices Responsive Webdesign virato.de Entstehung von virato.de Chancen und Herausforderungen Ausblick Resümee 20
  • 21. Ausblick Offenheit für Veränderungen, für neue Devices INTERACTIVE MOBILE PROJECTORS – MOTIONBEAM (DISNEY RESEARCH 2012) GESTENBASIERTES INTERFACE IM FILM »MINORITY REPORT« (2002) Prognostiziert für 2014 Bereits möglich z.B. mit Kinect 21
  • 22. Ausblick Offenheit für Veränderungen, für alle Bildschirmauflösungen »The most popular size is every size. If you‹re not thinking in a mobile-first, content-first way, if you`re not planning an adaptive or respon- sive redesign, if you still think we have a standard canvas that ‘everybody’ uses, and if you can`t feel the hot breath of mobile singeing the hairs on the back of your neck, you don`t deserve to be a desig- ner, or a consultant, or whatever these people think they are.« Jeffrey Zeldman, founder of Happy Cog 22
  • 23. Design für verschiedene Devices Responsive Webdesign virato.de Entstehung von virato.de Chancen und Herausforderungen Ausblick Resümee 23
  • 24. Resümee und Diskussion » Responsive Design bedeutet: 1 Design für alle Devices und Bildschirmauflösungen » Die Methode und der Begriff »Responsive Webdesign wurden von Ethan Marcotte erarbeitet und als erstes publiziert. » Basicdesign für eine Breite (z.B. Desktop), Entwicklung beginnt mit »Mobile first« » Aus dem Mobile-CSS werden im CSS die Designs für die anderen Devices erstellt Your team of designers is very small - is that the key to its success? » Enges, kollaboratives Zusammenarbeiten I work with silicon designers, electronic and mecha- von Konzeptern, Designern und Entwicklern nical engineers, and I think you would struggle to notwendig >> Bestes Produkt determine who does what when we get together. We’re located together, we share the same goal, have exactly the same preoccupation with making » Responsive Design auch auf älteren great products. Browsern möglich durch HTML5 Boilerplate und Modernizr Sir Jonathan Ive, Design Lead Apple Inc., März 2011 » Testing auf möglichst vielen native Devices 24 wichtig
  • 25. Kontakt: gro@gro.de Web: www.gro.de/lectures Twitter: @dermietzel