Jd13 nl responsivelowhangingfruit

Responsive
Low hanging fruit – JD13NL

JD13NL - Responsive low hanging fruit - @emma_design

EMMA-design
Marie-Anne Melis
Sinds 2005, Joomla sinds 2006
Wisselend actief op fora als Tigi

@emma_design, emma-design.nl
Presentatie slideshare:
http://www.slideshare.net/marieannemelis


beetje theorie


Hoe kom je van …. of?


Adaptive, responsive?

Bron: http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php


Responsive door
frameworks
Functionaliteit door:
Gridsysteem
Mediaqueries
(Special effects)

Voorbeelden:
Twitter bootstrap, HTML5
boilerplate, Foundation Zurb


Gridsystemen – bootstrap

HTML CSS
<div class="row"> Uitwerking row en span
<div class="span4">...</div> Uitwerking verbreden/versmallen
<div class="span8">...</div>
</div>


fixed


fluid


Mediaqueries – gevorderd
css
Spelregels apparaat, viewport
• Voor scherm, printer
• Viewport browser (px)

Voorbeeld css:
@media (max-width: 767px) {
h2 a {color:red;}
}


beetje praktisch


Joomla 2.5 en responsive

Joomla! zelf niets Maar wel
• Gratis responsive templates
o.a. Shape5 van Vertex, JA-
Elastica, Ja-Puresite

• Templates van template clubs
(niet te oud, medio 2012)

• Zelf bouwen kan altijd evt op
basis van gratis, vanaf
nul, framework naar keuze


Joomla 3.x en responsive

Joomla! zelf En ook?
• Joomla variant Twitter • Gratis responsive templates
Bootstrap => /media/jui o.a.
Ajoom, Joomspirit, Sanders
• Frontend: Beez 3 en Workshop
Protostar templates
• Meeste templateclubs gaan
• Backend: responsive al 2.5/3.0

• Zelf bouwen (less leren)


Zelf aan de slag

Ja Ja

Nee

Nee


tips


Tips – tp=1, moduleposities

• tp=1 voor moduleposities


Tips – spaties

• Spaties bij het toevoegen van een class


Tips – responsive extensies

Voorbeeld 1:

Joomla 2.5
Joostrap template
ingevoegde video

Link


Voorbeeld 2

Joomla 2.5
joostrap template
Virtuemart 1.18



+ =

Joomla + grote extensie Geen klusser
zoals Virtuemart, K2,
Community Builder


Tips – “eigen custom.css”

V: waarom? A: daar zijn je wijzigingen

Template club => checken/documentatie

Knutselen aan => eigen custom.css


Tips – “Protostar
custom.css”
Maak custom.css in templates/protostar/css
Bewerk templates/protostar/index.php:


Tips –
logo, navigatie, zoeken
Versmallen => header: logo, navigatie, zoeken


Tips – technisch testen!

V: Resized het zoals je
verwacht, doen de knoppen en het
menu het?
Browserresize

Testsites: cybercrab, quircktools, responsinator

Vrienden om te testen

Tips – functioneel testen

V: zie je op elk schermformaat datgene
wat belangrijk is?


Responsive – de smaak te
pakken

• Zondag 12:05 => Optimaliseren van data voor
tablet en mobiel (kb's), in bootstrap

• Zondag 13:45 => Eenvoudig een bootstrap
template bouwen in Joomla 3

• Zondag 14:35 => Responsive Design:
Uitdagingen en Oplossingen


Vragen


Dankjewel!


Bonus – gratis templates Overzicht van
ca. 15-2-2013

Joomla 2.5 Joomla 3.x
• CMSteachings.com CMSblue • Cjstarter (ook cjlib installeren)
• Leotheme.com Leorestro • SJ Joomla J30
• internet-inspired.com Oneweb • ajoomtemplates 3.0
• shape5.com Vertex • Sanders workshoptemplate
• Gavick Pro Music template
• Joomlart (JA Elastica en JA Puresite)

Joomla 2.5/Joomla 3.x
• Ol albos
• Joomspirit.com


Jd13 nl responsivelowhangingfruit

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie Jd13 nl responsivelowhangingfruit

Ähnlich wie Jd13 nl responsivelowhangingfruit (9)

Jd13 nl responsivelowhangingfruit