Site Design

[Cthulhu]

I have some alternatives:

* A copy of the current style, which you can install in a local copy of Wordpress. Or maybe work on wordpress.com, I don't know if it allows custom editable styles.
* A virtual machine with a complete copy of the TLS website; made it the weekend before last actually. I don't know if I should just hand that out, since it's a full copy of TLS' database and contains some private data like PMs, e-mail addresses, and (encrypted) passwords. I could clean that one up and remove the forum database though, if you just want to work on the front page. The main downside is that it's a huge file (>20 GB, ) and took me a week to upload.

 

[Flintlock]

* A copy of the current style, which you can install in a local copy of Wordpress. Or maybe work on wordpress.com, I don't know if it allows custom editable styles.

It does, but only for a fee.

I'm glad to see one of these "state of TLS" threads active again; I was worried nothing was happening any more. Obsidian wants to work, so let's make sure she can, one way or another.

 

[Obsidian Fire]

It would probably be easiest for everyone involved if I can just make drafts on the site. As it's going to involve a lot of copy/paste anyway. So I'll probably go and get a Wordpress log-in for TLS...

 

[The Twilight Mexican]

Obsidian wants to work, so let's make sure she can, one way or another.

So much this!

 

[Lex]

I'm glad to see one of these "state of TLS" threads active again; I was worried nothing was happening any more. Obsidian wants to work, so let's make sure she can, one way or another.

I thought you might be feeling like this (I know you too well). I've been away, anyone is welcome to push things forward when I'm not here.

Obs do you have a WP login currently? (for commenting on the front page). I know you're talking about making edits on a test version now but it'd be prudent to upgrade your privileges on the main site so that when the time comes for changes to be made you can just go ahead and do them.

 

[Flintlock]

I thought you might be feeling like this (I know you too well).

All my hugs.

 

[Obsidian Fire]

Obs do you have a WP login currently? (for commenting on the front page). I know you're talking about making edits on a test version now but it'd be prudent to upgrade your privileges on the main site so that when the time comes for changes to be made you can just go ahead and do them.

I went and registered today for it, but for some reason I'm not getting an email with my password. O_o?????

 

[Lex]

Yeah the completely broken e-mail system will do that

*must be fixed soon LOOKS AT YOP*

If you give me your username I can head into the admin panel and set a password for you as well as give you the proper permissions.

 

[Cthulhu]

I was pretty sure we had e-mails fixed for Wordpress, it should use gmail's servers for that. But maybe it's using our thelifestreamail credentials, which may have expired.

Fake edit: lol yup it did, and lol yup it expired. #fail. I can either fill in my own address stuff - but I'm sure the password is stored unencrypted in the database, which would be a huge risk for me - or create a new TLS gmail address.

actual edit: Made a new account, we now have [email protected]. I'll make sure to not let this one expire again, .

Actual edit 2: Sent test mail, it should work now.

 

[Lex]

Great <3

Are you happy to deal with the email side of things for that account or do you want to give out the password etc to other staff?

 

[Cthulhu]

I can hand it out to others if you're interested - iirc that's what I did with the previous one. Besides, it's used in the plugin, I'm sure it's stored in plain text somewhere anyway. Don't use it for anything sensitive, anyway. IDK about using it for public communication either - actually, idk if we should take measures to avoid people abusing it to send mail looking like it's from us. Then again, they can register a similar account anyway if they wanted to.

 

[Obsidian Fire]

First round of changes/fixes. These are all the main indexes that the first tier of navigation buttons go to.

General changes:
Standardized line spacing and use of horizontal rulers.
Changed all small links (ones that aren't section headers) to first tier bullet points. I think they look better then the current dashes we've been using. I might play around with how we do links as these are the bulk of the content on the indexes.
There are two versions of the indexes. v1 uses h2 for all section titles, even if there's no description or sub-links. v2 uses bullet points and normal links for section titles with no descriptions or sublinks, but still uses h2 for other section titles.

Current "Content" Index vs. "Content" Index v1 vs. "Content" Index v2

Current "About" Index vs. "About" Index v1 vs. "About" Index v2

Current "Community" Index vs. "Community" Index v1 vs. "Community" Index v2

Current "Highlights" Index vs. "Highlights" Index v1

Notes for the "Highlights" Index:
Replaced the section header .jpgs with normal typed out ones.
Changed the "End of the LTD" article on the index to the "Dilly Dally, Shilly Shally" one on the drop-down menu. Changed the article description on the index to reflect this.
Changed the "Case of Tifa" audiobook link to the main audiobook index. This would stick the audiobook index on the drop-down menus twice, but this one requires less mouse-overs then the other one does (it's hidden behind the "Fan Works" menu, that's behind the "Content" menu). Changed the article description on the index to reflect this.

 

[Telcontar]

I'm sure the password is stored unencrypted in the database

Spoiler: YOUTUBE VIDEO FOR REFERENCE:

 

[Flintlock]

Ob, I like the V2 versions of your pages. They're simple and tidy, and bring information to the reader's eye more efficiently than the other designs (e.g. by not making them scroll so much). Also, HRs seem a bit out of place on today's internet.

I know this thread is about design, but as an aside, we should flesh out those bullet points so that each of them has a description.

 

[Obsidian Fire]

Ob, I like the V2 versions of your pages. They're simple and tidy, and bring information to the reader's eye more efficiently than the other designs (e.g. by not making them scroll so much). Also, HRs seem a bit out of place on today's internet.

I know this thread is about design, but as an aside, we should flesh out those bullet points so that each of them has a description.

Yeah, I like the v2 versions when we don't have subsections of a page. The HRs work a tad better when the page is really long or when it has large sub-sections (or at the bottom of the page?).

The bullet points on the "About" Index could just use a short, one sentence summary. They don't have to be that long...

Went ahead and fixed our "Affiliations" Index as that's the only page on the "Community" Index that needed fixing. Although we might want to take at the look at the sites we're affiliated with...

Current "Affiliations" Index vs. "Affiliations" Index v1 vs. "Affiliations" Index v2

 

[Obsidian Fire]

Added in short summaries to the About-v2 page. Feel free to go ahead and edit them.

On another note, we might want to think about how the contact page works as it currently only points to the Support section of the forums, so anyone who wants to contact us has to log into the forums in order to do so...

 

[Lex]

We should probably link to that e-mail address Yop set up in that section, well spotted. Tbh a lot of the pages are needing a revamp re: content and not just design which I will designate (or do myself if no one is up for getting into it) soon.

Also all of your links are taking me to a "nothing here" page, I'll need to find out why that is.

EDIT: I've created the Site Designer designation for you so you should now be able to see the staff forum. Sorry it took so long! I'm going to ask Gabe if he wants to come on board and scrum with you aswell

 

[Mage]

^I was getting that too, I assumed it was because I wasn't logged into Wordpress (don't have permissions).

 

[Obsidian Fire]

^^That's probably what it is. If I log out, I can't see the preview pages as all the pages I'm making are still drafts. Wonder if there's a way to "publish" pages without linking them to anything...

And totally agree about talking a look at some of our "back-end" pages. The one's that really need a look over are the pages under the "About" section.

 

[Obsidian Fire]

More pages done:

Changes are the same as the previous...

Current FFVII Compendium vs. FFVII Compendium v1

Current Fan Works vs. Fan Works v1 vs. Fan Works v2

Current Non-FFVII Translations vs. Non-FFVII Translations v1

Changes to other pages:
The "Content" page listed the link to "Non-FFVII Translations" as "Book Translations", so I changed that.

I'm noticing that the v2 pages don't work that well when there's links underneath the section titles. I think it's because the list of sub-links grabs more attention then the titles do when the titles aren't bolded. It's not a problem on pages with no sublinks, but nearly all the other pages I still have to do are filled with sublinks...

 

[Obsidian Fire]

Alright, 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 index vs. Canon of FFVII v1 vs. Canon of FFVII v2

General changes:
All section tiles use 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.

Questions:
Do all our index pages need images at the top of the page?
The advantage of centering images is that we don't have to deal with flowing text around them. Left aligning them makes visual sense, but if the first paragraph of the page isn't long enough, it makes a huge gap at the top of the page btween the first paragraph and the first section title (the above link is a good example). Of course, I might not being noticing the easy way to fix this, in which case nevermind.

 

[Lex]

Fantastic work Obs! Yeah it'll be the login thing, derp on my part. I'll have a look at those shortly and I think it's safe to say we can just go ahead with most of them.

Do all our index pages need images at the top of the page?
The advantage of centering images is that we don't have to deal with flowing text around them. Left aligning them makes visual sense, but if the first paragraph of the page isn't long enough, it makes a huge gap at the top of the page btween the first paragraph and the first section title (the above link is a good example). Of course, I might not being noticing the easy way to fix this, in which case nevermind.

No they don't need images. I made those in photoshop and I like the way they look but I wouldn't cry if we got rid of them. The idea was to have these images as the page header rather than a text header, but html linking doesn't work in the title boxes in WP and you're not allowed to leave it blank but putting anything in the box (like a space) still bumps the header image down.

I strongly disagree with left-aligning images, I don't like the way it looks and we'd be the only site on the net with images in the middle of articles which are left-aligned. They should be centered in every case.

In the case of the index page we discussed before, it does look awkward centered but in those cases we could left align the first paragraph of text with the image to the right. Or a better option is simply to find or create a bigger image.

 

[Obsidian Fire]

^^My bad, I meant right-aligning images. Silly me.

I think images look okay on the specific game pages. IE: DoC logo on the DoC page, etc. The main problem with them is that header's don't want to wrap around them the same way paragraphs do which is why the gaps appear. If I figured out a way around that, images wouldn't be a problem.

My big concern with centered images is that they push the text of the page down, which can get really annoying with most 16:9 screens as those don't have a lot of vertical height anyway.

 

[Obsidian Fire]

So I figured out why headers aren't wrapping around images...

Turns out it's caused by

Spoiler: this little bit of CSS

h1, h2, h3, h4, h5, h6 {
clear: both;
}

that basicly makes it so that all our headers need to start a new paragraph and can't word wrap... Okay, so it's more then that, but functionally speaking...

I've tried fixing this though

Spoiler: HTML formatting

<div style="float:left">

but that opens up a whole 'nother can of worms with getting the lists to float correctly.

Getting rid of the CSS line on the other had seems to fix it, but I don't know how how that would effect other things on the site. On the other hand, I havn't seen us use the headers anywhere else other then on the index pages and editing the line out and reloading pages doesn't seem to break anything...

 

[Fangu]

I've tried fixing this though but that opens up a whole 'nother can of worms with getting the lists to float correctly.

My friend, welcome to the sadistic world of CSS. Bring a machete, band aids and tinned food

(This is basically where web design turns into web development. There are several reasons headers aren't wrapped, and that reason is often responsive design. Which reminds me, do make sure to shrink your screen to different widths when testing your stuff. We want to keep the site mobile friendly.)