Skin Design Considerations - part 2

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.

Main Objectives:

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
• Minimise any Javascript surrounding links, such as in the links module
• 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:
  • http://www.joeclark.org/book/sashay/serialization/
  • http://www.w3.org/WAI/intro/accessibility.php

Further Considerations

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

Menu

• Content and structure
• Colours
• Layout - horizontal / vertical?

Colour scheme and fonts for the skin

• Which colours will be suitable to complement the logo?
• Which colours will be easy on the eye and colour-blind friendly?
• http://www.joeclark.org/book/sashay/serialization/Chapter09.html

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

---