The SPF Pure HTML & CSS Competition

[Shaun(OfTheDead)]

To Enter:

Please download the attached copy.txt .

Using only HTML, XHTML or CSS, you must format and style this copy into something exciting, interesting, classy, or whatever look you want.

Rules are below.

Submissions are to be sent via e-mail to hawk@sitepoint.com. When you send the e-mail use the subject "SPF HTML & CSS competition" so it gets redirected to the correct inbox.

Please make sure the zip file is named after the member's username, and also the <meta copyright> and <meta author> tags should be the member's username.
This is to prevent confusion and allow us to identify ALL submissions as your own work and be able to trace back the file to the user in question.

Submission deadline is Monday February 21st 0:00 (Pacific Standard Time, GMT-8)

Deadline extended. New deadline is February 28th 23:59 (Pacific Standard Time, GMT-8)

Good luck!

[Shaun(OfTheDead)]

THE RULES

• Contestants will submit one, single HTML file †, zipped and attached to their submission e-mail. Only one submission per contestant.
  
• HTML (or XHTML) and CSS only.
  
• The webpage can be coded in any version of HTML or CSS the contestant wishes. The code can be W3C valid or invalid, but contestants should note the judging keypoints.
  
• No Javascript, VB Script, or any other client-side scripting.
  
• CSS expressions are allowed for min-width and/or max-width
  
• HTML5 Shiv is allowed, but it has to go in a conditional comment for IE only. <- This is not allowed
  
• No SVG.
  
• No PHP, ASP, or any other server-side code. Entries MUST be an HTML file.
  
• No images or any other external files, except font-files called using CSS 3 and hotlinked from the contestant's own server *.
  
• No background images, or any other external files (other than font files), called using CSS (eg. example:url(); ) .
  
• No third-party code libraries (eg. 960 grids). ALL WORK MUST BE YOUR OWN!
  
• Copy is supplied, which can be re-arranged as needed, however no additions or omissions are allowed.
  This includes using CSS to permanently style copy away (eg. by using display:none; ). Doing so will disqualify the offending contestant's entry!
  
• Any mark-up may be added to the copy (eg. <hr> , <p> , <br>), in fact it is encouraged, as this is the point of the contest.
  
• Suggested mark-up is included in the copy (enclosed in square-brackets). These are only suggestions. They may be utilised or ignored at the contestant's discretion. There is no bonus or penalty for doing so; Contestants should do what works best for their individual designs.

Competition will be judged on the following key points;

• Attractiveness of the webpage.
• Consistency across web-browsers / platforms.
• Efficiency and logic of mark-up and styles.

The judges will be using the following technologies to test entries;

• Firefox 3.6 on Windows
• Internet Explorer 8 on Windows
• Internet Explorer 6 on Windows **
• Safari on Mac OSX
• Chrome on Mac OSX

The prizes
1st prize - a Tshirt, print book of choice and an I ♥ HTML cup
2nd prize - a print book, pdf book of choice and an I ♥ HTML cup
3rd prize - a pdf book and an I ♥ HTML cup

The winners also will receive a The SPF Pure HTML & CSS Competition 1st, 2nd, 3rd prize fancy diploma in their name.


† Contestants may optionally embed their CSS styles into their single HTML file or link a stylesheet (in the same directory as the HTML file and therefore zipped with it).

* About fonts. If using external font-files, contestants are urged to only use those fonts legally. Contestants should please ensure that they obtained permission or licence for the font-files they wish to link to. All entries remain the intellectual property of their contestants, and Sitepoint will not be held responsible for the illegal use of third-party software (including external font-files) by contestants. By entering this competition, you, the contestant, agree to this condition.

** Internet Explorer 6 will be used to test the "graceful degradation" of entries. To receive highest points for consistency, a contestant's entry should look the same on IE 6 as on "modern" browsers, OR still maintain reasonable usability and attractiveness on IE 6.

[ScallioXTX]

To give you some idea, here are three example entries from staff members

Example 1

Example 2

Example 3

[RyanReese]

Just to be clear, no IE7?

I'm SO DOING THIS. I want the Tshirt. I hope I don't put this prioritized over college .
It's good to know that the staff don't win anything, might actually have a slim chance at a prize .

[Ijj]

Could I make a suggestion?

IE8 should be used to test graceful degradation, as it is a terrible browser that is light years behind even the only somewhat-modern browsers. By comparison, IE6 is grotesquely inferior in ways words cannot express. No web site/page/design should ever be judged by how it looks or behaves in IE6 for any reason.

[refinnej04]

I'm totally excited!!

Could I make a suggestion?

IE8 should be used to test graceful degradation, as it is a terrible browser that is light years behind even the only somewhat-modern browsers. By comparison, IE6 is grotesquely inferior in ways words cannot express. No web site/page/design should ever be judged by how it looks or behaves in IE6 for any reason.

I concur... if we keep building sites that look good in IE6, people will keep using it. If we stop, they won't. It's just how things work... But one of the biggest clients at work (and a HUGE company in the U.S.) is still using IE6 on all their work computers... and I just don't get it!!!

[xhtmlcoder]

It's typically because they use propriety legacy scripts on various large intranets that only tend to work with IE6.

[AirFor]

Reminds me of CSS Zen garden a fair bit.

[Code Junkie]

I can't wait! If I have time to, I'll certainly compete (even though I already have all of the Sitepoint books I want).

We're really not testing in IE7 too? According to the W3C it has almost the same browser share as IE6 now. In fact, IE7's browser share is higher and is likely to rise just a little as companies slowly move from IE6 to the next thing that makes sense to them. It might also make things fun and interesting to try the pages out in un-released browsers like Firefox 4 and IE 9.

Would we be disqualified for creating a font with shapes we need for our design and then including it and using those shapes as design elements? I notice you've done something a little like that in example 1.

[Shaun(OfTheDead)]

Hi everyone.

I got asked a great question about a tool called CSS3 Pie.

It's a cool tool, by the way. Worth checking out! It makes CSS3 work in IE6!

Unfortunately though, it can't be allowed in this competiton. Both because it's an external file (PIE.htc), and also because it generates a couple lines of code and all work must be your own.

[Code Junkie]

Oh also, when we include fonts through the CSS3 @font-face property, the best way to do that has been bounced around the internet a lot resulting in at least one largely accepted small bit of code for including it. We wouldn't be creating that code, but it's generally one of the best ways to include the @font-face property. Are we allowed to use that? Are we allowed to use Font Squirrel to generate it?

[ScallioXTX]

Oh also, when we include fonts through the CSS3 @font-face property, the best way to do that has been bounced around the internet a lot resulting in at least one largely accepted small bit of code for including it. We wouldn't be creating that code, but it's generally one of the best ways to include the @font-face property. Are we allowed to use that? Are we allowed to use Font Squirrel to generate it?

Well we can't really see how you got the code can we? You are encouraged to write it yourself, but indeed in the case of @font-face you're probably better off looking at some template.

Hint: the best template I've seen out there contains a smiley face (literally!)

Regarding IE6. As refinnej04 correctly pointed out, it is mostly only used by large companies anymore. And that is indeed for the reason xhtmlcoder pointed out: because those large companies have some legacy code in their intranet that won't run in anything else but IE6 (or because they have lazy sysadmins of course )
Anyway, since the website you're asked to create here is for a web development business it would be nice if those large companies (potential clients!) could see that website in an acceptable form. It doesn't have to look exactly the same as in the more modern browsers, but it should look okay (no extreme float drops etc).
It's not really about how many use it, but more about who uses it.

[Pikacsu81]

I try to win one of the prizes! XD

[Crowelsh]

hmm .. think I'll give it a go & see how I get on!

[Paul O'B]

I can't wait to see what you can all come up with. Hopefully they won't hurt my eyes as much as some of the staff member's entries

[Stomme poes]

if we keep building sites that look good in IE6, people will keep using it. If we stop, they won't.

If this were true, fewer IE6 users would exist. There is no "if you break it, they will upgrade". That is, nobody upgrades because web pages "look funny". They upgrade because they have money/opportunity/permission and want m0aR (of whatever: speed, memory, security...).

My bank spent over 10k+ guilders (yeah this is pre-euro) for some huge ginormous Java system that works with IE6. Bank workers also connect to the Internet while working with this program, so IE6 is used for both intranet and internet.

it is mostly only used by large companies anymore

Uh, and much of my entire extended family. And all the farmers around here. And the small community stuff like the local fire dept (well, they were using IE5 with Windows2000 servers actually). And we still get calls from customers about some stuff we've put on our web pages for IE6 users only (hee hee).

That and I think it speaks pretty poorly of anyone's skills as a "web developer" if they can't make something readable or usable in IE6. Seriously, it's not that hard (a pain in the butt sometimes, but not hard). We're not talking about web applications here, just a plain-content web page.

And since IE9 isn't even out yet (tho it will come out officially during this competition!), IE8 cannot be counted as "legacy". Esp not with XP as one of the most popular paid Operating Systems in the world (IE9 won't run on XP).

But, Opera being left out surprised me. Especially since I've seen it act weird with funky fonts.

[YuriKolovsky]

Is it allowed to edit the text to add harmless humor?
and how many entries can we submit?

[YuriKolovsky]

The text in the copy.txt gives me a massive urge to make the webpage just the way the salmon company would make it, starting the design with the world-famous "Microsoft Paint" instead of defining the website content first, and making all the beginners mistakes on purpose, with tables everywhere, and animated gif's of the twitter bird following the mouse cursor (well, in this case it could only be a stationary animated css bird) and so forth, which is why I asked if we can submit several entries with contrasting styles of markup/css.

[Logowizard]

You've got me thinking... I'll give it a bash if I have time

[davo0105]

Due to the fact we must accommodate for IE6 and cannot use any JS or external libraries...that effectively rules out HTML5?

[vamsmack]

I am in! I will try to fit this around my crazy schedule.

[deesquared]

This is a very interesting challenge. I have not used CSS3 just yet but will try things out. Thanks for presenting this contest.

[dublinan]

Due to the fact we must accommodate for IE6 and cannot use any JS or external libraries...that effectively rules out HTML5?

Yes I believe it does rule out the Javascript API's I was thinking about using canvas in this contest, oh well...

[Blake Tallos]

I like the deadline date. Gives me alot of time to think this over.

[Pikacsu81]

Maybe a stupid question:

Is it possible to use conditional stylesheet for IE, or just one stylesheet is permitted?