Upgrading to Joomla 2.5 with responsive design

#JoomlaGov

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%

Phase 1 - Upgrade Joomla

1.5.26 > 2.5.4

Not as complicated as expected!!● download install and run jUpgrade (http://redcomponent.com/jupgrade)

● install missing components● rebuild menus● fix bugs

Issues● large files - not easy to move to local dev area (cache, media, db)

Phase 2 - Upgrade TemplateIntroduce 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

Phase 3 - Going ResponsiveChicken 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

Viewport SizesPopular viewports

● 240px - small phone● 320px - iPhone portrait ● 480px - iPhone landscape● 768px - iPad portrait● 1024 + - desktop

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

Responsive Testing ToolsOnline 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

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

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 supportHils Cheyne | Marcos Peebles | Language additions from OpenTranslators.org | Daniel Tapia Lehmann