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.
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
/
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
·
·
·
/
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
·
·
·
·
·
·
·
/
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
/
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
·
·
·
·
/
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
·
·
·
·
/
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
·
·
·
·
·
·
/
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)
·
·
/
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
/