1. Mobile-Ready Websites MuraCon 2012
with Mura CMS Washington DC

2. About me
• Guust Nieuwenhuis
• Analyst Programmer at Orange Lark
• Adobe Community Professional
• CFUG Belgium co-manager
• ColdFusion CAB member
• Scotch on the Rocks CAB member
2

3. Mobile-Ready Websites with Mura CMS
What?
Why?
How?

4. Responsive Design
CSS3 media queries
Bootstrap

5. Responsive Design
Key elements Use frameworks and tools!
• CSS3 media queries • 320 and up
• Min-width / Max-width • Bootstrap
• Fluid grid concept • Adobe Edge Reflow
• Percentages • Adobe Edge Inspect
• Flexible images

6. Responsive Design
Demo

7. Build in Mobile Support
Mobile detection
Single template
JQuery mobile
Customizable

8. Build in Mobile Support
Mobile detection Single template
• Based on User Agent • [theme]/templates/mobile.cfm
• Limited detection
JQuery mobile Customizable
• Touch-Optimized Web • Replace template
Framework
• Update save template
• Cross-platform, HTML5-based
user interface

9. Build in Mobile
Support
Demo

10. MobileMura Plugin
Configurable mobile detection
Mobile theme(s)
Multiple templates support
Mobile-specific customization

11. 2 .0
MobileMura Plugin
Configurable mobile detection
Mobile theme(s)
Multiple templates support
Mobile-specific customization

12. MobileMura Plugin
• Mura CMS Plugin
• Advanced mobile features
• Download
• http://www.github.com/lagaffe/mobilemura
• Demo (version 1.1)
• http://www.lagaffe.be/mobilemura

13. MobileMura Plugin
Configurable mobile detection Multiple templates support
• 3 options (Mura build in, • Per page and per detection type
MobileMura Build in or custom)
• Based on User Agent
Mobile-specific customization
• contentRenderer.cfc
Mobile theme(s)
• eventhander.cfc
• Specific theme per detection
type
• Custom display objects

14. MobileMura Plugin
Demo

15. Contact me!
info@lagaffe.be
www.lagaffe.be
@lagaffe
info@orangelark.be
www.orangelark.be
@orangelark

16. Mobile-Ready Websites MuraCon 2012
with Mura CMS Washington DC