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

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

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

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

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%;

<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>

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%;

<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>

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

<?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
head_row

<?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
main
SLIDESHOW
hide <> mobile version > php

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>

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%;
}
}

Navigation
JoomSkeleton & JoomFluid
Jake Rocheleau: http://www.hongkiat.com/blog/
building-mobile-app-navigation-with-jquery/

Navigation
<nav id=“navmenu“>

<jdoc:include
type=“modules“
name=“nav“ />
</nav>
<div id=“wrapper“>

<div id=“main“> 

<nav id=“nav“>
<jdoc:include type=“modules“ name=“nav“ />
</nav>

<button class=“reorder“ id=“menu-btn“>
<a href=“#navmenu“></a>
</button>

Navigation

<nav id=“navmenu“>

<jdoc:include
type=“modules“
name=“nav“ />
</nav>
<div id=“main“>


<nav id=“nav“>
<jdoc:include type=“modules“
name=“nav“ />
</nav>

<button class=“reorder“
id=“menu-btn“>
</button>

Navigation
<div id=“wrapper“> 
<nav id=“navmenu“> 
</nav>
<?php endif; ?>

<nav id=“nav“>
</nav>
<?php endif; ?> ...
<button class=“reorder“ id=“menu-btn“>
</button>
<?php endif; ?>

</div>
</div>

Navigation
David Bushell: http://coding.smashingmagazine.com/2013/01/15/
off-canvas-navigation-for-responsive-website/
<div id=“wrapper“> 

</div>
<header id=“top“ role=“banner“ > … (buttons) …
<jdoc:include type=“modules“ name=“nav_module“ style=“…“ />
… </header>
JoomFlex

Navigation
<header id=“top“ role=“banner“ >
<nav-open-btn>
<nav-close-btn>
name=“nav_module“ style=“…“ />
… </header>
<div id=“main“>

</div>
<header id=“top“ role=“banner“ >
<nav-open-btn>
<nav-close-btn>
name=“nav_module“ style=“…“ />
… </header>
<div id=“main“>

</div>

responsive web design<div id="wrapper"> 
<header id="top" role="banner" > 
<?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')): ?> 
<div class="nav-module" role="search" >
<jdoc:include type="modules" name="nav_module" style="…" />
</div>
<?php endif;?>
</nav>
</header>
<div id=“main“>   </div>
</div>

Navigation
<a href=“#simple-nav“>Simple Navigation</a>
…
…
<nav id=“simple-nav“ role=“navigation“>
</nav>
einfache navi / noscript

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

Typografie & Ästhetik
https://www.rijksmuseum.nl/

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 */
}
}

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

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 */

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 */
}

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;
}
}
}

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
we appreciate you helping us find and fix problems as
we work.
• Don't delete the installation folder when you finish
installing! While we're working we turn …

Joomla! Testing
we work.
• Don't delete the installation folder when you fin-
ish installing! While we're working we turn …
Joomla! Testing
we work.
• 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)

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
???…

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
…

/*!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);

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

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

Ähnlich wie Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

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