# Judge my entry for a web design contest. It's pretty sick coding.



## RyanReese09 (Mar 1, 2011)

If you are not knowledgeable as to the rules, then please only critique the design. How you like it, what could be better, etc.

For best results please view in FF 3.5 or above. The contest only judges FF3.5+, Safari3.0, Chrome, and IE6 (IE6 used to see how well we code our sites to perform in older browsers)

For those who can understand the rules (simple if you understand terminology) 


Spoiler



ONLY HTML/CSS is allowed. No libraries or anything else. No javascript or SVG or anything. No images either. Pure HTML/CSS. 

The text is given to us, we merely make the markup that goes around it.

Those who understand these rules/HTML and CSS, will know how hard it was to make this 



Website (not my personal site, just having a friend host)
http://egproductions.net/Files/HTML/sitepoint.html
I'll post back in here to see if I won the contest, or placed 1st-3rd.


----------



## JonWhite (Mar 1, 2011)

Just a suggestion: I think it would be nice (and more realistic) if the halo around the sun would "pulsate" a bit (very slowly, maybe one cycle every 10 seconds). Just spices things up a bit. Also, perhaps make the shadow around the "Pretty Salmon Webdesign We Build Websites that are Pretty like Fish" a bit darker/bigger. With white clouds behind, it can be slightly hard to read.

edit: the "Our Newsletter Please leave your name..." is on the very left side of the page, with no margins at all. Same with the very bottom of the page. If you add some padding, it will look a lot nicer.


----------



## danthecuber (Mar 1, 2011)

I like the moving cloud at the top:tu


----------



## EricReese (Mar 1, 2011)

JonWhite said:


> Just a suggestion: I think it would be nice (and more realistic) if the halo around the sun would "pulsate" a bit (very slowly, maybe one cycle every 10 seconds). Just spices things up a bit. Also, perhaps make the shadow around the "Pretty Salmon Webdesign We Build Websites that are Pretty like Fish" a bit darker/bigger. With white clouds behind, it can be slightly hard to read.


 
You can't do that with pure html and css. Need javascript for that.

Pretty nice


----------



## RyanReese09 (Mar 1, 2011)

JonWhite said:


> Just a suggestion: I think it would be nice (and more realistic) if the halo around the sun would "pulsate" a bit (very slowly, maybe one cycle every 10 seconds). Just spices things up a bit. Also, perhaps make the shadow around the "Pretty Salmon Webdesign We Build Websites that are Pretty like Fish" a bit darker/bigger. With white clouds behind, it can be slightly hard to read.


 
Impossible due to the restrictions. But thanks .

And the cloud was an amazing idea. The entire "sky" took over an hour


----------



## JonWhite (Mar 1, 2011)

It's certainly not my place to argue over what's doable or not, but I still have one more suggestion. If you can't make the shadow around the title darker/bigger, can you make the color of the clouds slightly darker?


----------



## RyanReese09 (Mar 1, 2011)

I can make the shadow bigger, and thanks for the suggestion! I also can make the clouds slightly darker but I think the clouds look fantastic just the way they are. If more people think the c hange in color is needed then I'll do it.

I can't wait until a web designer comes in this thread .


----------



## danthecuber (Mar 1, 2011)

What recipes are you including in the salmon recipe book?
I like salmon.


----------



## EricReese (Mar 1, 2011)

..Its just a design. They give you information to put on a page and you design the page around it...


----------



## danthecuber (Mar 1, 2011)

EricReese said:


> ..Its just a design. They give you information to put on a page and you design the page around it...


 
That was /sarcasm


----------



## Specs112 (Mar 1, 2011)

danthecuber said:


> That was /sarcasm


 
What an original idea. I suppose not everybody can comprehend your revolutionary new insincerity-based humor.

On topic: Great site, my only issue is the white text title, just increase the shadow, as was already said in this thread.


----------



## RyanReese09 (Mar 1, 2011)

Thanks .

If any coders read this thread, I'd like a rundown of my coding style/any general comments about the way I marked things up.

Even if you don't understand the code, you can comment on structure of the code.


----------



## moogra (Mar 1, 2011)

Only HTML/CSS is allowed, but is HTML 5 allowed? It's still HTML, but it has a lot more potential


----------



## EricReese (Mar 1, 2011)

HTML 5 is allowed but keep in mind that he needs to be able to support IE6 (somewhat) and much of IE does not support HTML5. If he used too much HTML5 his markup would become very bloated as well.


----------



## EricReese (Mar 1, 2011)

> <form action="pickthisasthewinnerhah[email protected]" method="post" id="SignupForm">



ROFL Ryan. Nice self promotion LOL.


----------



## Innocence (Mar 1, 2011)

I like it, really nice coding for the background . Could be commented a little more, but the /* Let the sexiness begin */ was a nice touch.

Something seems a little off with the placement of the text in the three boxes though.


----------



## Olji (Mar 1, 2011)

your writing all the code for yourself, or are you using a program like dreamweaver? 

in overall, you killed my feeling of accomplishment for my site for a school project >_>


----------



## RyanReese09 (Mar 1, 2011)

Could you possibly try and explain what is off with the text placement?

Overall the text placement wasn't something that I particularly liked, but whatever. It looks good sorta.

If the judges had to understand what I was doing, then sure I'd comment, but yeah. 

If you/anyone wnats to know what's going on in there then feel free to shout. I'm particulary proud of the cloud/the sun. The cloud was a work of art.


Oljibe said:


> your writing all the code for yourself, or are you using a program like dreamweaver?
> 
> in overall, you killed my feeling of accomplishment for my site for a school project >_>


 

Dreamweaver doesn't help write the code. I wrote all the code myself, all dreamweaver did was tab out the code, which didn't even really stay when I transferred computers. And sorry that my code did that .


----------



## Innocence (Mar 1, 2011)

RyanReese09 said:


> Could you possibly try and explain what is off with the text placement?
> 
> Overall the text placement wasn't something that I particularly liked, but whatever. It looks good sorta.
> 
> ...


 
I just think commenting makes it a LOT easier to change things and notice stupid mistakes. But whatever.

I don't know about the text, but left-align doesn't look right. I'm not sure center would either though... :/


----------



## RyanReese09 (Mar 1, 2011)

Yeah, I suppose I'll comment it very soon.

I did make the text that goes over the cloud darker (not on live) but yeah.

I see what you're saying about the text. Bah, too lazy to fix. I don't know how I'd redesign to fix that text alignment issue.


----------



## hr.mohr (Mar 1, 2011)

If you really wanted the sun to animate you could always use an animated .gif

I like the clouds idea, but the signup box for the newsletter are placed kinda weird and the surrounding text makes it look messy.


----------



## RyanReese09 (Mar 1, 2011)

As the rules state (in my original post) I can use no images. No images were used in my design. Only pure HTML/CSS .

Thanks .


----------



## hr.mohr (Mar 1, 2011)

Ah, sorry missed that one


----------



## Kirjava (Mar 1, 2011)

That's some pretty badass CSS.

Broken in IE8 though.


----------



## Godmil (Mar 1, 2011)

Looks great to me.
I particularly like the cloud, the colour scheme, and the way the text is formatted in the hills at the bottom.
The only thing that doesn't sit well with me is the one white box on the left which is bigger than the other two... just feels a little unbalanced, but given how much more info is in that one than the others, it may still be the best option.

..... unless... I pressume that box is intended to be read first... what if it was in the middle, but started higher up than the other two white boxes. That could balance it out.


----------



## Toad (Mar 1, 2011)

I will be completely honest with my feedback because that's the best way to be.

I have only viewed this site it Chrome 9 for Mac.

Over all a lot of the css generated graphics are nice and effective (sun, cloud, hills). The cloud does still look quite blocky but it'd obviously be difficult to make it not. Purely from a physics point of view - when the browser is narrow enough for the cloud and sun to cross, the cloud should be in front (currently the sun is).

In general the typography is pretty horrific. You didn't state if your restrictions allow the use of @font-face and other similar services (Google font API) so I'm not sure if you can or not. Even without those you can still improve the general typography by changing a few sizes, line-heights etc.

The biggest issue, however, is that when the browser is under a certain width (1190px!) you lose bits of content! This image was when browsing at 1024px wide. This was at 960px wide. This and this were at 650px wide just before you're offered a horizontal scroll bar (which still doesn't reveal the lost content).

The "our packages" table looks pretty nice and works perfectly across all browser widths - well done.

The "why work with us" bullet points look pretty badly out of place - all of the rest of the text on the page is centered and these are aligned left. Looks bad in all browser widths. Try and work out an alternative to make these look nice.

Your marquee tag I'm guessing was intended to make the cloud move. Firstly, marquee tags are deprecated and not recommended for any use by the W3C and secondly, it doesn't actually work in my browser.

Your CSS is very hard to read (your HTML isn't much better) so I'd really recommend commenting them much more and categorising them nicely. This article is great for little CSS improvement tips.

I just checked your site in FF and it's a lot better looking and the cloud moves. Make sure you test everything in other browsers. The sun, for example, looks 20 times better in FF than it does in Chrome - fix this! The cloud and hills also look significantly nicer in FF.

In summary:
- Neaten up your code, add lots of comments to make it much prettier to look at.
- Check all your functionality across all browsers. There's no reason that the site should be this different across modern browsers.
- Remove the marquee tag. It's just not kosher.
- Fix the text overflow issues in the "What We Do" section and the whole footer.
- Neaten up your typography, work on line-height and sizes in the various paragraphs at the start. Possibly add some subtle text-shadow.
- "Web design" is NOT one word.
- "We Build Websites that are Pretty like Fish!" - Be consistent with what you're capitalising in titles. Grammar makes a huge impact on the user experience.


----------



## Owen (Mar 1, 2011)

It's kinda messed up in Opera.


----------



## antoineccantin (Mar 1, 2011)

In the css, I think that it could be a bit neater (eg. sometimes space consistency after eg: eg; or eg:eg; ) although the HTML seems to be nice.

As for the css graphics I like them alot.

I passed it through the W3 Markup Validation and you got 5 errors and 1 warning.
Overall, I really like your site.


----------



## RyanReese09 (Mar 1, 2011)

Kirjava said:


> That's some pretty badass CSS.
> 
> Broken in IE8 though.


 Thanks, and bah, forgot to check tehre.


Godmil said:


> Looks great to me.
> I particularly like the cloud, the colour scheme, and the way the text is formatted in the hills at the bottom.
> The only thing that doesn't sit well with me is the one white box on the left which is bigger than the other two... just feels a little unbalanced, but given how much more info is in that one than the others, it may still be the best option.


I was trying to make them equal heights, and I know how to fake equal heights with CSS (no images) but the problem is is that I had 3 columns and my equal height trick with pure CSS can be done with 2 columns.

I'll go look up how to do it with 3 columns. I really did try making them equal heights to begin with.


> Toad said:
> 
> 
> > I will be completely honest with my feedback because that's the best way to be.
> ...


----------



## Toad (Mar 1, 2011)

Even without changing the font face you can still improve the typography. Try changing the size of it and line-height etc.


----------



## Owen (Mar 1, 2011)

RyanReese09 said:


> I'm not building for Opera, since that's not a requirement.....


 
They did let poor Opera, join in any browser games...


----------



## RyanReese09 (Mar 1, 2011)

Toad said:


> Even without changing the font face you can still improve the typography. Try changing the size of it and line-height etc.


 
Agreed. Deadline is today so I'll update this thread March 20th (that's the date they are telling me results will be up) on what place I got! 


Owen said:


> They did let poor Opera, join in any browser games...


 
It's merely a contest that has no representation of IRL statistics. Opera is a very low percentage of users anyway. 

tl;dr, I didn't make the rules.


----------



## Kynit (Mar 1, 2011)

I don't know if it's possible, but I think multiple smaller clouds would look nicer. Also, the hills are a little bit broken. I see a shadow only on one, and the text runs straight off it.

It looks nice, though! It's a very cleanly-designed site with some very clean code to match! Nothing in the page source looked confusing, and I haven't used HTML since 2005!


----------



## RyanReese09 (Mar 1, 2011)

I was actually going to have a smaller cloud in the background start on the left, and then the current cloud start like 150 pixels over.

The smaller cloud was going to move faster so that it overlaps the bigger.

The clouds were just so time consuming to make (may I note that the entire cloud is one HTML element (the "animation of it is a different element that doesn't contribute to the design of hte cloud), and an overall pain that I decided just to keep one. Many people get annoyed by moving objects on the screen (especially web designers) so that's why I just limited it to one cloud.

Thanks Kynit . You should get into web design. It's a fairly good paying and easy job! I just got one as of a few hours ago, 20 bucks an hour, part time, whenever I have free time to work on it .

The CSS isn't all that clean, well it is, but the vendor extensions are pretty bad to look at (though they are so sexy due to how complicated it looks (and is!)).


----------



## Kynit (Mar 1, 2011)

RyanReese09 said:


> The clouds were just so time consuming to make (may I note that the entire cloud is one HTML element (the "animation of it is a different element that doesn't contribute to the design of hte cloud), and an overall pain that I decided just to keep one.


That's understandable. Again, I've had no experience in web design like this, but it looks very irritating.



RyanReese09 said:


> Thanks Kynit . You should get into web design. It's a fairly good paying and easy job! I just got one as of a few hours ago, 20 bucks an hour, part time, whenever I have free time to work on it .


I've never thought about going into web design. How did you get a job? Are you getting any experience through, like, school programs? I wouldn't even know where to start; I'm not bad at java, but designing something like a web page is slightly beyond me right now.



RyanReese09 said:


> The CSS isn't all that clean, well it is, but the vendor extensions are pretty bad to look at (though they are so sexy due to how complicated it looks (and is!)).


I've seen code looking a lot worse than this. It's not at all difficult to understand.


----------



## RyanReese09 (Mar 1, 2011)

Well I browse a forum Sitepoint (on sitepoint.com, one of the largest web design forums/companies in the world) and I'm a regular there (12,000+ posts) and in my signature I say I always am looking for work. I get a few stragglers every now and then from that. Via those forums people see I am capable of doing this crap as a job. I got a PM on there asking if I was still looking for a job, part time, and I said sure . I won CSS Guru of the year for 2009 year at Sitepoint. That was nice.

I just get my "experience" from a few straggler clients and the bigger jobs like this. It's hard to get a foot in the door, but when it's in, you're in .


----------



## RyanReese09 (Mar 21, 2011)

Didn't win . Not even in top 5. The winning entries were O_O.


----------



## radmin (Mar 22, 2011)

I'd put the css in a separate file. It helps with Search Engine Optimization.


----------



## FatBoyXPC (Mar 22, 2011)

Can you link to the results (and the original contest page)? I'm a bit interested. Did they have any sort of rubric they used to judge your results? Bill is right about throwing your CSS in another file, it not only helps with SEO, but also makes your code look cleaner. 

Since HTML5 is coming out (in May they're no longer taking requests), so if anything this contest should have been a showcasing for HTML5. Throw in the fact that jQuery makes sites look incredible (can very well compete with flash), and CSS3 isn't even supported (fully) in all browsers yet. These rules are a bit off, since they allow you to use deprecated tags, won't allow to use jQuery, images (even small ones), they allow CSS3 but NOT javascript, and even worse: They don't require the code to validate under the HTML4 Strict (and even worse past that: It doesn't require the page to validate under the Doctype you specified, unless you had to make it HTML4 Strict).


----------



## EricReese (Mar 22, 2011)

radmin said:


> I'd put the css in a separate file. It helps with Search Engine Optimization.


 

In what world would that ever matter? Its a web design contest. Its not on an actual site :fp


----------



## RyanReese09 (Mar 22, 2011)

radmin said:


> I'd put the css in a separate file. It helps with Search Engine Optimization.


 Rules have to have it in the same file. Easier for judges.


fatboyxpc said:


> Can you link to the results (and the original contest page)? I'm a bit interested. Did they have any sort of rubric they used to judge your results? Bill is right about throwing your CSS in another file, it not only helps with SEO, but also makes your code look cleaner.
> 
> Since HTML5 is coming out (in May they're no longer taking requests), so if anything this contest should have been a showcasing for HTML5. Throw in the fact that jQuery makes sites look incredible (can very well compete with flash), and CSS3 isn't even supported (fully) in all browsers yet. These rules are a bit off, since they allow you to use deprecated tags, won't allow to use jQuery, images (even small ones), they allow CSS3 but NOT javascript, and even worse: They don't require the code to validate under the HTML4 Strict (and even worse past that: It doesn't require the page to validate under the Doctype you specified, unless you had to make it HTML4 Strict).


 PM me for the thread if you really do want it. They had a guideline on what they judge you on. Again, I know the advantages of external CSS files.

The purpose of the contest was to see what we could do using only the basics. The point wasn't to push new coding standards on us. It was for fun. We didn't have to use deprecated elements. I chose to do it for aesthetics.

I don't see why people (mostly in the contest thread) are complaining about the rules. If you don't like them then don't argue. It isn't changing..it was purely for fun.


----------



## crashdummy001 (Mar 22, 2011)

fatboyxpc said:


> Can you link to the results (and the original contest page)? I'm a bit interested.


 
this


----------



## RyanReese09 (Mar 22, 2011)

RyanReese09 said:


> PM me for the thread if you really do want it.


 
Personal reasons for this.


----------



## FatBoyXPC (Mar 22, 2011)

What are those personal reasons? And what if 20 people ask you, or more? Are you really going to send that many PMs?


----------

