Re-Design

[josephman1988]

Hi,

 

New re-design im doing, but it looks too crowded.

 

Any helps on design, colour scheme changes, content management?

 

www.v2.projectfinalfantasy.com

[jackpf]

Hmm...I think it looks cool. Impressive you haven't used tables at all for such a complex layout.

 

But you're right; it does look pretty cluttered.

 

I think you need to dish out some padding. Also, it looks a bit white. I think maybe, some additional colours could improve it.

 

Good luck.

[nrg_alpha]

Impressive you haven't used tables at all for such a complex layout.

 

I personally don't consider the layout complex. Using CSS block / inline elements to your advantage (with some divs if need be) can produce the equivalent to layouts built using tables. Rather nice to see some sites on here that are not table based. However, this site (like many others unfortunately) falls victim to not passing validation, nor does the CSS.

 

@OP:

 

I would indeed consider giving the content some more 'breathing room'. I'm not a big fan of the font style. I would probably try some sans-serif based ones instead, as currently it feels like an afterthought.

 

Not sure why there's a clock just under the header graphic. Rather pointless IMO. Perhaps bolstering the site's 'up to date' look by replacing that with the current date would be better..

 

The collection of faces in the left hand panel are all separate graphics. I think I would merge them into a CSS sprite sheet and display each one as a sectioned of piece using CSS. Having all those images as one larger image saves on memory / http request headers, as currently the home page is 349.1k and is using 25 http request headers (both can be reduced to make the site even lighter and faster). On that note, I would consider shoving all images through smush.it! just to squeeze some extra memory out of them, as passing the homepage through smush.it! dished out a savings of 61.39 KB

 

I would consider adding some nice footer section. Feels rather odd not seeing one.

 

Perhaps consider using heading tags (<h1>, <h2> etc...) for SEO purposes. This would include a well written meta description tag.

 

[jackpf]

Ahh well, I guess I'm not as experienced with CSS as you guys.

 

I use css for most things, but stuff as complex, or "incomplex" as that, I'd have to use tables.

 

Good suggestions though, worth taking onboard.

[josephman1988]

Thanks for both of your inputs, thats exactly what I needed.

 

Yes, it's not validated at all, I tend do do that when I've finished building it.

The footer will be added, but again no footer is because i need to get the content section finished.

The clock atm is useless, and I think you are right, a date would be more useful.

H1's and H2's will be needed, I also agree, but i just need the design in place first.

 

Finally, yer, the sprite sheet is a fantastic idea, and I will incorporate that.

 

Thanks so much for your input.

Any more suggestions will be fantastic.

[only one]

It doesn't work right in opera, all the divs are under eachother, when in IE it looks the way it's supposed to.

[josephman1988]

It doesn't work right in opera, all the divs are under eachother, when in IE it looks the way it's supposed to.

 

Thanks, I checked Chrome/FF/IE, time to look at Opera!

[jackpf]

I thought opera used the same rendering engine as chrome/FF?

[only one]

I thought opera used the same rendering engine as chrome/FF?

No, Opera is 10x faster.

[jackpf]

Ahh, didn't know that. I think I'll stick with FF though...I like my webdeveloper plugin

[fabrydesign]

I thought opera used the same rendering engine as chrome/FF?

Uh... Chrome uses the same engine as Safari. Chrome, Opera, and Firefox all use different engines.

[nrg_alpha]

Chrome and Safari use Webkit, originally developed by Apple. Opera uses their own proprietary Presto engine (Presto 2.2 is used in Opera 10 , with Carakan from there on out apparently). Firefox meanwhile uses it's own Gecko engine (developed by Netscape).

 

Sadly, IE doesn't use any of those, and instead uses the Trident engine. I personally would love nothing more than to see IE switch to Webkit (yeah, like that's ever going to happen), or vanish (their browser shares are sliding.. fingers crossed for [if it happens at all...] extinction [most likely long-term]).

[jackpf]

or vanish

ahahah

So true. Some guy was giving me stick before for having a go at IE, and he was attepting to persuade me that it was the most standards complient browser around  :-\

 

I don't understand why anyone even uses it.

[josephman1988]

I tend to code with FF and fix for IE, anyone else?

I switched to FF when I started to learn to developing sites.

[nrg_alpha]

I tend to code with FF and fix for IE, anyone else?

I switched to FF when I started to learn to developing sites.

 

I tend to code for all major up-to-date browsers simultaneously (FF, IE, Chrome, Safari & Opera). So if something looks right in in all but one browser, I know I need to make modifications. Usually, IE is THE culprit. It becomes a tweak and check process. Once the page I'm working on displays consistently across the browsers I mentioned, I am happy.

 

The only real crux as of late of me was IE 8's 'compatibility' mode (which seems to be a moving target: read- code may look good at one point in IE 7 'simulated rendering mode', only to break in the next IE 8 update). So I stopped depending on this mode. At this point, I already had IE 8 RC1 installed (which means no turning back, as you cannot uninstall it). Thank god for Norton Ghost is all I can say. I had made an image of my hard drive prior to installing IE 8, so I had to revert back to that image (thus re-install IE 7 instead, as the image doesn't include any IE installations). Other than that, all's good.

[TheFilmGod]

There is absolutely no doubt that IE6 or lower is a nightmare to design for. It lacks crucial CSS 2.1 coding techniques, and fails to render elements accordingly to the box model set forth by the W3C.

 

Despite the poor reputation upheld by IE6, its successor (IE7) browser is one of the most standard complaint browsers around - maybe I shouldn't have said that. Before I know it, my head will be chopped off under the W3C's gelatin.

 

When I say the "most standard complaint browser," I am not implying that IE7 conforms to the W3C's standards as well as FF or Safari do; I'm simply saying IE7 is often overlooked as a poor browser simply because it comes from a tarnished browser family.

 

Although IE7 may not support the entire array of CSS 2.1 elements, it does provide a competent designer with enough options to create even the most state-of-the-art website.

 

I would like someone to provide me with a semantically well-designed website where IE7 fails to properly render it. Typically, IE7 fails to render a website properly because the markup and css is garbage to begin with.

 

Garbage in, garbage out.

 

In my previous comments, several members argued that negative margins is one example of semantic code that IE7 fails to properly render. First of all, negative margins are illogical. How could anything have a negative margin? You could simply float it, or use absolute positioning to achieve a similar effect. More importantly, negative margins are supported extensively by IE7. It fails to render negative margins in scenarios where absolute positioning better suited.

 

As a 17 year old kid, I might consider myself overly in love w/ IE7. After getting Vista, I had issues w/ FF. FF (running as a 64-bit program) doesn't support 32-bit flash. Maybe my competent ability to achieve any desired effect through semantic html and proper coding in IE7, Safari, FF, and Opera in the first try has gotten into my head? Or maybe I'm just trying to warm myself up for some heated debate this weekend where I'll be in a simulation of the American Congress?

 

My argument boils down to one clear cut statement - IE7 potential and ability has been blown out of proportion in the recent years.

[nrg_alpha]

First of all, negative margins are illogical. How could anything have a negative margin? You could simply float it, or use absolute positioning to achieve a similar effect.

 

Can't say I can completely agree with that statement. While conceptually, negative margins are bizarre, they are functional (by this I mean, they function properly in up to date major browsers and do what they are supposed to do) and are occasionally useful. Simply floating something is not enough for some desired positioning effects. If I have a div nested within a larger one, and the desired goal is to have the inner div floated up to the upper left hand corner, yet sticking out out past the containing larger div a bit would require more than simply floating. One can simply apply a float left and some negative margining to nudge the inner div so that it achieves this effect (negating the need to use absolute positioning and the like).

 

Admittedly, I don't make use of negative margins often.. but they do have their uses.

 

Yes, IE 7 is at least somewhat capable (but definitely not as capable as FF, Safari, etc.. heck, even IE 8 has not quite fully caught up with the rest of the pack). But I do agree that IE is closing the gap. I have no serious qualms with IE 7 or greater (other than their crappy interface and overly complex and non user friendly option setups... FF, Chrome, Safari and the others make it so much cleaner and easier to navigate in this regard). But hey, who am I to give a rat's @$$? I'm not an IE user, so for all I care, their GUI can be the equivalent of Canon's ergonomics in their cameras.. I'll also stick to FF, Chrome, Opera and friends, as they know how to build an app that is less tech orientated and more 'general purpose' driven towards common users instead. Perhaps IE's is such a way for the very purpose of techie configurations and whatnot. Not for me.. I'll pass, thanks.

 

So as long as there are stronger offerings out there and IE's browser share keeps sliding, I'm happy.

[TheFilmGod]

Nrg_alpha, I like the example you provided - it is rather advanced. However, the use of negative margins to pull a div out of its parent div, goes against the box model. Since you aren't using absolute positioning, this div shouldn't jag out of its parent div; in theory, the parent div should expand to fully enclose the underlying div? But it does not. You can simply achieve the same effect by using absolute positioning. The box model's principal is to stack "bricks" on top of each other. One on top of the other. Div's sticking out with jagged ends ruins the box model execution.

 

I'm not surprised IE7 incorrectly renders such a use of negative margins.

[nrg_alpha]

I think some people think negative margins are bad because it enables you to offset 'child elements' to 'break out' of  their parent's boundaries. I don't think this is personally a bad thing. Perhaps the perception is bad because we expect containers to fully contain any child elements nested within them (and as a rule, I suppose this is indeed the most common occurance, practice and expectations). But in reality, negative margins offer just those sort of 'creative' possibilities (this is not to say you cannot do the same with absolute positioning however, as it can be done that way as well).

 

I'm personally not the biggest fan of absolute positioning as by default (unlike relative positioning or negative margins), absolute positioning is taking the element in question out of the flow of things.. that is to say, other elements that come after it act as if the element being absolutely positioned doesn't even exist (this may be a good thing or a bad thing, depending on the desired visual goal) and react accordingly. Much like relative positioning, negative margins simply offset an element from it's initial position within the flow of things in the document (it's treated pretty much local to it's parent location). One that note, another aspect about absolute positioning is that it's positioned to its closest ancestor (or if none exists, the initial block (the root html element). So depending on how your div (or other containing structure) is set up, you may find yourself figgeting with the absolute values as the results may initially be unexpected (again, this depends on your planning and how you structurally set things up). With negative margins (and I suppose relative positioning too), you know for sure where your starting point is, and simply offset from there.

 

All these methods will get the job done if planned / executed correctly. I just feel more comfortable with negative margins. And thus far, I have not seen any ill adverse effects from them (granted, as mentioned before, I don't make much use of them, nor do I code for IE 6 anymore, as that browser is dead to me).

[Daniel0]

Negative margins are no more bizarre than the number 0, negative numbers, floating point numbers, imaginary numbers, and complex numbers. All of those are used widely today.

 

I wonder what margin:(5+9i)px; would look like

[nrg_alpha]

I wonder what margin:(5+9i)px; would look like

 

Hmmm... I'm not sure I would want to find out Besides, something like that brings css expressions (IE only) into the mix.. a practice that's heavily discouraged due to site performance / breakage / security reasons (expressions can not only expose script content for the benefit of injecting script attacks, they are also tied into event handlers as well as refreshing itself when something such as scrolling or window resizing occurs by example. Leaves lots of room to cause site delays / lockups and such. That's IE for you. (Note: I read somewhere that IE 8 removes css expressions altogether [and starts supporting css rules such as min-width and max-width and such instead].. not sure if this is true or not. I wouldn't know as a) I don't use css expressions, and b), I no longer have IE 8 installed).

[jackpf]

(IE7) browser is one of the most standard complaint browsers around - maybe I shouldn't have said that

True- because you don't know what you're talking about. It's obviously not.

 

When I say the "most standard complaint browser," I am not implying that IE7 conforms to the W3C's standards

Well whose standards are you comparing it to? W3c's standards are the standards that all other browsers are compared to. If you're comparing it to their own standards, which they've made up themselves, then yes, they probably rank very highly.

 

Although IE7 may not support the entire array of CSS 2.1 elements

THEN IT's NOT A STANDARDS COMPLIANT BROWSER! Almost every other modern browser supports the entire array of CSS 3.0.

 

I would like someone to provide me with a semantically well-designed website where IE7 fails to properly render it

Mine. If I take out my conditional statements, it misinterprets several element's positions. And before you say my code is garbage- don't. If it's so garbage, then please suggest how I can improve it.

 

negative margins are illogical

Negative margins are as illogical as negative numbers. ie- they're not illogical.

 

You could simply float it, or use absolute positioning to achieve a similar effect

Well, you could do in most other browser, but the fact that IE7 tends to misinterpret widths in absolute positioning means you can't.

 

So there you have an array of reasons (some pointed out by yourself) why IE7 is obviously not the most standards compliant browser. If you state otherwise, you're lying.

[josephman1988]

Thanks for the input - I need tips on the color .. please bear in mind, validation,  font will probably be change.

 

Colours quite an issue.

 

Ive put 2 colours, the red so it looks less .. blue, and the blue one to see what it looks like.

 

Blue red .. or another colour? if any other colour that is.

[jackpf]

Colors look cool

 

I was messing around with your css...

I tried these colors as your body background color-

#BCD2EE

#CAE1FF

 

I think it looked cool personally. If not them colors, I think you atleast need some background color. It still looks pretty white.

[josephman1988]

Thanks, yea the colour weren't white but it weren't far away!

 

I think keeping 1 colour for the headers rather then have 2 (as it is) would be better .. perhaps the red so there isn't too much .. blue?