By Lee Sykes
January & February 2006
Continuing our series on How to build a DotNetNuke® website, we are now going to look at the skin design considerations for Vortex Music Productions.
Ensure the overall file size of the skin is as small as possible
- Use a minimum number of images, fully optimized
- Ideally create the skin with CSS (Cascading Style Sheets) rather than tables
Ensure the skin is Search Engine friendly
- Main content to the top of the page when viewing the source code, menu to the end of the page (this also applies for accessibility and compatibility with screen readers)
- Remove any code that is not necessary
- Ensure that each page contains text links to other pages within the website, in order to allow the search engines to easily index all of the website pages
To prevent the creation of duplicate content
- The register, login, terms and privacy statement links cause duplicate content, we need to apply design techniques to ensure they do not create duplicate content
To ensure the skin is compatible with the various browsers
- Test the skin with the various browsers that are available
To ensure the skin is accessible
- Viewable in various screen resolutions: 800x600 minimum
- Include alt text on all content images, but not on table backgrounds, borders, images of rounded corners and other meaningless graphics - http://www.joeclark.org/book/sashay/serialization/Chapter06.html for a description on alt text use
- Text sizes in relative sizes rather than fixed size
- Further information:
Layout of content
- Which areas within the page do we wish to add content?
- Do we need to create multiple layout possibilities dependant on the page? Ie. the need to create several skins
- Content and structure
- Layout - horizontal / vertical?
Colour scheme and fonts for the skin
Container design for displaying content
- How should we present the main content?
- Should we create different containers for different types of content?
This article also raises some interesting thoughts and provides further resources for web design considerations: Become a Better Web Standards Developer
Considering all of these skin design issues, let’s create a template design for our skin and then from the template design we will create a skin which addresses each of the issues.
Part 3 - Creating a skin template