Embed Size (px)
DESCRIPTION
Citation preview
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
