JF02PR4 - Performance Techniques & Tricks for Responsive Web Design in Joomla! & K2 (Fotis Evangelou)

Related video: http://www.youtube.com/watch?v=9KKZ-dtFC0c

Transcript

1. Performance Techniques & Tricks for Responsive Web Design in Joomla! & K2 Fotis Evangelou (Nuevvo)
2. Performance Techniques
3. http://laurakalbag.com/ display-none/
4. IE CSS class on HTML tag
5. Conditional module position loading via special module chrome...
6. ..and some JavaScript
7. Περισσότερα για conditional loading http://filamentgroup.com/lab/ajax_includes_modular_content/
8. Conditional JS/CSS loading using enquire.js, Respond.js or use this CSS/JS trick http://www.springload.co.nz/love-the-web/responsive-javascript
9. Social Widget Lazy/Async Loading http://www.phpied.com/c3po-common-3rd-party-objects/
10. SocialCount http://filamentgroup.com/lab/socialcount/
11. Images
12. Responsive Images (use K2!)
13. Lazy Loading
14. Use a service http://docs.sencha.io/current/index.html#!/guide/src
15. Other services... http://ir0.mobify.com/WIDTH/URL http://cdn.filter.to/WIDTHxHEIGHT/URL http://boxresizer.com http://cloudinary.com/ http://www.resrc.it/
16. #RWD Tips & Tricks
17. Navigation http://mobile.smashingmagazine.com/2012/10/08/the-semantic-responsive-design-navicon/ http://css-tricks.com/responsive-menu-concepts/ https://speakerdeck.com/dbushell/responsive-navigation Never duplicate the HTML markup (and show/hide per browser type) Use JS to add a toggler or Use flaunt.js to automated mobile menus!
18. Use Responsive Lightbox Scripts http://brutaldesign.github.io/swipebox/ http://www.frescojs.com/
19. Responsive media (video & audio) via AllVideos or fitvids.js (or other)
20. Use “icon” fonts from fontello.com entypo.com
21. Responsive Tables http://www.zurb.com/playground/responsive-tables & Foundation 4
22. Ευχαριστώ @fevangelou