+ All Categories
Home > Documents > Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Date post: 29-Nov-2014
Category:
Upload: die-firma-gmbh
View: 783 times
Download: 0 times
Share this document with a friend
Description:
 
61
Responsive Webdesign für Nichtentwickler Jens Grochtdreis
Transcript
Page 1: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Responsive Webdesign für Nichtentwickler

Jens Grochtdreis

Page 5: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

http://instagram.com/p/W2FCksR9-e/

Petersplatz - Rom

Page 7: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

http://de.slideshare.net/kleinerperkins/2012-kpcb-internet-trends-yearend-update

Warum soll uns das kümmern?

Page 8: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Seitenzugriffe ZDNet.de

‣ Januar 2012: 8% mobil

‣ Dezember 2012: 36% mobil

http://www.zdnet.de/88136184/marktanteil-2012-windows-verliert-android-gewinnt/

Page 9: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

http://icant.co.uk/talks/h5/pictures/jqueryeu/hypnophone.jpg

Zunahme mobiler Internetnutzung

‣ 77% aller mobiler Suchen finden zuhause oder an der Arbeit statt

‣ 17% sind „on the go“Google/Nielsen Life360 Mobile Search Moments Q4 2012

Page 11: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Gesucht: ein flexibles Design für alle Ausprägungen

Page 12: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Das Web ist schon immer flexibel gewesen.

WIR haben es fixiert!

Page 13: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis
Page 14: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis
Page 15: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis
Page 16: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis
Page 17: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis
Page 18: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis
Page 19: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Das Layout

http://www.schraegstrichpunkt.de/misc/grabstein.jpg

Page 20: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Das Web

http://snipurl.com/2563ah8

Page 21: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

‣ flexibles Grid (Spalten gehen natürlich auch!)

‣ flexible Medien (Bilder und Videos)

‣ Media Queries (Layoutschwellen)

Responsive Webdesign

alt

neu

alt

Page 22: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Responsive Webdesign ist einfach umzusetzen!

http://mascola.com/insights/wp-content/uploads/2011/05/used_cardealer_photo.jpg

Page 23: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Einfache Vorstellung

ein wenig CSS

ein wenig HTML

und schon ist die responsive Seite fertig!

Page 25: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Wir brauchen

1. neue Tools

2. einen neuen Workflow

3. neue Entscheidungskriterien

4. viel Kommunikation

5. viel Zeit für Experimente

Page 26: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Photoshop ist ungeeignet für Flexibilität1

Page 27: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Keine Bildbearbeitung ist für Webdesign geeignet.

Page 28: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Bildbearbeitungen sind zum Bilder bearbeiten da!

Page 29: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Man kann erste Ideen skizzieren, Atmosphäre

schaffen. Mehr nicht!

Page 30: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Photoshop ist für erste Designideen und für die Erstellung von Modulen

Page 31: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Wir haben die Photoshop-Ergebnisse immer falsch

kommuniziert!

Page 32: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Kunde

Beratung

Konzept

Design

Frontend

Backend

Unser Workflow ist falsch2

Page 33: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Im Normalfall wird der Frontendentwickler überrascht

http://failblog.files.wordpress.com/2009/07/128932678618285916.jpg

Page 34: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

http://www.quadriform.biz/wp-content/uploads/2010/09/designer_developer.jpg

Designer und Entwickler: Ein Team!

Page 35: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

In Einzelphasen zusammen am Rechner

Page 36: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Photoshop für erste Designideen und Module

Page 37: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Die Designs werden im Browser finalisiert.

Page 38: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Abnahme nicht über ein Bild sondern durch Prototypen

Page 39: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Anhand der Prototypen kann man schnell Entscheidungen treffen, die

mit Photoshop lange dauern.

Page 40: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

‣ Unterschiedliche Schriftgrößen und -arten austesten

‣ Breakpoints für unterschiedliche Ausgabebreiten testen

‣Webfonts auf unterschiedlichen Systemen testen

‣ Alternativen für alte Browser ausprobieren

‣ Icons als SVG oder Webfonts

Page 41: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Neue Entscheidungskriterien3

Page 42: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Nicht wie üblich zwei unterschiedliche Designs

zum Kunden geben!

Page 43: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Iterationen eines Designs: alte vs. neue Browser und unterschiedliche Devices

Page 44: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

http://jsfiddle.net/Flocke/azvGv/

CSS3-fähiger Browser IE8

Alternativen testen

Page 46: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Nicht einfach Befehle empfangen.

http://www.flickr.com/photos/soldiersmediacenter/3521607551/

Page 47: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Frühzeitig miteinander sprechen - im Team und mit

dem Kunden!

Page 48: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

http://goo.gl/0q9rZ

Zeit für Experimente5

Page 49: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

http://idw-online.de/pages/de/image46078

Emulatoren sind nett, aber nichts gegen echte Endgeräte.

Page 50: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Wir gestalten und entwickeln für das Unbekannte

Page 51: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

WTF!

Page 58: Die Firma Network Camp 2013 // Responsive Webdesign für Nichtentwickler, Jens Grochtdreis

Recommended