SwissChecklist

Checklist: Create a Mobile Site with DotNetNuke & jQuery Mobile

This checklist describes how to create a mobile website in DotNetNuke with the help of jQuery Mobile and the skinning package created by DotNetNuke Usergroup Switzerland.
  • Install, Apply and Customize "Skin-Template"

    Show Details Show Substeps Show Substeps Show Substeps
  • Download Skin/Container Package

    Show Details Show Substeps Show Substeps Show Substeps
    http://mobile.dnn.ch/DocumentationDownloads.aspx
  • Install Skin

    Show Details Show Substeps Show Substeps Show Substeps
    Install the Zip File with the Installation Wizard @ "Admin" > "Extensions"
  • Add new page called "m" (do not include in menu)

    Show Details Show Substeps Show Substeps Show Substeps
    Actually, you could also name it "mobile". We recommend using a short name because QR-codes are much smaller then.
  • Apply skin & container to this page

    Show Details Show Substeps Show Substeps Show Substeps
    page > settings > advances settings

    Page Skin: "Host: Mobile-Skin"
    Page Container: "Host: Mobile-Container"

    Note: You will have to set this skin on all subpages of your mobile page. This can easily be done wich the "Copy Skin to all subpages" function in DNN.
  • Configure mobile device redirection

    Show Details Show Substeps Show Substeps Show Substeps
  • Include the Mobile Redirect Skin Object within your skins that should redirect (within your "normal" skin file, not mobile skin)

    Show Details Show Substeps Show Substeps Show Substeps
    add this code below the register tags:
    (note: if your mobile page is not called "m", you have to adapt "MobileUrl")

    <%@ Register TagPrefix="ToSic" TagName="Mobile" Src="~/DesktopModules/ToSic_Mobile/Redirect.ascx" %>
    <ToSic:Mobile MobileUrl="/m.aspx" runat="server" />
  • If you visit your site with a mobile device (e.g. iPhone), you should now be redirected automatically to the mobile page

    Show Details Show Substeps Show Substeps Show Substeps
  • Add Content

    Show Details Show Substeps Show Substeps Show Substeps
  • Use this subchecklist

    Show Details Show Substeps Show Substeps Show Substeps
  • New Step

    Show Details Show Substeps Show Substeps Show Substeps
Use this Checklist

Preview/Print

Use

Change

Sort