What do you think of my website?

This is a website I worked on some time ago. I am self-taught and I would greatly appreciate any CONSTRUCTIVE comments. If you dislike it, please explain why. Thank You in advance. Here is the URL: http://laughbox.me/

 

Code-wise;
+You're using all divs. Some of your elements can use the <ul> tag instead....and more.
I'm no expert myself, but as a whole, I guess you need to expand your skills in HTML and CSS, try to write as clean as possible. Here's one guide for you. The mistakes are so common that its called common mistakes. Read more. I know you're thirsty.

http://techtalkin.com/Thread-So-what-s-wrong-with-your-website-PART-1

Design-wise;
+The slogan needs work. I though it was an ad. It's a tagline I guess. Maybe make it smaller, put under the logo where it belongs. Behave like a tagline.

+Your type design crash big time. It's everywhere. This is due to ugly CSS. Clean it up so you know which is which and to code only the difference. Then your design will be organized. Design-wise, to expand your experience, read here;

webdesignerwall.com
webdesignerdepot.com

----------

Good effort, improvise code knowledge and make the habit of writing clean codes. I'm trying that too. Let's make Internet a better world for our codes.

 

I greatly appreciate the suggestions! I will be looking over all of these things!

Thank You

 

I can't give you a technical advice but a simple user perspective. I find your site unattractive because it's supposed to be a fun place and it looks sooo serious and boring. Maybe a more colorful design could help.

 

Nice site, but lack of search.

 

lack of search? What do you mean by that?

 

First off, it's nice to see someone at least trying to use dynamic fonts -- but your pagination/nav line (the one starting with "most recent") is declared as 20px -- there's no reason to be using pixels on that even if it is 'large enough'. You also for the most part stayed within accessibility minimums on the colors apart from the white-on-cyan in the menu on the active item, and the cyan on gray for the 'current' sort order. (Most Recent/Most Viewed/Highest rated). I'd fix the contrast on those. Also, lose the periods on the menu items, they look quite silly.

The biggest problem visually and from an accessibility standpoint is it being a fixed width layout, when it really doesn't need to be. Some form of hover states on the images themselves instead of just the text may also help -- since there's obviously a anchor around them, you could set a:hover img {} to an opacity, which with the gray background would look like it's being highlighted. The more visual cues you give the user the better.

Under the hood -- YIKES... Thats bad. The 301k of javascript in 6 files on such a simple page raises my hackles, but most of that is the social networking crap... as nice as their stuff is, the massive bloated garbage scripting they use is just mind-blowingly bad... Not a lot you can do about that but I'd still try to find leaner alternatives since at that size, it's four times my normal ideal for a page template without content.

More of a problem is the HTML 5 lip-service doctype when you're not even using HTML 5, so validation is a joke... the COMPLETE lack of anything resembling semantic markup with the endless pointless DIV for nothing, nothing remotely resembling a logical heading order or even the presence OF headings, endless pointless classes for nothing on EVERYTHING, TITLE attribute on elements that shouldn't have it (like IMG) with no ALT text for any of the IMG tags... SPAN doing BR's job, and of course that without CSS the whole thing is little more than a giant run-on sentence. (or would if not for those ugly/nonsensical periods in the menu)

You've also got absolute URL's on everything for no reason, that's just a waste of bandwidth... and you use the same ID more than once, which is completely invalid markup... ID's are unique, you cannot use them more than once...

Just to give you an idea what I mean, where you have this:

	<div class="homeSortOptions">
		<div class="homeCategories">
			<a id='current' href='http://www.laughbox.me/MostRecent/1/'>Most Recent</a>
			<a  href='http://www.laughbox.me/MostViewed/1/'>Most Viewed</a>
			<a  href='http://www.laughbox.me/HighestRated/1/'>Highest Rated</a>
		</div>		
	<a id='current' href='http://www.laughbox.me/MostRecent/1'>1</a><a href='http://www.laughbox.me/MostRecent/2'>2</a><a href='http://www.laughbox.me/MostRecent/3'>3</a><a href='http://www.laughbox.me/MostRecent/2'>Next Page</a>	</div>

Code (markup):

Which has id="current" more than once, is using single quotes meaning the back-end code is probably just as bad, absolute URL's for nothing, and is non-semantic markup.

I'd have this -- that's two lists of choices, so it belongs in lists.

<ul class="homeCategories">
	<li><a href="/MostRecent/1/" class="current">Most Recent</a></li>
	<li><a href="/MostViewed/1/">Most Viewed</a></li>
	<li><a href="/HighestRated/1/">Highest Rated</a></li>
</ul>
<ul class="homePagination">
	<li><a href="/MostRecent/1" class="current">1</a></li>
	<li><a href="/MostRecent/2">2</a></li>
	<li><a href="/MostRecent/3">3</a></li>
	<li><a href="/MostRecent/2">Next Page</a></li>
</ul>

Code (markup):

Another example would be those gallery thumbs -- where you have:

<a href='http://www.laughbox.me/animals/1000310' class='homeThumbNailsLink'><img src='http://www.laughbox.me/images/jamie-hyneman-walrus2-4675111968.jpg' class='homeThumbNailsImg' title='Mythbusters'/>Mythbusters<span id='homeViewsRatings'>25 Views</a><a href='http://www.laughbox.me/memes/1000309' class='homeThumbNailsLink'><img src='http://www.laughbox.me/images/impossibru-1291867507.jpeg' class='homeThumbNailsImg' title='Impossibru!'/>Impossibru!<span id='homeViewsRatings'>26 Views</a><a href='http://www.laughbox.me/memes/1000308' class='homeThumbNailsLink'><img src='http://www.laughbox.me/images/gollum_20100219_aatheory1-7407396409.jpg' class='homeThumbNailsImg' title='Jared!'/>Jared!<span id='homeViewsRatings'>12 Views</a>

Code (markup):

Endless pointless classes for nothing, no block level separators, no block level container, title on elements that shouldn't have title with no alt text... it doesn't even close all the span being opened, and really it's a list of thumbs so again, a list

<ul class="gallery">
	<li>
		<a href="/animals/1000310">
			<img
				src="/images/jamie-hyneman-walrus2-4675111968.jpg"
				alt="Mythbusters"
			/><br />
			Mythbusters<br />
			25 Views
		</a>
	</li><li>
		<a href="/memes/1000309">
			<img
				src="/images/impossibru-1291867507.jpeg"
				alt="Impossibru!"
			/><br />
			Impossibru!<br />
			26 Views
		</a>
	</li><li>
		<a href="/memes/1000308">
			<img
				src="/images/gollum_20100219_aatheory1-7407396409.jpg"
				alt="Jared!"
			 /><br />
			Jared!<br />
			12 Views
		</a>
	</li>

Code (markup):

... so on and so forth. If you have a perfectly good block parent (like UL) and nothing but unique tags inside it, you don't need classes on everything! Even if you put those span back in, they wouldn't need classes as they'd be the only span inside the UL... so instead of ".homeViewsRatings" they'd be ".gallery span" -- instead of ".homeThumbNailsLink" you have ".gallery a"

Which is how even with the extra formatting my rewrite of that part is 565 bytes compared to your original's 1.27k -- in other words less than HALF the code. CSS-wise you just set the LI to display:inline, the anchors to display:inline-block, set the UL to text-align:center and then you could even change the layout to semi-fluid, with the possibility of responsive layout as well.

... and you don't even have a meaningful site title shown anywhere... TITLE in HEAD is not content. Generally speaking you don't HAVE content on the page other than images, which means from a search standpoint it's rubbish.

NORMALLY I'd rip you to shreds for the complete lack of images off graceful degradation, but I'll let it slide because it seems the entire point of the site is a image gallery; not something non-sighted users would visit -- but that does still hurt you when it comes to search rankings. (alongside the lack of actual text content explaining what the devil the site IS)

So... my advice: Semantic markup, responsive layout, ease up on the pointless DIV and even more pointless classes, and learn how to use ID's properly.

... but for all that, as image galleries go I've seen far, FAR worse.

 

Thank You,
I've seen you around a lot on these forums and it appears you really do pick stuff apart and thats exactly what I was looking for... There is nothing at all I can argue with, I agree with all of it. However, just an fyi, I didn't type out the whole url. I had it as a PHP variable and just echoed it out... I am not sure why I did but I did for some reason. I have given up on this site somewhat but I did do a lot of work and wanted to know how my current 'skills' are and what I should change. I will take your suggestions and maybe post another sometime in the future!

 

Well STICK WITH IT! For everything I said, you've already got a more useful site than most of what the alleged 'experts' out there would crap out -- no joke. You've only got 12k of markup, which is quite economic and though I think it could be reduced 40 to 50% overall, it's far better than the 30-50k most of the 'designers' out there would have ended up with. Your entire layout is focused around the content -- and that's a good thing. No fancy image-loader garbage, just clean conventional relatively fast loading navigation and pages.... despite being 1.4 megabytes in 42 file -- which feels pretty darned hefty -- 852 megs of that and half the total files is the CONTENT -- all those gallery thumbs and that's fine -- as I've said several times on these forums I make exceptions for image galleries because they are by definition heavy.

Though I'm wondering why none of the scripts and framed documents are being served compressed... That's not right. ESPECIALLY the ones served by google, twitter and facebook since they should know better... again, not your doing.

 

Because I had no idea it was possible and never heard of it before I will look into it though.

I need to think of something more unique because there's thousands of funny picture websites and mine is just another, with nothing unique added to make it standout. I wanted to make it a network but lost the motivation. I started with another site: http://drawbox.me/ All I did was the basic design and I spent the rest on the registration... I was happy with myself because of the beautiful AJAX I used for the first time. What is your opinion on that one? Even after it all I am very glad I spent the time on it. I learned a lot.

 

Drawbox rocks! I love the idea.

 

I wasn't expecting a reaction like that... I will have to wait to see more reactions if I should start investing my time into it again. Again, I felt like it was a duplicate of http://www.deviantart.com/ and I need something original to bring people to drawbox instead of deviantart.

 

Not a big fan of AJAX, or the fat bloated steaming pile of garbage known as jQuery for that matter... But I'm stuck asking WHAT AJAX?!? Not seeing how or what it's actually used for, if anything. (that or the code is broken in Opera). Reeks slightly of 'scripting for nothing' in that regard. But again, I'm a firm believer that a website, particularly one that isn't a "application" (NOT that I'm a fan of "web applications" since 90%+ of them are bloated slow useless crap), should be written to work first WITHOUT scripting or CSS, and then be progressively enhanced as needed.

The appearance isn't too bad, though that salmon red does cause a few legibility issues in some places, and again, fixed width layout can mean accessibility issues.

That page is similarly afflicted with a lack of semantics, classes for nothing, and again using the same ID across multiple elements -- which is invalid HTML and could make scripting fall flat on it's face. It's also a bit span-heavy... and doesn't have block-level separators to say semantically where each 'section' of stuff begins or ends.

It is nice to see the 'double nested' approach to building a progress bar, though I'd have coded it with % just in case I wanted to change the element widths. One of the few cases where I'd actually advocate the use of the STYLE attribute, since the value you are setting with it is actually content. (As a rule of thumb I say that STYLE as a tag should be made obsolete/invalid, and STYLE as an attribute should be deprecated )

Biggest problem on that page is all those ID that should be classes. ID's are unique, they should only be used ONCE on a page. NOT that around two-thirds of them serve any legitimate purpose since the style should/could be applied off their parent or by the tag itself.

 

Again, thanks for all the advice. I never really knew the difference between classes and id's but now I do so I will not make that mistake again.

I used AJAX for form validation on the sign up page.

 

Make it cleaner, use dynamic fonts, open it up to responsive layout, and don't stuff as much pointless crap on every page as they do, and you'd be golden.

DeviantArt is a really mediocre website and absolutely dreadful from a functionality/usability standpoint. I've always been a little surprised nobody's made a serious push to take them down as to be frank, it shouldn't be THAT hard.

I mean, well... Gimme a few minutes to finish off second breakfast, and I'll do a review of DeviantArt akin to the one I did for your site, so we can compare. DA is one of the major sites of the Internet, but from an accessibility standpoint they've not got a leg to stand on, particularly in regard to how well it works on things like handheld/tablets.

 

In my opinion Deviantart has too many categories. It's too deep. The design approach you take, is simply effective. DA has mixed size of thumbnails, so it looks scattered.

Your laughbox contains lotsa divs. Drawbox contains lotsa spans. Some of it can use <ul> tags instead. I have a habit of seeing it first on raw HTML without styling, then I start the CSS. I don't know whether this is good practice or not, but I think it helps me write cleaner HTML with proper use of tags.

 

Ok, here's a 'review' from a design/development perspective of DeviantArt -- it will show the places you could take them down a notch or two.

Color-wise it's a bit boring/bland. The crappy green (No offense DigitalPoint) is very uninspired. It also has legibility issues on that front since the blue they are using for links is way too close in luminance to the background green. That background has a luminance of 218, when the text only has a luminance of 100. A difference of 118 -- less than 50% the color spectrum and so has legibility issues. Far, FAR worse is the grey-green text used underneath each items, which only has a luminance of 173 -- a difference of 55, which is only 21% the lum spectrum and as such invisible to a lot of people.

From there it also uses absurdly undersized fixed metric fonts on everything. Whoever told them 10px is an acceptable font-size needs a good swift kick in the junk!

... and while the site is fluid to a certain extent, they have no max-width making long lines of text (what few they have) hard to read, and haven't leveraged mcSwitchy or responsive layout to make the site more useful on things like tablets or phones.

they do not even attempt to scale their thumbnails to efficiently place them on the screen, and instead seem to throw scripting at it client side to still have the arrangement look a bit willy-nilly. The new Google image search is similarly afflicted and looks like arse to me because of it.

It is a good thing server compression of static text files is enabled for them, because the 732k of JavaScript for **** only knows what damned well better be compressed. (served as 234k, which is still ten times my upper limit for scripting allowed on a page)... The page only seems to have around 30 actual content images, but seems to be built from an ungodly 100 separate image files -- FOR WHAT?!? Likewise the 407k of CSS is mind-numbingly unbelievable, and mostly just screams it's developers are inept, or just too many cooks are spoiling the stew... again, good thing it's being served compressed since it's only taking 75k to deliver it -- but compressed that's still TWICE what I'd probably have for an entire forum software's CSS when uncompressed.

The 141k of markup used to serve the home page (sent as 27k compressed) is also mind-blowingly bad. There are maybe 30 content images and 6k of plaintext, so I very much doubt there is any legitimate reason for such a page to take more than 24k of markup UNCOMPRESSED -- so basically they're using six times as much markup as should be necessary on such a simple site!

Peeking under the hood things just get worse... Massive static scripting inlined in the markup, goofy javascript tricks playing games with CSS for Christmas only knows what, ID's and classes on body, tables for layout, endless pointless classes (to the point it makes your use of classes and ID's look outright tame), empty spans that look like scripting hooks (meaning they shouldn't be in the markup, the scripts should make them), malformed/inaccessible forms, gibberish/incomprehensible class names meaning maintenance must be a nightmare, "Small" around non-subtext elements, endless pointless span, javascript overhead doing href's job, static 'onclick' scripting that should be self attached by the scripts, fictional made up tags like "keeper", or 'data-super', shortquote (q) doing blockquote's job, bizzaroland forced word-breaks in the markup (word-wrap:break-word's job), vertical-breaks in the markup doing border's job, no lists around obvious lists, paragraphs around non-paragraph elements... They're lucky this is an image gallery because otherwise it's such an accessibility train wreck it would be useless as anything else!

it's also knee deep in just putting too much stuff on every page. The footer in particular is horrifyingly bad with the stupid "definition" piece, slapping that 'journal portal' and some stupid poll on every blasted page, that "channels" section, etc, etc...

Viewing content is also somewhat broken -- the 'games' they play with trying to resize content to fit often results in me screaming at the display "Oh for **** sake, just let me open the damned image!" -- quite often all the goofy scripting tricks they are trying to pull could be better accomplished via CSS, and most certainly would be less broken that way... the laugh being they don't even TRY to make it useful with scripting for things like pan and zoom.

Much less the annoying/stupid 'advertisement' bar -- I'm not a big fan of advertising on websites; partly because I run an adblock so I never see them in the first place, partly because I remember the first dotcom bust and am sitting here waiting for the second one as we're seeing a lather rinse, repeat the past few years. Much more a fan of the PBS approach (please donate/hat in hand), or simply sucking it up and admitting that for 99% of websites they're an expense, not an investment... This is borne out by the only people really making money from online advertising being the people who sell online advertising - like Google.

Even so if you were to try and have advertising to add to the site's income, don't add some stupid javascripted gee ain't it neat crap to try and keep it on screen ALL THE TIME just making scrolling around the page painful and in some places actually covering up the content! That's my biggest problem with their use of it.

The only reason people put up with the painfully bad navigation and inaccessible site at Deviantart is the content. Content of value can outweigh almost any other shortcoming of a site, which is why I keep saying time and time again, CONTENT FIRST!

So yeah, if you can get a decent back end with accessible layout and clean navigation -- with a better back end for uploading content and a cleaner less obtrusive (and less bloated) image viewing -- you could certainly take a bite out of their traffic.

Just be warned, it's gonna be expensive so have a revenue stream (donation plans and 'deluxe' accounts) in mind. Also I think you could do a bit better than they do on the adult content filter as theirs can be... annoying. In fact, you may have to operate at a loss for at least a year before you can even plan to get into the black.

But that's true of any real business venture. If you're not in the red the first year, you may find yourself closing shop prematurely from a lack of doing things right. It is possible to be so obsessed with making a buck in the here and now, it costs you in the long run.

... see the giant scam that is "credit". Pay more later for something you can't afford now! That sounds great! (NOT)

Though I will say that deviantArt proves something I've been saying over and over and over and over and over and over and over... All the big successes of the Internet wouldn't win a beauty contest for their site templates. HELLS BLAZES AND SERENDIPITY, THIS IS AN ART WEBSITE WE'RE TALKING ABOUT and design-wise dicking around in Photoshop was probably the last thing on the list, not the first. Full screen background? None, no room for it as it has CONTENT. Goofy animated scripted crap? None, serves no purpose other than getting in the way. Images for text? Goofy webfonts? Not to be found!

For all the problems I just outlined about DeviantArt, it still pisses on the type of artsy crap PSD jockeys fill up sites like ThemeForest or TemplateMonster from so on-high you'd think the Almighty himself just came home from a kegger.