Views: 10239
Number of votes: 2
Average rating:

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 http://mobilepack.codeplex.com/

    Apr 01, 2011

    Jeff.Wallace
    (By Jeff.Wallace, 4/1/2011 7:31:10 PM)

    Awesome.

    sebastiaan.parree
    (By sebastiaan.parree, 4/2/2011 4:27:31 AM)

    This is great! Thanks!

    David.Knipe
    (By David.Knipe, 4/5/2011 8:32:35 PM)

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

    Jonathan Sewell
    (By Jonathan Sewell, 6/22/2011 5:48:05 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 http://testiphone.com and Firefox user agent switcher to try emulate an iPhone. How did you get the redirect to work with the emulator?

    Murali Krishna
    (By Murali Krishna, 7/13/2011 2:47:01 PM)

    Hi,
    I installed the Mobile Pack, but it is showing a lot of errors regarding to namespaces......anyone face this type of problem?

    Murali Krishna
    (By Murali Krishna, 7/14/2011 8:51:32 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 browser......it is displaying this type of error
    [
    Could not load type 'EPiServer.Templates.DefaultDemo'
    ]
    Can u figure it out ?

    Chris Klug
    (By Chris Klug, 8/24/2011 6:31:19 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.