Vortrag über Typografie und Ästhetik im responsive web design auf dem JUG Fulda Treffen 21.11.2013
Upcoming SlideShare
Loading in...5
×
 

Vortrag über Typografie und Ästhetik im responsive web design auf dem JUG Fulda Treffen 21.11.2013

on

  • 762 views

Vortrag über Typografie und Ästhetik im responsive web design auf dem JUG Fulda Treffen 21.11.2013

Vortrag über Typografie und Ästhetik im responsive web design auf dem JUG Fulda Treffen 21.11.2013

Statistics

Views

Total Views
762
Views on SlideShare
760
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Vortrag über Typografie und Ästhetik im responsive web design auf dem JUG Fulda Treffen 21.11.2013 Vortrag über Typografie und Ästhetik im responsive web design auf dem JUG Fulda Treffen 21.11.2013 Presentation Transcript

  • Typografie & Ästhetik im responsive web design
  • Typografie & Ästhetik https://www.rijksmuseum.nl/
  • responsive web design
  • Horizontale Choreografie Typografie Lesbarkeit Kommunikation Lesbarkeit Lesbarkeit Lesbarkeit
  • Horizontale Choreografie Typografie Kommunikation Ästhetische Bewegungen Lesbarkeit
  • Horizontale Choreografie Typografie Kommunikation Lesbarkeit form follows function Ästhetische Bewegungen form follows fantasy the medium is the message
  • Skalierung mit % und em browser & device default http://www.smashingmagazine.com/ <meta name=“viewport“ content=“width=device-width, initial-scale=1“ /> html { font-size: 100%; } /* 100% ~ 16px */
  • Skalierung mit % und em mobile first http://alistapart.com/ body { font-size: 100%; /* 100% ~ 16px */ /* ~ 16px */ 1em } @media screen and (min-width: 768px / 48em) { body { font-size: 112.5%; /* 112,5% ~ 18px */ } } @media screen and (min-width: 1280px / 80em) { body { font-size: 125%; /* 125% ~ 20px */ } }
  • Skalierung mit % und em mobile first
  • Skalierung mit % und em line-height 1.66 body { font-size: 100%; /* 100% ~ 16px */ line-height: 1.4; /* Web > Print */ /* eingeschlossen p */ } ( p { font-size: 1.125em; /* 100% ~ 18px */ line-height: 1.5; /* p != body */ } ) h1, h2, h3, h4, h5, h6 { line-height: 1.2; /* h < p */ }
  • Skalierung mit % und em line-height 1.08 body { font-size: 100%; /* 100% ~ 16px */ line-height: 1.4; /* Web > Print */ /* eingeschlossen p */ } ( p { font-size: 1.125em; /* 100% ~ 18px */ line-height: 1.5; /* p != body */ } ) h1, h2, h3, h4, h5, h6 { line-height: 1.2; /* h < p */ }
  • Skalierung mit % und em When we design we generally do so in two dimensions – length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experi When we design we generally do so in two dimensions – length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experi When we design we generally do so in two dimensions – length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experi line-height body { line-height: 1.4 } @media screen and (min-width: 48em) { body { line-height: 1.5 } } @media screen and (min-width: 80em) { body { line-height: 1.6 } }
  • Skalierung mit % und em Schriftform When we design we generally do so in two dimensions – length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experi When we design we generally do so in two dimensions – length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experi When we design we generally do so in two dimensions – length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experi body { font-size: 100%; line-height: 1.4 }
  • Typographische Tonleiter Typo Typo Typo Typo Typo Typo http://lamb.cc/typograph / Iain Lamb /* base font size = 112.5% ~ 18px */ h1 { font-size: 3em; } h2 { font-size: 2.25em; } h3 { font-size: 1.5em; } h4 { font-size: 1.3125em; } h5 { font-size: 1.125em; } h6 { font-size: 1em; } /* 54px */ /* 41px */ /* 27px */ /* 24px */ /* 20px */ /* 18px */
  • Typographische Tonleiter Typo Typo Typo Typo Typo Typo Überschrift 1 54px Überschrift 2 41px Überschrift 3 27px Überschrift 4 24px Überschrift 5 20px Überschrift 6 18px /* base font size = 112.5% ~ 18px */ h1 { font-size: 3em; } h2 { font-size: 2.25em; } h3 { font-size: 1.5em; } h4 { font-size: 1.3125em; } h5 { font-size: 1.125em; } h6 { font-size: 1em; } /* 54px */ /* 41px */ /* 27px */ /* 24px */ /* 20px */ /* 18px */
  • Typographische Tonleiter https://medium.com/product-design/70e9a4839adf
  • MODULOR von LeCorbusier Typo Typo Typo Typo Typo Typo /* base font size = 112.5% ~ 18px */ h1 { font-size: 3.4231em; } h2 { font-size: 2.6154em; } h3 { font-size: 2.1154em; } h4 { font-size: 1.6154em; } h5 { font-size: 1.3077em; } h6 { font-size: 1em; } /* 62px */ /* 47px */ /* 38px */ /* 29px */ /* 24px */ /* 18px */
  • MODULOR von LeCorbusier Typo Typo Typo Typo Typo Typo Überschrift 1 62px Überschrift 2 47px Überschrift 3 38px Überschrift 4 29px Überschrift 5 24px Überschrift 6 18px /* base font size = 112.5% ~ 18px */ h1 { font-size: 3.4231em; } h2 { font-size: 2.6154em; } h3 { font-size: 2.1154em; } h4 { font-size: 1.6154em; } h5 { font-size: 1.3077em; } h6 { font-size: 1em; } /* 62px */ /* 47px */ /* 38px */ /* 29px */ /* 24px */ /* 18px */
  • Typographische Tonleiter http://brian.teeman.net/
  • http://freqdec.github.io/slabText/
  • Skalierung für mobile Ansicht Typo Typo Überschrift 1 32px Überschrift 2 28px Überschrift 3 24px Überschrift 4 21px Überschrift 5 19px Überschrift 6 16px Typo Typo Typo Typo /* bei body = 100% ~ 16px */ /* sehr flache Schrift-Skalierung für mobile Ansicht */ h1 { font-size: 2.00em; } h2 { font-size: 1.66em; } h3 { font-size: 1.50em; } h4 { font-size: 1.33em; } h5 { font-size: 1.16em; } h6 { font-size: 1.00em; } /* 32px */ /* 28px */ /* 24px */ /* 21px */ /* 19px */ /* 16px */
  • Skalierung für mobile Ansicht Typo Typo Typo Typo Typo Typo http://www.guggenheim-bilbao.es /* bei body = 100% ~ 16px */ /* sehr flache Schrift-Skalierung für mobile Ansicht */ h1 { font-size: 2.00em; } h2 { font-size: 1.66em; } h3 { font-size: 1.50em; } h4 { font-size: 1.33em; } h5 { font-size: 1.16em; } h6 { font-size: 1.00em; } /* 32px */ /* 28px */ /* 24px */ /* 21px */ /* 19px */ /* 16px */
  • http://askos.fi/resume/ | Viljami Salminen
  • Absätze http://www.jordanm.co.uk/page/2 article { p{ margin-bottom: @paragraph-val; } }
  • Absätze article { p{ // margin-bottom: @paragraph-val; & + p { // Erstzeileneinzug text-indent: @indent-val; } &.bild + p, &.lead + p, &.bildlegende + p, &.img_caption + p, &.autor + p { text-indent: 0 !important; } } }
  • When we design we generally do so in two 32 dimensions — length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to 49 experience our design. Beyond the two dimensional screen exists the third dimension (and many other theorised di45 mensions) — the physical space in which our designs ex- Zeilenlänge - 75 Zeichen pro Zeile ist beyond the canvas. Here, all sorts of physical parameters affect how 61 a person uses our design. Consider the user’s physical space around them — perhaps they are lying on their side on the sofa or in bed and holding a mobile device with one hand. Can the design be enjoyed when a user’s is physically restricted from using two hands? Luke Wroblewski further elaborates on this 77 idea in his Testing One Thumb, One Eyeball article detailing the test procedure for Polar. When we design we generally do so in two dimensions — length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional 86 restraints are then realised on the devices used to experience our design. Beyond the two dimensional screen exists the third dimension (and many other theorised dimensions) — the physical space in which our designs exist beyond the canvas. Here, all sorts of physical parameters affect how a person uses our design. Consider the user’s physical space around them — perhaps they are lying on their side on the
  • Absätze Zeilenlänge http://simplefocus.com/flowtype/
  • Zeilenlänge http://www.maxdesign.com.au/2013/05/25/ideal-line-length-in-ems/ Column width in ems Average characters per line 21 49 22 52 23 54 24 57 25 59 26 61 27 64 28 66 29 69 30 71 <div class=“wrapper“> <section role=“main“ > <jdoc:include type=“component“ /> </section> <aside role=“complementary“ > <jdoc:include type=“modules“ … /> </aside> </div> .wrapper { width: 40em; } section[role =“main“] { width: 28em; } aside[role=“complementary“] { width: 12em; }
  • Sans Slab Serif Alegreya (serif) Andada (slab) Bitter (slab) Droid Sans Droid Serif Gentium (serif) Yanone Kaffeesatz (sans) Lato (sans) Open Sans Condensed Open Sans PT Sans Narrow PT Sans PT Serif Source Code Pro (slab mono) Source Sans Pro Ubuntu Condensed (sans) Ubuntu (sans) Vollkorn (serif) Joomla! Testing Thanks for helping us to test Joomla! We're getting ready for the release of Joomla 3.0 and we appreciate you helping us find and fix problems as we work. If you haven't done testing before here are some tips. • Don't delete the installation folder when you finish installing! While we're working we turn … Joomla! Testing Thanks for helping us to test Joomla! We're getting ready for the release of Joomla 3.0 and we appreciate you helping us find and fix problems as we work. If you haven't done testing before here are some tips. • Don't delete the installation folder when you finish installing! While we're working we turn …
  • Sans Slab Serif Alegreya (serif) Andada (slab) Bitter (slab) Droid Sans Droid Serif Gentium (serif) Yanone Kaffeesatz (sans) Lato (sans) Open Sans Condensed Open Sans PT Sans Narrow PT Sans PT Serif Source Code Pro (slab mono) Source Sans Pro Ubuntu Condensed (sans) Ubuntu (sans) Vollkorn (serif) Joomla! Testing Thanks for helping us to test Joomla! We're getting ready for the release of Joomla 3.0 and we appreciate you helping us find and fix problems as we work. If you haven't done testing before here are some tips. • Don't delete the installation folder when you … Joomla! Testing Thanks for helping us to test Joomla! We're getting ready for the release of Joomla 3.0 and we appreciate you helping us find and fix problems as we work. If you haven't done testing before here are some tips. • Don't delete the installation folder when you finish installing! While we're working we turn …
  • http://typecast.com/blog/type-on-screen-superhero-superfamilies
  • Sans Slab Serif Typen mit Charakter Modern Art Museum Computertechnik Floristik Studio
  • 3 x Fonts einbinden 1. Adobe Edge Web Fonts 2. Google Fonts https://edgewebfonts.adobe.com/fonts#/?nam eFilter=Lato&collection=lato:n4,i4,n7,i7,i9 http://www.google.com/ fonts#QuickUsePlace:quickUse/Family: Lato: regular, italic, bold, bold italic Lato: 1. template index.php <script src=“//use.edgefonts.net/ lato:n4,i4,n7,i7,i9.js“></script> 1. template index.php <link href=‘http://fonts.googleapis.com/ css?family=Lato:400,700,400italic,700i talic‘ rel=‘stylesheet‘ type=‘text/css‘> 2. template css body { font-family: ‚Lato‘, sans-serif; font-weight: 400 /* normal */ } h1, h2, h3, h4 { font-family: ‚Lato‘, sans-serif; font-weight: 700 /* bold */ } regular, italic, bold, bold italic 2. template css body { font-family: ‚Lato‘, sans-serif; font-weight: 400 /* normal */ } (font-weight: 700 /* bold */)
  • 3 x Fonts einbinden 3. Fonts mit template „hosten“ http://www.fontsquirrel.com/fonts/ PT-Sans?q%5Bterm%5D=pt+sans &q%5Bsearch_check%5D=Y PT Sans: regular, italic, bold, bold italic 1. download Webfont Kit 2. benötigte Dateien in einem Unterverzeichnis des templates speichern z.B.: my-template/fonts 3. font in css einbinden: 3.1. @font-face 3.2. @font-face bearbeiten 3.3. css Stile angeben 3.1. Beispiel: regular und bold @font-face { font-family: ‚pt_sansregular‘; src: url(‚PTS55F-webfont.eot‘); src: url(‚PTS55F-webfont.eot?#iefix‘) format(‚embedded-opentype‘), url(‚PTS55F-webfont.woff‘) format(‚woff‘), url(‚PTS55F-webfont.ttf‘) format(‚truetype‘), url(‚PTS55F-webfont.svg#pt_sansregular‘) format(‚svg‘); font-weight: normal; font-style: normal; } @font-face { font-family: ‚pt_sansbold‘; src: url(‚PTS75F-webfont.eot‘); src: url(‚PTS75F-webfont.eot?#iefix‘) format(‚embedded-opentype‘), url(‚PTS75F-webfont.woff‘) format(‚woff‘), url(‚PTS75F-webfont.ttf‘) format(‚truetype‘), url(‚PTS75F-webfont.svg#pt_sansbold‘) format(‚svg‘); font-weight: normal; font-style: normal; }
  • 3 x Fonts einbinden 3.2. @font-face bearbeiten 3.2.1. alle font-family Namen angleichen 3.2.2. alle url aktualisieren 3.2.3. font-weight und font-style anpassen, falls nötig @font-face { font-family: ‚pt-sans‘; src: url(‚../fonts/PTS55F-webfont.eot‘); src: url(‚../fonts/PTS55F-webfont.eot?#iefix‘) format(‚embedded-opentype‘), url(‚../fonts/PTS55F-webfont.woff‘) format(‚woff‘), url(‚../fonts/PTS55F-webfont.ttf‘) format(‚truetype‘), url(‚../fonts/PTS55F-webfont.svg#pt_sansregular‘) format(‚svg‘); font-weight: normal; 3.3. template font-style: normal; } body { css font-family: ‚pt-sans‘, sans-serif; font-weight: normal; } @font-face { font-family: ‚pt-sans‘; src: url(‚../fonts/PTS75F-webfont.eot‘); src: url(‚../fonts/PTS75F-webfont.eot?#iefix‘) format(‚embedded-opentype‘), url(‚../fonts/PTS75F-webfont.woff‘) format(‚woff‘), url(‚../fonts/PTS75F-webfont.ttf‘) format(‚truetype‘), h1, h2, h3, h4 { url(‚../fonts/PTS75F-webfont.svg#pt_sansbold‘) format(‚svg‘); font-family: ‚pt-sans‘, sans-serif; font-weight: bold; font-weight: bold; font-style: normal; } }
  • Fläche & Komposition Symmetrie <> Asymmetrie http://laurakalbag.com/graphic-design/
  • Fläche & Komposition Statik <> Dynamik http://www.yootheme.com/themes
  • Fläche & Komposition Ordnung <> Unordnung http://tympanus.net/codrops/
  • Weißraum http://www.lenbachhaus.de/index.php?id=20 Fläche & Komposition
  • Vertikale Choreografie
  • D yn am isc he In ha lte Vertikale Choreografie Horizontale Choreografie
  • Horizontale Choreografie Vertikale Choreografie http://ami.responsivedesign.is/
  • Vertikale Choreografie Horizontale Choreografie the medium is the message
  • fin
  • /*! Copyright (c) David Bushell | http://dbushell.com/ */ (function (g, h, c) { var d = function (m) { return m.trim ? m.trim() : m.replace(/^s+|s+$/g, "") }; var e = function (m, n) { return(" " + m.className + " ").indexOf(" " + n + " ") !== -1 }; var f = function (m, n) { if (!e(m, n)) { m.className = (m.className === "") ? n : m.className + " " + n } }; var k = function (m, n) { m.className = d((" " + m.className + " ").replace(" " + n + " ", " ")) }; var l = function (m, n) { if (m) { do { if (m.id === n) { return true } if (m.nodeType === 9) { break } } while ((m = m.parentNode)) } return false }; var j = h.documentElement; var i = g.Modernizr.prefixed("transform"), b = g.Modernizr.prefixed("transition"), a = (function () { var m = {WebkitTransition: "webkitTransitionEnd", MozTransition: "transitionend", OTransition: "oTransitionEnd otransitionend", msTransition: "MSTransitionEnd", transition: "transitionend"}; return m.hasOwnProperty(b) ? m[b] : false })(); g.App = (function () { var p = false, q = {}; var m = h.getElementById("inner-wrapper"), o = false, n = "js-nav"; q.init = function () { if (p) { return } p = true; var r = function (s) { if (s && s.target === m) { h.removeEventListener(a, r, false) } o = false }; q.closeNav = function () { if (o) { var s = (a && b) ? parseFloat(g.getComputedStyle(m, "")[b + "Duration"]) : 0; if (s > 0) { h.addEventListener(a, r, false) } else { r(null) } } k(j, n) }; q.openNav = function () { if (o) { return } f(j, n); o = true }; q.toggleNav = function (s) { if (o && e(j, n)) { q.closeNav() } else { q.openNav() } if (s) { s.preventDefault() } }; h.getElementById("nav-open-btn").addEventListener("click", q.toggleNav, false); h.getElementById("nav-close-btn").addEventListener("click", q.toggleNav, false); h.addEventListener("click", function (s) { if (o && !l(s.target, "nav")) { s.preventDefault(); q.closeNav() } }, true); f(j, "js-ready") }; return q })(); if (g.addEventListener) { g.addEventListener("DOMContentLoaded", g.App.init, false) } })(window, window.document);
  • about 1961 geboren in München-Pasing Akademie der Bildenden Künste München Prof. Sir Eduardo Paolozzi Prof. Heribert Sturm seit 1990 Kunstlehrer am Gymnasium 1996–2003 Deutsche Schule Lima / Peru www.adhocgrafx.de @adhocgrafx
  • seit 2009 > Joomla! e-learning Plattform für den Kunstunterricht www.kunstimunterricht.de seit 2013 powered by tec-promotions.de seit 2011 > responsive web design JoomSkeleton, JoomFluid und JoomFlex https://github.com/adhocgraFX