The SPF Pure HTML & CSS competition - The Winners!

Yup. Just check the post before yours :wink:

I do apologize because I never got to finish mine. I was pretty busy and I could dedicate a short amount of my time :slight_smile:

Before the bashing beginsā€¦ :lol:

No, really, Iā€™m OK with any comment, you have my word. :slight_smile:

My design has the bussiness card concept: two cards, one with the face up and one with the back up. Maybe the colours arenā€™t quite the best.

Best viewed: FF4 (beta at the time), Op 10.63+
Worst view: Ch (10 at the time), Saf
No feeling at all: IE7+ (IE9 RC at the time)
No CSS: IE6-

Thatā€™s how I stack my UAs too.

I think my design shows pretty well who are the champions of CSS3 so far. That was the purpose. Webkit may be fast (?) but it lacks in finess, as always.

FF itā€™s my personal browser of choice lately. Since 3.5. I used to be a Ch addict. No more.

Op is always promising, but I always find a JS rendering bug and lag every now and then, and the settings are not quite user friendly and intuitive. Otherwise, I would use it first before thinking about IE9.

How much time I spent working on it? Well, I started the last friday, before extension. Continued the following tuesday, a bit, and finished the next friday, before the contest ended. Probably a dayā€™s worth of time. It was hectic at work, I wish I had more time.

I will start with what designs I find interesting, in alphabetical order:

aniketrk
Hueij
nizamilputra
Pikacsu81

Special notes: Pikacsu81, quite a branding effort. And funny: the big fish turning! Hueij, a solid design. And also funny: MS Paint!

The purpose of design with CSS is to achieve an effect w/o the CSS code being obvious at use. As little CSS as possible, and in the right place. Too much CSS and it starts to look like Jocelyn Wildenstein. I believe both Pikacsu81ā€™s and Hueijā€™s designs are true to this ā€œCSS in the right placeā€ concept and donā€™t go overboard, while the look is consistent.

Markup and code appreciations later.

I donā€™t know what to make out of zcorpanā€™s.

Some great work there
(looking from my design taste)
aniketrk fancy lookin
ohhh LePhuronn, I like your style.
Pikacsu81 boo indeed
tkrster yours almost crashed firefox, takes 6 seconds to load the page
transio especially fancy in chrome
Ryan, you got the cloud to move in firefox but not in safari??
zcorpan just wow, totally unexpected, great html5 example document I have to say.
noonnope would fare better if it was more usable

Molona nice and pretty
Guido clear and clean
Eric j, not too usable.
Scallio, hmmm, decent
Mittineague eye tripping
Paul LOL, looks like you had the most fun here, the newsletter was the most surprising, very nice tech demo, and surprisingly clean html for the amount of features, and how did you make the background so striped, will have to analyze for a while.

Now letā€™s judge the out of competition entries, who gets what place :stuck_out_tongue:
I say:

  1. Paul (talk about going overboard LOL!)
  2. Molona
  3. guido2004

itā€™s gonna take me ages going over each oneā€™s special features, and yes I was also extremely busy with work, but you can always find the time, when eating, when resting, during the evening, or even in the bathroom.

p.s. What about the 3 example entries? they also need to be featured with their creator name.
p.p.s. oh and do we get the pretty little icons next to our avatar/name?

I donā€™t know what to make out of zcorpanā€™s.

Hee hee. Awesome.

I suppose the three examples should be listed as ā€œStaff entriesā€ as well : )

Looking through the list, I noticed the high number of ā€œbrokenā€-looking sites simply because of @font-face. Now, for this contest thatā€™s ok, because you could do a lot of cool things with @font-face. But I think it gives people a good idea of how badly is works without a fallback in the rest of the browsers.

awesome indeed. :stuck_out_tongue:

yes, after all they also put in work, and I think I know who made the ā€œcoderā€ one

which is why I decided not to use it at all for the text of the website, where a fallback was not possible.
Generally I think itā€™s best avoided unless it really shines and has a fallback of some sort (what you said).
ā€¦wait, was mine broken?

So Candygirl what will you be drinking from the cup and do we get to see a picture of you in your new SitePoint T-Shirt when it gets shipped? :smiley:

Either the top three people are being modest about not being ā€˜designersā€™ or have some other hidden talents? Like I said from the beginning this wasnā€™t just a ā€˜design contestā€™ and that you didnā€™t need to be a designer to be placed high. My word, was my bond! :slight_smile:

Having artist flare would help a lot, you also had to pay attention to the markup and other items as the competition would be fierce. Therefore if there were loads of ā€˜cool designed pagesā€™ but not many with good markup. Then obviously the ones with better markup could have an extra benefit by gaining in that category. Same with browser compatibility if it fell to pieces in a modern browser it may have suffered.

So having a good solid foundation in markup would help. As you were all aware I was one of the judges and my magnifying lenses would see what was lurking underneath at source code level. :wink:

ā€¦was obviously the strongest basis of judgement, as specified in the rules (itā€™s a markup competition, not a design competition)ā€¦ so no one should be shocked that some of the best designs didnā€™t even place.

Why thank you YuriKolovsky.

I very much like your bold use of typography and overall layout, and your attention to detail in recreating the Facebook and Twitter logos is fantastic.

Iā€™m not mad keen on your background gradient though if Iā€™m honest, but other than that very well done!

Iā€™d also like to extend my congratulations to all participants for a job well done.

Third, not bad for 2 hours work.
Thanks Yuri :smiley:

imaginekittyā€™s source is beautiful!

Off Topic:

At some point I had the ā€œmicrosoft paintā€ part of text in a rainbow color where each letter had a varied size and was blinking, I mean itā€™s fun to make fun of m$ paint, but I also have a special place for it in my heart as a very challenging medium to work with, you canā€™t spell ā€œMicrosoft Paintā€ without ā€œPainā€.

a small tribute to Microsoft paint, here have a laugh.
1 [URL=ā€œhttp://i119.photobucket.com/albums/o126/yurikolovsky/BobaFettsmall.jpgā€]2 [URL=ā€œhttp://i119.photobucket.com/albums/o126/yurikolovsky/Jediknight2.jpgā€]3 [URL=ā€œhttp://i119.photobucket.com/albums/o126/yurikolovsky/Iceman.jpgā€]4.1 [URL=ā€œhttp://i119.photobucket.com/albums/o126/yurikolovsky/IcemanNight.jpgā€]4.2 [URL=ā€œhttp://i119.photobucket.com/albums/o126/yurikolovsky/Busywithcomputer2.jpgā€]5

haha np guido

Thanks for the kind words Yuri. I really like the clean and straight forward design you did, and it is amazing the resemblance of the twitter and facebook logos :slight_smile:

Iā€™ve been truly impressed with the designs in general and all the work every participant put into this. I hope that I can have new ideas from this contest, and learn something new from here. :slight_smile:

My only complain is that I donā€™t get the cup for being in the second placeā€¦ of the ā€œstaff entriesā€ā€¦ it is so hard to compete against Paul :stuck_out_tongue:

Yuri. The cloud is moving but just so slow you canā€™t see it. I set the speed very low and itā€™s perfect in FF but itā€™s too slow in Safari.

I decided that instead of increasing the speed, Iā€™d leave it be. I didnā€™t want it to be distracting.

Yes, I just had a bit of fun with it. Nothing serious and all over the top.:slight_smile:

Iā€™m not a designer as such so I just throw code at it until something happens or it looks better than it was. The diagonal gradients really slow the page down though in Firefox. My favourite part was the ugly fish in the contact section (safari or ff4 only) - and the fluid table.

Iā€™m impressed with all the entries as there was something in each that I liked and Iā€™m glad I didnā€™t have to judge.

Congratulations again to all those that entered and made this more interesting.

I enjoyed the comp, it was my first venture into HTML 5 having been using XHTML up to now. Since the comp I have been swatting up on HTML5 and CSS3 and have started to incorporate into my sites :slight_smile:

Just wondering if anyone has hovered over my fish yet? It has a little easter egg, but works best in safari and chrome.

Thanks for the chance to take part, and well done to all the winners :slight_smile:

@Ryan, ah now I see it.

LOL I missed that one completely.

@Logowizard yeah I noticed it :stuck_out_tongue:
Mine has little title attribute jokes scattered around it :stuck_out_tongue:

@ Paul Oā€™B, just seen your fishā€¦ youā€™re right it is ugly, but fun all the same :slight_smile:

Yes, Graham we noticed the fish and itā€™s ā€˜trickā€™. We liked many of humorous or unique aspects such as that and Ryanā€™s moving cloudā€¦ or the blinking text in Jaapā€™s tribute to MS Paint.

Even some of the funny title text; like in Timā€™s social media icons, or Csabaā€™s moving fish, etc. There is plenty to keep you entertained within the examples and itā€™s nice to see how different people tackled the challenge. :slight_smile:

and how they all approached it differently. Some fantastic designs and examples of HTML and CSS at itā€™s best.

I came up with 4 designs total and let my wife choose the one I submitted.

Here are the other 3 if you want to have a lookā€¦

Thanks for a fun competition and again, congrats to the winnersā€¦