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

/

Edge Inspect

http://html.adobe.com/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

/