Please critique my first HTML/CSS/JQUERY site and parallax scroller, I need feedback.

Hey everyone,

So I am an amateur developer looking for tips on aesthetics within HTML/CSS/Javascript and Jquery. I am doing a project for my digital marketing class at the University of Colorado and I am required to poll recommendations and ratings of user friendliness. Please check out the site and provide any suggestions in a reply. Thank you for your time. http://www.squarestateskatecamp.com/?utm_source=digital_point&utm_medium=forum&utm_campaign=responsive

Sincerely,

Ethan C.

 

It's good, nice , I like it. There are some practices I don't reccomend, but for class purposes it's more than good.

 

Sad to say the website is too ugly!

 

Hi... it took me around 30 seconds to load the webpage but once its loaded i found no issues with the responsiveness. One more note.. please reconsider changing your top menu icons.. It is a big turn off to me. Just my opinion.

 

The oversized non-dynamic text, counterintuitive "hide the content until you click on the arrows, even when you click on the menu items", and non-responsive layout mean that from a usability and accessibility point of view, it's less user friendly than BASH. (the shell used in many *nix systems). If anything those things combined with the massive amounts of whitespace for nothing, lack of graceful degradation, massive background images too blasted big to have ANY business on a website in the first place and endless pointless scripttardery is a giant middle-finger to visitors. You also have several sections of illegible colour contrasts like white-on-yellow or white-on-grey, so I can only assume you've been duped into thinking graphic arts is web design and that generally speaking nobody has explained the WCAG to you yet.

You have gibberish use of numbered headings -- how can you have a H2 when there's no H1 for it to indicate the start of a subsection of? Is the contact info REALLY a heading indicating the start of a subsection of that H2 given that it seems to be multiple content elements, NOT actual headings? Remember, headings have a semantic meaning and do not simply mean "text of varying sizes".

You basically seem to be wasting half a megabyte in 48 files to deliver 800 bytes of plaintext and around ten content images -- indication that the page is a laundry list of how NOT to build a website. The monolithic page construction of slapping everything into one page with that STUPID MALFING parallax bull, and again the counterintuitive way you bascially hide the content (to the point the page could be accused of content cloaking by search) indicates that before I even look under the hood that the very methodology used to build the page is rubbish. Again that scripting off or CSS off it utterly and completely falls apart from a lack of graceful degradation being more than enough proof of that.

... as further shown by the endless pointless static scripttardery in the markup, line breaks doing padding's job, attributes like TARGET that have no business on any website written after 1997, pointless ID's, paragraphs around what should be headings, h3 around a non-heading or multiple headings (not sure which I'd qualify that as), lack of alt text on your content images, presentational images in the markup, further counter-intuitive scripttard opening and closing of subsections in that staff area which generally speaking just looks like rendering errors instead of intentional design, no media targets on the style embeds, incomplete favicon link with no shortcut fallback, GA script in the HEAD which is an invalid placement since that generates content (which is why that belongs right before </body>), the mouth-breathing halfwit bloated asshattery known as jQuery pissing all over the site's speed and usability, content that only exists through the scripting, incomplete inaccessible forms (where's your FIELDSET and LABELs?), GIBBERISH fairy-tale tag methods that don't even EXIST (there is no such thing as </br>), nested DIV doing UL/LI's job...

Hardly a shock it's got 48k of markup doing what should probably be 10k or less' job!

If this is what they are teaching you, get a refund on your tuition as they aren't qualified to be teaching you a blasted thing in their utter and complete ignorance of accessibility, user experience, or interface design. Anyone telling you to use scripting for layout and the stupid bandwidth wasting parallax scrolling, then claims accessibility doesn't know enough about web development to be flapping their gums on the topic!!! Generally speaking I'd say the people teaching you don't even know enough about HTML or CSS to be teaching; sadly that describes the majority of the sleazeball "leeches on the teat of society" who are professional educators in IT fields right now.

 

the loading is good but please try and change the theme of the website. it can be more attractive than that. All the best

 

I have a few comments:

1. I would rather have the Top Menu buttons take me directly to the content instead of just scrolling me down the to right level of the home page. Unnecessary extra step.

2. It was not intuitive to me, at first, that I needed to click on the little down-facing arrow below the button name to get to the correct content from the Home page.

3. When I clicked through, I found even more selections to click to get to the actual content. Too many clicks to get there.

4. From an SEO perspective, this is very minor, but I have always been told to lead with your 3-4 primary keywords in the meta-title and not with the company name which will have high SEO, anyway.

5. Everything loaded very quickly for me. I was using the latest version of IE.

Good luck with your project.

 

I have visited this site and i think that the decision to use these many colors is quite a turn off, i believe that you need chose a single color theme for your website ( use colors of similar shades). The website background took a long time to load but navigating the website is easy. The menu too is disorienting for instance under the Programs the sub headings color make it frustrating to look for them. The menu in general should be changed as these format will cause a lot of problems to the users a clean drop down menu i think would better suit this website for the sake of easy navigation. The links too gave me trouble not that they are not working but they do not look like links. Though i also give a thumps up for your creativity using skateboard as holder for links, the problem is that this won\t be obvious to anyone.

 

I agree with deathshadow big titles and text are not good for responsive designs

 

Well DS coverted thing pretty well, I didn't vote because there were no negative values I it probably needs about a minus ten. If you were a student of mine, I would recommend you change to something more productive like driving a taxi, or painting lines on the highway because if you think that is good enough to present for review you have no future in web development.

I can handle bloat and over design from novice developers, but failure to learn the technical requirements for validaton, semantics, accessibility, and usability are a strong indication of a lazy approach where the only thing that matters is a look that gives your ego a boost because you think it is art. There is no room for that in serious web development which is a precise, demanding set of skills with formal requirements similar to engineering standards, not art school "anything goes" crap.

 

If I were a professor, I would always give a better grade to someone with far simpler page, but with cleaner and more intelligent code than this. This is definitively 99% art and 1% programming, but you are being too harsh on this one, man has enthusiasm and I hope he will master his developing skills.

 

I am afraid that even if I were interested in the product, I would bail before finding anything useful. You want a great site from a marketing standpoint? Make it easy for the visitor to find what he came to find. Make it easy to learn what he came to learn. Make it easy to buy what he came to buy. This document is none of these.

Looking good is nice, but the least important element of all. If you don't believe me, look at arguably the best marketing site in the world, craigslist. Web marketing is quite different from print or trying to peddle your dish soap in the supermarket, where catching the eye is a major factor.

cheers,

gary

 

We would all like to see everyone with a desire to do web development develop the skills necessary. What you seem to think is enthusiasm; I see as delusion. Presenting something that bad for comment thinking you have something of value is definitely delusional and there is no point encouraging anything but throwing "the art" in the garbage and investing some time to learn about the technical requirements of web development.

 

a bit slow but looks great!

 

It doesn't "look great" - the color combinations are horrible, the icons in the menu look like they're done in paint, and the overall theme of the site is... nowhere to be found. Clicking on "Programs" takes me to a yellow box, with no indication of what to click to get more info - no changing the pointer, nothing. When clicking the downwards arrow, I get the top of a huge picture, which doesn't even fit on the page properly when scrolling. Underneath that picture is a bunch of seemingly random sections, which at least changes color when hovered - however, when clicked, the background doesn't follow, which makes the text completely unreadable. Scrolling further shows that there also is more clickable content, but those links also doesn't have a background, and that makes them VERY hard to read.

If this was a school-project, I'd give you a D, at best. 3/10 on that scale, again at best.

Sidenote: while the page "works" in a mobile browser, the parallax scroll doesn't really work, as the images are way too big, hence only the second image from the top show any movement, the rest are more or less static. Since you're not removing the actual effect, nor doing anything with the CSS, the loading of it on a mobile browser could be a lot faster if you fixed the code.