3

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.

3 Answers 3

Reset to default
6
+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)
8
  • 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
    Commented Feb 26, 2011 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
    Commented Feb 26, 2011 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
    Commented Feb 26, 2011 at 22:03
  • Good list. I might add "CSS needs to make appropriate use of cascading styles"
    – Nicole
    Commented Feb 28, 2011 at 6:59
  • 1
    @Renesis & @KM01, good stuff, I added them to the list.
    – kel
    Commented Feb 28, 2011 at 22:47
2

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.

0

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.

4
  • 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
    Commented Feb 23, 2011 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
    Commented Feb 23, 2011 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
    Commented Feb 26, 2011 at 10:53
  • "mature compiled set of requirements". Consider updating your question to define this more clearly.
    – S.Lott
    Commented Feb 28, 2011 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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