Responsive Webdesign Process
-
Upload
sven-wolfermann -
Category
Design
-
view
155 -
download
1
description
Transcript of Responsive Webdesign Process
![Page 1: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/1.jpg)
Responsive Webdesign ProcessWebinale, Berlin 03.06.2013
Sven Wolfermann | maddesigns
![Page 2: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/2.jpg)
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
·
·
·
·
·
·
/
![Page 3: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/3.jpg)
„The Web“ im Rückblick
flexibel von Haus aus
Mobile-First Responsive Web Design article by Brad Frost
/
![Page 4: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/4.jpg)
Responsive Web Design
Kurzer Rückblick
A List Apart article by Ethan Marcotte
/
![Page 5: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/5.jpg)
A List Apart Artikel jetzt responsive
![Page 6: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/6.jpg)
Responsive Webdesign Zutaten
Flexible layouts
Flexible media
Media queries
·
·
·
/
![Page 7: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/7.jpg)
RWD ist mehr
beyond media queries: anatomy of an adaptive web design
![Page 8: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/8.jpg)
Responsive design is notabout mobile. It's not abouttablets. It's not aboutdesktops. It's about TheWeb.
— Jeremy Keith (@adactio)
“
”
![Page 9: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/9.jpg)
Was können wir über das "Web des Users" sagen?
/
![Page 10: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/10.jpg)
![Page 11: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/11.jpg)
![Page 12: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/12.jpg)
last 3 slides taken from „For A Future Friendly Web“ by Brad Frost
![Page 13: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/13.jpg)
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
·
·
·
/
![Page 14: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/14.jpg)
Aktueller Workflow
![Page 15: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/15.jpg)
Der übliche Prozess in Webprojekten
/
![Page 16: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/16.jpg)
Designänderungswunsch vom Kunden
/
![Page 17: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/17.jpg)
Designänderungswunsch vom Kunden
/
![Page 18: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/18.jpg)
Using photoshop/fireworksfor responsive design is likebringing a knife to agunfight
— Andy Clarke (@Malarkey)
“
”
![Page 19: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/19.jpg)
Photoshop Designs sehen klasse aus, Webseiten sehen niemals so gut aus!
/
![Page 20: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/20.jpg)
Bisher haben wir häufig Bilder von Webseitenin Photoshop erstellt, keine abnahmefähigenPrototypen.
/
![Page 21: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/21.jpg)
Der Workflow muss sich ändern!
/
![Page 22: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/22.jpg)
It's impossible to predict allthe complications of aresponsive design up front.We need a more fluidworkflow!
— Andy Clarke (@Marlarkey)
“
”
![Page 23: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/23.jpg)
Design Process in the Responsive Age
![Page 24: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/24.jpg)
Mobile first Technik und Konzept
![Page 25: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/25.jpg)
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
·
·
·
·
·
·
·
/
![Page 26: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/26.jpg)
Mobile first -› Content first!?
![Page 27: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/27.jpg)
taken from „For A Future Friendly Web“ by Brad Frost
![Page 28: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/28.jpg)
![Page 29: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/29.jpg)
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‽
·
·
·
/
![Page 30: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/30.jpg)
Steven Hay's workflow
![Page 31: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/31.jpg)
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
/
![Page 32: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/32.jpg)
Design
/
![Page 33: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/33.jpg)
Style Tiles
Dem Kunden Interface Layouts zeigen ohne die Zeit mit mehrerenPhotoshop Layouts zu verschwenden
http://styletil.es/
/
![Page 34: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/34.jpg)
Style Tiles – Beispiel 1
/
![Page 35: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/35.jpg)
Style Tiles – Beispiel 2
/
![Page 36: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/36.jpg)
Style Tiles – Beispiel 3
/
![Page 37: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/37.jpg)
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
·
·
·
·
/
![Page 38: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/38.jpg)
Adobe Edge Reflow
![Page 39: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/39.jpg)
Adobe Edge Reflow
Adobes neues Baby (public preview)
Edge Reflow ist ein Designtool, kein Entwicklungstool
http://html.adobe.com/edge/reflow/
/
![Page 40: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/40.jpg)
Thinkin'Tags
![Page 41: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/41.jpg)
Thinkin'Tags
![Page 42: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/42.jpg)
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
·
·
·
·
/
![Page 43: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/43.jpg)
Performance
/
![Page 44: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/44.jpg)
”You can't mockup performance in Photoshop“
/
![Page 45: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/45.jpg)
There's no correlationbetween the size of thescreen and the amount ofbandwidth available to it.
— Ethan Marcotte(@beep)
“
”
![Page 46: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/46.jpg)
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...
·
·
·
·
·
/
![Page 47: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/47.jpg)
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)
/
![Page 48: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/48.jpg)
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!
·
·
·
/
![Page 49: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/49.jpg)
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
·
·
·
·
·
·
/
![Page 50: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/50.jpg)
Edge Inspect
/
![Page 52: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/52.jpg)
Frameworks, Tools & Resources
/
![Page 53: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/53.jpg)
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)
·
·
/
![Page 54: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/54.jpg)
Prototyping
Responsive Patterns
Pattern Lab (Brad Frost)
Sass & Compass für schnellere Entwicklung
Styleguides dynamisch erstellen:
Pattern Primer (PHP)
KSS (Ruby)
StyleDocco (Node.js)
·
·
·
·
·
·
/
![Page 55: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/55.jpg)
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)
“
”
/
![Page 56: Responsive Webdesign Process](https://reader034.fdocuments.net/reader034/viewer/2022042505/54c7bfe24a7959ea488b45e7/html5/thumbnails/56.jpg)
Danke für die Aufmerksamkeit!Sven Wolfermann | maddesigns
http://maddesigns.de
HTML5 slideshow by Google
/