The experience, the attempt at making a site easy to manage and customize, and the process is sometimes more fulfilling then the end-product 🙂

It's how he recreates 😉

swivel, I'd really like to see a timeline of your CMS's from the last like....4 years, with code snippets to accompany them.

Indeed it is 😛

Hehe, I might be able to do something like that ^^,

Make a list of all of them, a snippet or two if not the whole source, and a description of their features 🙂

Hell I'm sure theres quite a bit of discussion on here about them if anyone wants to take the time to dig them up 😄

It looks pretty good, and I like the way the control panel was set up.

Thank you, sir. I'm hoping to actually get a system behind it once I'm finished adding javascript behind the ACP now that I have it partially HTMLified (lol) 😛

Got the thick semi-transparent background to work in IE8 finally, not sure about the older browsers but I'm satisfied 🙂

To me, Internet Explorer is obsolete regardless of the version, but every once in a while I'll make my designs compatible if it's easy enough 😛

Out of curiosity what did you use to create the image of the design. As a final project for web design I have to make a web site, and I think it would help if I actually tried to do some planning.

GIMP 🙂

There are quite a few features I'd like to see in GIMP, like better layer management and such but I love it. Doesn't quite equate to Photoshop in effects or anything, but it's a good free image editor 🙂

Alright guys, compare these two if you will 🙂

October 20th's version: http://swivelgames.com/templates/latest-102009/index.php
October 24th's version: http://swivelgames.com/templates/latest-102409/index.php

Tell me what you guys think! Let me know what you liked about the older version, like better about the new version, and what you think I should change 🙂

I'd love a good critique of this! SitePoint seems to be giving me some good suggestions, but I'd love to hear what you all think as well! 🙂

It's depressing to see so many <div>'s and <span>'s going into a design that doesn't need them. Home, Blog, etc. should be written using an unordered list, the banner and blog post titles should all be described using header tags, and the postings themselves should be placed inside paragraph tags without line breaks. It's also a bit odd to see horizontal rules with no <hr>'s to be found.

The source code is pretty cluttered from an ostensible scramble to make everything look pretty, and yet the problem with this approach is that there is no fundamental outline for those who need one (e.g., screen readers for the visually impaired, and legacy browsers that have little to no support for modern styles). Contextually, your site has become a pain for these people to navigate.

Lastly, using CSS to delineate content is practically overkill, as there is already an assortment of tags for telling the system exactly what goes where and in hierarchical fashion; the elements need only to be touched up in a coat of paint, not hacked together from scratch. I believe that in the long run, you made it harder to update the visual aspects of your site rather than easier.

But if you need help, I'm eager; my AIM address is below. Just keep poking it throughout the day until I surface.

–Goose

Uhm. I think you're missing a button under Stalk me.

As I mentioned on twitter, 102409 seems fitting. An information column shouldn't take half the page 🙂

@comicIDIOT: Which one is that? 😛

@Weregoose: The HTML tags seem to be working fine in all modern browsers, which is what I was aiming for originally, so I don't see why I would need to change them in this design (would just be tedious and pointless, seeing as these are working just fine 😛 ) but I get what you're saying. I've gotten very comfortable with just using DIV and SPAN tags. I'll definitely open myself up to using more appropriate tags in different areas, however, this seems to be working quite well for me, hehe. 😛

My goal was to make the design look like the mockup, and I believe I did a pretty good job, though I've changed it up quite a bit since then. When I'm done focusing on how it looks (which is what I originally requested to be critiqued, but I appreciate the post), and have some time to focus on my technique, I'll be sure to send you a message or experiment with different tags. I'm very familiar with HTML tags and their default styles, but I'm also very comfortable with my current techniques (although it might not be the most optimized of HTML sources).

As for the CSS, that will be put in .CSS document and optimized once the design is finished. It's much easier for me to quickly edit the template with out having to deal with browser caches and switching through multiple files when editing the layout.

Haven't got the faintest. You have a fairly large gap between the RSS & MSN buttons.

And haha, I just got your pun joke xD

@comicIDIOT: No missing buttons, just weird floats.

@swivelgames: With a retort verbatim, no less... You're hoping to shrug me off with an effort as minimal as your venture into HTML coding, and I don't respect that in the least. CSS is not a structural language, and only Chuck Norris is permitted to write a website with a two-tag repertoire. But as a verbal argument alone wouldn't suffice, I've decided to reconstruct your page from scratch.

Try it. When you're done looking, turn off the styles. If your browser doesn't support that feature, then rename the .css to something else and refresh the page.

You might first be wondering where all the pretty colors and pictures have gone. That sort of thing is merely decorative; it doesn't convey anything that one or two words are unqualified to describe, so it's been dropped from the HTML. If a picture acts as an ornament to a webpage and not as a visual aide to its content, then let the CSS handle it. Screen reading software doesn't get much use out of images anyway.

Assuming that someone wanted to use the search feature on the earlier version, if he weren't aware of the fact that pressing the enter key submits a query, then he'd be stuck, right? Solution: I substituted a button element for the magnifying glass – it shows up in the outline form, and the CSS adaptation now rewards users when they click on the most obvious place to start their search.

Did you notice the textual replacement for the banner? This is something that is important to include in the HTML – without it, people who would otherwise lack the desire or ability to read illustrations in their web browsers probably wouldn't know what page they were looking at unless they poked around a bit. Kill the styles on the original to see what I mean: it just becomes incoherent and unusable.

To remedy this, always outline first; stylize after. If push comes to shove in terms of cross-browser compatibility, then at least the results you get when you turn off the styles will still impart something that has meaning and makes sense.

At any rate, the new page renders correctly in IE6 and at 800×600 screen resolution – no more horizontal scrollbars. Also, text will no longer instantly spill out of the regions upon resizing, plus you don't have to wait for the "stalk" images to load during mouseover. This is done in a little over 80 elements, under 50 selectors, and roughly 140 style declarations.

It's easy to fall into a pool of habits, but you've got to come up for air sometime. I just hope that this was worth the trouble when I could have just said, "Good design, poor structural implementation," which is really all it was. Although, it does help to nip these things in the bud before it affixes itself permanently to your handiwork on future projects. Start practicing now.

–Goose

Edited for clarity.

The gap is to separate the social network or web-related items from the chat items.

Your input, although unrelated, is appreciated. I'm sure no one can deny the effort you're putting in to this. But since it is in fact unrelated to my original request, it will be noted, and addressed when I feel it comes to that stage. Right now I'm not worried about the source, I'm simply throwing the HTML together so it's easier for me to tweak the design as I perfect it.

Have Chuck Norris call me if he has a problem with it.

Though my web design and HTML and CSS skills might be at "newb" status because I was yet to find myself writing a decent design to practice them on, I'm far from an illiterate, Weregoose.

The design is what is being structured right now. The functionality will be set in place later. Is it really hard to understand there's no functional pieces on the page right now? I'm simply asking for your opinion on the layout and design. When the design is done, I'll be rewriting the whole design from scratch for practice. This type of extensive review would be much appreciated if, again, it was on-topic.

This was already planned for the end-product. I'm sure you also noticed the lack of <form> tags surrounding the search input box? I must have forgot to mention that functionality was not the focus of this just yet.

My goal for this project was to build a simple design from scratch and rewrite it using different techniques that will result in the same visual outcome. Once I have the final design, I'll be focusing on the code.

The method you used is one I'm quite familiar with and have used plenty of times in the past, but thank you for sharing. I'm not worried about rendering the design correctly in IE6, as the browser is obsolete. Regardless of your hopes and dreams that my design might someday render properly in ancient browsers, that's far from my main focus right now and I'm looking moreso at supporting modern browsers with the current attempt at perfecting the design.

Thank you for you input. It has been noted. You might try copying and pasting this once/if I decide to post a new topic related to the source-codes of the design. I really am not worried about how this is coded right now, as I've said countless times now. So if you have any input related to the look of the design, please post it. Otherwise wait until I request input regarding the source code.

All fair... Just a case of clashing mentalities. I prefer to do it once and do it right, and have never cared much for the waterfall model.

This probably won't foster anything new, but about 7% of the hits at UTI this month so far have been IE6 users. Hundreds of schools continue to provide it as their default web browser, so the demographic is not insignificant. As always, it's your choice what audiences you want to address.

I know I come across as a hard-a (be glad I'm not one of the worse ones out there). By delivering what I have to say in a forceful manner, I find that the words tend to linger just long enough for a person to get a hint of information out of the mixes of emotion that it creates. And yet, all the better for that person than for him to just smile and nod; dumb-playing has never been a favorite spectator sport of mine.

IE6 may still have a user base (as does virtually ever OTHER browser in existence), but the point still stands that it's obsolete. IE6 and its ancient kindred do not and will not be able to render the modern web standards. If you always continue to ensure your site renders properly in IE6 and other older browsers, you will in the end limit yourself to the standards that those browsers support, to inundating yourself in conditional CSS and javascripts to ensure some semblance of design across all browsers, or whatever other fixes/hacks/changes you need to make sure everybody has the same experience. And in the end? Why the HECK do we even HAVE those newer standards if we won't or can't use them?

Personally, I say screw 'em. If they are too stubborn or too [insert adjective here] to upgrade to a modern browser, it's THEIR loss, not ours. It's time we stop supporting the legacy browsers. They're old. They're obsolete. THEY'RE DONE WITH. Save yourself some work.

"A web browser is like a car. Some people like new ones and some people like old ones. But, if you keep your old one forever, you'll just end up paying a higher price to keep using it."
</2-cents-worth>

Why do we still have 32-bit apps then?

Because when you're a non-dev basic computer user, you almost never have a day where you go "EXPLETIVE! I can't use this application because it's 64 bit only D:"

32-bit isn't really 'Legacy' yet. Until the day we all start arguing over getting rid of 32-bit for the much more widely used 64-bit, 32 is here to stay 😛

This is a great mentality to have until the first time you have to do professional work. If you aren't wiling to provide what the client asks for (which usually includes supporting IE6), tough luck and time to find a new job.

Understood, and I respect that. If it were any other design I would have done a better job of structuring it, but right now I'm rebuilding this design from the ground up multiple times. Just trying to get a feel for things, since I have gotten myself up a tree with some bad habits and cure my ignorance, which is why I'm not focusing the code right now.



SO true. But since Keith will never get there, as we've discussed this before, he doesn't care 😛

Also, here's an interesting article (Google's paraphrase of Keith's post 😉 ):
http://www.sitepoint.com/blogs/2009/10/27/google-explains-browsers