Site Design

[Obsidian Fire]

^^Thanks for the reminder.

And HTML and CSS are nothing compared to my procedural programming class...

 

[Cthulhu]

Ever tried making something work for IE 6/7/8?

 

[Obsidian Fire]

Things we still need to decide on before I can start editing the actual pages:

The Content, About, Community, Affiliations, Fan Works, FFVII Compendium, and Non-FFVII Translation pages all have two versions. I need to know which version we're going with. Version 1 matches the below pages, but makes for longer pages. Version 2 treats all the links like sub-links and makes for shorter pages. I don't think Version 2 would look that out of place as those pages are acting like one whole section by themselves.

The Highlights page has one version as it has sub-links under multiple section headers. This is what I'm modeling most of the the index pages after.

Most of the indexes under the "Content" section has different problems then these pages do, so I'm trying to get the easy to fix stuff out of the way before tackling the harder stuff.

Links:

Current Content
Content v1
Content v2

Current About
About v1
About v2

Current Community
Community v1
Community v2

Current Affiliations
Affiliations v1
Affiliations v2

Current FFVII Compendium
FFVII Compendium v1
FFVII Compendium v2

Current Fan Works
Fan Works v1
Fan Works v2

Current Non-FFVII Translations
Non-FFVII Translations v1
Non-FFVII Translations v2

Current Highlights
Highlights v1

 

[Lex]

I think V2 definitely looks better in those examples but I also think V1 might look better if the font was smaller on the headings.

If need be Obs feel free to create a poll if we can't come to a quick decision in here. As soon as the decision is made you've got free reign to go ahead and make the changes as far as I'm concerned. Thanks again for all the hard work you've been putting in

 

[Obsidian Fire]

^^The font size of v1 is controlled by the CSS, which I don't want to mess with. I'll fiddle around with the HTML though to see if I can make it smaller...

 

[Lex]

That's the size of h2 though, you could also set h3 which is a bit smaller. I just gave that a bash and it looked a bit better but I didn't save the changes because I didn't want to mess with your work

 

[Obsidian Fire]

^^The thing I didn't like about h3 is that it swaps fonts on us. And we already have a bunch of different font styles on the page as it is. It also easier to fix font size then the font family...

Redid Content v1 with a smaller font style.

Also, I can't get changes to take effect unless I save it as a draft before I preview it... *shrug*

 

[The Twilight Mexican]

I just want to echo Lex's acknowledgement of your effort here, Obsidian. I have nothing else to contribute, sadly. XD

 

[Obsidian Fire]

I'm currently working on image versions (screenshots...) of all the page versions I've made so far. So a poll should be up soonish.

That probably won't be until Friday at the earliest as we're having Thanksgiving at my house this year...

 

[Obsidian Fire]

Poll made! Find it here: http://thelifestream.net/forums/showthread.php?t=16320

 

[Obsidian Fire]

Updated pages!

Version notes: 3.1 pages have <hr/> in them. 3.2 pages have <hr/> removed. I will say that removing <hr/> mitigates some of the page length gained by using <h2>.

Current Content
Content 3.1
Content 3.2

Current About
About 3.1
About 3.2

Current Community
Community 3.1
Community 3.2

Community notes: In the drop-down menu, the Affiliations and Social Networks pages are under the community tab. However, the links to those pages are not on the Community index. I've added links and descriptions for both those pages to the Community index, although the descriptions could probably use a re-write as they're both really short. Also, does that Social Network page really need that long title?

Current Affiliations
Affiliations 3.1
Affiliations 3.2

Current FFVII Compendium
FFVII Compendium 3.1
FFVII Compendium 3.2

Current Fan Works
Fan Works 3.1
Fan Works 3.2

Current Non-FFVII Translations
Non-FFVII Translations 3.1
Non-FFVII Translations 3.2

Non-FFVII Translations notes: The link in the header of "FF 25th Memorial Ultimania Vol. 2" redirects to the "FFVIII Ultimania" index. I looked though our other pages and couldn't find an index the 25th Memorial Ultimania would match up to so I took the link out.

Current Highlights
Highlights 3.1
Highlights 3.2

 

[Lex]

Community notes: In the drop-down menu, the Affiliations and Social Networks pages are under the community tab. However, the links to those pages are not on the Community index. I've added links and descriptions for both those pages to the Community index, although the descriptions could probably use a re-write as they're both really short. Also, does that Social Network page really need that long title?

Excellent work, now we have some consistency <3

Also, to which Title are you referring?

 

[Obsidian Fire]

This is the literal title that the Social Networks page has:

"Stay up to date with the Lifestream on social networks"

...

Yeah, no... who made this page?

*checks page author*

Flintlock??? Really?

*Obsidian is really tempted to fix this without asking for permission*

 

[Flintlock]

*Obsidian is really tempted to fix this without asking for permission*

I'm going to consider that as a request for permission, and you can consider this post as permission being given

Mind you, front page design is no longer my responsibility, so you don't actually need my permission. I don't mind discussing things with you, though

 

[Lex]

Rename it to whatever you feel is appropriate, but shove that line in underneath the actual title or something.

 

[Obsidian Fire]

^^Will do.

And fixed!

 

[Obsidian Fire]

On to other pages now that we have the header stuff figured out...

Also, can you guys tell me which version of the new pages you like best (with/without <hr/>)? I think that's the last thing we need to do before those pages can go live...

Anyway...

The big thing to decided for the rest of the pages is how we're going to display the list of links.

Actually, I already posted about this...

this is what most of the index pages look like; lots of links with by-lines and summaries occasionally. I'm going to hold off on doing them until I get a better idea of what you guys want based on this next one.

Current Canon of FFVII
Canon of FFVII v1
Canon of FFVII v2

General changes:
All section tiles use the modified h2 now.
It seemed that most of the authors names are in italics, so I changed them all to that.
Replaced all the dashes in front of the links with bullet points.

v1 changes:
Left all list of links single-spaced.
Pros: makes for a shorter page length and less scrolling
Cons: titles visually run together/leads to a "wall of text" look, if/when we want to add summaries of articles it'll create more work for us as we'll need to add in more spaces anyway, feels more "cramped, page density isn't even/stops and starts

v2 changes:
Double-spaced the list of links.
Pros: easier to read individual article titles, if/when we want to add summaries of articles we won't have to do much work, page density is more even/flows better
Cons: longer page length and more scrolling, feels bare with just the links and no summaries (look at the highlights page for how this looks with summaries),

Personally, I prefer v2, it's easier for me to read.

I'll get to working on some of the other pages to see how versions work out... expect rolling updates...

 

[Obsidian Fire]

Um... guys? Feedback please?

Whether we go with horizontal lines or not is literally the last thing we need to do before those pages can go live...

Pages I've looked at and redone:

Current Franchise Guide
Franchise Guide

Notes: Right-aligned the image. Changed all the section headers to <h2>. Made all the points bullets. I'll go back and link things like the books to their pages now that they have them (should have done this already). "Maiden Who Travels the Planet" and "The Kids are All Right" have they're own pages, so they're linked. OTWTAS doesn't have a page soley for it, but the Novels and Novellas page (which is also now linked) has links to all of it's chapters (will probably fix this if just for navigation's sake). Actually, looking at this page has highlighted several new indexes that would probably help with navigation (ie, indexes based on medium).

To be honest... what is the purpose of this page? It's written like it's supposed to be the hub for all the products that have to do with FFVII, but we don't have half the pages made, some of the pages we do have made aren't linked to it, and I'm questioning if some of the entires should even be on here (mostly in the Anthologies, Remixes, Singles etc section). In general it feels very unfinished content-wise, as if it hasn't figured out what it's supposed to be yet.

Also, the table clashes visibly with the rest of the site. I can see why we'd want to use one here, but it just feels like it could be implemented better. At the very least I think we should comment out the entries that we don't have pages for, as that would help with the "unfinished" look and then see if we really need the table or not.

Current Canon of FFVII
Canon of FFVII v1
Canon of FFVII v2

Notes: For this page I've left in the <hr/> just to see what it looks like. I think spacing the links out makes it easier to see what the titles are, but it does spread the page out.

Current Guide Book Translations
Guide Book Translations v1
Guide Book Translations v2

Notes: For this page, I left the horizontal rulers in. Changed the headers, took out the redundant tool-tips on the links, and added in bullet points. The first version doesn't have any line spacing between the links, the second version does. These are the kinds of pages that make me think leaving in the horizontal rulers would be a good idea. Or at the least make we want to re-visit the idea of some sort of table of contents after I'm done with the site.

Summary of v1 vs v2.
v1 changes:
Left all list of links single-spaced.
Pros: makes for a shorter page length and less scrolling
Cons: titles visually run together/leads to a "wall of text" look, if/when we want to add summaries of articles it'll create more work for us as we'll need to add in more spaces anyway, feels more "cramped, page density isn't even/stops and starts

v2 changes:
Double-spaced the list of links.
Pros: easier to read individual article titles, if/when we want to add summaries of articles we won't have to do much work, page density is more even/flows better
Cons: longer page length and more scrolling, feels bare with just the links and no summaries (look at the highlights page for how this looks with summaries),

Goes off to do more editing...

 

[Lex]

I don't really have an opinion on this one Obs, if no one else does either the decision is in your hands

 

[Obsidian Fire]

^^It Flint hasn't said anything by tomorrow, I'll choose between the two and copy/paste them into the live pages (and hopefully not brake anything in the process). Given some of the pages I'm working on now, I'm currently leaning towards the 3.1 versions as the horizontal lines really help those pages...

 

[The Twilight Mexican]

Sorry I've not commented. I'm probably not picky enough to actually be useful here. I'm happy with what you're doing and trust you're going to make good decisions with what's left, so I'm not going to try saying much on what I feel I know little.

Oh, ask Shademp about the Franchise Guide page, by the way. I know he had plans for it. Not sure if they're on hold or have been cancelled, though.

 

[Shademp]

Apologies I have not commented either. I appreciate the work getting done here but I haven't had it in me to invest. Alright. *slaps own face, finishes the coffee and brings out the energy drink*

Um... guys? Feedback please?
Whether we go with horizontal lines or not is literally the last thing we need to do before those pages can go live...

This part of your quote I'm actually replying to last (wrote the sections below first) and I have to admit I have not followed the design discussion before now. Are you speaking about a design to have horizontal lines (<hr/>, right?) at all, partially or not at all? My vote is to have horizontal lines where they look most appealing. I will always disagree with the notion that one style or another should be avoided because it is "out of fashion" (in case anyone has said that or will say that, I'm not sure). Go with what works.

Current Franchise Guide
Franchise Guide

Notes: Right-aligned the image. Changed all the section headers to <h2>. Made all the points bullets. I'll go back and link things like the books to their pages now that they have them (should have done this already). "Maiden Who Travels the Planet" and "The Kids are All Right" have they're own pages, so they're linked. OTWTAS doesn't have a page soley for it, but the Novels and Novellas page (which is also now linked) has links to all of it's chapters (will probably fix this if just for navigation's sake). Actually, looking at this page has highlighted several new indexes that would probably help with navigation (ie, indexes based on medium).

To be honest... what is the purpose of this page? It's written like it's supposed to be the hub for all the products that have to do with FFVII, but we don't have half the pages made, some of the pages we do have made aren't linked to it, and I'm questioning if some of the entires should even be on here (mostly in the Anthologies, Remixes, Singles etc section). In general it feels very unfinished content-wise, as if it hasn't figured out what it's supposed to be yet.

Your assessment of what the Franchise Guide is supposed to be is correct (additionally, each page under Franchise Guide is meant to avoid spoilers as much as possible). The page was my idea and it's an idea I love but I don't have the drive to make it fully realized. I remember Avec working on a On the Way to a Smile page but passion was not kept alive there either.

There's no sign of this page picking up but I don't want to remove it because that means throwing away the Games and Movies pages Lex made. My suggestion is to remove the following lists: "Crossovers & Cameos", "Guide Books" and "Soundtrack Compendium". This way the page becomes less cluttered with non-content. If TLS at some point in the future make a group effort to realize any of the above lists into full-fledged pages they will be worth bringing back. For now they can be ditched.

Current Franchise Page versus New: Liking the new version. Image placed to the right, more aesthetically pleasing formatting for the lists, yup yup looks good. My only problem is that non-clickable titles ("Compilation of FFVII", "Games", "Movies & Animations") look clickable due to their similarity with the hyperlink-color. I am okay with us ignoring the deceptive color similarity of headers and hyperlinks, but IF a solution were to be made I'd change the header color to grey. This however would create an inconsistent style with similar headers on other pages, soooo... I'm only complicating the design process here so it's probably best to ignore me.


You can go ahead and remove the aforementioned lists then get rid of the tables entirely. The page should look great after that. *thumbs up*

Current Canon of FFVII
Canon of FFVII v1
Canon of FFVII v2

Notes: For this page I've left in the <hr/> just to see what it looks like. I think spacing the links out makes it easier to see what the titles are, but it does spread the page out.

Going from past experience, people like Flintlock and Fangu understand better how user-friendly designs are made. My opinion is that the v1 design is more appealing; the page is efficient with its space, links put tightly together, it feels like I'm looking at the index to a book for an academical niche. I LOVE IT. But v2 is more user friendly, causing less eye strain for unfamiliar readers who are reading the article titles for the first time. My eyes don't like v2 also because my eyes are yearning for some design detail between the link rows (my eyes want something to exist in that space) or at least some color differences between the rows to change things up. Even with user-friendly awareness, I can only vote for v1. Strike me down if ye wish.

I definitely see the point in removing the FFVII library image (SININB41 in the game files) for the sake of space efficiency, but I was always proud of the atmosphere this image created. "You are now entering a library of extensive knowledge". If the majority thinks I'm placing the works of TLS on an arrogant pedestal by aiming for this atmosphere in the page then I can certainly see that. BUT if we can keep the image, I'd like to have it at the very bottom of the page, sort of as a visual book/page-end. Can we try having the image below the final horizontal line?

Current Guide Book Translations
Guide Book Translations v1
Guide Book Translations v2

Notes: For this page, I left the horizontal rulers in. Changed the headers, took out the redundant tool-tips on the links, and added in bullet points. The first version doesn't have any line spacing between the links, the second version does. These are the kinds of pages that make me think leaving in the horizontal rulers would be a good idea. Or at the least make we want to re-visit the idea of some sort of table of contents after I'm done with the site.

Goes off to do more editing...

Commentary made for the Canon of FFVII page applies to the above page versions as well. I LOOOOOOOOOVE the v1 design.

As for horizontal rulers, I think they are neither obstructing nor necessary in the case of the Guide Book Translations page. The eye is creating these lines with how the book name headers match up with the book covers to the right. I doubt horizontal lines would look bad but I also think we can go without them, in this case. So...keep v1 design? That's my assessment.



EDIT: Loving the amount of work you put into this, Obsidian.

EDIT #2:

Current Non-FFVII Translations
Non-FFVII Translations 3.1
Non-FFVII Translations 3.2

Non-FFVII Translations notes: The link in the header of "FF 25th Memorial Ultimania Vol. 2" redirects to the "FFVIII Ultimania" index. I looked though our other pages and couldn't find an index the 25th Memorial Ultimania would match up to so I took the link out.

Current Highlights
Highlights 3.1
Highlights 3.2

3.1 versions are my favorites for both. <hr/> lines really help make it easier on the eyes for me.

Listen first and foremost to Flintlock for the simple reason that he is smarter than me.

 

[Flintlock]

Listen first and foremost to Flintlock for the simple reason that he is smarter than me.

Nonsense

Obsidian, I'm sorry I didn't give an opinion earlier. I've just been busy. I still don't really have the energy to do a blow-by-blow review of everything you've changed like Shademp has, but I'll also give my support to the denser v1 style of lists.

And I'll say this again: you don't need my approval on anything

 

[Obsidian Fire]

Apologies I have not commented either. I appreciate the work getting done here but I haven't had it in me to invest. Alright. *slaps own face, finishes the coffee and brings out the energy drink*

No problem. I just don't want to go changing live pages without giving people the chance to speak up.

This part of your quote I'm actually replying to last (wrote the sections below first) and I have to admit I have not followed the design discussion before now. Are you speaking about a design to have horizontal lines (<hr/>, right?) at all, partially or not at all? My vote is to have horizontal lines where they look most appealing. I will always disagree with the notion that one style or another should be avoided because it is "out of fashion" (in case anyone has said that or will say that, I'm not sure). Go with what works.

For now, it's either no horizontal lines on all pages, or no horizontal lines on all pages. Part of the problem I'm trying to fix is that there's no one common formatting across the site. The reason why this is so annoying is because some of our pages are really short (and could do without <hr/>) and some are really long (and <hr/> helps a lot with organizing those). And I have to make sure everything works with Wordpress. I might go back when I'm done with the whole project, but for now, it's easier to just do everything the same.

Your assessment of what the Franchise Guide is supposed to be is correct (additionally, each page under Franchise Guide is meant to avoid spoilers as much as possible). The page was my idea and it's an idea I love but I don't have the drive to make it fully realized. I remember Avec working on a On the Way to a Smile page but passion was not kept alive there either.

There's no sign of this page picking up but I don't want to remove it because that means throwing away the Games and Movies pages Lex made. My suggestion is to remove the following lists: "Crossovers & Cameos", "Guide Books" and "Soundtrack Compendium". This way the page becomes less cluttered with non-content. If TLS at some point in the future make a group effort to realize any of the above lists into full-fledged pages they will be worth bringing back. For now they can be ditched.


You can go ahead and remove the aforementioned lists then get rid of the tables entirely. The page should look great after that. *thumbs up*

Thanks for clearing up what's going on with the Franchise page. Cutting those sections will make it a lot easier to manage. I'll definitely save the current page as it is so that if we ever want to add those back in, it'll be there.

Current Franchise Page versus New: Liking the new version. Image placed to the right, more aesthetically pleasing formatting for the lists, yup yup looks good. My only problem is that non-clickable titles ("Compilation of FFVII", "Games", "Movies & Animations") look clickable due to their similarity with the hyperlink-color. I am okay with us ignoring the deceptive color similarity of headers and hyperlinks, but IF a solution were to be made I'd change the header color to grey. This however would create an inconsistent style with similar headers on other pages, soooo... I'm only complicating the design process here so it's probably best to ignore me.

It wouldn't take that much work to make "Medium" pages for this page to link to (we could just copy/paste descriptions anyway). But that'll have to wait for me to get finished with this project.

Going from past experience, people like Flintlock and Fangu understand better how user-friendly designs are made. My opinion is that the v1 design is more appealing; the page is efficient with its space, links put tightly together, it feels like I'm looking at the index to a book for an academical niche. I LOVE IT. But v2 is more user friendly, causing less eye strain for unfamiliar readers who are reading the article titles for the first time. My eyes don't like v2 also because my eyes are yearning for some design detail between the link rows (my eyes want something to exist in that space) or at least some color differences between the rows to change things up. Even with user-friendly awareness, I can only vote for v1. Strike me down if ye wish.

I definitely see the point in removing the FFVII library image (SININB41 in the game files) for the sake of space efficiency, but I was always proud of the atmosphere this image created. "You are now entering a library of extensive knowledge". If the majority thinks I'm placing the works of TLS on an arrogant pedestal by aiming for this atmosphere in the page then I can certainly see that. BUT if we can keep the image, I'd like to have it at the very bottom of the page, sort of as a visual book/page-end. Can we try having the image below the final horizontal line?

but I'll also give my support to the denser v1 style of lists.

On spacing the links... When the links don't have a description, putting them really close together works great. The problem starts when you get pages like the Highlights 3.1 and FFVII - The Original pages where most of the links have a description below them. Then putting them all together with no spaces looks like the dreaded wall of text.

 

[Lex]

On the back of what Shademp said (and I agree with everything he said), you're free to redesign any page you want within that. You don't have to but you're going that way already, so consider this another "we trust you" post