Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Typografie

Responsive Typografie

Ein Einblick in Responsives Layout mit ein bisschen Fokus auf Typografie

Gerrit van Aaken

November 04, 2015
Tweet

More Decks by Gerrit van Aaken

Other Decks in Design

Transcript

  1. 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!
  2. 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.“
  3. 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.
  4. Probleme mit Desktop First Wohin mit den Spalten? Wohin mit

    den vier Menü-Ebenen? Hamburger-Menü und andere Verzweiflungstaten Was nicht passt … ‑
  5. „Das Browserfenster immer breiter ziehen, bis es scheiße aussieht. Dann

    Breakpoint setzen.“ – Weisheit unter agilen Mobile-First-Jüngern
  6. 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 ‑
  7. „Unsere Designer gestalten noch Desktop First, doch wir entwickeln natürlich

    Mobile First.“ – Ein befreundeter Entwickler, irgendwann 2015 auf Twitter
  8. … 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
  9. Mittendrin im Flow: Pixel » CSS » Prototyp » Pixel

    … … und die Kundin guckt ständig über die Schulter!
  10. 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
  11. 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.
  12. Bevorzugte Spaltenbreiten /* potenziell uncool: */ div.teaser { column-count: 2;

    column-gap: 5%; } /* meist ziemlich cool: */ div.teaser { column-width: 10em; column-gap: 1em; }
  13. Flexbox Lächerlich deutlich überlegenes Layout-Modell in CSS3. Falls irgend möglich,

    anstelle von Float- oder Tabellen-basierten Techniken verwenden.
  14. Webfonts & der Fontstack /* nette Idee: */ h2 {

    font-family: gotham; } /* bessere Idee: */ h2 { font-family: gotham, proxima-nova, avenir, helvetica, arial, sans-serif; }