With Lesia Design, I recently launched Christianson & Company at http://ccevent.com/. I'm really proud of not only the design but some of the technical aspects to it. It even got a little attention on Twitter in the DNN community.

Will had a grand idea so I've decided to write a little bit about some of my methods for making beautiful DNN websites.

The Basics

Employ a web designer.

This one is really obvious but the most important. A beautiful design will inform the technical aspects and push your skills. Being a front-end developer and working with designers regularly, what I produce is constantly being reviewed by the designer to make sure her vision is executed well. I emphasize web because I think it's extremely important to have a designer that really understands how things play out on the web. Work with somebody who knows that every image has a filesize and that the website will be viewed on many different devices so it needs to be flexible.

Build your HTML, CSS, and JS locally first.

Now that you have a great looking PSD, build the designs locally and don't even think about DNN yet. Perfect the front-end offline before you create a DNN skin package.

Turn off Copyright Credits.

It's a small one but I still think it's important. This setting can be found under the Host: Host Settings page and it removes the credits in the source.

Use DnnJsInclude and DnnCSSInclude.

From a technical perspective, this is extremely important. If you don't load your resources with the Client Resource Manager, then you won't fully benefit from the composite and minification settings. Smaller file size, less HTTP requests, and simpler code in your skins are great reasons. Ever open up the source of a WordPress website lately? It's a nightmare filled with tons of CSS classes and WAY too many JS and CSS files loading.

Enable Composite Files and Minification (at the end)

It's a simple setting and very self explanatory. You can find this setting in the Host: Host Settings as well. Do this at the end so you don't have to constantly clear cache if you're still working on the skin.

Advanced Techniques

Use StyleHelper.

Every single website that I develop uses this module. It's an invaluable tool. Download it from http://stylehelper.codeplex.com/. One of the best tricks with this module is removing the default.css stylesheet when it's not needed. It will always vary depending on your needs, but for many of the websites I build, the only people who need default.css are administrators who edit the website. Here's the code that I typically use:

<fortyfingers:STYLEHELPER ID="STYLEHELPERBODYCLASS" runat="server" AddBodyClass="True" /> 
<fortyfingers:STYLEHELPER ID="REMOVEPORTALCSS" runat="server" RemoveCssFile="portal.css" IfUserMode="None,View" /> 
<fortyfingers:STYLEHELPER ID="REMOVEDEFAULTCSS" runat="server" RemoveCssFile="default.css" IfUrl="!Login,!Register,!UserProfile" IfUserMode="None" />

Use 2Sexy Content.

There is a bit of a learning curve to 2Sexy Content but you won't regret it. This module basically empowers me to create fancy modules using any design that I want. Take the homepage slider on Christianson and Company for example. I could have bought one of the many image sliders on the DNN store. But that would mean paying for a module license and then having to use whatever javascript/css/images they use and being limited to how I display the images. The design that I was given was really simple though. So instead, I created my own bxSlider template and content type inside 2SexyContent. Now I have a slider that look and works great but I also have complete control over. Another example is the staff listing at http://ccevent.com/About-Us.


I hope this little post helps you create more beautiful DNN websites. If I had to end it on a note, I would say this: Get a great web designer - the rest will follow.

 Let me know if you have any questions by tweeting @ajplopez. You can always send me an email, too.


Aaron Aaron Lopez wrote this on October 30, 2014