SlideShare a Scribd company logo
responsive web design
Johannes Hock
www.adhocgrafx.de
responsive web design
Ideen
Experimente
Erfahrungen
Fragen
•	 Content choreografie
•	 Navigation
•	 Typografie & Ästhetik
•	 Performance
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
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
responsive web design
Content choreografie
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>
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>
responsive web design
Content choreografie
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
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
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
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>
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%;
	}
}
responsive web design
Navigation
JoomSkeleton & JoomFluid
Jake Rocheleau: http://www.hongkiat.com/blog/
building-mobile-app-navigation-with-jquery/
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>
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>
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>
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>
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
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>
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 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
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
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 */
	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 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
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
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
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 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 …
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)
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
???…
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
…
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);

More Related Content

What's hot

From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
Derek Christensen
 
Atomic design con pattern lab
Atomic design con pattern labAtomic design con pattern lab
Atomic design con pattern lab
UX Nights
 
Branding your school district
Branding your school districtBranding your school district
Branding your school district
trexler
 
LESS
LESSLESS
LESS
Joe Seifi
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshow
sblackman
 
Survey of Front End Topics in Rails
Survey of Front End Topics in RailsSurvey of Front End Topics in Rails
Survey of Front End Topics in Rails
Benjamin Vandgrift
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
Andrelma
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
Edna17
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
RosemeireDomingues
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
emedomimgues
 
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
Thibaut Baillet
 
Xxx
XxxXxx
Xxx
syfwan
 
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Jamie Matthews
 
Diseño de Sistemas de Diseño con Atomic Design y Pattern Lab
Diseño de Sistemas de Diseño con Atomic Design y Pattern LabDiseño de Sistemas de Diseño con Atomic Design y Pattern Lab
Diseño de Sistemas de Diseño con Atomic Design y Pattern Lab
Mauricio Angulo Sillas
 
Karya Ilmiah
Karya IlmiahKarya Ilmiah
Karya Ilmiah
Kelas eae
 
Nananana
NanananaNananana
Nananana
Carmela Silvosa
 
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a treeHTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
brucelawson
 
Espacios en-tu-vida
Espacios en-tu-vidaEspacios en-tu-vida
Espacios en-tu-vida
epacheco1
 
Making Links Magical Again with CSS
Making Links Magical Again with CSSMaking Links Magical Again with CSS
Making Links Magical Again with CSS
Jenn Lukas
 
Ss 36932418[1]
Ss 36932418[1]Ss 36932418[1]
Ss 36932418[1]
Ya Jinda
 

What's hot (20)

From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
Atomic design con pattern lab
Atomic design con pattern labAtomic design con pattern lab
Atomic design con pattern lab
 
Branding your school district
Branding your school districtBranding your school district
Branding your school district
 
LESS
LESSLESS
LESS
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshow
 
Survey of Front End Topics in Rails
Survey of Front End Topics in RailsSurvey of Front End Topics in Rails
Survey of Front End Topics in Rails
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
 
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
 
Xxx
XxxXxx
Xxx
 
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
 
Diseño de Sistemas de Diseño con Atomic Design y Pattern Lab
Diseño de Sistemas de Diseño con Atomic Design y Pattern LabDiseño de Sistemas de Diseño con Atomic Design y Pattern Lab
Diseño de Sistemas de Diseño con Atomic Design y Pattern Lab
 
Karya Ilmiah
Karya IlmiahKarya Ilmiah
Karya Ilmiah
 
Nananana
NanananaNananana
Nananana
 
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a treeHTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
 
Espacios en-tu-vida
Espacios en-tu-vidaEspacios en-tu-vida
Espacios en-tu-vida
 
Making Links Magical Again with CSS
Making Links Magical Again with CSSMaking Links Magical Again with CSS
Making Links Magical Again with CSS
 
Ss 36932418[1]
Ss 36932418[1]Ss 36932418[1]
Ss 36932418[1]
 

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

Mobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLsMobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLs
Harvard Web Working Group
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
Frédéric Harper
 
Responsive WordPress workflow
Responsive WordPress workflowResponsive WordPress workflow
Responsive WordPress workflow
James Bundey
 
Responsive design
Responsive designResponsive design
Responsive design
John Doxaras
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi
 
Responsive Design: Mehr als CSS
Responsive Design: Mehr als CSSResponsive Design: Mehr als CSS
Responsive Design: Mehr als CSS
Walter Ebert
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
freshlybakedpixels
 
Module 4 Minuteman Lexington Web Design Daniel Downs
Module 4 Minuteman Lexington Web Design Daniel DownsModule 4 Minuteman Lexington Web Design Daniel Downs
Module 4 Minuteman Lexington Web Design Daniel Downs
Daniel Downs
 
Once Source to Rule Them All
Once Source to Rule Them AllOnce Source to Rule Them All
Once Source to Rule Them All
David Yeiser
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
Michael Enslow
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
Marc Grabanski
 
Headless Drupal
Headless DrupalHeadless Drupal
Headless Drupal
drubb
 
Building iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360FlexBuilding iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360Flex
danielwanja
 
Dress Your WordPress with Child Themes
Dress Your WordPress with Child ThemesDress Your WordPress with Child Themes
Dress Your WordPress with Child Themes
Laurie M. Rauch
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Suzanne Dergacheva
 
Building Responsive Websites with Drupal
Building Responsive Websites with DrupalBuilding Responsive Websites with Drupal
Building Responsive Websites with Drupal
Suzanne Dergacheva
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
Robert Nyman
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
The University of Akron
 
Challenges going mobile
Challenges going mobileChallenges going mobile
Challenges going mobile
Christian Rokitta
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)
Joao Lucas Santana
 

Similar to Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock (20)

Mobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLsMobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLs
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
 
Responsive WordPress workflow
Responsive WordPress workflowResponsive WordPress workflow
Responsive WordPress workflow
 
Responsive design
Responsive designResponsive design
Responsive design
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Responsive Design: Mehr als CSS
Responsive Design: Mehr als CSSResponsive Design: Mehr als CSS
Responsive Design: Mehr als CSS
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
 
Module 4 Minuteman Lexington Web Design Daniel Downs
Module 4 Minuteman Lexington Web Design Daniel DownsModule 4 Minuteman Lexington Web Design Daniel Downs
Module 4 Minuteman Lexington Web Design Daniel Downs
 
Once Source to Rule Them All
Once Source to Rule Them AllOnce Source to Rule Them All
Once Source to Rule Them All
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
Headless Drupal
Headless DrupalHeadless Drupal
Headless Drupal
 
Building iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360FlexBuilding iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360Flex
 
Dress Your WordPress with Child Themes
Dress Your WordPress with Child ThemesDress Your WordPress with Child Themes
Dress Your WordPress with Child Themes
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
 
Building Responsive Websites with Drupal
Building Responsive Websites with DrupalBuilding Responsive Websites with Drupal
Building Responsive Websites with Drupal
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
 
Challenges going mobile
Challenges going mobileChallenges going mobile
Challenges going mobile
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)
 

Recently uploaded

NIMA2024 | De toegevoegde waarde van DEI en ESG in campagnes | Nathalie Lam |...
NIMA2024 | De toegevoegde waarde van DEI en ESG in campagnes | Nathalie Lam |...NIMA2024 | De toegevoegde waarde van DEI en ESG in campagnes | Nathalie Lam |...
NIMA2024 | De toegevoegde waarde van DEI en ESG in campagnes | Nathalie Lam |...
BBPMedia1
 
Part 2 Deep Dive: Navigating the 2024 Slowdown
Part 2 Deep Dive: Navigating the 2024 SlowdownPart 2 Deep Dive: Navigating the 2024 Slowdown
Part 2 Deep Dive: Navigating the 2024 Slowdown
jeffkluth1
 
Pitch Deck Teardown: Kinnect's $250k Angel deck
Pitch Deck Teardown: Kinnect's $250k Angel deckPitch Deck Teardown: Kinnect's $250k Angel deck
Pitch Deck Teardown: Kinnect's $250k Angel deck
HajeJanKamps
 
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan ChartSatta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results
 
Digital Transformation Frameworks: Driving Digital Excellence
Digital Transformation Frameworks: Driving Digital ExcellenceDigital Transformation Frameworks: Driving Digital Excellence
Digital Transformation Frameworks: Driving Digital Excellence
Operational Excellence Consulting
 
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan ChartSatta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results
 
Kirill Klip GEM Royalty TNR Gold Lithium Presentation
Kirill Klip GEM Royalty TNR Gold Lithium PresentationKirill Klip GEM Royalty TNR Gold Lithium Presentation
Kirill Klip GEM Royalty TNR Gold Lithium Presentation
Kirill Klip
 
CULR Spring 2024 Journal.pdf testing for duke
CULR Spring 2024 Journal.pdf testing for dukeCULR Spring 2024 Journal.pdf testing for duke
CULR Spring 2024 Journal.pdf testing for duke
ZevinAttisha
 
Dpboss Matka Guessing Satta Matta Matka Kalyan panel Chart Indian Matka Dpbos...
Dpboss Matka Guessing Satta Matta Matka Kalyan panel Chart Indian Matka Dpbos...Dpboss Matka Guessing Satta Matta Matka Kalyan panel Chart Indian Matka Dpbos...
Dpboss Matka Guessing Satta Matta Matka Kalyan panel Chart Indian Matka Dpbos...
➒➌➎➏➑➐➋➑➐➐Dpboss Matka Guessing Satta Matka Kalyan Chart Indian Matka
 
Satta Matka Dpboss Matka Guessing Kalyan Chart Indian Matka Kalyan panel Chart
Satta Matka Dpboss Matka Guessing Kalyan Chart Indian Matka Kalyan panel ChartSatta Matka Dpboss Matka Guessing Kalyan Chart Indian Matka Kalyan panel Chart
Satta Matka Dpboss Matka Guessing Kalyan Chart Indian Matka Kalyan panel Chart
➒➌➎➏➑➐➋➑➐➐Dpboss Matka Guessing Satta Matka Kalyan Chart Indian Matka
 
2022 Vintage Roman Numerals Men Rings
2022 Vintage Roman  Numerals  Men  Rings2022 Vintage Roman  Numerals  Men  Rings
2022 Vintage Roman Numerals Men Rings
aragme
 
一比一原版新西兰奥塔哥大学毕业证(otago毕业证)如何办理
一比一原版新西兰奥塔哥大学毕业证(otago毕业证)如何办理一比一原版新西兰奥塔哥大学毕业证(otago毕业证)如何办理
一比一原版新西兰奥塔哥大学毕业证(otago毕业证)如何办理
taqyea
 
欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】
欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】
欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】
concepsionchomo153
 
2024-6-01-IMPACTSilver-Corp-Presentation.pdf
2024-6-01-IMPACTSilver-Corp-Presentation.pdf2024-6-01-IMPACTSilver-Corp-Presentation.pdf
2024-6-01-IMPACTSilver-Corp-Presentation.pdf
hartfordclub1
 
Cover Story - China's Investment Leader - Dr. Alyce SU
Cover Story - China's Investment Leader - Dr. Alyce SUCover Story - China's Investment Leader - Dr. Alyce SU
Cover Story - China's Investment Leader - Dr. Alyce SU
msthrill
 
一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理
一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理
一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理
taqyea
 
Kirill Klip GEM Royalty TNR Gold Copper Presentation
Kirill Klip GEM Royalty TNR Gold Copper PresentationKirill Klip GEM Royalty TNR Gold Copper Presentation
Kirill Klip GEM Royalty TNR Gold Copper Presentation
Kirill Klip
 
Registered-Establishment-List-in-Uttarakhand-pdf.pdf
Registered-Establishment-List-in-Uttarakhand-pdf.pdfRegistered-Establishment-List-in-Uttarakhand-pdf.pdf
Registered-Establishment-List-in-Uttarakhand-pdf.pdf
dazzjoker
 
Sustainable Logistics for Cost Reduction_ IPLTech Electric's Eco-Friendly Tra...
Sustainable Logistics for Cost Reduction_ IPLTech Electric's Eco-Friendly Tra...Sustainable Logistics for Cost Reduction_ IPLTech Electric's Eco-Friendly Tra...
Sustainable Logistics for Cost Reduction_ IPLTech Electric's Eco-Friendly Tra...
IPLTech Electric
 
Business storytelling: key ingredients to a story
Business storytelling: key ingredients to a storyBusiness storytelling: key ingredients to a story
Business storytelling: key ingredients to a story
Alexandra Fulford
 

Recently uploaded (20)

NIMA2024 | De toegevoegde waarde van DEI en ESG in campagnes | Nathalie Lam |...
NIMA2024 | De toegevoegde waarde van DEI en ESG in campagnes | Nathalie Lam |...NIMA2024 | De toegevoegde waarde van DEI en ESG in campagnes | Nathalie Lam |...
NIMA2024 | De toegevoegde waarde van DEI en ESG in campagnes | Nathalie Lam |...
 
Part 2 Deep Dive: Navigating the 2024 Slowdown
Part 2 Deep Dive: Navigating the 2024 SlowdownPart 2 Deep Dive: Navigating the 2024 Slowdown
Part 2 Deep Dive: Navigating the 2024 Slowdown
 
Pitch Deck Teardown: Kinnect's $250k Angel deck
Pitch Deck Teardown: Kinnect's $250k Angel deckPitch Deck Teardown: Kinnect's $250k Angel deck
Pitch Deck Teardown: Kinnect's $250k Angel deck
 
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan ChartSatta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
 
Digital Transformation Frameworks: Driving Digital Excellence
Digital Transformation Frameworks: Driving Digital ExcellenceDigital Transformation Frameworks: Driving Digital Excellence
Digital Transformation Frameworks: Driving Digital Excellence
 
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan ChartSatta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
 
Kirill Klip GEM Royalty TNR Gold Lithium Presentation
Kirill Klip GEM Royalty TNR Gold Lithium PresentationKirill Klip GEM Royalty TNR Gold Lithium Presentation
Kirill Klip GEM Royalty TNR Gold Lithium Presentation
 
CULR Spring 2024 Journal.pdf testing for duke
CULR Spring 2024 Journal.pdf testing for dukeCULR Spring 2024 Journal.pdf testing for duke
CULR Spring 2024 Journal.pdf testing for duke
 
Dpboss Matka Guessing Satta Matta Matka Kalyan panel Chart Indian Matka Dpbos...
Dpboss Matka Guessing Satta Matta Matka Kalyan panel Chart Indian Matka Dpbos...Dpboss Matka Guessing Satta Matta Matka Kalyan panel Chart Indian Matka Dpbos...
Dpboss Matka Guessing Satta Matta Matka Kalyan panel Chart Indian Matka Dpbos...
 
Satta Matka Dpboss Matka Guessing Kalyan Chart Indian Matka Kalyan panel Chart
Satta Matka Dpboss Matka Guessing Kalyan Chart Indian Matka Kalyan panel ChartSatta Matka Dpboss Matka Guessing Kalyan Chart Indian Matka Kalyan panel Chart
Satta Matka Dpboss Matka Guessing Kalyan Chart Indian Matka Kalyan panel Chart
 
2022 Vintage Roman Numerals Men Rings
2022 Vintage Roman  Numerals  Men  Rings2022 Vintage Roman  Numerals  Men  Rings
2022 Vintage Roman Numerals Men Rings
 
一比一原版新西兰奥塔哥大学毕业证(otago毕业证)如何办理
一比一原版新西兰奥塔哥大学毕业证(otago毕业证)如何办理一比一原版新西兰奥塔哥大学毕业证(otago毕业证)如何办理
一比一原版新西兰奥塔哥大学毕业证(otago毕业证)如何办理
 
欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】
欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】
欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】
 
2024-6-01-IMPACTSilver-Corp-Presentation.pdf
2024-6-01-IMPACTSilver-Corp-Presentation.pdf2024-6-01-IMPACTSilver-Corp-Presentation.pdf
2024-6-01-IMPACTSilver-Corp-Presentation.pdf
 
Cover Story - China's Investment Leader - Dr. Alyce SU
Cover Story - China's Investment Leader - Dr. Alyce SUCover Story - China's Investment Leader - Dr. Alyce SU
Cover Story - China's Investment Leader - Dr. Alyce SU
 
一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理
一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理
一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理
 
Kirill Klip GEM Royalty TNR Gold Copper Presentation
Kirill Klip GEM Royalty TNR Gold Copper PresentationKirill Klip GEM Royalty TNR Gold Copper Presentation
Kirill Klip GEM Royalty TNR Gold Copper Presentation
 
Registered-Establishment-List-in-Uttarakhand-pdf.pdf
Registered-Establishment-List-in-Uttarakhand-pdf.pdfRegistered-Establishment-List-in-Uttarakhand-pdf.pdf
Registered-Establishment-List-in-Uttarakhand-pdf.pdf
 
Sustainable Logistics for Cost Reduction_ IPLTech Electric's Eco-Friendly Tra...
Sustainable Logistics for Cost Reduction_ IPLTech Electric's Eco-Friendly Tra...Sustainable Logistics for Cost Reduction_ IPLTech Electric's Eco-Friendly Tra...
Sustainable Logistics for Cost Reduction_ IPLTech Electric's Eco-Friendly Tra...
 
Business storytelling: key ingredients to a story
Business storytelling: key ingredients to a storyBusiness storytelling: key ingredients to a story
Business storytelling: key ingredients to a story
 

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 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. 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
  • 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. 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>
  • 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 <?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. 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. 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. 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 <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. 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. 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. 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. 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. 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. 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. 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. 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 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. 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 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. 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. 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 <?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. 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. 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);