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 V...
Phase 1 - Upgrade Joomla
1.5.26

> 2.5.4

Not as complicated as expected!!
●
●
●
●

download install and run jUpgrade
inst...
Phase 2 - Upgrade Template
Introduce HTML5 / CSS3
●
●
●

rebuild existing design using new code
add fallback for browser s...
Phase 3 - Going Responsive
Chicken or the Egg?
●
●
●
●
●
●

mobile first or desktop first?
strategy
design
coding
testing
...
Viewport Sizes
Popular viewports
●
●
●
●
●

240px - small phone
320px - iPhone portrait
480px - iPhone landscape
768px - i...
Creating a fluid layout
●

http://rwdcalc.com/
Responsive Testing Tools
Online tools
●
●
●
●

http://mattkersley.com/responsive/
http://quirktools.com/screenfly/
http://...
What Next?
Performance enhancements
●
●
●

combine CSS/js
compress HTML/CSS/js
aggressive caching

Adaptive design
●

new ...
Thanks to Joomla! Community & others
●
●
●
●
●
●

●

@Marcos Peebles & Cédric Doppagne from piezoworks together with
Dwigh...
Upcoming SlideShare
Loading in...5
×

Case Study Upgrading Joomlagov.info to Joomla 2.5 with responsive design

359

Published on

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)

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
359
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Case Study Upgrading Joomlagov.info to Joomla 2.5 with responsive design

  1. 1. Upgrading to Joomla 2.5 with responsive design #JoomlaGov
  2. 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. 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. 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. 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. 6. Viewport Sizes Popular viewports ● ● ● ● ● 240px - small phone 320px - iPhone portrait 480px - iPhone landscape 768px - iPad portrait 1024 + - desktop
  7. 7. Creating a fluid layout ● http://rwdcalc.com/
  8. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×