News

I’m designing a WIKI UI and look and feel with the Microsoft ASP.NET group. The WIKI will showcase Microsoft’s new “Atlas” framework.

ASP.NET “Atlas” is a package of new Web development technologies that integrates an extensive set of client script libraries with the rich, server-based development platform of ASP.NET 2.0. That was a mouth full. More simply, its AJAX plus ASP.NET 2.0. Cool combo! Download the ATLAS bits for free.

Goal Centrix (based in Phoenix, my home town) has a new web app that needs a UI overhaul. I’ll be designing the new “detail page” look and feel and creating the tabless Section 508 conforming XHTML mark-up. There is some icon work to do. But that’s best left to the icon pros while I art direct.

Derek with the band Bucho liked Maktub’s site which I designed and scripted in 2004. He got in touch and we talked about features Derek wanted for a while, then, by a great stroke of luck, the highly anticipated new Community Builder component for Joomla was announced. Even though Maktub is my band ; ) Bucho’s site will be technically better and easier to use (second time around is always easier).

Features to Bucho’s site will include a blog/news/journals system, polls, role-based login/register, database-driven tour calendar with auto iCal & vCal downloads (I worked on some of this component with Joomla component developer Graham Spice in early 2004, I think Graham shipped my original CSS for his GigCal), auto google maps, mass email tool with tracking, site statistics, form-based contact pages and Hammond B3 virtual simulator, kidding.

Every aspect of the site (content, navigation, moderation, etc…) will be up-datable with WYSIWYG editing from any browser by non-technical people (thanks to Joomla).

The site design will allow easy daily updating by non-technical people and scalability of the module components developed over time by the Joomla community.

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

Download
Web Standards White Paper

Download
Web Standards White Paper

Download
Web Standards White Paper

Download
Web Standards White Paper

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

What a pleasure it will be to work with the developer rock stars of Wintellect when redesigning their wintellect.com site. The redesigned site will be fast and easy to use, conform to Section 508 guidelines and use a style and design that is easily updated and extendable.

Wintellect is a leader in software training and debugging services. Their instructors have written numerous books on the subject and often write technical articles for MSDN and other magazines.

The site will launch in 2006.