Rastersysteme in der (responsiven) Webgestaltung

siehe http://www.muellergridsystem.com

Transcript

1. Rastersysteme in der (responsiven) Webgestaltung Patrick Kranzlmüller http://www.vonautomatisch.at http://twitter.com/sehmaschine
2. The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropiate to his personal style. But one must learn how to use the grid; it is an art that requires practice. Josef Müller Brockmann artofthegrid.com/quotes.html
3. Real Web Designers write Code. Always have, always will. Jeffrey Zeldman https://twitter.com/zeldman/statuses/4818978868
8. Gestaltungssicherheit Konsistenz Wartungsfreundlichkeit
9. Gestaltungssicherheit Konsistenz Wartungsfreundlichkeit
10. Print vs. Web Arbeitsfläche Exkurs HTML, CSS Responsive Webdesign Horizontaler Raster Vertikaler Raster, Baseline Grid Beispiele
11. Print vs. Web
12. Arbeitsfläche
13. DIN A4
14. DESKTOP
15. DESKTOP 1024 x 768
16. DESKTOP 2560 x 1440
18. TABLET
19. TABLET
20. PHONE
21. PHONE
22. DIN A4
24. Lösung Responsive Webdesign
25. Optimierung der Darstellung einer Website für verschiedene Endgeräte
26. Optimierung der Darstellung einer Website für verschiedene Endgeräte
27. Exkurs HTML & CSS
28. HTML Dokumentenstruktur
29. CSS Darstellung
30. HTML & CSS = Frontend einer Website
31. (ganz so einfach ist es natürlich nicht)
32. HTML h1 h2 p ul img ...
33. CSS – h1 64px groß 96px Zeilenabstand rot fett 24px Abstand oben/unten
34. Struktur vs. Präsentation
35. Die Dokumentenstruktur darf nie etwas über die Darstellung wissen
36. Die Dokumentenstruktur darf nie etwas über die Darstellung wissen
37. NIEMALS!!!
38. Barrierefrei Programmunabhängig Indexierbar (Suchmaschinen) Wartungsfreundlich Zukunftssicher
39. <p> <a href="/index.php?nodeId=5328"> ADC Festival 2012<br> <span style="font-weight: normal;"> Vom 9. bis 13. Mai 2012 ist der Art Directors Club ... </span> </a> </p>
40. <p> <a href="/index.php?nodeId=5328"> ADC Festival 2012<br> <span style="font-weight: normal;"> Vom 9. bis 13. Mai 2012 ist der Art Directors Club ... </span> </a> </p>
41. <p> <a href="/index.php?nodeId=5328"> ADC Festival 2012<br> <span style="font-weight: normal;"> Vom 9. bis 13. Mai 2012 ist der Art Directors Club ... </span> </a> </p>
42. <p> <a href="/index.php?nodeId=5328"> ADC Festival 2012<br> <span style="font-weight: normal;"> Vom 9. bis 13. Mai 2012 ist der Art Directors Club ... </span> </a> </p>
43. <h1> <a href="/news/adc-festival-2012/"> ADC Festival 2012 </a> </h1> <p> Vom 9. bis 13. Mai 2012 ist der Art Directors Club ... </p>
44. Responsive Webdesign
45. Responsive Design != Fluid Design
62. CSS Media Queries
63. Handheld @media only screen and (max-width: 767px) {} Handheld Landscape @media only screen and (min-width: 480px) and (max-width: 767px) {} Tablet Portrait @media only screen and (min-width: 768px) and (max-width: 980px) {}
64. Baseline Grid Base Font Size & Base Line Height (pro Endgerät/Auflösung) alle weiteren Schriftgrößen/Zeilenhöhen relativ zur Base mittels "em" http://compass-style.org/reference/compass/typography/ vertical_rhythm/
65. Vorteile Unabhängig vom Endgerät Günstig (vergleichsweise) Wartungsfreundlich
66. Nachteile Performance
67. Ressourcen http://www.muellergridsystem.com http://goldengridsystem.com http://twitter.github.com/bootstrap/ http://compass-style.org http://sass-lang.com http://lesscss.org http://html5doctor.com http://html5please.com http://html5boilerplate.com http://modernizr.com/ http://www.thegridsystem.org http://mediaqueri.es http://designmadeingermany.com/sites-we-like/
68. https://speakerdeck.com/u/sehmaschine/p/ rastersysteme-in-der-responsiven-webgestaltung