case study upgrading joomlagov.info to joomla 2.5 with responsive design
DESCRIPTION
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)TRANSCRIPT
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
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