responsive webdesign process

56
Responsive Webdesign Process Webinale , Berlin 03.06.2013 Sven Wolfermann | maddesigns

Upload: sven-wolfermann

Post on 27-Jan-2015

149 views

Category:

Design


1 download

DESCRIPTION

Responsive Webdesign ist grad der heiße Scheiß, allerdings ist Responsive Webdesign mehr, als eine Desktopwebsite in eine mobile Ansicht zu quetschen. Es muss ein neuer Prozess her. Der alte Workflow "Auftrag bekommen > Recherche > Design erstellen > Abnahme > Design umsetzen" funktioniert so nicht mehr. Im Responsive-Webdesign-Prozess müssen alle Beteiligten eines Webprojekts von der ersten Sekunde an enger zusammenarbeiten. Zudem müssen frühzeitige und häufige Testphasen und Implementierungsstrategien gefunden werden.

TRANSCRIPT

Page 1: Responsive Webdesign Process

Responsive Webdesign ProcessWebinale, Berlin 03.06.2013

Sven Wolfermann | maddesigns

Page 2: Responsive Webdesign Process

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

„The Web“ im Rückblick

flexibel von Haus aus

Mobile-First Responsive Web Design article by Brad Frost

/

Page 4: Responsive Webdesign Process

Responsive Web Design

Kurzer Rückblick

A List Apart article by Ethan Marcotte

/

Page 5: Responsive Webdesign Process

A List Apart Artikel jetzt responsive

Page 6: Responsive Webdesign Process

Responsive Webdesign Zutaten

Flexible layouts

Flexible media

Media queries

·

·

·

/

Page 7: Responsive Webdesign Process

RWD ist mehr

beyond media queries: anatomy of an adaptive web design

Page 8: Responsive Webdesign Process

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

Was können wir über das "Web des Users" sagen?

/

Page 10: Responsive Webdesign Process
Page 11: Responsive Webdesign Process
Page 12: Responsive Webdesign Process

last 3 slides taken from „For A Future Friendly Web“ by Brad Frost

Page 13: Responsive Webdesign Process

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

Aktueller Workflow

Page 15: Responsive Webdesign Process

Der übliche Prozess in Webprojekten

/

Page 16: Responsive Webdesign Process

Designänderungswunsch vom Kunden

/

Page 17: Responsive Webdesign Process

Designänderungswunsch vom Kunden

/

Page 18: Responsive Webdesign Process

Using photoshop/fireworksfor responsive design is likebringing a knife to agunfight

— Andy Clarke (@Malarkey)

Page 19: Responsive Webdesign Process

Photoshop Designs sehen klasse aus, Webseiten sehen niemals so gut aus!

/

Page 20: Responsive Webdesign Process

Bisher haben wir häufig Bilder von Webseitenin Photoshop erstellt, keine abnahmefähigenPrototypen.

/

Page 21: Responsive Webdesign Process

Der Workflow muss sich ändern!

/

Page 22: Responsive Webdesign Process

It's impossible to predict allthe complications of aresponsive design up front.We need a more fluidworkflow!

— Andy Clarke (@Marlarkey)

Page 24: Responsive Webdesign Process

Mobile first Technik und Konzept

Page 25: Responsive Webdesign Process

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

Mobile first -› Content first!?

Page 27: Responsive Webdesign Process

taken from „For A Future Friendly Web“ by Brad Frost

Page 28: Responsive Webdesign Process
Page 29: Responsive Webdesign Process

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

Steven Hay's workflow

Page 31: Responsive Webdesign Process

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

Design

/

Page 33: Responsive Webdesign Process

Style Tiles

Dem Kunden Interface Layouts zeigen ohne die Zeit mit mehrerenPhotoshop Layouts zu verschwenden

http://styletil.es/

/

Page 34: Responsive Webdesign Process

Style Tiles – Beispiel 1

/

Page 35: Responsive Webdesign Process

Style Tiles – Beispiel 2

/

Page 36: Responsive Webdesign Process

Style Tiles – Beispiel 3

/

Page 37: Responsive Webdesign Process

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

Adobe Edge Reflow

Page 39: Responsive Webdesign Process

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

Thinkin'Tags

Page 41: Responsive Webdesign Process

Thinkin'Tags

Page 42: Responsive Webdesign Process

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

Performance

/

Page 44: Responsive Webdesign Process

”You can't mockup performance in Photoshop“

/

Page 45: Responsive Webdesign Process

There's no correlationbetween the size of thescreen and the amount ofbandwidth available to it.

— Ethan Marcotte(@beep)

Page 46: Responsive Webdesign Process

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

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

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

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

Edge Inspect

/

Page 51: Responsive Webdesign Process

Edge Inspect

http://html.adobe.com/edge/inspect/

/

Page 52: Responsive Webdesign Process

Frameworks, Tools & Resources

/

Page 53: Responsive Webdesign Process

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

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

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

Danke für die Aufmerksamkeit!Sven Wolfermann | maddesigns

http://maddesigns.de

HTML5 slideshow by Google

/