DNN Guide Best Responsive Skins for Mobile Devices

Clarity eCommerce | The eCommerce Platform to Scale and Grow Your Business
What to look for in a responsive dnn skin for mobile devices

Selecting the Best Theme for Your Users

DotNetNuke (DNN) skin is the perfect option when looking to run your responsive website faster. DNN is specially designed to enhance flexibility and expand the existing platform with the developer’s methodology and preferred tools.

Utilization DNN responsive skin rests in updating an outdated website; making it accessible for mobile viewing. In this article, we will discuss DNN responsive website skins, its creation and frameworks. The following are a list of basic responsive web design that is compatible with your mobile device;

Adapt Response Skin

This type of skins consists of a simple package that is adaptable across mobile devices, desktops amongst others. Its features include;
• Lightbox pop up
• HTML slider
• HTML gallery

This skin serves eCommerce sites effectively through integration involving social groups. It is also a preferred option in a responsive website (also known as Responsive Mobile Website) that is highly dependent on social media.

Although you have options of different skins to use for your responsive web design, you may opt for the development of a skin that will meet your every need across various platforms.

Lotus Premium

Prevent website hacks by scanning for ASP and PHP. Some website backups are already hacked or contain a virus that can negatively affect your DNN upgrade. Use your antivirus software to carry out Scanning of the file system. Make sure to overwrite core files with differences before proceeding. An important tip you must not forget is: Don’t tamper with core code files and never make any form of core code changes

Smart Skin

This type of skins package grants mobile devices a grid responsive layout. It has a catalogue containing;
• Total of Three layouts
• Fifteen colour options

You have the choice to customize the skin to your liking. This skin has a unique characteristic; which is an HTML5 slideshow crafted to scroll through products, photos amongst others. If you are in search of a DNN skin for a responsive mobile website, this is a smart place to start as it is also compatible with mobile devices.

Creating or Converting a Skin into Your Own Responisive Skin

DNN Responsive Skin Creation

If you want to change an old DNN website responsive to update it, here are the actions you must follow

  • Ensure tables are recreated in the form of floating DIVs; this makes sure content panes are moved to the appropriate site and resized.
  • Check each image in terms of their size
  • Configure forms to bring about a transformation of the side-by-side label and input field into the label that exists above input.

If you aim to get modern compatibility, I suggest you opt for DocType of the skin to HTML. Whilst you implement these changes, you can proceed to take the following steps;

  • On the desktop VM, run a test using the frequently used browsers.
  • Configure the viewport to make sure the response is compatible with mobile devices. Before this step, viewing of the page will be in a desktop format.

Setting DocType to HTML: DNN incorporates associated DocType file; thus setting up the DocType of individual skin options. Fall-back configuration under host settings gets overridden. Each theme (like .ascx file, DocType file) associates with skin directory associates; e.g.

  • Home.ascx
  • Home.doctype.xml
  • Home.css

Next, you will add one line in the DocType file to ensure definition of DocType. A typical example of this is, <SkinDocType><![CDATA[<!DOCTYPE html>]]></SkinDocType>.

Viewport Configuration: Configuration of viewpoint involves adding a meta tag to the website head. You should be aware that DNN skins do not allow direct access to the HTML code head section. You can get around this by addition of control that will inscribe important information to the head.

Taking note of your installed DNN, click on “Site Settings configuration” then select “Add Meta Tag”. Navigate in the “Admin” of the “Site settings” page to find the “Advanced Settings” option, Site Settings page.

why foundation should be your choice for a responsive framework

Foundation Responsive Design Framework

DNN skin creation is quite similar to that of a module. Utilization of any responsive mobile website framework you prefer will do the job, even if you decide to develop a personal grid system. Several responsive website design frameworks exist like the popular Bootstrap and ZURB Foundation.

The reason why foundation should be your choice for a responsive framework is due to the following;

  • Its grid system is easy to set up. For this main reason, you are allowed to align sections on various devices.
  • Its use and customization are impeccable. There are 21 colours present in DNNFoundation skin, which makes it easier to change the colour menu item than Bootstrap.
  • It has a Semantic framework, allowing the creation of DNN foundation skin quickly. It also offers knowledge for how to incorporate grids in all devices.
  • The site you create will appear excellent on a wide array of devices, from smartphones to desktops.

If you are a frequent user of Bootstrap, maybe it’s time to take a break. The dynamic nature of the web is also a strong prompt to use foundation. Native apps have not been spared during the recent development of the web recently.


We Hope Our Guide Helped!

Categorically, there is no particular responsive website framework labelled the ultimate best. All frameworks have their pros and cons. Bear in mind that although every framework is unique, some consists of components that make it better than others. Take, for example, Bootstrap is preferred by some people due to its existing reputation. At the same time, others overlook popularity and choose foundation due to its user-friendly nature. It’s a matter of personal preference. You should explore different frameworks while skinning to discover which best soots your style.

Bootstrap is only one of the many frameworks out there. Here are a few frameworks I have come across that I consider noteworthy. All the frameworks mentioned below can be adapted to utilize for the creation of DNN skins.

Clarity Ventures DNN Experts

Other DNN Articles & Resources

Request a Quote
Please feel free to send any associated files to us at:
[email protected]
Privacy Statement | Terms of Use
Click anywhere outside this form to close.
Request a Demo
Please feel free to send any associated files to us at:
[email protected]
Privacy Statement | Terms of Use
Click anywhere outside this form to close.
Ask an Expert
Please feel free to send any associated files to us at:
[email protected]
Privacy Statement | Terms of Use
Click anywhere outside this form to close.
Please feel free to send any associated files to us at:
[email protected]
Privacy Statement | Terms of Use
Click anywhere outside this form to close.