Your SlideShare is downloading. ×
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Mobile ready websites with Mura CMS (MuraCon 2012)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile ready websites with Mura CMS (MuraCon 2012)

1,054

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,054
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

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

    ×