Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I'm considering outsourcing a part of our web application development project for freelancers, namely the site building part. What I mean by site building is the process of creating the xhtml/css template files, with dummy content, from a psd file (or any other graphical layout file). The resulting xhtml/css files will be used by our developers as templates for cms based page rendering. The cms in this case is Drupal, but that might not be of much relevance.

I'm looking for a good set of requirements, that

  1. will result in good quality xhtml/css code, complying with today's standards
  2. leaves little to the freelancer developer's imagination in terms of what I need

I'm thinking about requirements like:

  • Valid XHTML 1.0 Transitional document type, validated by validator.w3.org
  • Identical rendering in all modern browsers (FF, Chrome, Safari, Opera, IE7-8) and also in IE6
  • All opening and closing block-level elements should be properly commented, referencing the functional part of the user interface they belong to (menu, toolbar, content, etc)
  • No inline CSS definitions

And so on. How would you organize a list like that? What requirements would you add?

Edit: started bounty. I'd like to have a clear set of requirements that will save me some troubles.

share|improve this question
add comment

3 Answers

up vote 6 down vote accepted
+150

You have a pretty good start, how about this?

  • Valid XHTML & CSS
  • Must work in IE6-8, FF and Chrome
  • No inline CSS should be referenced as separate file
  • CSS needs to make appropriate use of cascading styles
  • CSS should have styles for ul/ol lists, h1-h4 headers, forms, blockquote, comment, etc.
  • All image paths need to be relative
  • All image files need to be saved for web in the smallest size without pixelating
  • Design needs to be tableless
  • Any javascript files need to be local (not referenced from other sites)
  • Block elements need to be commented
  • Menu structure should have CSS for first, active and last classes
  • Documentation and style guide (classes for like alert boxes, etc)
share|improve this answer
1  
Goody! This is the type of answer I was looking for. For tableless design: IMHO that is only valid if we're not displaying tabular data. For any output that naturaly fits into a table, it should be put into a table. –  András Szepesházi Feb 26 '11 at 11:45
    
Ahh and for "Any javascript files need to be local (not referenced from other sites)" -> I get your point but I'd use CDN for loading a js framework. Still, your answer is solid. –  András Szepesházi Feb 26 '11 at 12:26
1  
Thanks. My point with the JS is that they include it locally then you can upload it to wherever you want. My only exception would be if they reference it from Google. Just trying to make sure they don't reference it from like bobswebdesign.com/scrips/jquery.js –  kel Feb 26 '11 at 22:03
    
Good list. I might add "CSS needs to make appropriate use of cascading styles" –  NickC Feb 28 '11 at 6:59
1  
@Renesis & @KM01, good stuff, I added them to the list. –  kel Feb 28 '11 at 22:47
show 3 more comments

You may want to consider Unobtrusive JavaScript. It would probably make any JavaScript debugging you have to do a little less painful since you wouldn't have to dig through the HTML to work with the JavaScript code.

share|improve this answer
add comment

Identical rendering in all modern browsers (FF, Chrome, Safari, Opera, IE7-8) and also in IE6

I'd rank these into "must have" and "should have". At some point, you don't want to continue paying for handling IE quirks.

Also, I'd provide specific versions. Specific. It makes it much, much easier to resolve questions and mysteries if you provide them with a concrete list of releases that you'll use to see if they've actually done the work.

All opening and closing block-level elements should be properly commented, referencing the functional part of the user interface they belong to (menu, toolbar, content, etc)

This is what "class" and "ID" are for. I'm not sure comments help much with this. However, if you really like the comments, it's fine to ask for it.

Additionally.

You should define the class names you want as a minimal set and what ID's you require on each page.

You might want to consider having some kind of test suite. It's not easy to test browsers and rendering with an automated test toolkit. You will probably have to fall back to manually clicking through something to look at the various kinds of page templates you're having built to see if "lorem ipsum" looks correct on each one.

share|improve this answer
    
Comments for the closing tags improve readability (consider a 2 page long div, you won't have to guess what is the </div> tag closing. And what do you mean by: "You should be absolutely clear on what class names you want as a minimal set..."? –  András Szepesházi Feb 23 '11 at 12:15
1  
@András Szepesházi: Comments for the closing tags are visual clutter. We use tools to fill the templates; we never look at a monstrous <div>, since it's <div>{{someblock}}</div>. A simple, free template engine will be a lot more use than comments. –  S.Lott Feb 23 '11 at 12:38
    
valid point, though you'll have to look at long divs when you slice up the template. Anyways, I was rather looking for a mature compiled set of requirements than a critisim of some arbitrary requirements I've just pulled out of thin air. –  András Szepesházi Feb 26 '11 at 10:53
    
"mature compiled set of requirements". Consider updating your question to define this more clearly. –  S.Lott Feb 28 '11 at 13:33
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.