Click here to load reader

Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock

  • View
    1.420

  • Download
    1

Embed Size (px)

DESCRIPTION

Responsive Web Design - Erfahrungen, Fragestellungen, Experimente und Ideen zu responsive Templates für Joomla! 2.5 JoomSkeleton und JoomFluid und JoomFlex für Joomla! 3.

Text of Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock

  • 1. responsive web design Johannes Hock www.adhocgrafx.de responsive web design Ideen Experimente Erfahrungen Fragen Content choreografie Navigation Typografie & sthetik Performance

2. responsive web design 1961 geboren in Mnchen-Pasing Akademie der Bildenden Knste Mnchen Prof. Sir Eduardo Paolozzi Prof. Heribert Sturm about seit 1990 Kunstlehrer am Gymnasium 19962003 Deutsche Schule Lima / Peru 3. responsive web design seit 2009 > Joomla! e-learning Plattform fr 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 4. responsive web design Content choreografie 5. responsive web design Content choreografie content first > push & pull > css // Nathan Smith: http://unsemantic.com/ sidebar grid-33 width: 33.33333%; main grid-66 width: 66.66667%; sidebar width: 100%; main width: 100%; 6. responsive web design Content choreografie content first > push & pull > css sidebar grid-33 pull-66 width: 33.33333%; left: -66.66667%; main grid-66 push-33 width: 66.66667%; left: 33.33333%; sidebar width: 100%; main width: 100%; 7. responsive web design Content choreografie 8. responsive web design main footer head row // Mobile_Detect.php // Serban Ghita: https://github.com/serbanghita/Mobile-Detect // mobile detect usage von Rene Kreijveld include_once ('js/Mobile_Detect.php'); $detect = new Mobile_Detect(); $layout = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop'); main footer head row content first > top to bottom > php Content choreografie 9. responsive web design main footer head_row head_row main footer head_row head_row Content choreografie 10. responsive web design main SLIDESHOW main SLIDESHOW hide mobile version > php Content choreografie 11. responsive web design Content choreografie flexbox > css

12. responsive web design Content choreografie flexbox > css .flex-container { display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-flex-flow: row wrap; flex-flow: row wrap; } .content { -webkit-order: 2; order: 2; } @media screen and (min-width: 50em) { .content { -webkit-order: 4; order: 4; width: 50%; } } 13. responsive web design Navigation JoomSkeleton & JoomFluid Jake Rocheleau: http://www.hongkiat.com/blog/ building-mobile-app-navigation-with-jquery/ 14. responsive web design Navigation

15. responsive web design Navigation
16. responsive web design Navigation
17. responsive web design Navigation
...
18. responsive web design Navigation David Bushell: http://coding.smashingmagazine.com/2013/01/15/ off-canvas-navigation-for-responsive-website/
(buttons) JoomFlex 19. responsive web design Navigation
20. responsive web design21. responsive web design Navigation Simple Navigation einfache navi / noscript 22. responsive web design Navigation Manoela Ilic http://tympanus.net/codrops/2013/08/13/ multi-level-push-menu/ Viljami Salminen http://responsive-nav.com/ Jason Weaver http://jasonweaver.name/ lab/flexiblenavigation/ weitere interessante Beispiele 23. responsive web design Typografie & sthetik https://www.rijksmuseum.nl/ 24. responsive web design Typografie & sthetik Skalierung mit % und em body { font-size: 112.5%; /* 112,5% ~ 18px */ line-height: 1.5; /* nur noch bei Abweichungen verndern | Web > Print */ } h1, h2, h3, h4, h5, h6 { line-height: 1.2; /* headline < paragraph */ } @media screen and (max-width: 767px / 30em) { body { font-size: 100%; /* 100% ~ 16px */ } } @media screen and (min-width: 1280px/ 70em) { body { font-size: 125%; /* 125% ~ 20px */ } } 25. responsive web design Typografie & sthetik Typographische Tonleiter /* base font size = 112.5% ~ 18px */ h1 { font-size: 3em; } /* 54px */ h2 { font-size: 2.25em; } /* 41px */ h3 { font-size: 1.5em; } /* 27px */ h4 { font-size: 1.3125em; } /* 24px */ h5 { font-size: 1.125em; } /* 20px */ h6 { font-size: 1em; } /* 18px */ Typo Typo Typo Typo Typo Typo http://lamb.cc/typograph/ von Iain Lamb 26. responsive web design Typografie & sthetik MODULOR von LeCorbusier /* base font size = 112.5% ~ 18px */ h1 { font-size: 3.4231em; } /* 62px */ h2 { font-size: 2.6154em; } /* 47px */ h3 { font-size: 2.1154em; } /* 38px */ h4 { font-size: 1.6154em; } /* 29px */ h5 { font-size: 1.3077em; } /* 24px */ h6 { font-size: 1em; } /* 18px */ Typo Typo Typo Typo Typo Typo 27. responsive web design Typografie & sthetik Skalierung fr mobile Ansicht /* bei body = 100% ~ 16px */ /* sehr flache Schrift-Skalierung - fr mobile Ansicht */ @media screen and (max-width: 767px) { h1 { font-size: 2em; } /* 32px */ h2 { font-size: 1.6666em; } /* 28px */ h3 { font-size: 1.5em; } /* 24px */ h4 { font-size: 1.3333em; } /* 21px */ h5 { font-size: 1.1667em; } /* 19px */ h6 { font-size: 1em; } /* 16px */ } Typo Typo Typo Typo Typo Typo 28. responsive web design article { p { // margin-bottom: @paragraph-val; & + p { // Erstzeileneinzug text-indent: @indent-val; margin-top: [email protected]; // text-align: justify; } &.bild + p, &.lead + p, &.bildlegende + p, &.img_caption + p, &.autor + p { text-indent: 0 !important; } } } 29. responsive web design Typografie & sthetik http://opendyslexic.org/ siehe auch: Matilda von Ann Bessemans 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 in- stalling! 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 30. responsive web design Typografie & sthetik 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 fin- ish 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 fin- ish installing! While we're working we turn 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) 31. responsive web design Performance Mobile_Detect.php Idee von Rene Kreijveld + js > template.js.php Idee von Alexander Schmidt / blank template Bilddateien Adaptive Images by Matt Willcox Doc:http://adaptive-images.com Github:https://github.com/MattWilcox/Adaptive-Images Responsive Img jQuery Plugin by Drew Thomas Doc:http://responsiveimg.com Github:https://github.com/drewbrolik/Responsive-Img ??? 32. responsive web design Credits David Bushell Achim Fischer JUG Fulda Dave Gamache Dirk Jesse Rene Kreijveld Philip Locke JUG Nrnberg Angie Radtke Viljami Salminen Alexander Schmidt Roberto Segura Nathan Smith Stefan Wendhausen und viele mehr herzlichen Dank fr Hilfe Tips Tricks 33. responsive web design /*!Copyright(c)DavidBushell|http://dbushell.com/*/ (function(g,h,c){ vard=function(m){ returnm.trim?m.trim():m.replace(/^s+|s+$/g,"") }; vare=function(m,n){ return(""+m.className+"").indexOf(""+n+"")!==-1 }; varf=function(m,n){ if(!e(m,n)){ m.className=(m.className==="")?n:m.className+""+n } }; vark=function(m,n){ m.className=d((""+m.className+"").replace(""+n+"","")) }; varl=function(m,n){ if(m){ do{ if(m.id===n){ returntrue } if(m.nodeType===9){ break } }while((m=m.parentNode)) } returnfalse }; varj=h.documentElement; vari=g.Modernizr.prefixed("transform"),b=g.Modernizr.prefixed("transition"),a=(function(){ varm={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTran- sitionEndotransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"}; returnm.hasOwnProperty(b)?m[b]:false })(); g.App=(function(){ varp=false,q={}; varm=h.getElementById("inner-wrapper"),o=false,n="js-nav"; q.init=function(){ if(p){ return } p=true; varr=function(s){ if(s&&s.target===m){ h.removeEventListener(a,r,false) } o=false }; q.closeNav=function(){ if(o){ vars=(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") }; returnq })(); if(g.addEventListener){ g.addEventListener("DOMContentLoaded",g.App.init,false) } })(window,window.document);