Responsive Web Design ist mehr als nur der Einsatz flexibler Raster und Break Points. Wir zeigen die Elemente von Responsive Web Design und erklären den Unterschied zum Adaptive Design. Wir zeigen den Responsive Design Prozess, der sich vom klassischen Designprozesses zum Beispiel durch "mobile first" und den iterativen und agilen Ablauf.

1. Mobile First
Responsive Design
think moto
Sommercamp am Wannsee
Jordi Tost Val
Berlin, 29. August 2013

2. Was ist für euch
Responsive Design?

3. Die 3 Grundlagen:
1. Fluid Grids
2. Flexible Media
3. Media Queries

6. Responsive Design
ist viel mehr!

8. KONTEXT
Was können wir über das
“Web des Users” sagen?

9. ALTER KONTEXT

10. NEUER KONTEXT

11. PERFORMANCE

12. der Benutzer erwarten, dass Mobile-Webseiten
so schnell (oder schneller) wie Desktop-Webseiten laden

13. Wir haben nur

14. of responsive sites weigh the same in both
their small screen view and large screen view

17. Mobile First is a philosophy that highlights the need to
prioritize the mobile context when creating UX.

18. 1. Allows websites to reach more people.

19. 1. Allows websites to reach more people.
2. Forces designers to focus on core content and
functionality (einfach bleiben!).

20. 1. Allows websites to reach more people.
2. Forces designers to focus on core content and
functionality (einfach bleiben!).
3. Lets designers innovate and take advantage of
new technologies (geolocation, touch events, etc).

21. Wie machen wir ein
Mobile-First-Responsive-Design?

22. 1. Content First
- Content Strategy
- Information Architecture
- Hierarchie / Prioritäten
- 2-3 Ebenen

23. 2. Mit Mobile anfangen

24. 2. Mit Mobile anfangen

25. DER PROZESS

26. Der übliche Prozess

28. “It's impossible to predict all the
complications of a responsive
design up front. We need a more
fluid workflow!”
Andy Clarke (@Marlarkey)

29. Warum sollen wir überhaupt
unseren Prozess ändern?
- Bessere Leistung
- Bessere Webseiten gestalten

30. “RWD comes under criticism for not
being commercially viable. It’s because
it’s trying to be shoe-horned into an
existing, fixed-canvas, inflexible
process.”
Mark Boulton, on responsive worklflow

31. Der Responsive Prozess

32. VIELEN DANK!