Responsive Design ist aktuell eines der am häufigsten strapazierten Buzzwords. Doch im Unterschied zu vielen anderen Worthülsen stellt dieses Konzept die Arbeitsprozesse aller Disziplinen auf den Kopf. Im Workshop am 23.1.2014 am Fraunhofer-Institut für Angewandte Informationstechnik FIT diskutierten Charlotte Block und Christian Leuenhagen mögliche Konzepte der Zusammenarbeit und probierten an konkreten Beispielen aus, wie für verschiedene Auflösungen gestaltet und adaptiert werden kann.

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12

13. Major Breakpoint
Änderung des Rasters
und der Navigation
Smartphones 3“ – 4,8“
Minor Breakpoint
z.B. Änderung der
Subnavigation und Sidebar
Tablets 7“ – 10“
Grid 1: Mobile Version (< 768px)
320px
480px
Flexibles Verhalten 320 px – 767 px
Prozentuale Skalierung von Bildern und
Texten, flexible Textumbrüche
Computer 11“ – 27“
Grid 2: Standard Web Version (>= 768px)
981 px (tbd)
768px
Flexibles Verhalten 768 px – 981 px
Prozentuale Skalierung von Bildern und
Texten, flexible Textumbrüche
13
1280px
Flexibles Verhalten 981 px – 1280 px Zentrierte Anordnung
Prozentuale Skalierung von Bildern und > 1280 px
Texten, flexible Textumbrüche

14. 14

15. 15

16. 16

17. 17

18. 18

19. 19

20. 20

21. 21

22. 22

23. 23

24. •
•
•
•
•
•
•
•
24

25. 25

26. 26

27. 27
27

28. 28

29. 29

30. 30

31. 31

32. 32

33. 33

34. ×
×
34

35. 35

36. 36

37. 37

38. 38

39. 39

40. 40

41. 41