Designing the DotNetNuke Skinning Toolkit
Over the next few blog posts I'm going to discuss my approach to how I created the skinning toolkit skin.
The main brief for the skin was to:
The skin brought in a few challenges - the main one was to allow a fluid design while allowing banner advertisements which I will detail later.
First of all lets look at the order of the source code within the skin.
Because we are creating a CSS layout skin, we can change the order of the source code and then place the actual content within the website page wherever we please through using CSS.
To further explain, the objective is to place the most important content as high as possible within your source code and the least important content as further down in the source code as possible. This is because the search engines tend to just index the first section of your website pages. - So if the top section of your source code is filled with banners, login links, menu information etc. it may not index all of your main text content - which is the most important part of your page!
So, for the DotNetNuke skinning toolkit skin the order of the source code is as follows:
So the main content is as high in the source code as possible and the less important content is placed underneath.
In my own skins you will also notice that I place the control panel at the bottom of the skin so that when I am viewing the skin in preview mode it looks like the actual site rather than still having the admin control panel appearing at the top.
In the next post I will discuss how I positioned the various elements on the page ...
* * * * * * * * * *
DNN Creative Magazine provides DotNetNuke tutorials, articles, reviews all for the DotNetNuke web designer. An issue is released each month. Stats: 127 Videos & 5 MP3 Interviews
The main brief for the skin was to:
- create a CSS based skin (for smaller page sizes, accessibility and better search engine results)
- allow advertisements to be displayed (a 468x60 banner and a 600x120 skyscraper banner)
- skin must be viewable in 800x600 as a minimum and be fluid (ie. it stretches to fit the monitor resolution)
- Easy navigation - there is a lot of content under several sub-categories
The skin brought in a few challenges - the main one was to allow a fluid design while allowing banner advertisements which I will detail later.
First of all lets look at the order of the source code within the skin.
Because we are creating a CSS layout skin, we can change the order of the source code and then place the actual content within the website page wherever we please through using CSS.
To further explain, the objective is to place the most important content as high as possible within your source code and the least important content as further down in the source code as possible. This is because the search engines tend to just index the first section of your website pages. - So if the top section of your source code is filled with banners, login links, menu information etc. it may not index all of your main text content - which is the most important part of your page!
So, for the DotNetNuke skinning toolkit skin the order of the source code is as follows:
- Logo / search
- Main Content
- Menu Links
- Right Banner
- Footer content (not used, but it allows me to add further content across the entire width of the page)
- Footer (Copyright, Terms etc.)
- Login Links
- Top Banner
- Admin Control Panel
So the main content is as high in the source code as possible and the less important content is placed underneath.
In my own skins you will also notice that I place the control panel at the bottom of the skin so that when I am viewing the skin in preview mode it looks like the actual site rather than still having the admin control panel appearing at the top.
In the next post I will discuss how I positioned the various elements on the page ...
* * * * * * * * * *
DNN Creative Magazine provides DotNetNuke tutorials, articles, reviews all for the DotNetNuke web designer. An issue is released each month. Stats: 127 Videos & 5 MP3 Interviews
posted by Lee Sykes at
9:31 am
0 Comments:
Post a Comment
<< Home