Case Study Case study on upgrading issues from Joomla 1.5 to Joomla 2.5 and the challenges of responsive design implementation. Why we made the move and how difficult was it to implement? Introducing HTML5, CSS3 and responsive design, was it necessary? We also give insight into the growth and traffic for joomlagov.info over the past year. Presenter Dwight Barnard (ZA) (Got2cy)

1. Upgrading to Joomla 2.5
with responsive design
#JoomlaGov

2. Time for change?
Growth over the past 2 years
●
●
●
●
●
Visits: 36,346
Pageviews: 101,514
New Visitor: 86.08%
Returning Visitor: 13.92%
Language: 55.29%

3. Phase 1 - Upgrade Joomla
1.5.26
> 2.5.4
Not as complicated as expected!!
●
●
●
●
download install and run jUpgrade
install missing components
rebuild menus
fix bugs
(http://redcomponent.com/jupgrade)
Issues
●
large files - not easy to move to local dev area (cache, media, db)

4. Phase 2 - Upgrade Template
Introduce HTML5 / CSS3
●
●
●
rebuild existing design using new code
add fallback for browser support
test test test
Issues
●
●
●
●
●
backward compatibility (IE6, 7, 8)
respond.js
html5shiv.js
selectivizr-min.js
PIE.htc

5. Phase 3 - Going Responsive
Chicken or the Egg?
●
●
●
●
●
●
mobile first or desktop first?
strategy
design
coding
testing
deployment
Issues
●
●
●
●
●
backward compatibility (IE6, 7, 8)
Navigation
Images
Tables
Converting old fixed-width site

6. Viewport Sizes
Popular viewports
●
●
●
●
●
240px - small phone
320px - iPhone portrait
480px - iPhone landscape
768px - iPad portrait
1024 + - desktop

7. Creating a fluid layout
●
http://rwdcalc.com/

8. Responsive Testing Tools
Online tools
●
●
●
●
http://mattkersley.com/responsive/
http://quirktools.com/screenfly/
http://www.responsinator.com/
http://labs.adobe.com/technologies/shadow/
Tips and tricks
●
●
●
use breakpoint.js to make changes to content
ordering of responsive CSS files
only load CSS for specific viewport size adapt.js

9. What Next?
Performance enhancements
●
●
●
combine CSS/js
compress HTML/CSS/js
aggressive caching
Adaptive design
●
new template for every view
Mobile app
●
submit content using mobile devices

10. Thanks to Joomla! Community & others
●
●
●
●
●
●
●
@Marcos Peebles & Cédric Doppagne from piezoworks together with
Dwight Barnard, Jarred de Beer, Ian Gibbins and @Matthew Philogene from raramuridesign, for
building and maintaining the site.
@Brian Teeman for inspiring and posting the original Blog post and the follow-up, which ended
being this site, and the Video, see the home page.
@Ryan Ozimek for leading the effort on building the mega list on the Joomla! wiki page and
those who helped maintaining the list
aka JSYEWC* - the Joomla's Silent Yet Efficient Working Community @hamanaka, @joomlaworks, @vistamedia, @BrianTeeman, @Alledia, @Isidrobaq, @carcam,
@ot2sen, @jcardenasvejar, @gnumax, @JWillin, @neo_sigsiu_net, @jen4web, @javi_gomez,
@chessman2212, @ivanramosnet, @rdeutz, @hagengraf, @JustinHerrin, @jonnsl,
@lookielou, @pe7er, @krijksen, @joomlacorner, @nikosdion @AlexRed...
@Hilary Cheyne and @Torettox84 and @219jondn for offering their support and help on
editing.
Inspiration and awesome support
Hils Cheyne | Marcos Peebles | Language additions from OpenTranslators.org
| Daniel Tapia Lehmann