Skip to the content

Error! Your browser is IE 6.0, released in 2001. It is not secure and lacks today's features.
Upgrade to a modern browser. You'll be a happier and safer surfer.

Client login for Goldman Design Close

Previous Post Kevin’s Standards-Based Templates & Docs live on MSDN Next Post

Some ASP.NET 2.0 Standards-Based Web Page Templates I design and wrote design docs for a while ago are now live for download on MSDN. They are Section 508 conforming, standards-based design templates each with a white paper design doc that describes how the template was built, the thought processes, trade offs, and workarounds necessary to make them follow “web standards” and best practices for accessibility. Here’s the table of contents:

Download
Web Standards White Paper
asp-net-standards-templates-basic.jpg

Download
Web Standards White Paper
asp-net-standards-templates-simple.jpg

Download
Web Standards White Paper
asp-net-standards-templates-rounded.jpg

Download
Web Standards White Paper
asp-net-standards-templates-grid.jpg

Download
Web Standards White Paper
asp-net-standards-templates-fun.jpg

Here’s a glimpse of the white paper table of contents.

It’s a little lengthy, but we wanted to cover a lot of ground with these docs. Just pick a section at a time, thumb through it and … hopefully, pick up some nuggets on CSS or how to make web pages accessible for people with disabilities.

  1. About the Visual Studio Design Templates
  2. Table layouts versus DIV layouts
  3. Usability & Accessibility
    • Summary
    • Why read this section?
    • Many different kinds of browsers
    • Page titles
    • Alternative text and titles for graphics
    • Browser size and "above the fold"
    • Using relative font sizes
    • Making forms accessible
    • Making tables accessible
    • Acronyms and abbreviations
    • Breadcrumbs
    • Allow non-visual browsers to skip past repetitive navigation links
    • Section 508 conformance
      • What is Section 508?
      • Section 508 checklists
      • How this template conforms
      • How your code can conform
    • Web Content Accessibility Guidelines (WCAG)
    • How good usability helps optimize your site for search engines
    • Resources
      • "Bobby" can help test the usability of your site
      • The AIS Web Accessibility Toolbar for Internet Explorer can help test the usability of your site
  4. HTML Mark-Up
    • XHTML strict doctype
    • Why use the XHTML strict?
    • Adding the favicon.ico to your header
    • Keeping styles out of the HTML mark-up
    • Using DIVs for layout
    • Heading tags (used to build an outline, not to make fonts larger)
    • Forms
    • Showing data in tables
      • Summary
      • Table headings, table footers and table bodies (THEAD, TFOOT and TBODY)
      • Column groups (COLGROUP)
  5. Targeted browsers
  6. Cascading Style Sheets
    • Why use CSS
    • What is a CSS rule?
    • CSS selectors (classes, ID’s or HTML tags)
      • The difference between classes and IDs
      • IDs as CSS selectors
      • Classes as CSS selectors
      • Class and ID naming guidelines
    • Links & pseudo classes (LINK, HOVER, ACTIVE, VISITED)
    • CSS Shorthand
    • Heading tags
    • Form tags
    • Lists as menus (horizontal or vertical)
    • Specifying font families
    • Creating the layout with DIVs
      • What is a DIV?
      • How padding, margin and width work on DIVs
      • Floating DIVs
      • Using container DIVs and the CSS clear attribute
      • The 5 layout types included in the Microsoft Visual Studio Design Templates
      • How to create this template’s two column layout with DIVs and CSS
    • Background images
      • Summary
      • Include a background color along with the background image
      • Specifying the repeat value x, y or none
      • Specifying the horizontal position value right, left, center or amount
      • Specifying the vertical position top, center, bottom or amount
  7. Validating your pages
    • Summary
    • CSS validation
    • HTML validation
    • "Bobby" can help validate your site’s usability
  8. Aesthetics
    • Use of scale
    • Use of color
    • Fonts families
    • Details add polish
    • Making the favicon.ico file
    • A note on consistency
  9. Extending this Template
    • Changing the colors
    • Adding a bit map logo instead of the "site name" text
  10. Quick Tips and Tricks
  11. Web Links, References & Tools
    • Any specific Microsoft links to include?
    • HTML validation
    • CSS validation
    • Official Section 508 Web Site
    • The AIS accessibility toolbar for Internet Explorer

Leave a Comment