Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Webdesign Process

Responsive Webdesign Process

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.

Sven Wolfermann

June 03, 2013
Tweet

More Decks by Sven Wolfermann

Other Decks in Design

Transcript

  1. 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 · · · · · · /
  2. Responsive design is not about mobile. It's not about tablets.

    It's not about desktops. It's about The Web. — Jeremy Keith (@adactio) “ ”
  3. 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 · · · /
  4. Using photoshop/fireworks for responsive design is like bringing a knife

    to a gunfight — Andy Clarke (@Malarkey) “ ”
  5. It's impossible to predict all the complications of a responsive

    design up front. We need a more fluid workflow! — Andy Clarke (@Marlarkey) “ ”
  6. 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 · · · · · · · /
  7. 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‽ · · · /
  8. 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 /
  9. Style Tiles Dem Kunden Interface Layouts zeigen ohne die Zeit

    mit mehreren Photoshop Layouts zu verschwenden http://styletil.es/ /
  10. 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 · · · · /
  11. Adobe Edge Reflow Adobes neues Baby (public preview) Edge Reflow

    ist ein Designtool, kein Entwicklungstool http://html.adobe.com/edge/reflow/ /
  12. 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 · · · · /
  13. There's no correlation between the size of the screen and

    the amount of bandwidth available to it. — Ethan Marcotte(@beep) “ ”
  14. 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... · · · · · /
  15. 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) /
  16. 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! · · · /
  17. 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 · · · · · · /
  18. 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) · · /
  19. Prototyping Responsive Patterns Pattern Lab (Brad Frost) Sass & Compass

    für schnellere Entwicklung Styleguides dynamisch erstellen: Pattern Primer (PHP) KSS (Ruby) StyleDocco (Node.js) · · · · · · /
  20. 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) “ ” /