So far we have set up our DNN skin to use Bootstrap, as well as create the basic scaffolding of our skin.

With the advent of the DDRMenu to DotNetNuke, we have had much more control over what is rendered by the menu. This has allowed for a much more semantic menu and custom styling for simple menus to mega menus. There are various ways to create the template that the DDR uses but we will be using the token based templating as it is very simple.

Creating a responsive DNN skin requires some upfront planning. Based on the complexity of your site’s design, this could be just a simple wireframe, or full design comps for mobile, tablet portrait and tablet landscape. As a matter of fact, if you are starting with a fresh design, it would be a good idea to think about designing your site with a mobile first design approach. If this doesn’t sound like fun to your graphic designer, I don’t think starting in Photoshop with mobile is required. I would start the wireframe process with mobile first, then start moving up in device size. This way the important content is thought of at the beginning and the mobile user won’t be treated like a 2nd class citizen.

Once you have your design, it’s time to start skinning!

I have been seeing quite a few references to Google talking about website speed lately. It seems as though Google is going to consider your websites speed in an effort to "make the web faster." (read article here) I like it.

I think there should be more of an emphasis on making the web more usable and speed is a major factor. This can seem like a challenge when it comes to DotNetNuke because so much of it is out of our hands (mostly because I am a designer and skinner, not a programmer).

Creating a responsive skin can seem like a large task to take on when you think about the fact that there are several views to create using the same content. Now, I typically have not been a big fan of using HTML grid systems as I have felt I am able to write a much more lean skin on my own. However, with the new requirements of having flexible skins for multiple devices, I have felt that it is better to use a tool that helps me to be able to achieve great skins with only a bit of overhead.

Bootstrap is a grid system that is technically a 960 grid with views for devices with smaller screens such as tablets and mobile phones as well as a view for larger screens. Bootstrap allows for true responsive (fluid) layout as well as adaptive (what I call step-down) layouts. I tend to like to use the adaptive layout as I feel it still gives me a bit of control on my layout for each targeted screen size.

I am a geek. One of my favorite things to do each year is to go hang out with a  bunch of other geeks and talk about a product that I use at work, DotNetNuke. But, DotNetNuke is much more than a product or tool, it’s also a community of great friends. Last weekend was Southern Fried DNN, an event that wrapped a day of hands-on training with the Day of DotNetNuke. The event was a blast as was all of the time away from the event which included dinners and party and just general hangout time in the hotel lobby. It was great to see some of my best friends and getting a chance to make new ones.