ASP.NET sites, hiring external design firms and standards
Hey. We're building a large ASP.NET website, and have hired an external firm to do the design (CSS + protoype pages). In fitting the design to the page, we've found a number of problems that indicate ASP.NET's workings were never considered. My question is - Is there a common standard (that should be) used by design firms creating what will become an ASP.NET site?
We've found things like:
- Using IDs on HTML elements for CSS/JS to find, which doesn't work with server tags generating IDs.
- IDs with hyphens in them
- ValidatorSummary example built in a completely different style to ASP.NET's.
- Assumptions that all buttons will be <input> tags
- Margin styles on <div>s, interfering with our use of panels
The first instance is a problem. The rest are inconvient misunderstandings. As usual, there are intense time constraints, so in this sea of 'we'll fix it / get our designer to look at it / work around it', I'm largely hoping there's some fundamental building block that would have stopped most of these problems from happening.
The design firm is large, with a substantial body of large-site work behind them, so sadly the 'don't hire a one man shop' wisdom isn't the ticket in this case...
If you're in the position of hiring an external web design firm, and have the luxury of early collaboration and wish to help bridge the gap of meeting ASP.NET's requirements, here's our current list of guidelines. Please comment below if you feel there's something that should be added:
- Please encapsulate each the page in a <form> tag (ie. place it directly after the <body> tag), and use no other <form> tags on the page
To display a summary of page validation errors, please cater to rendering the following format example:
<div class="error_class"> <h3>Please review the following fields</h3> <ul> <li>Home phone number</li> <li>Surname</li> </ul> </div>
- Please avoid driving styles off the ID or name property.
- If there are HTML components that need to be turned on and off, these components should be encapsulated in a <div> element, so that the div's visibility can be set to 'false'.
- If styling buttons, please cater to both <input> tags and <a ... class="example_class"> <span>Button text</span>` formats.
- Avoid setting attributes on class-less <div> and <span> tags.
- Thank you for bearing with us.
Most design firms I have worked with required some hand holding on what they can and cannot do with regards to designing for an ASP.Net app. You hit all the big ones, the ID thing being the biggest issue.
In terms of building blocks, collaboration early and often did the trick for us. Once we established how we needed the design to be implemented to work easily within an ASP.Net context, things went smooth. Of course, the better the designer on the other end, the easier its going to be.
I am not one for having developers chop up PSD files. With the right designer or firm, you should be able to save time and money and get it done right from the outset. Most developers I know can tweak and extend css and markup, but are much less efficient when starting from a PSD, or from scratch.
Any time I've worked with design firms building asp.net pages I've always just had them design what it should look like. Nothing to do with the markup or css. This leaves a lot of work to be done by the developers, but avoids all the mistakes you just mentioned. I've always had designers deliver a PSD file and chopped it up myself.
If this doesn't suit your needs you can always try ASP.NET MVC. It gives you a lot more control over the markup you put on the page.
In general, people who make their living as designers do not know ASP.Net well enough to avoid it's, ahem, quirks. It's not reasonable to expect them to produce HTML and CSS which take ASP.Net's rules into consideration. The standards are actually on the designers side in this one.
For future integration, you may want to go with a firm that has their own .Net devs who work with their designers or, if you have the option of .Net 3.5, you could work with a design shop that has MS Expressions Web at their disposal.