+ All Categories
Home > Business > Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock

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

Date post: 24-Jun-2015
Category:
Upload: adhocgrafx
View: 1,420 times
Download: 1 times
Share this document with a friend
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.
33
responsive web design Johannes Hock www.adhocgrafx.de responsive web design Ideen Experimente Erfahrungen Fragen Content choreografie Navigation Typografie & Ästhetik Performance
Transcript
Page 1: 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

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

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

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

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

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

responsive web designContentchoreografie

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

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>

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

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>

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

responsive web designContentchoreografie

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

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

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

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

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

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

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

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>

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

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

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

responsive web designNavigation

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

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

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>

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

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>

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

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>

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

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>

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

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

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

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>

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

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>

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

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

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

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

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

responsive web designTypografie&Ästhetik

https://www.rijksmuseum.nl/

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

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

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

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

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

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

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

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

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

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

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

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 …

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

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)

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

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

???…

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

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

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

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)

;


Recommended