DotNetNuke tutorials, tips and tricks

Thursday, January 19, 2006

DotNetNuke Skinning and CSS

I'm beginning a series of experiments regarding DNN skins and using CSS for the layout of the skins.

The majority of DNN skins that you see are table based layouts, there are still only a few sites out there that have successfully implemented CSS layouts. Whereas outside of the DNN world, most designs now implement CSS for the layout.

Regarding the DNN CSS layouts I have looked at, quite a few can be easily broken and do not implement techniques for allowing the resizing of text in IE.

There are several key elements that I want to implement, experiment and find solutions through the use of CSS layouts.

1) Minimal source code
2) Much more Search Engine friendly design - enabling the important content to be placed as early as possible in the source code
3) Text which can be displayed in various sizes within IE and all other browsers
3) Fluid and flexible layouts which automatically expand and contract depending on the content - especially dependant on the size of the text - Many current DNN CSS layouts break at this point
4) Experiment with containers - or completely dismissing the use of containers and finding other solutions for layout and content presentation
5) If images are removed can still operate correctly
6) SOLPart menu - find another solution to minimise the source code generated and to create more search engine friendly links

I will add more elements to experiment with as I progress, but the basic idea as you can see here is to completely strip down the source code as much as possible while creating an interesting design and a search engine friendly, broswer compatible skin.

Not much to ask for?!

On Monday I was chatting with Nina Miers for 3 hours on Messenger which was interesting and I was talking about these current experiments that I am working on and her comment was, "so you are going to create a clear white page!" and "your an optimist then!"

I have to agree, the list may sound like the impossible and I may be in a better position if I present a clear .htm file as my completed minimal skin, but you've got to try these things eh?

Add your comments below, especially if you have made any experiments with CSS yourself.

If you are looking for tutorials regarding DotNetNuke and skinning, here are 16 videos to get you started: Skinning Tutorial


0 Comments:

Post a Comment

<< Home