Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock
-
Upload
adhocgrafx -
Category
Business
-
view
1.420 -
download
1
description
Transcript of Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock
responsive web design
Johannes Hockwww.adhocgrafx.de
responsive web designIdeen
Experimente
Erfahrungen
Fragen
• Contentchoreografie
• Navigation
• Typografie&Ästhetik
• Performance
responsive web design
1961 geboren in München-Pasing
AkademiederBildendenKünsteMünchenProf. Sir Eduardo PaolozziProf. Heribert Sturm
about
seit 1990 Kunstlehrer am Gymnasium
1996–2003Deutsche Schule Lima / Peru
responsive web design
seit 2009 > Joomla!e-learning Plattform für den Kunstunterricht
www.kunstimunterricht.deseit 2013 powered by tec-promotions.de
seit 2011 > responsive web designJoomSkeleton, JoomFluid und JoomFlex
https://github.com/adhocgraFX
responsive web designContentchoreografie
responsive web designContentchoreografie
content first > push & pull > css // Nathan Smith: http://unsemantic.com/
<section class=“grid-100“ >
sidebargrid-33
width: 33.33333%;
maingrid-66
width: 66.66667%;
sidebarwidth: 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>
responsive web designContentchoreografie
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%; sidebarwidth: 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>
responsive web designContentchoreografie
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
Contentchoreografie
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‘):?>
Contentchoreografie
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
Contentchoreografie
responsive web designContentchoreografie
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>
responsive web designContentchoreografie
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%; }}
responsive web designNavigation
JoomSkeleton & JoomFluidJake Rocheleau: http://www.hongkiat.com/blog/building-mobile-app-navigation-with-jquery/
responsive web designNavigation
<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>
responsive web designNavigation
<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>
responsive web designNavigation
<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>
responsive web designNavigation
<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>
responsive web designNavigation
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
responsive web designNavigation
<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>
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>
responsive web designNavigation
<a href=“#simple-nav“>Simple Navigation</a>……<nav id=“simple-nav“ role=“navigation“> <jdoc:include type=“modules“ name=“nav“ /></nav>
einfache navi / noscript
responsive web designNavigation
Manoela Ilichttp://tympanus.net/codrops/2013/08/13/multi-level-push-menu/
Viljami Salminen http://responsive-nav.com/
Jason Weaverhttp://jasonweaver.name/lab/flexiblenavigation/
weitere interessante Beispiele
responsive web designTypografie&Ästhetik
https://www.rijksmuseum.nl/
responsive web designTypografie&Ästhetik
Skalierung mit % und embody { 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 */ }}
responsive web designTypografie&Ä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 Typohttp://lamb.cc/typograph/ von Iain Lamb
responsive web designTypografie&Ä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
responsive web designTypografie&Ä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
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; } }}
responsive web designTypografie&Ästhetik
http://opendyslexic.org/ siehe auch: Matilda von Ann Bessemans
Joomla! TestingThanks 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! TestingThanks 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 …
responsive web designTypografie&Ästhetik
Joomla! TestingThanks 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! TestingThanks 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 SansDroid SerifGentium (serif)Yanone Kaffeesatz (sans)Lato (sans)
Open Sans CondensedOpen SansPT Sans NarrowPT SansPT SerifSource Code Pro (slab mono)Source Sans ProUbuntu Condensed (sans)Ubuntu (sans)Vollkorn (serif)
responsive web designPerformance
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 WillcoxDoc: http://adaptive-images.comGithub: https://github.com/MattWilcox/Adaptive-Images
Responsive Img jQuery Plugin by Drew ThomasDoc: http://responsiveimg.comGithub: https://github.com/drewbrolik/Responsive-Img
???…
responsive web designCreditsDavid 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 …
herzlich
enDank
für
Hilfe
Tips
Tricks
…
responsive web design/*
! Co
pyri
ght
(c)
Davi
d Bu
shel
l | h
ttp:
//db
ushe
ll.co
m/
*/(f
unct
ion
(g,
h, c
) {
va
r d
= fu
ncti
on (
m)
{ re
turn
m.t
rim
? m
.tri
m()
: m
.rep
lace
(/^\
s+|\
s+$/
g, "
") };
va
r e
= fu
ncti
on (
m,
n) {
re
turn
(" "
+ m
.cla
ssNa
me
+ "
").in
dexO
f("
" +
n +
" ")
!=
= -1
};
va
r f
= fu
ncti
on (
m,
n) {
if
(!e(
m,
n))
{ m
.cla
ssNa
me
= (m
.cla
ssNa
me
==
= ""
) ?
n :
m.c
lass
Nam
e +
" "
+ n
}
};
va
r k
= fu
ncti
on (
m,
n) {
m
.cla
ssNa
me
= d(
(" "
+ m
.cla
ssNa
me
+ "
").r
epla
ce("
" +
n +
" "
, "
"))
};
va
r l =
fun
ctio
n (m
, n)
{ if
(m)
{ do
{
if
(m.id
==
= n)
{
re
turn
tru
e
}
if
(m.n
odeT
ype
==
= 9)
{
br
eak
}
}
whi
le (
(m =
m.p
aren
tNod
e))
}
re
turn
fal
se };
va
r j =
h.d
ocum
entE
lem
ent;
va
r i =
g.M
oder
nizr
.pre
fixed
("tr
ansf
orm
"),
b =
g.M
oder
nizr
.pre
fixed
("tr
ansi
tion
"),
a =
(fun
ctio
n ()
{ va
r m
= {
Web
kitT
rans
itio
n: "
web
kitT
rans
itio
nEnd
", M
ozTr
ansi
tion
: "t
rans
itio
nend
", O
Tran
siti
on:
"oTr
an-
siti
onEn
d ot
rans
itio
nend
", m
sTra
nsit
ion:
"M
STra
nsit
ionE
nd",
tra
nsit
ion:
"tr
ansi
tion
end"
}; re
turn
m.h
asOw
nPro
pert
y(b)
? m
[b]
: fa
lse
})
();
g.
App
= (f
unct
ion
() {
va
r p
= fa
lse,
q =
{};
va
r m
= h
.get
Elem
entB
yId(
"inn
er-w
rapp
er")
, o
= fa
lse,
n =
"js
-nav
"; q.
init
= f
unct
ion
() {
if
(p)
{
re
turn
}
p
= tr
ue;
va
r r
= fu
ncti
on (
s) {
if
(s &
& s
.tar
get
==
= m
) {
h.
rem
oveE
vent
List
ener
(a,
r, fa
lse)
}
o
= fa
lse
};
q.
clos
eNav
= f
unct
ion
() {
if
(o)
{
va
r s
= (a
&&
b)
? pa
rseF
loat
(g.g
etCo
mpu
tedS
tyle
(m,
"")[
b +
"Dur
atio
n"])
: 0
;
if
(s >
0)
{
h.
addE
vent
List
ener
(a,
r, fa
lse)
}
else
{
r(
null)
}
}
k(
j, n)
};
q.
open
Nav
= fu
ncti
on (
) {
if
(o)
{
re
turn
}
f(
j, n)
;
o
= tr
ue };
q.
togg
leNa
v =
func
tion
(s)
{
if
(o &
& e
(j,
n))
{
q.
clos
eNav
()
}
else
{
q.
open
Nav(
)
}
if
(s)
{
s.
prev
entD
efau
lt()
}
};
h.
getE
lem
entB
yId(
"nav
-ope
n-bt
n").
addE
vent
List
ener
("cl
ick"
, q.
togg
leNa
v, f
alse
); h.
getE
lem
entB
yId(
"nav
-clo
se-b
tn")
.add
Even
tLis
tene
r("c
lick"
, q.
togg
leNa
v, f
alse
); h.
addE
vent
List
ener
("cl
ick"
, fu
ncti
on (
s) {
if
(o &
& !
l(s.
targ
et,
"nav
"))
{
s.
prev
entD
efau
lt()
;
q.
clos
eNav
()
}
},
tru
e);
f(
j, "j
s-re
ady"
) };
re
turn
q })
();
if
(g.a
ddEv
entL
iste
ner)
{ g.
addE
vent
List
ener
("DO
MCo
nten
tLoa
ded"
, g.
App.
init
, fa
lse)
}
})(w
indo
w, w
indo
w.d
ocum
ent)
;