In this tutorial we walk you through step by step how to create a responsive HTML5 skin for DotNetNuke 6.x
This is an intermediate level tutorial and you will be required to have some skinning experience working with skin ascx files directly.
A responsive skin will adapt itself to any screen resolution, this means we only have to create one skin to cater for all the different devices and screen sizes being used to access our dotnetnuke site.
This tutorial will give you an excellent template to begin creating your own HTML5 responsive skins.
Now is the time to learn how to use the new HTML5 tags within your skin designs. Unfortunately some older browsers are not equipped to handle most of these new HTML5 elements.
To create HTML5 layouts that will work in all browsers requires a lot of work but fortunately there is a fully featured HTML5 framework available called the HTML5 Boilerplate. The HTML 5 boilerplate isn't just to help us safely use the new HTML5 elements, it will also provide us with a safety net when we'd like to take advantage of other modern web technologies such as CSS3.
This video contains:
- Creating a basic HTML5 container
- How to reset the DotNetNuke default set font sizes
- Setting default DNN styles to use variable font sizes
- Splitting our HTML5 elements into three different containers
- Creating our header, section and footer containers