Chris Pels posted a great video tutorial of the ASP.net CSS Control Adapters on the asp.net site. If you’ve ever wanted to use the ASP.net 2.0 server controls for page elements like menus, tree views, gridviews, detailviews, etc.. but would like the ASP.net process to render semantic HTML then you’ll love this video and solution.
Here’s a little background. Last year my good friend Russ Helfand at GroovyBits and I worked on a CSS solution for Microsoft that makes ASP.net 2.0 server controls render semantically correct HTML and CSS. That is, I worked on the CSS styling and Russ did ALL the ASP.net code. I wouldn’t have known where to start with the server code.
The stock ASP.net menu server control (that creates 1 tier menus or multi tier drop down menus) uses tables to hold the menu items. But the same server control when used with the CSS Adapters will render clean nested ul and li tags. Enjoy.
Are you a designer looking for work? If so, contact me; I’m looking for talented designers.
We’ll work with large, high profile clients like Microsoft, Intergraph, Online Resources, vFinance and Universal Records. On occasion we’ll also work with smaller, local businesses, indie bands and startups. In all cases we’ll design creative, custom web sites and web apps tailored to the needs of our clients and their users. You need to be a mid level+ web designer with min 2 to 3 years experience creating user-centered web sites & apps. This is a contract position that can lead to employment.
For the past 12 years Goldman Design has been one person, Kevin Goldman. I’ve worked solo and have sub contracted designers on occasion. Now the time has come to expand and bring in key designers on contract that could eventually become design directors as the company grows.
Interested? Send a brief email including (1) portfolio link (list your involvement with each project if not already shown) and (2) links to two of your favorite sites and explain why they’re your fav.
Recently I had a potential client ask what sites I’ve designed. Since I haven’t updated my portfolio in almost two years I figured I’d put a short list together here. There are a number of sites that are not public facing - so no links. Some of these include sites and apps were for the US Government (work I’ve done with www.Intergraph.com) and for banks (work I’ve done with www.orcc.com).
There are also several distributed app user interfaces I’ve worked on the last few years, but I’ll need to find some time to add these to my portfolio since I can’t link to them.
http://asp.net
Microsoft product site for ASP.net (now in beta)
http://www.iis.net
Microsoft product site for IIS
http://www.wintellect.com
Prominent Web Development company
http://www.refreshskincare.com
Spa in Scottsdale (and eStore)
http://www.asp.net/cssadapters/
CSS adapters for ASP.net server controls
http://quickstarts.asp.net/QuickStartv20/aspnet/
Microsoft ASP.net Quickstart Tutorials
http://www.stephenpond.com
CRM company in Phoenix
http://www.zimini.com
Internet Coupon startup
http://parkervanilla.com
110 year old wholesale flavor manufacturer
http://www.ibucho.com
A rockin’ San Fran band
http://starterkits.asp.net/SmallBusiness
Microsoft Small Biz ASP.net starter kit - used by developers around the world
http://starterkits.asp.net/PersonalWebsite
Microsoft Personal ASP.net starter kit - used by developers around the world
http://starterkits.asp.net/Club
Microsoft Club Site ASP.net starter kit - used by developers around the world
http://www.dumberthandolphins.com
T-shirt retailer
I started to redesign www.asp.net this week. The project has been in talks for months but was green lit recently. I spent this past week on full scale black and white wire frames / storyboards. They’ll be more storyboards of the user experience than abstracted flow charts. Flow charts of information architecture are too abstract and can get people agreeing on concepts that just don’t matter to end users. The current site has a ton of information, product types and a diverse audience. The redesigned site will sing with less visual fluff and more easily findable content for specific audiences. Slick visuals and pretty graphics will be the easier part, as they always are. Working the information design, writing style, extensibility and seeing the transfer of the existing content into semantic formats will be the heavy lifting.
The last few months I’ve been designing the Microsoft IIS web site. It was a pleasure to work with Bill Staples, Chris Adams and all the folks at Telligent to pull this site together. We have some new features and design additions coming this summer as well.
My friend Jeff Prosise at Wintellect referred me to the Government and Securities Division at Intergraph. After an NDA, some talks and a clear statement of work I started a new user interface project with them. The developers at Intergraph are top notch. I’m humbled and eager to work with them and their products. Thanks Jeff, I owe you sushi at least.
Fun projects are so … fun. The Made In Express Contest was one of them. The finalists are already chosen, but you can track their progress along with judges Chris Pirillo, Phillip Torrone and Robert Scoble. I’m interested to see how the Community based video remix app (PixelParty) turns out.
Most of this project is under hush hush non-disclosure. I’ll post a link when it’s live in the summer 2006. It’s been a pleasure to work with Scott Cate, owner of MyKB based in Scottsdale, AZ.
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.
- About the Visual Studio Design Templates
- Table layouts versus DIV layouts
- 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
- 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)
- Targeted browsers
- 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
- Validating your pages
- Summary
- CSS validation
- HTML validation
- "Bobby" can help validate your site’s usability
- Aesthetics
- Use of scale
- Use of color
- Fonts families
- Details add polish
- Making the favicon.ico file
- A note on consistency
- Extending this Template
- Changing the colors
- Adding a bit map logo instead of the "site name" text
- Quick Tips and Tricks
- 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
