responsive webdesign: prozess, dialog, qualität

Peter Rozek | ecx.io germany GmbH

RESPONSIVE WEBDESIGNProzess, Dialog, Qualität

SPEAKERPeter Rozek

PARADIGMENWECHSELPhänomäne des Wandels

Hardware verändert sich

GERÄTEVIELFALT

*BILDSCHIRMAUFLÖSUNGEN

97*

2010

232*

2013

20112012

16:1016:9

32:17

4:3

17:10128:75

5:38:5

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

Verhalten wird wichtiger als Aussehen

NUI

Verändern wir unsere Prozesse ?

PARADIGMENWECHSELWir 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-responsive-

design-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.

KLASSISCHER PROZESS Post-PC-Workflow:

Konzept

Test

Entwicklung

Design

Deliver

Unter Kopfhören verstecken

ITERATIVER DESIGNPROZESS Lösungsansatz:

Konzept Test

Entwicklung

Design

Deliver

Iterativer Designprozess lebt durch DialogDIALOG

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 ?

PHOTOSHOP100% feste und statische Strukturen

Breakpoints Umbruchpunkte in unserem denken und Design

320 Pixel Smartphone portrait 480 Pixel Smartphone landscape 768 Pixel ein Tablet in landscape 1024 Pixel einige Tablets, Notebooks, Desktop Monitore 1200 Pixel große Bildschirme

Breakpoints Umbruchpunkte in der Realität

360 Pixel Samsung Galaxy S3, Google Nexus, HTC One, ... (portrait) 600 Pixel kleine Tablets (7") in portrait 1600 Pixel große Bildschirme, TV? 1600 Pixel Toshiba AT330 13.3" Mega-Tablet 568 Pixel iPhone 5 in landscape 383 Pixel Nexus 4 in portrait

DESIGN IN PHOTOSHOPIn 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 VISUALISIERENmit Photoshop

STYLE TILESTypo, Farben, Forms, Buttons, Komponenten…

IDEEN TESTENmit 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 PROTOTYP100% Bedienbar, Interaktiv, Responsive

DIREKTES FEEDBACK

Verhalten

HTML

Device

Design

HTMLPROTOTYPBlaupause für die weitere (Design)Entwicklung

CODEREVIEWDen eigenen Quelltext verbessern

FRAMEWORKSResponsive Frontend Framework

FOUNDATION 4Basiert auf einem 940 px breitem CSS-Grid, und umfasst SASS-CSS Dateien und Zepto-Javascript (jQuery ähnlich)

http://gumbyframework.com/

BOOTSTRAPKern des Frameworks sind LESS-CSS, HTML sowie

jQuery Komponenten

http://gumbyframework.com/

GUMBY 2Basiert auf SASS-CSS, HTML, jQuery-Daten und

Modernizr

http://gumbyframework.com/

YAML 4Yaml 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

FRAGEN

twitter: webinterface e-mail: peter.rozek@ecx.io

e-mail: hello@peter-rozek.de