Responsive Typografie

Ein Einblick in Responsives Layout mit ein bisschen Fokus auf Typografie

Transcript

1. Responsive Typografie 4. November 2015 „Deep Typography“ Hochschule Mainz Gerrit van Aaken @gerritvanaaken gerrit@praegnanz.de
2. Typography and layout, too
3. Euer Gastgeber heute: @gerritvanaaken – 1996 erste Website – 2004 Weblog auf praegnanz.de – 2005 Designdiplom in Mainz – 2007 selbstständig mit praegnanz.de – 2012 Buchprojekt #webtypobuch – Achtung! Generisches Femininum!
4. Intro
6. * * * Wie geben hiermit freudig unsere Trennung bekannt: Inhalt // Layout * * *
7. manuelles Layout ‑ Formatvorlagen ‑ Seitentypen ‑ automatisches Layout
9. Das „Flipboard“-Repertoire
10. Baukasten-System
14. Webdesignerinnen wissen: 1995: „Websites sind 640×480 Pixel groß.“ 2000: „Websites sind 1024×768 Pixel groß.“ 2002: „Websites sind 1024 Pixel breit und können vertikal gescrollt werden.“ 2005: „Websites sind 960 Pixel breit.“ 2010: „Manche Websites haben ein zusätzliches Smartphone-Layout“ 2013: „Scheiße, es ist kompliziert.“
15. Luke Wroblewski fotografiert von Brad Frost
17. Grafik: Luke Wroblewski
18. Der Bildschirm der Gestalterin ist für die Gestaltung nicht notwendigerweise relevant.
19. Wie finden wir diesen Kontrollverlust?
20. 5 Seitentypen
 7 beispielhafte Geräte
 hochkant und quer
 = 70 PSD-Dateien Srsly?
22. Responsive Webdesign
23. Responsive Strategien bei Musikalben: LP und MC http://needmoredesigns.com/blog/ early-responsive-design/ 1965 1987
24. liquidapsive.com
25. Separatismus
26. Retrofitting
27. All In One
28. Strategie
29. Gestaltungskorridore Gestaltungs- verweigerung Browser und Anwenderin machen, was sie wollen. Design-
 Totalitarismus Designerin legt fest,
 wie alles aussieht. Gutes Webdesign Designerin macht Vorschläge,
 Anwenderin kann variieren.
30. Desktop First
31. Probleme mit Desktop First Wohin mit den Spalten? Wohin mit den vier Menü-Ebenen? Hamburger-Menü und andere Verzweiflungstaten Was nicht passt … ‑
33. Mobile First
34. „Das Browserfenster immer breiter ziehen, bis es scheiße aussieht. Dann Breakpoint setzen.“ – Weisheit unter agilen Mobile-First-Jüngern
35. Probleme mit Mobile First Vorstellungskraft/Interesse der Auftraggeber Verpasste Chancen des großen Bildschirms Potenziell unnötige Selbstzensur Alle Websites sehen gleich aus Blutleeres Design ‑
36. Tablet First FTW! (oder nicht?)
37. „Unsere Designer gestalten noch Desktop First, doch wir entwickeln natürlich Mobile First.“ – Ein befreundeter Entwickler, irgendwann 2015 auf Twitter
38. Workflow
39. Es gibt ihn nicht – DEN Responsiven Workflow.
40. von Waterfall zu agil (Screen-) Design HTML/CSS/JS Planung Launch
41. 1 Allrounder oder 1 eingespieltes Team
43. Taktik 1: von außen nach innen …
44. … per Hand …
45. … mit Paper Prototyping …
46. … oder Prototyping-Software
47. Taktik 2: von innen nach außen typecast.com
48. Arbeiten mit Style Tiles styletil.es
53. Typografen / Grafikdesigner
54. Beispiel: ComputerBase
55. … oder: High-End-Prototyping – Nur die Startseite als fixes Designbeispiel – Nach Abnahme durch Kunden: Wechsel zu HTML-Prototyp – Alle weiteren Seiten/Elemente werden im Browser gestaltet Impressum AGB Kontakt studibus.de in 60 Sekunden Online, günstig und flexibel Selber machen spart Geld! Weil du dich bei studibus.de online selbst bedienst, können wir dir unsere Transporter sehr günstig vermieten. Außerdem kannst du deinen Bus auch abholen, wenn andere Vermietungen längst geschlossen haben: Ob Sonntag nachmittag oder abends um 21 Uhr – alles kein Problem! Unsere Kooperationspartner Prüfen Stadt auswählen Auf der Suche nach einem Transporter? Dann bist du bei studibus.de genau richtig! Preise Schäden? DŽ Fahrzeuge So geht’s studibus.de in 60 Sekunden Online, günstig und flexibel Selber machen spart Geld! Weil du dich bei studibus.de online selbst bedienst, können wir dir unsere Transporter sehr günstig vermieten. Außerdem kannst du deinen Bus auch abholen, wenn andere Vermietungen längst geschlossen haben: Ob Sonntag nachmittag oder abends um 21 Uhr – alles kein Problem! Auf der Suche nach einem Transporter? Dann bist du bei studibus.de genau richtig! Impressum AGB Kontakt © 2015 Einfach Mobil GmbH Preise Schäden? DŽ Fahrzeuge So geht’s Unsere Kooperationspartner Prüfen Stadt auswählen Auf der Suche nach einem Transporter? Dann bist du bei studibus.de genau richtig! Stadt auswählen Prüfen Online, günstig und flexibel Selber machen spart Geld! Weil du dich bei studibus.de online selbst bedienst, können wir dir unsere Transporter sehr günstig vermieten. Außerdem kannst du deinen Bus auch abholen, wenn andere Vermietungen längst geschlossen haben: Ob Sonntag nachmittag oder abends um 21 Uhr – alles kein Problem! studibus.de in 60 Sekunden Unsere Kooperationspartner: Impressum AGB Kontakt © 2015 Einfach Mobil GmbH Preise Schäden? DŽ Fahrzeuge So geht’s
56. Mittendrin im Flow: Pixel » CSS » Prototyp » Pixel … … und die Kundin guckt ständig über die Schulter!
57. Möglicher Workflow Abstimmung über Basisdesign (Photoshop, Styletiles, Wireframe etc.) Responsiv ausgearbeitete Beispielansicht in HTML/CSS zum Testen 
 (meist Startseite) + weitere Seite + weitere Seite + neues Feature + neues Feature
58. Worst practices … Design ausschließlich im Browser. Design ausschließlich im Photoshop. Mit dem Kunden nur über die Desktop-Breiten reden. Die 16:9-Realität auf dem Desktop verleugnen. Zu wenig Zeit einplanen. Zu wenig Budget einplanen.
59. Handwerk
60. Linearisierung
61. Divi
62. Das Prinzip „nach unten offen“ Die untere Begrenzung von Inhaltsboxen ist stets als spekulativ anzusehen.
63. Breakpoints nutzen
64. Die magische 6
65. Porträtformat = Problemformat
66. Bevorzugte Spaltenbreiten /* potenziell uncool: */ div.teaser { column-count: 2; column-gap: 5%; } /* meist ziemlich cool: */ div.teaser { column-width: 10em; column-gap: 1em; }
67. Gleichwertige Spalten = Gefahr!
68. Flexbox Lächerlich deutlich überlegenes Layout-Modell in CSS3. Falls irgend möglich, anstelle von Float- oder Tabellen-basierten Techniken verwenden.
69. Sollbruchstellen (soft hyphens) Donau­dampf­schiff­ fahrts­gesell­schafts­ kapitäns­anwärter Nur wenige Browser beherrschen deutsche Silbentrennung.
70. geschütztes Leerzeichen Es doziert an diesem Leerstuhl: Prof. Dr. Prof. Dr. med. Clarissa Hansen. Das Spiel kostet aber nur schlappe 3,99 3,99 Euro.
71. … auch gegen verwaiste Wörter Ich hatte es vergessen zu erwähnen, aber egal.
72. Hurenschuster & Kinderjungen p { orphans: 3; } p { widows: 3; }
73. Prozent- angaben, wo immer sinnvoll. .page { margin: 5%; }
74. Webfonts & der Fontstack /* nette Idee: */ h2 { font-family: gotham; } /* bessere Idee: */ h2 { font-family: gotham, proxima-nova, avenir, helvetica, arial, sans-serif; }
75. Detailreichtum Chiba City Blues Chiba City Blues Georgia Chiba City Blues Chiba City Blues Cochin
76. Retina-Problematik Georgia Cochin
77. Optische Größen
78. Schriftgrad wächst seit 2004 ITC Charter Pro, 21px
79. Steile These
81. ¡Gracias! @gerritvanaaken / praegnanz.de