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