Dynamisches Gestalten

bookmarks 2014, mediencampus frankfurt

Transcript

1. Dynamisch gestalten Gerrit van Aaken @gerritvanaaken praegnanz.de ! 28. April bookmarks 2014 mediencampus frankfurt
2. Präludium
3. Dynamisch?
4. Dynamisch!
5. manuelles Layout ‑ Formatvorlagen ‑ Seitentypen ‑ automatisches Layout
6. Schülerzeitung vs. Flipboard
10. Websites. E-Books. Print?
15. Webdesigner-Erkenntnisse 1995: „Websites sind 640x480 Pixel groß.“ 1998: „Websites sind 800x800 Pixel groß.“ 2000: „Websites sind 1024x768 Pixel groß.“ 2002: „Websites sind 1024 Pixel breit und können vertikal gescrollt werden.“ 2005: „Websites sind 960 Pixel breit.“ 2008: „Websites sind 960 Pixel breit, horizontal zentriert, aber einzelne Hintergrundelemente können bis zum jeweiligen Browserrand reichen.“ 2010: „Websites haben ein getrenntes linearisiertes Layout für Smartphones.“ 2013: „Es ist kompliziert.“ !
17. Früher
18. Heute
19. Diese Faktoren können ein digitales Layout beeinflussen: Designer Zugangsprovider Hardware des Anwenders Software des Anwenders Anwender
21. Der Bildschirm des Gestalters ist für die Gestaltung nicht notwendigerweise relevant.
22. Kontrollverlust
23. Wie finden wir das?
25. Alle Macht dem Anwender! Beuget die Knie!
26. Lernen von den Webdesignern
27. liquidapsive.com
28. Separatismus
29. Nachträgliche Anpassungen
30. „One Web“
31. Und wie?
32. Responsive Strategien * * vgl. Brad Frost: http://bradfrostweb.com/blog/post/responsive-strategy/ ! a. Responsive Retrofitting b. Mobile-First Responsive Design c. Responsive Mobile Sites (d. Piecemeal)
33. Responsive Retrofitting
34. Mobile First
35. Responsive Mobile Sites
36. Praxisprobleme mit Mobile First Vorstellungskraft der Auftraggeber Verpasste Chancen des großen Bildschirms Blutleeres Design Potenziell unnötige Selbstzensur
37. „Everything First“
39. Taktik 1: „von außen nach innen“
40. Prototyping mit Edge Reflow
41. Taktik 2: „von innen nach außen“ Typography First Main Column First Linearisierung First
42. Arbeiten mit Style Tiles styletil.es
47. Typografen / Grafikdesigner
48. Branding & Wiedererkennung „Layout als Branding“ ist Vergangenheit (ca. 2005–2011) Heute gefragt ist Wiedererkennung durch: markante Typografie (Webfonts) neuartige Farbkombinationen Fotografie / Illustration / Icons spannende UX-Interaktionen
49. Waterfall vs. Responsive Workflow Christoph Zillgens
50. Feindbild 
 unbekannter Inhalt: Praxistipps zur Bändigung
51. Sollbruchstellen (soft hyphens) Donau­dampf­schiff­ fahrts­gesell­schafts­ kapitäns­anwärter ! ! Nur wenige Browser beherrschen deutsche Silbentrennung.
52. 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.
53. … auch gegen verwaiste Wörter Ich hatte es vergessen zu erwähnen, aber egal.
54. Das Prinzip „nach unten offen“ Kunden haben immer komische Inhalte, mit superlangen Headlines, die seltsame Wörter enthalten, welche komisch umbrechen. Die untere Begrenzung von Inhaltsboxen ist stets als spekulativ anzusehen.
55. Spaltenbreite > Spaltenanzahl /*#potenziell#uncool:#*/# div.teaser#{# ##column7count:#2;# ##column7gap:#5%;# }# ! /*#meist#ziemlich#cool:#*/# div.teaser#{# ##column7width:#10em;# ##column7gap:#1em;# }
56. Porträtformat vermeiden
57. 16:9 als guter Kompromiss
58. Gedanken zum Fold Einerseits: Es gibt keinen Fold mehr. Andererseits: Jeder Anwender hat seinen eigenen Fold. Trend: Vertikalen Platz besser nutzen (zunehmend 16:9-Bildschirme) per Minimal Chrome UI per Media Query per Scroll-Event (shrinking header)
59. Fakten für 
 E-Book-Gestalter
60. #webtypobuch
61. E-Books sind keine PDFs, die am Bildschirm gelesen werden. Danke.
62. E-Books sind Offline- Websites mit viel Text und wenig Hierarchie. Und mit Seitenumbrüchen*. * wenn der Anwender es wünscht.
63. Scrolling vs. Cards http://ia.net/blog/ipad-scroll-or-card/
65. EPUB 2 für große Mengen von fortlaufendem Text (Romane) Typografisches Styling (Schriftgröße, Farbe) Einfache Abstände Zeilen- und Seitenumbrüche einfache Floats ! aber: keinerlei Verlass auf Unterstützung der E-Book-Reader!
66. EPUB 3 enthält alle Möglichkeiten von EPUB 2 zusätzlich: feste Layouts nach Einzelseiten relativ freie Gestaltung möglich Media Queries Anpassungen durch Anwender konzeptbedingt kaum möglich bisher vor allem im Rahmen von iBooks Author in Verwendung ! aber: Unterschied zu PDFs sind gering.
67. https://www.flickr.com/photos/clonedmilkmen/
68. Gegen die Unterschiede in E-Book-Readern wirken die Browserwars der Neunziger und Nullerjahre wie ein Assimilations- Wettlauf.
69. Nicht ein einziges 
 CSS-Feature darf als „vorhanden“ angenommen werden.
70. Progressive Enhancement
71. Nichts voraussetzen, viel hoffen Ordentliche Basisgestaltung mit einfachem HTML und CSS. Coding like it’s 2003. Seitenumbrüche setzen. Alle Tipps vom unbekannten Inhalt beachten: Silbentrennungen, geschützte Leerzeichen Vorsicht mit UTF-8-Sonderzeichen. Lieber maskieren: ß oder ẞ Linearisierte Gestaltung!
72. Webfonts keine Online-Services nutzen robuste, gut lesbare Fonts für den Fließtext wählen Top-Quellen: 
 FontSquirrel, FontSpring Lizenz genau checken:
 kommerzielle Ebook-Fonts können sehr, sehr teuer sein!
73. Media Queries Einige E-Book-Reader unterstützen grundsätzlich Media Queries, darunter der Kindle Fire und Apples iBooks. Amazon-spezifische Types:
 amzn7mobi und amzn7kf8 Testdatei hier: http:// epubsecrets.com/media-queries-in- epubs.php
74. Mobile First, pragmatisch. Einfache CSS-Regeln für alle alten und dummen Geräte: <link#href="css/all.css"#type="text/css"#/>## ! Anspruchsvollere Zusatzregeln für größere Bildschirme (hochkant): <link#media="all#and#(orientation:portrait)#and#(min7width:30em)"#href="css/ largeportrait.css"#type="text/css"#/>## ! Anspruchsvollere Zusatzregeln für größere Bildschirme (quer): <link#media="all#and#(orientation:landscape)#and#(min7width:50em)"#href="css/ largelandscape.css"#type="text/css"#/>
75. ¡Gracias! @gerritvanaaken / webtypobuch.de / praegnanz.de