Mobile sites on DotNetNuke

With current growth of smart mobile and tablet market you can not ignore the fact that your site should be mobile ready. Any business or organisation has to take into consideration how their website will look on mobile devices. When developing in DotNetNuke there are few different approaches you can take.

Apart from creating mobile specific site located on its own url (for example mobile.mysite.com or mysite.com/mobile) maybe you should consider using the same portal and content for mobile devices as for desktops, just change method of delivery depending on the device used to access the site. The advantage of this approach is that you only have to maintain one site / portal.

Here are available options and their advantages.

1. Create a mobile specific skin

You can create a mobile specific skin and implement it in a sub portal or just on mobile ready pages. This approach allows you full control over mobile content and look and feel. You could use a script or one of the available modules, for example EasyDNNmobileRedirect to redirect users to a specific site or url/pages based on the device they are using. The only drawback however is that you will have to maintain separate content for mobile devices.

2. Change the look and feel of the site using mobile style sheet

This can be achieved by loading a specific style sheet for mobile devices. The site would use the same skin and content, the layout would be controlled with CSS classes targeting specific devices. Most of mobile ready skins available on snowcovered use this method. This approach works very well for simple sites, with similar content across all pages and not too heavy page sizes. The drawback however is that all the html is loaded and there is no way of controlling what it includes except of hiding it from the display via CSS. This way the page may still have quite a large size as all html content is still there, including all controls, modules etc.

>> See an example of the static DNN page with sample content
>> Here is the same page with a mobile CSS applied

3. Use MobiNuke module

MobiNuke allows you to change your skin depending on the device used so you have full control over the layout and look and feel. It gives you ability of selecting the content you do want to display on the pc and or the mobile. So you can have on the same page content that is shown on all devices and the content that is pc or mobile specific. This gives you an advantage as you can use the same content for all devices without having to maintain two different data sources or portals. The module gives a user ability to switch between the two versions as well.

>>See an example of the static DNN page with sample content
>> Here is the same page with a mobile skin implemented using MobiNuke and viewed using the built in emulator.