Cuong Dang, Engage Software
Bridging the Gap
Designers and Developers
Session Code: DSD202

TOPICS
• Background: The Skinning Engine
• DotNetNuke Standards and Web Standards
• Usability Principles and DotNetNuke

Cuong Dang
EDUCATION B.S. Marketing and Management
Maryville University of St. Louis
EXPERTISE • DotNetNuke Skinning
• UX and UI Design
• Online Branding and Marketing
HIGHTLIGHTS Wrox Author
Wrox Blox, DotNetNuke and Web Standards
Lead Skinning Instructor
Engage Software, Official DotNetNuke Training Provider
Featured Speaker
OpenForce, Tulsa TechFest, User Group Meeting
Technical Reviewer (PACKT Publishing Co.)
DotNetNuke Skinning Tutorial book

Background
(tokens, skin objects and panes)

Page Processing
(default.aspx)

CSS Precedence
(Why is it important?)

1. module
2. default
3. skin
4. container
5. portal
6. inline

1. module (/desktopmodules/[module]/module.css)
2. default (/portals/_default/default.css)
3. skin (/portals/[portalID]/skins/[skin]/skin.css)
4. container (/portals/[portalID]/containers/[container]/container.css)
5. portal (/portals/[portalID]/portal.css)
6. inline (page level)

CSS Approach
(reducing file size and speed up development process)

(standard CSS selectors for the framework)

DotNetNuke CSS cheat sheet
(default.css)

Headings
(.Head, .SubHead, .SubSubHead)

Text
(.Normal, .NormalBold,
.NormalDisabled, .NormalTextBox)

User Message
(.NormalRed, .Help)

Links
(.SkinObject, .SelectedTab)

Buttons
(.CommandButton, .StandardButton)

Navigations
(SolPartMenu and dnnMENU)

The Anatomy of a SolPartMenu

The Anatomy of a dnnMENU

Data Grids
(.DataGrid_Header, .DataGrid_Footer, .DataGrid_Item,
.DataGrid_SelectedItem, .DataGrid_AlternatingItem)

The Benefits

Standardization!

(XHTML and semantic markup)

Content vs. Presentation
(style should be separated from markup)

XHTML
(stricter coding technique)

• Use lower-case
• Elements’ value must be in quotes
• Properly open and close all elements
(including self-closing elements)
• img, br, hr
• Eliminate deprecated elements
• font, align

Semantic Markup
(what is it?)

Headings
h1, h2, h3, h4, h5, h6

Paragraph and line break
p and br

Lists
ul, ol, dl

Ordered list (ol)

Ordered list (ol)

Unordered list (ul)

Unordered list (ul)

Definition list (dl)

Definition list (dl)

Emphasis
i vs. em
b vs. strong

The Benefits

Accommodating larger audiences
(Cross-platform)

Cross-Platform (the near future)

Search Engine Friendly

Easier to Maintain and Update
(Cleaner markup increases productivity)

Performance Optimized
(Less code, faster page load)

SEO Impact
(to DIV or not to DIV)

Front-end vs. Back-end
(to DIV or not to DIV)

Why should you care?

DotNetNuke Standards
Meets
Web Standards

HOW?

INTUITIVE

Headings

.Head = h1
.SubHead = h2
.SubSubHead = h3

.Head = h1
.SubHead = h2
.SubSubHead = h3

.SubHead = h2

What are the recommended
standards?

Modules or Forms?
(and what does it mean to end-user?)

Re-inventing the wheel?

International Travel

User message
(error, warning, success, help)

Universal Elements

Labels
alignment

Left-aligned

Right-aligned

Top-aligned

Button and Link
primary vs. secondary action

Help Text

Help Text

Global Navigation
(task-oriented)

Final Thoughts
• UX Matters
• Flexibility/Usability Tradeoff
• Usability Challenge: Scalability

UX Matters
(what it IS and what it ISN’T?)

NOT ONLY about the LOOK

It’s about FUNCTION

How the User FEELS

Flexibility/Usability Tradeoff
(Ever heard of consumer-centric?)

Windows Media
Center Remote

Apple Remote

Wii Console Remote

Flexibility/Usability Tradeoff
(Module development and consumer-centric)

The 80/20 Approach

Don’t Guess. Listen!

WRAP UP
• Background: The Skinning Engine
• DotNetNuke Standards meets Web Standards
• Usability Principles and DotNetNuke

Cuong Dang
Marketing Creative Director
Company: Engage Software
Location: 11811 Manchester Road
St. Louis, MO 63131
Phone: (314) 966-4000
E-mail: cdang@engagesoftware.com
Online: www.engagesoftware.com
www.cuongdang.net