I was tasked with updating an older DNN website skin to make the website responsive, for mobile viewing.
Wishing to turn an old DNN website responsive, what actions are to be considered?
Shown below is the website as it was viewed on a mobile phone.
Having recently created a number of responsive themes I had worked on this DNN skin ensuring that tables were re-created as floating DIVs. Ensuring that content panes would move to the correct new location and resize appropriately. Images were considered regards their size. And forms were configured to transform the side-by-side label and field input into label above input.
Shown below is the responsive version of the website, with the top navigation buttons centred and the right pane navigation moved below, allowing the content to be full width,
For modern compatibility I chose to set the DocType of the skin to HTML.
Whilst making the changes, I had tested using the common browsers on a desktop VM.
However, the viewed page at this point will still be a desktop view, as shown in the first image at the top of the page. The viewport needs to be configured to ensure that the correct response was shown on mobile devices.
DocType
DotNetNuke allows the DocType of individual skin options to be set by incorporating an associated DocType file. This will override the fall-back configured under host settings.
In the skin directory associate with each theme .ascx file a DocType file, eg:
home.ascx
home.css
home.doctype.xml
Within the doctype file add a single line to make the DocType definition, for example for a DocType of HTML:
<SkinDocType><![CDATA[<!DOCTYPE html>]]></SkinDocType>
Viewport
To configure the viewport a meta tag is added to the head of the website. However, DotNetNuke skins don’t directly allow access to the head section of the HTML code.
One option is to add a control which will write the relevant information to the HEAD.
The installed version of DotNetNuke was 7.4.1. I chose to use its Site Settings configuration option to add the Meta tag.
Navigate to the Advanced Settings tab, found on the Admin, Site Settings page.
Shown below is the Page Output Settings section expanded to show the HTML Page Header Tags field.
Add the viwport meta tag to the bottom of the list and click on update.
<meta name=”viewport” content=”width=device-width, user-scalable=yes”>
With this viewport setting in place the website could be viewed correctly on mobile devices.
