I would like to have 3 illustrator documents that is a mockup of various states of a single-page site I am developing to be converted to working XHTML or HTML5. The website is a simple search engine (a logo, search box and results display)
Please use CSS3 where appropriate and rely on graceful degradation for older browsers.
The design is pretty simple so I expect the design to be near pixel perfect for the following browsers:
* Safari 5+
* Latest Firefox down to 2 or 3 versions behind
* Google Chrome
As for graceful degradation, the following browsers still do need to be supported but I am fine with some design elements not looking as good as in the above list of browsers. However, I still expect all the elements to be properly laid out and function correctly (e.g. not jump off screen, disappeared or unclickable)
* IE8 and later
* Safari 4 and prior
* Older version of Firefix
* Mobile safari
Again, CSS3 is perfectly fine
Some points of concern:
* Website load speed is very important. So the faster everything shows up, the better.
* Results are expanded on click. Numbers, mails and websites in expanded results may or may not be clickable (so you have to allow using an <a> tag there).
* Try to make use of embedded fonts if and where appropriate / possible. Using typekit is not allowed but I understand if the site will not look too well on unsupported browsers.
* This website uses ajax to switch states so please make sure that each states of the site can be switched to-and-fro with minimum overhead (e.g. shouldn't need to load extra graphics)
Again, just to emphasis, I prefer graceful degradation over progressive enhancement and you are allowed to abuse CSS3 to the best effect (i.e. for rounded corners and such) and I am a developer as well so feel free to discuss with me on what is the best approach.
Attached is PNG files exported from Illustrator just to show you what the page would looks like.