SlideShare ist ein Scribd-Unternehmen logo
1 von 56
Downloaden Sie, um offline zu lesen
Responsive Webdesign Process
Webinale, 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: @maddesigns
Web: 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 not
about mobile. It's not about
tablets. It's not about
desktops. It's about The
Web.
— Jeremy Keith (@adactio)
“
”
Was können wir über das
"Web des Users" sagen?
/
Responsive Webdesign Process
Responsive Webdesign Process
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 Website
besucht
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/fireworks
for responsive design is like
bringing a knife to a
gunfight
— Andy Clarke (@Malarkey)
“
”
Photoshop Designs sehen klasse aus,
Webseiten sehen niemals so gut aus!
/
Bisher haben wir häufig Bilder von Webseiten
in Photoshop erstellt, keine abnahmefähigen
Prototypen.
/
Der Workflow muss sich ändern!
/
It's impossible to predict all
the complications of a
responsive design up front.
We need a more fluid
workflow!
— 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 auch
Mobiltechniken – Innovation
keine Degradierung der Inhalte, sondern Erweiterung Schritt für
Schritt
·
·
·
·
·
·
·
/
Mobile first -› Content first!?
taken from „For A Future Friendly Web“ by Brad Frost
Responsive Webdesign Process
Content first
Responsive Content Grundsatz: Je kleiner das Gerät, desto wichtiger ist
es den wichtigen Inhalt so weit wie möglich am Anfang der Webseite zu
zeigen
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 wireframes
3. Design in text (structured content)
4. Linear design
5. Breakpoint graph
6. Design for various breakpoints
7. HTML design prototype
8. Present prototype screenshots
9. Present prototype after revision
10. Document for production
Video
/
Design
/
Style Tiles
Dem Kunden Interface Layouts zeigen ohne die Zeit mit mehreren
Photoshop 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 Browser
treffen
·
·
·
·
/
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 responsiver
Layouts
Simulation der Viewportbreite für verschiedene Mobilgeräte, direkt
aus 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 correlation
between the size of the
screen and the amount of
bandwidth 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
/
Edge Inspect
http://html.adobe.com/edge/inspect/
/
Frameworks, Tools & Resources
/
Frameworks
Frameworks und moderne Frontend-Techniken beschleunigen die
Entwicklung
Foundation 4
Bootstrap
YAML 4
aber vorsichtig mit Frameworks, gut für Prototyping, meist Overhead
an 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 such
a shame that Responsive
design is often degraded to
being 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
/

Más contenido relacionado

Andere mochten auch

El cuerpo humano al microscopio
El cuerpo humano al microscopioEl cuerpo humano al microscopio
El cuerpo humano al microscopioDiego Sevilla
 
Higiene Mental para Educadores
Higiene Mental para EducadoresHigiene Mental para Educadores
Higiene Mental para EducadoresCarmen Nereira
 
Christian & Marion
Christian & MarionChristian & Marion
Christian & MarionI4zY
 
MOLECULAR GASTRONOMY, FOOD STYLING, PLATING
MOLECULAR GASTRONOMY, FOOD STYLING, PLATINGMOLECULAR GASTRONOMY, FOOD STYLING, PLATING
MOLECULAR GASTRONOMY, FOOD STYLING, PLATINGCOTHM
 
Politisches System Schweiz
Politisches System SchweizPolitisches System Schweiz
Politisches System SchweiznemcinaEUBA
 
26 al 30 de enero
26 al 30 de enero26 al 30 de enero
26 al 30 de enerocolegiommc
 
Goobi Präsentation Darmstadt 2009
Goobi Präsentation Darmstadt 2009Goobi Präsentation Darmstadt 2009
Goobi Präsentation Darmstadt 2009Ralf Stockmann
 
08 la universidad más allá de la academia
08 la universidad más allá de la academia08 la universidad más allá de la academia
08 la universidad más allá de la academiaTatiana Black
 
Präsentation1
Präsentation1Präsentation1
Präsentation1Huen Sohn
 
Projekt im deutschunterricht km1
Projekt im deutschunterricht km1Projekt im deutschunterricht km1
Projekt im deutschunterricht km1beatarejent
 
Unidad 3 sistemas de información
Unidad 3 sistemas de informaciónUnidad 3 sistemas de información
Unidad 3 sistemas de informaciónLizbeth Chavez
 
Leseprobe "Stoppt die Welt, ich will aussteigen! Kuriose Abenteuer einer Welt...
Leseprobe "Stoppt die Welt, ich will aussteigen! Kuriose Abenteuer einer Welt...Leseprobe "Stoppt die Welt, ich will aussteigen! Kuriose Abenteuer einer Welt...
Leseprobe "Stoppt die Welt, ich will aussteigen! Kuriose Abenteuer einer Welt...Studienstrategie
 

Andere mochten auch (20)

El cuerpo humano al microscopio
El cuerpo humano al microscopioEl cuerpo humano al microscopio
El cuerpo humano al microscopio
 
LECTIO DIVINA DOMINGO XXV.
LECTIO DIVINA DOMINGO XXV.LECTIO DIVINA DOMINGO XXV.
LECTIO DIVINA DOMINGO XXV.
 
Higiene Mental para Educadores
Higiene Mental para EducadoresHigiene Mental para Educadores
Higiene Mental para Educadores
 
Christian & Marion
Christian & MarionChristian & Marion
Christian & Marion
 
MOLECULAR GASTRONOMY, FOOD STYLING, PLATING
MOLECULAR GASTRONOMY, FOOD STYLING, PLATINGMOLECULAR GASTRONOMY, FOOD STYLING, PLATING
MOLECULAR GASTRONOMY, FOOD STYLING, PLATING
 
Semana 40
Semana 40Semana 40
Semana 40
 
Politisches System Schweiz
Politisches System SchweizPolitisches System Schweiz
Politisches System Schweiz
 
Disfruta tu cafe
Disfruta tu cafeDisfruta tu cafe
Disfruta tu cafe
 
26 al 30 de enero
26 al 30 de enero26 al 30 de enero
26 al 30 de enero
 
Kleidothikes
KleidothikesKleidothikes
Kleidothikes
 
Beko BBL-Standards 2013/2014
Beko BBL-Standards 2013/2014Beko BBL-Standards 2013/2014
Beko BBL-Standards 2013/2014
 
Goobi Präsentation Darmstadt 2009
Goobi Präsentation Darmstadt 2009Goobi Präsentation Darmstadt 2009
Goobi Präsentation Darmstadt 2009
 
08 la universidad más allá de la academia
08 la universidad más allá de la academia08 la universidad más allá de la academia
08 la universidad más allá de la academia
 
Präsentation1
Präsentation1Präsentation1
Präsentation1
 
2014 Dgo 2 de Noviembre
2014  Dgo 2 de Noviembre2014  Dgo 2 de Noviembre
2014 Dgo 2 de Noviembre
 
Espíritu Emprendedor - Ecuador
Espíritu Emprendedor - EcuadorEspíritu Emprendedor - Ecuador
Espíritu Emprendedor - Ecuador
 
Projekt im deutschunterricht km1
Projekt im deutschunterricht km1Projekt im deutschunterricht km1
Projekt im deutschunterricht km1
 
Unidad 3 sistemas de información
Unidad 3 sistemas de informaciónUnidad 3 sistemas de información
Unidad 3 sistemas de información
 
Universal Touch Screen
Universal Touch ScreenUniversal Touch Screen
Universal Touch Screen
 
Leseprobe "Stoppt die Welt, ich will aussteigen! Kuriose Abenteuer einer Welt...
Leseprobe "Stoppt die Welt, ich will aussteigen! Kuriose Abenteuer einer Welt...Leseprobe "Stoppt die Welt, ich will aussteigen! Kuriose Abenteuer einer Welt...
Leseprobe "Stoppt die Welt, ich will aussteigen! Kuriose Abenteuer einer Welt...
 

Ähnlich wie Responsive Webdesign Process

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)denkwerk GmbH
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haubefalconwhite
 
ChatGPT: A brilliant co-pilot for UX Designers?
ChatGPT: A brilliant co-pilot for UX Designers?ChatGPT: A brilliant co-pilot for UX Designers?
ChatGPT: A brilliant co-pilot for UX Designers?Claudio Diaspero
 
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Alexej Antropov
 
Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11Leif Janzik
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressKirstenSchelper
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGapStefan Kolb
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGapIndiginox
 
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive DesignJohannes Waibel
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfPeter Grosskopf
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Webch.ch
 

Ähnlich wie Responsive Webdesign Process (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)
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
ChatGPT: A brilliant co-pilot for UX Designers?
ChatGPT: A brilliant co-pilot for UX Designers?ChatGPT: A brilliant co-pilot for UX Designers?
ChatGPT: A brilliant co-pilot for UX Designers?
 
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
 
Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
 
Mobile und Trends.
Mobile und Trends.Mobile und Trends.
Mobile und Trends.
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Web
 

Mehr von Sven Wolfermann

Testing Responsive Webdesign
Testing Responsive WebdesignTesting Responsive Webdesign
Testing Responsive WebdesignSven Wolfermann
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with SassSven Wolfermann
 
RESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side ComponentsRESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side ComponentsSven Wolfermann
 
Typografie im Responsive Webdesign
Typografie im Responsive WebdesignTypografie im Responsive Webdesign
Typografie im Responsive WebdesignSven Wolfermann
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Sven Wolfermann
 
CSS3 im praktischen Einsatz
CSS3 im praktischen EinsatzCSS3 im praktischen Einsatz
CSS3 im praktischen EinsatzSven Wolfermann
 

Mehr von Sven Wolfermann (8)

Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
 
Testing Responsive Webdesign
Testing Responsive WebdesignTesting Responsive Webdesign
Testing Responsive Webdesign
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
 
RESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side ComponentsRESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side Components
 
Typografie im Responsive Webdesign
Typografie im Responsive WebdesignTypografie im Responsive Webdesign
Typografie im Responsive Webdesign
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
 
CSS3 im praktischen Einsatz
CSS3 im praktischen EinsatzCSS3 im praktischen Einsatz
CSS3 im praktischen Einsatz
 

Responsive Webdesign Process

  • 1. Responsive Webdesign Process Webinale, Berlin 03.06.2013 Sven Wolfermann | maddesigns
  • 2. 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: @maddesigns Web: http://maddesigns.de · · · · · · /
  • 3. „The Web“ im Rückblick flexibel von Haus aus Mobile-First Responsive Web Design article by Brad Frost /
  • 4. Responsive Web Design Kurzer Rückblick A List Apart article by Ethan Marcotte /
  • 5. A List Apart Artikel jetzt responsive
  • 6. Responsive Webdesign Zutaten Flexible layouts Flexible media Media queries · · · /
  • 7. RWD ist mehr beyond media queries: anatomy of an adaptive web design
  • 8. Responsive design is not about mobile. It's not about tablets. It's not about desktops. It's about The Web. — Jeremy Keith (@adactio) “ ”
  • 9. Was können wir über das "Web des Users" sagen? /
  • 12. last 3 slides taken from „For A Future Friendly Web“ by Brad Frost
  • 13. Was können wir über das "Web des Users" sagen? Heutzutage wissen wir nicht wie und wo der User unsere Website besucht wir kennen die Bildschirmgröße nicht wir kennen die Browsereigenschaften nicht wir kennen die Verbindungsgeschwindigkeit nicht · · · /
  • 15. Der übliche Prozess in Webprojekten /
  • 18. Using photoshop/fireworks for responsive design is like bringing a knife to a gunfight — Andy Clarke (@Malarkey) “ ”
  • 19. Photoshop Designs sehen klasse aus, Webseiten sehen niemals so gut aus! /
  • 20. Bisher haben wir häufig Bilder von Webseiten in Photoshop erstellt, keine abnahmefähigen Prototypen. /
  • 21. Der Workflow muss sich ändern! /
  • 22. It's impossible to predict all the complications of a responsive design up front. We need a more fluid workflow! — Andy Clarke (@Marlarkey) “ ”
  • 23. Design Process in the Responsive Age
  • 25. 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 auch Mobiltechniken – Innovation keine Degradierung der Inhalte, sondern Erweiterung Schritt für Schritt · · · · · · · /
  • 26. Mobile first -› Content first!?
  • 27. taken from „For A Future Friendly Web“ by Brad Frost
  • 29. Content first Responsive Content Grundsatz: Je kleiner das Gerät, desto wichtiger ist es den wichtigen Inhalt so weit wie möglich am Anfang der Webseite zu zeigen Users können den Inhalt auch anders konsumieren... RSS (Google Reader †1. Juli 2013, Feedly) Readability, Instapaper SEO‽ · · · /
  • 31. Content first Steven Hay's workflow 1. Content inventory 2. Content reference wireframes 3. Design in text (structured content) 4. Linear design 5. Breakpoint graph 6. Design for various breakpoints 7. HTML design prototype 8. Present prototype screenshots 9. Present prototype after revision 10. Document for production Video /
  • 33. Style Tiles Dem Kunden Interface Layouts zeigen ohne die Zeit mit mehreren Photoshop Layouts zu verschwenden http://styletil.es/ /
  • 34. Style Tiles – Beispiel 1 /
  • 35. Style Tiles – Beispiel 2 /
  • 36. Style Tiles – Beispiel 3 /
  • 37. 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 Browser treffen · · · · /
  • 39. Adobe Edge Reflow Adobes neues Baby (public preview) Edge Reflow ist ein Designtool, kein Entwicklungstool http://html.adobe.com/edge/reflow/ /
  • 42. Thinkin'Tags Designing im Browser YAML4, sowie weitere Frameworks integriert Unterstützung für CSS3 Media Queries zur Erstellung responsiver Layouts Simulation der Viewportbreite für verschiedene Mobilgeräte, direkt aus der Applikation heraus Vier vorkonfigurierte Layoutgrößen: Phone, Tablet, Desktop, Widescreen http://www.thinkintags.com · · · · /
  • 44. ”You can't mockup performance in Photoshop“ /
  • 45. There's no correlation between the size of the screen and the amount of bandwidth available to it. — Ethan Marcotte(@beep) “ ”
  • 46. 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... · · · · · /
  • 47. 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) /
  • 48. 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! · · · /
  • 49. 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 · · · · · · /
  • 52. Frameworks, Tools & Resources /
  • 53. Frameworks Frameworks und moderne Frontend-Techniken beschleunigen die Entwicklung Foundation 4 Bootstrap YAML 4 aber vorsichtig mit Frameworks, gut für Prototyping, meist Overhead an Resourcen (modulare Frameworks sind ok) · · /
  • 54. Prototyping Responsive Patterns Pattern Lab (Brad Frost) Sass & Compass für schnellere Entwicklung Styleguides dynamisch erstellen: Pattern Primer (PHP) KSS (Ruby) StyleDocco (Node.js) · · · · · · /
  • 55. Trends are poison. It's such a shame that Responsive design is often degraded to being a “Web design trend”. It isn't. It's a new mindset. — Vitaly Friedman (@smashingmag) “ ” /
  • 56. Danke für die Aufmerksamkeit! Sven Wolfermann | maddesigns http://maddesigns.de HTML5 slideshow by Google /