Mobile ready websites with Mura CMS (MuraCon 2012)

1,452 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,452
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \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
  • 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

    ×