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
    Vulnerability in EPiServer.GoogleAnalytics v3 and v4

    Introduction A potential security vulnerability was detected for Optimizely Google Analytics addon (including EPiServer.GoogleAnalytics and...

    Bien Nguyen | Sep 20, 2023

    Overriding Optimizely’s Content Recommendations Block to Implement Custom Recommendations

    Introduction The Content Recommendations add-on for Optimizely CMS dynamically recommends content from your site tailored to the interests of each...

    abritt | Sep 13, 2023 | Syndicated blog

    Developer contest! Install the AI Assistant and Win Bose QC45 Headphones!

    We are thrilled to announce a developer contest where you have the chance to win a pair of Bose Headphones. The goal is to be the first developer t...

    Luc Gosso (MVP) | Sep 7, 2023 | Syndicated blog

    Send Optimizely notifications with SendGrid API, not SMTP

    If your Optimizely site already sends transaction emails through an email platform API, why not do the same with Optimizely notification emails?

    Stefan Holm Olsen | Sep 6, 2023 | Syndicated blog

    Optimizely Configured Commerce Custom POST API

    Introduction When creating custom API controllers for an Optimizely B2B project it’s possible you’ll want to create POST calls. Following the...

    Dylan Barter | Sep 6, 2023

    Using Google’s structured data to improve your SEO in Optimizely's B2B Configured Commerce

    Introduction Following proper markup standards for search engine optimization is imperative for the success of every website. While Optimizely B2B’...

    Dylan Barter | Sep 6, 2023