Successfully reported this slideshow.
Your SlideShare is downloading. ×

Mobile ready websites with Mura CMS (MuraCon 2012)

Ad

Mobile-Ready Websites   MuraCon 2012
       with Mura CMS    Washington DC

Ad

About me

• Guust Nieuwenhuis

• Analyst Programmer at Orange Lark

• Adobe Community Professional

• CFUG Belgium co-mana...

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
MageBridge Mobile
MageBridge Mobile
Loading in …3
×

Check these out next

1 of 16 Ad
1 of 16 Ad
Advertisement

More Related Content

Advertisement

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 Design Demo
  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 Mobile Support Demo
  10. 10. MobileMura Plugin Configurable mobile detection Mobile theme(s) Multiple templates support Mobile-specific customization
  11. 11. 2 .0 MobileMura 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 Plugin Demo
  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

Editor's Notes

  • \n
  • \n
  • Chapters:\n- Responsive Design\n- Build in Mobile Support\n- MobileMura Plugin\n
  • http://mediaqueri.es/\n
  • http://stuffandnonsense.co.uk/projects/320andup/\nhttp://twitter.github.com/bootstrap/\n
  • Demo 1: media queries (color)\nDemo 2: media queries & fluid grid (columns)\n
  • \n
  • \n
  • Demo 3: interface\nDemo 4: customization\nhttp://www.jqmgallery.com/\n
  • \n
  • \n
  • \n
  • Demo 5: mura build in\nDemo 6: mobileMura build in\nDemo 7: custom\n
  • \n
  • \n

×