SlideShare ist ein Scribd-Unternehmen logo
1 von 72
Downloaden Sie, um offline zu lesen
Peter Rozek | ecx.io germany GmbH

RESPONSIVE WEBDESIGN
Prozess, Dialog, Qualität
SPEAKER
Peter Rozek
PARADIGMENWECHSEL
Phänomäne des Wandels
Hardware verändert sich
GERÄTEVIELFALT
97*

232*

2010
2011
2012
2013

*BILDSCHIRMAUFLÖSUNGEN
4:3
5:3
8:5
16:9
16:10
17:10
128:75
32:17

SEITENVERHÄLTNIS
GUI
Ablösung der grafischen Benutzeroberfläche und ihren
Desktopmetaphern
Von der Methaper (GUI)
Zur natürlichen Interaktion (NUI)
Maus war gestern, Finger ist heute
Nutzungsverhalten und Nutzererwartungen
verändern sich
Standards verändern sich
NUI
Entwicklung zu wesentlich direktere und intuitivere
Designprinzipien des Natural User Interface Designs
NUI
Verhalten wird wichtiger als Aussehen
Verändern wir unsere Prozesse ?
PARADIGMENWECHSEL
Wir müssen unsere Prozesse und unser Denken ändern
„We have to refactor our design process!
[...] We need a Post-PC-Workflow.“

Andy Clark, 2012, Better better Client-Participation in responsive design projects:
http://www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsivedesign-projects/
„It is the nature of the web to be flexible, and it should be
our role as designers and developers to embrace this
flexibility, and produce pages which, by being flexible, are
accessible to all. The journey begins by letting go of
control, and becoming flexible.“

John Allsopp, A dao of webdesign: http://alistapart.com/article/dao
„Aufbrechen der Gewerke Konzept, Design und Frontend
zugunsten einer engen Zusammenarbeit“

Jens Grochtdreis
„Je weiter der Designprozess fortschreitet, desto höher
werden die Kosten für notwendige Anpassungen, während
die Möglichkeit der Designalternativen stetig abnimmt“

Bias and Mayhew; „Cost Justifying Usability“, 1994.
Ist ein Design nicht systematisch responsive entwickelt,
wird das Ergebnis ein aufwendig erreichter Kompromiss
sein.
Post-PC-Workflow:

KLASSISCHER PROZESS
Konzept
Design
Entwicklung
Test
Deliver
Unter Kopfhören verstecken
Lösungsansatz:

ITERATIVER DESIGNPROZESS
Design
Konzept

Test
Entwicklung

Deliver
DIALOG
Iterativer Designprozess lebt durch Dialog
In Wirkungsweisen und Handlungen denken, nicht in
Funktionen und festen Strukturen
DAS WEB IST KEIN
960 GRID RASTER
DAS WEB IST NICHT
KONTROLLIERBAR
„Give up control – not quality

Jeremy Keith, The Spirit of the Web
Responsive Webdesign in Photoshop ?
PHOTOSHOP
100% feste und statische Strukturen
Breakpoints
Umbruchpunkte in unserem denken und Design
320 Pixel
480 Pixel
768 Pixel
1024 Pixel
1200 Pixel

Smartphone portrait
Smartphone landscape
ein Tablet in landscape
einige Tablets, Notebooks, Desktop Monitore
große Bildschirme
Breakpoints
Umbruchpunkte in der Realität
360 Pixel
600 Pixel
1600 Pixel
1600 Pixel
568 Pixel
383 Pixel

Samsung Galaxy S3, Google Nexus, HTC One, ... (portrait)
kleine Tablets (7") in portrait
große Bildschirme, TV?
Toshiba AT330 13.3" Mega-Tablet
iPhone 5 in landscape
Nexus 4 in portrait
DESIGN IN PHOTOSHOP
In welcher Auflösung brauchen wir es?
„Responsive design is not about mobile. Its not about
tablets. Its not about desktops. Its about The Web.“

Jeremy Keith (@adactio)
Frage eines Designers:
„Mit welcher Breite (Pixel) soll ich die Tablett-Ansicht
anlegen.“
Developer und Designer an einem Tisch
MOBILE FIRST
CONTENT STRATEGY
IDEEN VISUALISIEREN
mit Photoshop
STYLE TILES
Typo, Farben, Forms, Buttons, Komponenten…
IDEEN TESTEN
mit HTML Prototypen
Schrift
Breakpoints
Webfonts
Iconfonts
Cross Browser und Devices Testen
Performance
(Quelle: http://www.f-i.com/fi/airlines/) und (http://www.youtube.com/watch?v=EIj8gmf6aeY)
HTML PROTOTYP
100% Bedienbar, Interaktiv, Responsive
DIREKTES FEEDBACK
Verhalten

Device

Design

HTML
HTMLPROTOTYP
Blaupause für die weitere (Design)Entwicklung
CODEREVIEW
Den eigenen Quelltext verbessern
FRAMEWORKS
Responsive Frontend Framework
FOUNDATION 4
Basiert auf einem 940 px breitem CSS-Grid, und umfasst
SASS-CSS Dateien und Zepto-Javascript (jQuery ähnlich)

http://gumbyframework.com/
BOOTSTRAP
Kern des Frameworks sind LESS-CSS, HTML sowie
jQuery Komponenten

http://gumbyframework.com/
GUMBY 2
Basiert auf SASS-CSS, HTML, jQuery-Daten und
Modernizr

http://gumbyframework.com/
YAML 4
Yaml ist ein kostenpflichtiges CSS-Framework, basiert
auf einem CSS-Grid, HTML und jQuery

http://gumbyframework.com/
QUALITÄT
Für meine Ellen
DANKE, MERCI, THANKS
twitter: webinterface
e-mail: peter.rozek@ecx.io
e-mail: hello@peter-rozek.de

FRAGEN

Weitere ähnliche Inhalte

Ähnlich wie Responsive Webdesign: Prozess, Dialog, Qualität

Einführung in User Experience Design
Einführung in User Experience DesignEinführung in User Experience Design
Einführung in User Experience Design
chmoser79
 

Ähnlich wie Responsive Webdesign: Prozess, Dialog, Qualität (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)
 
Einführung in User Experience Design
Einführung in User Experience DesignEinführung in User Experience Design
Einführung in User Experience Design
 
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
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
BUILD 2011 in Anaheim.
BUILD 2011 in Anaheim.BUILD 2011 in Anaheim.
BUILD 2011 in Anaheim.
 
Digital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User ExperienceDigital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User Experience
 
Ready or Not: No UI - the disappearance of the graphic user interface (Usabi...
 Ready or Not: No UI - the disappearance of the graphic user interface (Usabi... Ready or Not: No UI - the disappearance of the graphic user interface (Usabi...
Ready or Not: No UI - the disappearance of the graphic user interface (Usabi...
 
Ready or not: No UI vom Verschwinden des Graphical User Interfaces
Ready or not: No UI vom Verschwinden des Graphical User InterfacesReady or not: No UI vom Verschwinden des Graphical User Interfaces
Ready or not: No UI vom Verschwinden des Graphical User Interfaces
 
Softwarebasierte Barrieren im Designprozess einreissen. (UIG Frühjahrstagung ...
Softwarebasierte Barrieren im Designprozess einreissen. (UIG Frühjahrstagung ...Softwarebasierte Barrieren im Designprozess einreissen. (UIG Frühjahrstagung ...
Softwarebasierte Barrieren im Designprozess einreissen. (UIG Frühjahrstagung ...
 
120214 gpm basel_web_booklet
120214 gpm basel_web_booklet120214 gpm basel_web_booklet
120214 gpm basel_web_booklet
 
Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!
 
Dipl.-Ing. Leopold Peneder (HC Solutions)
Dipl.-Ing. Leopold Peneder (HC Solutions)Dipl.-Ing. Leopold Peneder (HC Solutions)
Dipl.-Ing. Leopold Peneder (HC Solutions)
 
Web Design - Inhalte, Interfaces und Interaktion
Web Design - Inhalte, Interfaces und InteraktionWeb Design - Inhalte, Interfaces und Interaktion
Web Design - Inhalte, Interfaces und Interaktion
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Responsive design
Responsive designResponsive design
Responsive design
 
Browserstrategien und Progressive Enhancement
Browserstrategien und Progressive EnhancementBrowserstrategien und Progressive Enhancement
Browserstrategien und Progressive Enhancement
 
Game ux handout - Susan Hartmann
Game ux handout -  Susan HartmannGame ux handout -  Susan Hartmann
Game ux handout - Susan Hartmann
 
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...
 
Smarter arbeiten v1.1
Smarter arbeiten v1.1Smarter arbeiten v1.1
Smarter arbeiten v1.1
 
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...
 

Mehr von Peter Rozek

Mehr von Peter Rozek (20)

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership
 
Persona driven agile development
Persona driven agile developmentPersona driven agile development
Persona driven agile development
 
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingCross Device Experience with HTML Prototyping
Cross Device Experience with HTML Prototyping
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-Animations
 
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensResponsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of Screens
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVE
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User Experience
 
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXHassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UX
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
 
The UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryThe UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQuery
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
 
Performance and UX
Performance and UXPerformance and UX
Performance and UX
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and Guidelines
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 

Responsive Webdesign: Prozess, Dialog, Qualität