responsive web design
Johannes Hock
www.adhocgrafx.de
responsive web design
Ideen
Experimente
Erfahrungen
Fragen
•	 Conten...
responsive web design
1961
geboren in München-Pasing
Akademie der Bildenden Künste München
Prof. Sir Eduardo Paolozzi
Prof...
responsive web design
seit 2009 > Joomla!
e-learning Plattform für den Kunstunterricht
www.kunstimunterricht.de
seit 2013 ...
responsive web design
Content choreografie
responsive web design
Content choreografie
content first > push & pull > css // Nathan Smith: http://unsemantic.com/
<sect...
responsive web design
Content choreografie
content first > push & pull > css
<section class=“grid-100“ >
sidebar
grid-33 p...
responsive web design
Content choreografie
responsive web design
main
footer
head row
// Mobile_Detect.php
// Serban Ghita: https://github.com/serbanghita/Mobile-Det...
responsive web design
<?php if ($layout == 'mobile'):?>
	 <?php if ($this->countModules('head_row')): ?>
		 <section class...
responsive web design
<?php if ($layout != 'mobile'):?>
	 <?php if ($this->countModules('slideshow')): ?>
		 <section clas...
responsive web design
Content choreografie
flexbox > css
<nav id=“nav“ role=“navigation“ > </nav>
<div class="flex-contain...
responsive web design
Content choreografie
flexbox > css
.flex-container {
	 display: -webkit-flex; /* NEW - Chrome */
	 d...
responsive web design
Navigation
JoomSkeleton & JoomFluid
Jake Rocheleau: http://www.hongkiat.com/blog/
building-mobile-ap...
responsive web design
Navigation
<nav id=“navmenu“>
<!-- off canvas navi -->
<jdoc:include
type=“modules“
name=“nav“ />
</...
responsive web design
Navigation
<div id=“wrapper“>
<!-- äußerer Hauptrahmen -->
<nav id=“navmenu“>
<!-- off canvas navi -...
responsive web design
Navigation
<div id=“wrapper“>
<!-- äußerer Hauptrahmen -->
<nav id=“navmenu“>
<!-- off canvas navi -...
responsive web design
Navigation
<div id=“wrapper“> <!-- äußerer Hauptrahmen -->
	 <?php if ($layout == ‚mobile‘):?>
		 <n...
responsive web design
Navigation
David Bushell: http://coding.smashingmagazine.com/2013/01/15/
off-canvas-navigation-for-r...
responsive web design
Navigation
<div id=“wrapper“>
<header id=“top“ role=“banner“ >
<nav-open-btn>
<nav-close-btn>
<jdoc:...
responsive web design<div id="wrapper"> <!-- äußerer Hauptrahmen -->
	 <header id="top" role="banner" > <!-- header -->
		...
responsive web design
Navigation
<a href=“#simple-nav“>Simple Navigation</a>
…
…
<nav id=“simple-nav“ role=“navigation“>
	...
responsive web design
Navigation
Manoela Ilic
http://tympanus.net/codrops/2013/08/13/
multi-level-push-menu/
Viljami Salmi...
responsive web design
Typografie & Ästhetik
https://www.rijksmuseum.nl/
responsive web design
Typografie & Ästhetik
Skalierung mit % und em
body {
	 font-size: 112.5%;		 /*	 112,5% ~ 18px */
	li...
responsive web design
Typografie & Ästhetik
Typographische Tonleiter
/* base font size = 112.5% ~ 18px */
h1 { font-size: ...
responsive web design
Typografie & Ästhetik
MODULOR von LeCorbusier
/* base font size = 112.5% ~ 18px */
h1 { font-size: 3...
responsive web design
Typografie & Ästhetik
Skalierung für mobile Ansicht
	 /*	 bei body = 100% ~ 16px */
	 /*	 sehr flach...
responsive web design
article {
	 p {
		 // margin-bottom: @paragraph-val;
		 & + p {
			// Erstzeileneinzug
			text-inden...
responsive web design
Typografie & Ästhetik
http://opendyslexic.org/	 siehe auch: Matilda von Ann Bessemans
Joomla! Testin...
responsive web design
Typografie & Ästhetik
Joomla! Testing
Thanks for helping us to test Joomla!
We're getting ready for ...
responsive web design
Performance
Mobile_Detect.php
Idee von Rene Kreijveld
+
js > template.js.php
Idee von Alexander
Schm...
responsive web design
Credits
David Bushell
Achim Fischer
JUG Fulda
Dave Gamache
Dirk Jesse
Rene Kreijveld
Philip Locke
JU...
responsive web design
/*!Copyright(c)DavidBushell|http://dbushell.com/*/
(function(g,h,c){
vard=function(m){
returnm.trim?...
Upcoming SlideShare
Loading in...5
×

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

1,439

Published on

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.

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,439
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. responsive web design Johannes Hock www.adhocgrafx.de responsive web design Ideen Experimente Erfahrungen Fragen • Content choreografie • Navigation • Typografie & Ästhetik • Performance
  2. 2. responsive web design 1961 geboren in München-Pasing Akademie der Bildenden Künste München Prof. Sir Eduardo Paolozzi Prof. Heribert Sturm about seit 1990 Kunstlehrer am Gymnasium 1996–2003 Deutsche Schule Lima / Peru
  3. 3. responsive web design 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
  4. 4. responsive web design Content choreografie
  5. 5. responsive web design Content choreografie content first > push & pull > css // Nathan Smith: http://unsemantic.com/ <section class=“grid-100“ > sidebar grid-33 width: 33.33333%; main grid-66 width: 66.66667%; sidebar width: 100%; main width: 100%; <!-- 2 columns: main | sidebar --> <section class="grid-100" > <section class="grid-66" id="main" role="main" > <jdoc:include type="component" /> </section> <aside class="grid-33" id="sidebar" role="complementary" > <jdoc:include type="modules" name="sidebar" style="…" /> </aside> </section>
  6. 6. responsive web design Content choreografie content first > push & pull > css <section class=“grid-100“ > 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%; <!-- 2 columns: sidebar | main --> <section class="grid-100" > <section class="grid-66 push-33" id="main" role="main" > <jdoc:include type="component" /> </section> <aside class="grid-33 pull-66" id="sidebar" role="complementary" > <jdoc:include type="modules" name="sidebar" style="…" /> </aside> </section>
  7. 7. responsive web design Content choreografie
  8. 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. 9. responsive web design <?php if ($layout == 'mobile'):?> <?php if ($this->countModules('head_row')): ?> <section class="grid-100" role"complementary" > <jdoc:include type="modules" name="head_row" style="…" /> </section> <?php endif; ?> <?php endif; ?> main footer head_row <?php if ($layout == ‚mobile‘):?> head_row <?php if ($layout != ‚mobile‘):?> main footer head_row <?php if ($layout != ‚mobile‘):?> head_row <?php if ($layout == ‚mobile‘):?> Content choreografie
  10. 10. responsive web design <?php if ($layout != 'mobile'):?> <?php if ($this->countModules('slideshow')): ?> <section class="grid-100" role"complementary" > <jdoc:include type="modules" name="slideshow" /> </section> <?php endif; ?> <?php endif; ?> main SLIDESHOW <?php if ($layout != ‚mobile‘):?> main SLIDESHOW <?php if ($layout != ‚mobile‘):?> hide <> mobile version > php Content choreografie
  11. 11. responsive web design Content choreografie flexbox > css <nav id=“nav“ role=“navigation“ > </nav> <div class="flex-container"> <header role="banner"> <div class="search" role="search"> </div> </header> <div class="head_row"> </div> <section class="content" role="main" > </section> <aside class="primary" role="complementary" > </aside> <aside class="secondary" role="complementary" > </aside> <div class="bottom_row"> </div> <footer role="contentinfo"> </footer> </div>
  12. 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. 13. responsive web design Navigation JoomSkeleton & JoomFluid Jake Rocheleau: http://www.hongkiat.com/blog/ building-mobile-app-navigation-with-jquery/
  14. 14. responsive web design Navigation <nav id=“navmenu“> <!-- off canvas navi --> <jdoc:include type=“modules“ name=“nav“ /> </nav> <div id=“wrapper“> <!-- äußerer Hauptrahmen --> <div id=“main“> <!-- innerer Rahmen --> <!-- content --> <nav id=“nav“> <jdoc:include type=“modules“ name=“nav“ /> </nav> <!-- mobil --> <button class=“reorder“ id=“menu-btn“> <a href=“#navmenu“></a> </button>
  15. 15. responsive web design Navigation <div id=“wrapper“> <!-- äußerer Hauptrahmen --> <nav id=“navmenu“> <!-- off canvas navi --> <jdoc:include type=“modules“ name=“nav“ /> </nav> <div id=“main“> <!-- innerer Rahmen --> <!-- content --> <nav id=“nav“> <jdoc:include type=“modules“ name=“nav“ /> </nav> <!-- mobil --> <button class=“reorder“ id=“menu-btn“> <a href=“#navmenu“></a> </button>
  16. 16. responsive web design Navigation <div id=“wrapper“> <!-- äußerer Hauptrahmen --> <nav id=“navmenu“> <!-- off canvas navi --> <jdoc:include type=“modules“ name=“nav“ /> </nav> <div id=“main“> <!-- innerer Rahmen --> <!-- content --> <nav id=“nav“> <jdoc:include type=“modules“ name=“nav“ /> </nav> <!-- mobil --> <button class=“reorder“ id=“menu-btn“> <a href=“#navmenu“></a> </button>
  17. 17. responsive web design Navigation <div id=“wrapper“> <!-- äußerer Hauptrahmen --> <?php if ($layout == ‚mobile‘):?> <nav id=“navmenu“> <!-- off canvas navi --> <jdoc:include type=“modules“ name=“nav“ /> </nav> <?php endif; ?> <div id=“main“> <!-- innerer Rahmen --> <!-- navi + z.B. Suche, Flaggen --> <?php if ($layout != ‚mobile‘):?> <nav id=“nav“> <jdoc:include type=“modules“ name=“nav“ /> </nav> <?php endif; ?> ... <?php if ($layout == ‚mobile‘):?> <button class=“reorder“ id=“menu-btn“> <a href=“#navmenu“></a> </button> <?php endif; ?> <!-- content --> </div> </div>
  18. 18. responsive web design Navigation David Bushell: http://coding.smashingmagazine.com/2013/01/15/ off-canvas-navigation-for-responsive-website/ <div id=“wrapper“> <!-- äußerer Hauptrahmen --> <div id=“main“> <!-- innerer Rahmen --> <!-- content --> </div> <header id=“top“ role=“banner“ > … (buttons) … <jdoc:include type=“modules“ name=“nav“ /> <jdoc:include type=“modules“ name=“nav_module“ style=“…“ /> … </header> JoomFlex
  19. 19. responsive web design Navigation <div id=“wrapper“> <header id=“top“ role=“banner“ > <nav-open-btn> <nav-close-btn> <jdoc:include type=“modules“ name=“nav“ /> <jdoc:include type=“modules“ name=“nav_module“ style=“…“ /> … </header> <div id=“wrapper“> <div id=“main“> <!-- innerer Rahmen --> <!-- content --> </div> <header id=“top“ role=“banner“ > <nav-open-btn> <nav-close-btn> <jdoc:include type=“modules“ name=“nav“ /> <jdoc:include type=“modules“ name=“nav_module“ style=“…“ /> … </header> <div id=“main“> <!-- innerer Rahmen --> <!-- content --> </div>
  20. 20. responsive web design<div id="wrapper"> <!-- äußerer Hauptrahmen --> <header id="top" role="banner" > <!-- header --> <?php if ($layout == 'mobile'):?> <div role="navigation" > <button id="nav-open-btn" > <a href="#nav"><?php echo JText::_('TPL_JF3_NAVOPEN'); ?></a> </button> </div> <?php endif;?> <nav id="nav" role="navigation" > <div class="nav-close" > <jdoc:include type="modules" name="nav" /> <button id="nav-close-btn" > <a href="#top"><?php echo JText::_('TPL_JF3_NAVCLOSE'); ?></a> </button> </div> <?php if ($this->countModules('nav_module')): ?> <!-- module pos im nav; z.B. search --> <div class="nav-module" role="search" > <jdoc:include type="modules" name="nav_module" style="…" /> </div> <?php endif;?> </nav> </header> <div id=“main“> <!-- innerer Rahmen --> <!-- content --> </div> </div>
  21. 21. responsive web design Navigation <a href=“#simple-nav“>Simple Navigation</a> … … <nav id=“simple-nav“ role=“navigation“> <jdoc:include type=“modules“ name=“nav“ /> </nav> einfache navi / noscript
  22. 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. 23. responsive web design Typografie & Ästhetik https://www.rijksmuseum.nl/
  24. 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 verändern | 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. 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. 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. 27. responsive web design Typografie & Ästhetik Skalierung für mobile Ansicht /* bei body = 100% ~ 16px */ /* sehr flache Schrift-Skalierung - für 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. 28. responsive web design article { p { // margin-bottom: @paragraph-val; & + p { // Erstzeileneinzug text-indent: @indent-val; margin-top: -@paragraph-val; // text-align: justify; } &.bild + p, &.lead + p, &.bildlegende + p, &.img_caption + p, &.autor + p { text-indent: 0 !important; } } }
  29. 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. 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. 31. responsive web design Performance Mobile_Detect.php Idee von Rene Kreijveld + js > template.js.php Idee von Alexander Schmidt / blank template <?php if ($layout == 'desktop'):?> <script type="text/javascript" src="<?php echo $tpath.'/js/template.desktop.js.php'; ?>"></script> <?php endif; ?> … <?php if ($layout != ‚desktop‘):?> <script type="text/javascript" src="<?php echo $tpath.'/js/template.mobile.js.php'; ?>"></script> <?php endif; ?> 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. 32. responsive web design Credits David Bushell Achim Fischer JUG Fulda Dave Gamache Dirk Jesse Rene Kreijveld Philip Locke JUG Nürnberg Angie Radtke Viljami Salminen Alexander Schmidt Roberto Segura Nathan Smith Stefan Wendhausen … und viele mehr … herzlichen Dank für Hilfe Tips Tricks …
  33. 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);
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×