Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile ready websites with Mura CMS (MuraCon 2012)

1,515 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Mobile ready websites with Mura CMS (MuraCon 2012)

  1. 1. Mobile-Ready Websites MuraCon 2012 with Mura CMS Washington DC
  2. 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. 3. Mobile-Ready Websites with Mura CMS What? Why? How?
  4. 4. Responsive Design CSS3 media queries Bootstrap
  5. 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. 6. Responsive DesignDemo
  7. 7. Build in Mobile Support Mobile detection Single template JQuery mobile Customizable
  8. 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. 9. Build in MobileSupportDemo
  10. 10. MobileMura Plugin Configurable mobile detection Mobile theme(s) Multiple templates support Mobile-specific customization
  11. 11. 2 .0MobileMura Plugin Configurable mobile detection Mobile theme(s) Multiple templates support Mobile-specific customization
  12. 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. 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. 14. MobileMura PluginDemo
  15. 15. Contact me! info@lagaffe.be www.lagaffe.be @lagaffe info@orangelark.be www.orangelark.be @orangelark
  16. 16. Mobile-Ready Websites MuraCon 2012 with Mura CMS Washington DC

×