SaaS CMS has officially launched! Learn more now.

Allan Thraen
Apr 1, 2011
(2 votes)

Mobile Pack for EPiServer CMS

c1I just started a new Open Source project on codeplex that shows just how easy it is to create a mobile web app with jQuery Mobile and EPiServer CMS. It’s a 1-size-fits-all set of templates that you can use to setup your own mobile web app in a matter of minutes – reusing a lot of content from your regular web site. I know we already have many happy customers using their CMS as the platform for various mobile sites and apps – but at the same time I figured this could be a great demo example (not to mention a place for me to become more familiar with HTML5 and jQuery Mobile).

It handles stuff like redirection, previewing, mobile functionality, etc:

  • MobilePack Mobile Site.This page type and template should always be the foundation of any mobile web app built with MobilePack. This is where you select the theme of your app, define contents of the start page, setup the footer menu and so on.
  • MobilePack Standard Page. This is the default mobile page. It will be loaded through AJAX into the web app - and it can display it's main body, an Xform - or any of the MobilePack dynamic Contents controls you put in it. You can also set it up to "Fetch Data from Other Page in EPiServer CMS" in order to reuse content - or simply use the Dynamic Content element that lets you display individual properties from other regular pages on the site.
  • Link handling. You can use Dynamic Content to make buttons that will AJAX load mobile pages - or you can insert regular links to the rest of the site that will load in the usual way.
  • Image Resizing. Any images in your content with a width that's greater than the device width will automatically be rescaled (client-side for now) to fit the device resolution.
  • Swipe navigation.When reading a mobile page, you can swipe left or right to move between sibling pages.
  • MobilePack ListView.If you insert the Dynamic content element called "MobilePack ListView" you'll get a nice looking mobile menu that list all child-pages.
  • MobilePack Button.Will let you insert a button that opens up any page - including ajax loading of mobile pages - either loading the page in a dialog or regularly.
  • MobilePack Phone Button.This is a shortcut button you can set up to let people automatically dial a number when clicking the button.
  • Preview.When you are previewing the mobile site in edit-mode you can select which resolution to preview it in - in order to get an idea of how it will look on a mobile device. There are currently some problems with this functionality in Internet Explorer - Firefox is recommended
  • MobilePack Site Connect.You can easily expose any part of your existing web site on your mobile app - just setup the "site connect" page and define the starting point.
  • Browser Criterion. By using the new Browser Criterion, you can use the new personalization feature, Visitor Groups, in CMS 6 R2 to identify visitors coming from mobile browsers.
  • Visitor Group Redirection Rules. Using personalization you can setup redirection rules - to for instance redirect mobile users from your regular web site to the mobile web app.
  • So far it’s just a small alpha release – but with your help, perhaps we can take it further!

    Check out

    Apr 01, 2011


    Apr 1, 2011 05:31 PM


    Apr 2, 2011 02:27 AM

    This is great! Thanks!

    Apr 5, 2011 06:32 PM

    Getting some great results, really quickly using this. I'm hopeful the client will go for this as a solution!

    Jonathan Sewell
    Jonathan Sewell Jun 22, 2011 03:48 PM

    I can't seem to get the redirection to work. I've set up the start page of my site to redirect the mobile visitors group to the mobile home page, but it's not playing ball. I'm using and Firefox user agent switcher to try emulate an iPhone. How did you get the redirect to work with the emulator? Jul 13, 2011 12:47 PM

    I installed the Mobile Pack, but it is showing a lot of errors regarding to namespaces......anyone face this type of problem? Jul 14, 2011 06:51 AM

    Hi Jonathan,

    If i copied all the files in MobielPack to the root of my website.and tried to open DefaultDemo.aspx to view it is is displaying this type of error
    Could not load type 'EPiServer.Templates.DefaultDemo'
    Can u figure it out ?

    Chris Klug
    Chris Klug Aug 24, 2011 04:31 PM

    The redirect doesn't work for iPhone for a pretty simple reason. The enum BrowserType has the iFruit entries with capital i, that is IPhone, IPod, but the actual user-agent uses lower case as far as I know...

    Switching to capital i in my user-agent gets the redirect to work...

    Allan, sorry for being a pain in the "you know what", I know you thought you got rid of me, but could you please update...

    Please login to comment.
    Latest blogs
    Frontend Hosting for SaaS CMS Solutions

    Introduction Now that CMS SaaS Core has gone into general availability, it is a good time to start discussing where to host the head. SaaS Core is...

    Minesh Shah (Netcel) | Jul 20, 2024

    Optimizely London Dev Meetup 11th July 2024

    On 11th July 2024 in London Niteco and Netcel along with Optimizely ran the London Developer meetup. There was an great agenda of talks that we put...

    Scott Reed | Jul 19, 2024

    Optimizely release SaaS CMS

    Discover the future of content management with Optimizely SaaS CMS. Enjoy seamless updates, reduced costs, and enhanced flexibility for developers...

    Andy Blyth | Jul 17, 2024 | Syndicated blog

    A day in the life of an Optimizely Developer - London Meetup 2024

    Hello and welcome to another instalment of A Day In The Life Of An Optimizely Developer. Last night (11th July 2024) I was excited to have attended...

    Graham Carr | Jul 16, 2024