Contact

DotNetNuke Tips for Skinning, CSS, and Design

Ralph Williams Blog

Designing for DotNetNuke

Jul 22

Written by:
Friday, July 22, 2011 10:26 AM  RssIcon

I got the inspiration for this blog about 8 months ago from a Smashing Magazine article entitled, “Designing for Content Management Systems”. So, why write another blog but, specifically for DotNetNuke? Well, they did a great job on their post but, they were generic to just CMS’s in general, and we all know that DNN has some challenges of it’s own.

The main challenge that I have found to be when designing for DNN, is planning for unknown content. You just never know what’s going to happen once you hand the keys over to the client. So, a lot of my designing is actually trying to plan ahead for the many different amounts/content of what could be added to the site. This includes not just content panes, but also menu items. For some reason, once a client gets access to adding their own content, one of the first things they do is create new main menu items. Now, some of my designs have been very specific and the site structure has been discussed w/ the client and they actually understand that they need to leave the main menu items as is, but that’s not always the case.

So how do we actually design specifically for DotNetNuke? I am going to give a list of pointers below that can serve as things to keep in mind.

Keep it consistent. Keep it Simple.

I love consistency on a website! It sets up the site to be able to be quickly learned by the user. It sets an expectation. To me, it also means simplicity. Now, when I say simplicity, that doesn’t mean that your site has to be extremely basic. It can still be artistic and creative, but remember, DotNetNuke uses containers and content panes and any container can be used all over the page. So, keeping a from getting too complex of a design will allow for the flexibility that is needed for a CMS DNN. Use consistent colors, fonts, and layouts.

General Layout

A key thing to remember is, your design needs to be flexible. Wait, let me say that again, “Flexible”. Okay. You never know what your client is going to end up doing with a page; they may put one sentence on it, a super large image, or a ridiculous amount of text with little to no formatting. So, the best thing you can do is plan for that. How? Try different views of your design, some with a short amount of content and some with a large amount of content. Also, If you are creating columns, make sure that they will still look okay, if the content is not the same length. Experiment with what you wouldn’t do.

Navigation

Wow. Where do I start here? The owner of the site may add way too many pages to the top structure of the menu. Plan for more than what you expect. That’s not to say you have to go crazy, you still need to create some boundaries for the site owner. If the menu names are going to be quite long, go for a vertical navigation, if you think they will be concise, use a horizontal nav. If it looks like the site will have a large amount of pages, a mega-menu will probably work well for you, but don’t force a mega-menu where it’s not needed. Also, think of helping the user with side navigation for sibling/children navigation. And make use of the footer for some commonly used pages.

Skins and Content Panes

I am a minimalist when it comes to design and skinning. I feel there really isn’t a need to create tens of skin and container designs. This goes with my earlier point of consistency. I have been called in to work on a project that literally had at minimum 30 content panes! What a mess, and talk about poor performance! They explained it as having flexibility… That’s what other skins are for, and really there is no need to make layouts that go from 1 pane wide to 6 panes wide and everything in between. I typically go at most 3 wide with sometimes 4 wide in a mega footer (fat footer). I will typically create a home page design, a sub page design, and a full width design. In my opinion, creating a reverse of the sub page, especially if you have a side navigation, will just confuse the site visitor.

Containers

I have found there is little need for having more than 4 containers per design. Too many available containers will confuse the client while integrating their content and the user as they try to navigate the content. But, you have a footer or sidebar with a contrasting background color that just won’t work reusing the container from the body? Enter CSS specificity. Use CSS to override the container’s default styling of font colors and background colors to fit within the content pane that you are in. This takes the guess work out of which container to pick and just makes it automatic. Granted, there are cases where this might not work, but in nearly all cases it will. And it will make it much easier when adding new modules to a page.

Use the available tools of DNN to help the site owner.

One of my favorite improvements of DotNetNuke 6, among many, is the option to specify what formatting tools are available in the WYSIWYG editor. Customizing the RadEditor has always been possible, but it was always through editing an XML file. With this, you can remove many of the editing options that would allow the typical user to introduce elements that would make you beautiful site, well, let’s just say, no longer beautiful. Don’t think of it as removing functionality. Think of it as helping the site editor keep the site beautiful!

While designing for DotNetNuke can introduce some challenges, It really doesn’t have to be too hard. It allows for a design concept to be enforced while still allowing for flexibility. For so long my goal was to make my website look like it wasn’t a DotNetNuke website. I have been impressed at how far DotNetNuke site designs have come in the past 2 years, but we still can do so much better. Now, get out there and create some fantastic DotNetNuke designs!

24 comment(s) so far...


Gravatar

Re: Designing for DotNetNuke

Thank you Ralph! I didn't know that site. I've a collection of links for DNN skinning, but it's difficult to find actual informations short after a new major release.

By Stiär Biär on   Tuesday, August 16, 2011 8:17 AM
Gravatar

Re: Designing for DotNetNuke

Hello Ralph!! this is the first time i read your blog, and it´s really amazing!

Im a really dummy skinning and i want to know which are the best tools to create skins for DNN6.

I would really appreciate your help!!!

By Daniel on   Wednesday, January 18, 2012 10:50 AM
Gravatar

Re: Designing for DotNetNuke

Hi! I'm really interested in DotNetNuke Skinning, but I miss documentations. Do you know a guide for skins in DNN6?

By Stiär Biär on   Thursday, August 11, 2011 1:59 AM

Re: Designing for DotNetNuke

with leather pull bar design, the coins can be accessed without opening the wallet. wallet size: (length x height x width): 21cm x 11cmreplica louis vuitton wallele bag
# hermes bag replic

By TrackBack on   Friday, February 22, 2013 3:36 AM

aspirateur pas cher

nice homepage
# aspirateur pas cher

By TrackBack on   Tuesday, March 26, 2013 11:46 PM

woodworking

cool site
# woodworking

By TrackBack on   Wednesday, March 27, 2013 10:33 PM

the tao of badass

check this site out
# the tao of badass

By TrackBack on   Wednesday, April 03, 2013 10:39 PM

Re: Designing for DotNetNuke

The price for the 35cm Speedy is HK$10,000 (about US$1,300). I immediately put my name down on the list as less than 50 will hit HK stores when it's released early next Month so I guess this will be a hot item.
# louis vuitton outlet onlin

By TrackBack on   Tuesday, April 16, 2013 2:34 AM

louis vuitton outlet

i like big bags great for diaper bag (that way i don't have to carry 2)...neverfull gm is great also...i saw some people commenting on the prada fairy bag...
# louis vuitton outlet

By TrackBack on   Tuesday, April 16, 2013 2:35 AM

louis vuitton bags outlet

I have received so many great comments and the colors seem to go with everything. I especially love the way it opens up, you can see everything in your purse at one time.
# louis vuitton bags outlet

By TrackBack on   Tuesday, April 16, 2013 2:35 AM

louis vuitton handbags for sale

While we may not know how LV produces these canvases, the website says that it is hardy bags which you can lightly wipe to remove any trace of dirt.
# louis vuitton handbags for sale

By TrackBack on   Tuesday, April 16, 2013 2:35 AM

louis vuitton outlet store

I love LV and my husband thinks i'm insane but he doesn't obeject me in buying the lmtd edition ones (he has a harder time spending on the "regular" LVs)...
# louis vuitton outlet store

By TrackBack on   Tuesday, April 16, 2013 3:01 AM

Re: Designing for DotNetNuke

i like big bags great for diaper bag (that way i don't have to carry 2)...neverfull gm is great also...i saw some people commenting on the prada fairy bag...
# louis vuitton outle

By TrackBack on   Wednesday, April 17, 2013 10:29 PM

Re: Designing for DotNetNuke

First of all, any of the LV monogram is printed on hardy canvas, and not on something fragile as deer skin.
# louis vuitton bags outle

By TrackBack on   Wednesday, April 17, 2013 10:29 PM

jordan shoes for sale

Just my perspective. Python's are gorgeous..
# jordan shoes for sale

By TrackBack on   Sunday, April 21, 2013 7:57 AM

Re: Designing for DotNetNuke

although.) In light of that, we thought wed stock our weekly bag deals post with some rosy selections to make your day a little bit warmer.
# louis vuitton bags outle

By TrackBack on   Sunday, April 21, 2013 7:57 AM

louis vuitton online outlet

What's wrong with people today???
# louis vuitton online outlet

By TrackBack on   Sunday, April 21, 2013 7:57 AM

Re: Designing for DotNetNuke

with the start of college basketballs March Madness as well as the NBA playoffs on the horizon.
# authentic louis vuitton bag

By TrackBack on   Sunday, April 21, 2013 8:54 AM

Re: Designing for DotNetNuke

Thousands of non-indigenous pythons which can be now infesting and causing untold harm for the
# louis vuitton outlet stor

By TrackBack on   Sunday, April 21, 2013 8:55 AM

louis vuitton handbags outlet

All a deal because they are all so boring!Weve looked via the courtside seats of some of the countrys largest NBA teams to find
# louis vuitton handbags outlet

By TrackBack on   Sunday, April 21, 2013 8:55 AM

Re: Designing for DotNetNuke

The answer may be determined partly by the speed of efforts to tackle state monopolies and open the economy to more market forces.
# louis vuitton outlet onlin

By TrackBack on   Wednesday, April 24, 2013 12:39 PM

cheap louis vuitton bags

Regulators expect to continue to examine the matter in coming days to learn what led to the breakdown. SEC staff briefed the agency's new chairman, Mary Jo White, on the CBOE glitch, according to a person familiar with the matter.
# cheap louis vuitton bags

By TrackBack on   Saturday, April 27, 2013 12:03 PM

louis vuitton outlet store

Regulators expect to continue to examine the matter in coming days to learn what led to the breakdown. SEC staff briefed the agency's new chairman, Mary Jo White, on the CBOE glitch, according to a person familiar with the matter.
# louis vuitton outlet store

By TrackBack on   Saturday, April 27, 2013 1:50 PM
Gravatar

Re: Designing for DotNetNuke

Hi, I'm not aware of any skinning documentation for DNN6 specifically, but I do know that they are updating the wiki pretty regularly. You might want to check there to see if there is anything of use. www.dotnetnuke.com/Resources/Wiki/loc/allpages/Cat/Skinning.aspx

By Ralph Williams on   Thursday, August 11, 2011 8:46 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Send me a message.

Name:*
Email Address:*
Message:*
Security Code:
CAPTCHA
Enter the code shown above in the box below
* required Submit   Cancel