Responsive Webdesign Process
-
Upload
sven-wolfermann -
Category
Design
-
view
138 -
download
1
description
Transcript of Responsive Webdesign Process
Responsive Webdesign ProcessWebinale, Berlin 03.06.2013
Sven Wolfermann | maddesigns
Sven Wolfermann (35)
Freelancer für moderne Webentwicklung (HTML5, CSS3, jQuery) aus Berlin
CSS3 Adventskalender 2010/2011
Organisator Berlin WebPerf Meetup
schreibt Artikel für das T3N-, PHP- und Webstandards-Magazin (new: Screengui.de)
mobile Geek
Wer ist die Flitzpiepe da überhaupt?
Twitter: @maddesignsWeb: http://maddesigns.de
·
·
·
·
·
·
/
„The Web“ im Rückblick
flexibel von Haus aus
Mobile-First Responsive Web Design article by Brad Frost
/
Responsive Web Design
Kurzer Rückblick
A List Apart article by Ethan Marcotte
/
A List Apart Artikel jetzt responsive
Responsive Webdesign Zutaten
Flexible layouts
Flexible media
Media queries
·
·
·
/
RWD ist mehr
beyond media queries: anatomy of an adaptive web design
Responsive design is notabout mobile. It's not abouttablets. It's not aboutdesktops. It's about TheWeb.
— Jeremy Keith (@adactio)
“
”
Was können wir über das "Web des Users" sagen?
/
last 3 slides taken from „For A Future Friendly Web“ by Brad Frost
Was können wir über das "Web des Users" sagen?
Heutzutage wissen wir nicht wie und wo der User unsere Websitebesucht
wir kennen die Bildschirmgröße nicht
wir kennen die Browsereigenschaften nicht
wir kennen die Verbindungsgeschwindigkeit nicht
·
·
·
/
Aktueller Workflow
Der übliche Prozess in Webprojekten
/
Designänderungswunsch vom Kunden
/
Designänderungswunsch vom Kunden
/
Using photoshop/fireworksfor responsive design is likebringing a knife to agunfight
— Andy Clarke (@Malarkey)
“
”
Photoshop Designs sehen klasse aus, Webseiten sehen niemals so gut aus!
/
Bisher haben wir häufig Bilder von Webseitenin Photoshop erstellt, keine abnahmefähigenPrototypen.
/
Der Workflow muss sich ändern!
/
It's impossible to predict allthe complications of aresponsive design up front.We need a more fluidworkflow!
— Andy Clarke (@Marlarkey)
“
”
Design Process in the Responsive Age
Mobile first Technik und Konzept
Mobile first
Smartphone first
Planung, Konzeption, Umsetzung mit dem Fokus auf mobile Geräte
Designplanung für Touch-bedienung
Konzentration aufs Wesentliche – welche Inhalte sind wichtig –wichtiger Inhalt zuerst
Von Anfang an auf den wachsenden Mobil Markt vorbereitet sein
Neuste Techniken nutzen, sowohl Browsertechniken, als auchMobiltechniken – Innovation
keine Degradierung der Inhalte, sondern Erweiterung Schritt fürSchritt
·
·
·
·
·
·
·
/
Mobile first -› Content first!?
taken from „For A Future Friendly Web“ by Brad Frost
Content first
Responsive Content Grundsatz: Je kleiner das Gerät, desto wichtiger istes den wichtigen Inhalt so weit wie möglich am Anfang der Webseite zuzeigen
Users können den Inhalt auch anders konsumieren...
RSS (Google Reader †1. Juli 2013, Feedly)
Readability, Instapaper
SEO‽
·
·
·
/
Steven Hay's workflow
Content first
Steven Hay's workflow
1. Content inventory
2. Content reference wireframes3. Design in text (structured content)
4. Linear design5. Breakpoint graph
6. Design for various breakpoints7. HTML design prototype
8. Present prototype screenshots9. Present prototype after revision
10. Document for production
Video
/
Design
/
Style Tiles
Dem Kunden Interface Layouts zeigen ohne die Zeit mit mehrerenPhotoshop Layouts zu verschwenden
http://styletil.es/
/
Style Tiles – Beispiel 1
/
Style Tiles – Beispiel 2
/
Style Tiles – Beispiel 3
/
Designing im Browser
Vorteile von HTML5/CSS3 nutzen
Prototyping im Browser kann schneller sein
Änderungen können schneller umgesetzt werden
Photoshop für Finetuning, Designentscheidungen aber im Browsertreffen
·
·
·
·
/
Adobe Edge Reflow
Adobe Edge Reflow
Adobes neues Baby (public preview)
Edge Reflow ist ein Designtool, kein Entwicklungstool
http://html.adobe.com/edge/reflow/
/
Thinkin'Tags
Thinkin'Tags
Thinkin'Tags
Designing im Browser
YAML4, sowie weitere Frameworks integriert
Unterstützung für CSS3 Media Queries zur Erstellung responsiverLayouts
Simulation der Viewportbreite für verschiedene Mobilgeräte, direktaus der Applikation heraus
Vier vorkonfigurierte Layoutgrößen: Phone, Tablet, Desktop,Widescreen
http://www.thinkintags.com
·
·
·
·
/
Performance
/
”You can't mockup performance in Photoshop“
/
There's no correlationbetween the size of thescreen and the amount ofbandwidth available to it.
— Ethan Marcotte(@beep)
“
”
Performance
Eine Annahme...
kleiner Bildschirm + Touch (Meist Smartphone)
großer Bildschirm + Touch (Meist Tablets)
großer Bildschirm + Tastatur/Maus (Meist Desktop/Laptops)
was ist ein Laptop mit UMTS-Stick » mobile/desktop?
gedrosselte Verbindung...
·
·
·
·
·
/
verbreitete Breakpoints (Umbruchpunkte im 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
irgendwas vergessen?
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 - damn, Toshiba AT330 13.3" Mega-Tablet
603 Pixel - huh, Nexus 7 hatte beim Erscheinen device-width=603px, jetzt 600px
568 Pixel - haha, iPhone 5 in landscape
383 Pixel - Nexus 4 in portrait m(
·
·
·
·
·
·
·
·
·
·
·
·
vorsichtig mit Screen- (Device-)pixel und CSS-Pixel (Video)
/
Breakpoints der Zukunft
Was kommt?
Blogpost von Luke Wroblewski "This Week In Mobile..." (7. September 2012)
??? pixels - Kindle Fire HD, iPad Mini?, ...
Unterschiedlich oder doch nicht? - 533 pixel, 768px, ...
Breakpoints nach Inhalt wählen, nicht nach Gerät!
·
·
·
/
Testing
Testen auf richtigen Geräten ist sehr wichtig
so früh wie möglich testen
nicht nur das Layout testen, auch Funktionstest & Performance
Remote Testing und Debugging mit Adobe Edge Inspect
Open Device Lab
gestartet von Jeremy Keith in Brighton
#ODL in der Nähe: http://opendevicelab.com/
Devices für Projekte mieten: mobile ODL
·
·
·
·
·
·
/
Edge Inspect
/
Frameworks, Tools & Resources
/
Frameworks
Frameworks und moderne Frontend-Techniken beschleunigen dieEntwicklung
Foundation 4
Bootstrap
YAML 4
aber vorsichtig mit Frameworks, gut für Prototyping, meist Overheadan Resourcen (modulare Frameworks sind ok)
·
·
/
Prototyping
Responsive Patterns
Pattern Lab (Brad Frost)
Sass & Compass für schnellere Entwicklung
Styleguides dynamisch erstellen:
Pattern Primer (PHP)
KSS (Ruby)
StyleDocco (Node.js)
·
·
·
·
·
·
/
Trends are poison. It's sucha shame that Responsivedesign is often degraded tobeing a “Web design trend”.It isn't. It's a new mindset.
— Vitaly Friedman (@smashingmag)
“
”
/
Danke für die Aufmerksamkeit!Sven Wolfermann | maddesigns
http://maddesigns.de
HTML5 slideshow by Google
/