New TLS Front Page

[Cthulhu]

W3 is, but W3Schools isn't, it's a tutorial site with mediocre tutorials / information (at best) that just managed to get up to the top of the search results for pretty much everything. Mozilla's tutorials are, for example, a lot better.

Also because I wasn't busy with that the first time, . It's only recently I've been fucking around with that kinda thing.

 

[Flintlock]

Mozilla's tutorials are, for example, a lot better.

For a developer resource, their website is a bit shit. I have all cookies blocked by default. When I went to their page, it was in Finnish. I changed the language to English and made a search. I got no search results, just the home page again, in Finnish. There was no warning message about needing to enable cookies.

 

[Cthulhu]

Report it as a bug, imho, . For the fancy front-end we're developing, we also assume the user has javascript enabled and accepts cookies - else the website simply won't work.

 

[Flintlock]

That's fine, in my opinion, if you make it clear to the user. With login features, it doesn't even need to be explained, because anyone who has disabled cookies is probably savvy enough to understand they are needed, but I personally wouldn't expect the same from a Google-powered search box.

 

[Shademp]

ATTENTION PLEASE! *Major edits since the first draft of this post which made little sense*

I should have realised this on my own, but Fangu had the brilliant idea that I can publish the FFVII "Content Indexes" before the major site redesign happens. These index pages is where articles, guides, image galleries and other media will be stored. This way they won't just get lost in the news history of TLS. =)

At present, the old equivalents to these new Index Pages are forum threads linked to under the "Content Information" header (see Front Page, Left Sidebar) such as this and this one.

These have not been updated, plus I dislike the idea of forum threads being the Content Pages for all the FFVII titles, hence these new index pages I've made. The plan is that instead of linking to these forum threads under the Content Information header, it will link to the index pages I've made. This is what I mean by "publishing" the pages, though they won't be visible in the newsfeed.

Here they are.
- FFVII - The Original
- Before Crisis
- Crisis Core
- Dirge of Cerberus

At present we have Advent Children & OtWtaS series all on the same page which does make sense. My own plan however is to have a page, "Novels & Novellas", which will include links to the OtWtaS series, Lateral Biography TURKS and Maiden Who Travels the Planet (despite it being non-canon). I'll link to both the Advent Children and Novels & Novellas page when I've got the latter tidied up a bit more.

Then there is also
- Guide Book Translations
&
- Canon of FFVII
that I'd like to link to under the Content Information header.


Due to us not having that wide an array of articles, the content categories are very varied. "Game Script", "Guides", "Interviews", "Mythos & Making Of" etc. I can't think of a system of categories that applies across all the pages at this time.

Story summaries, release dates, links to official sites and so on will be reserved for other pages. Prince Lex is at present working on these.



As you may have noticed, I linked to the "Early Material File" translations in the FFVII page, meaning that they are linked to both in there and in Guide Book Translations. I have NOT done the equivalent thing in the Crisis Core page though and linked to the Crisis Core Ultimania/Guide translations.
This is because I'm not sure whether or not the translations should be linked to in two places. On one hand we want people to find all information regarding a specific title *immediately* but on the other hand maybe it is good to make people look around both the Compilation-title-specific pages and the Guide Book Translations page.


Other Issues
- Should each index page have a Credits section at the bottom?
- Should offsite content/links have a section of their own, just to avoid the feeling that we are taking advantage of the works of others to make our site look better? (I still want TLS to be a hub for FFVII content, not just TLS-exclusive stuff, but there are still some questions and issues to be thought out here)

 

[Makoeyes987]

Wow, these look amazing. You really did some amazing work with organizing all these articles and making them look so neat and professional. I love em!

 

[Lex]

I think those kinds of pages are what belong under the "Content Information" header. I had no idea it linked to forum threads. MAKE IT SO!

With regard to having a system of categories for each title, I don't think that's entirely necessary anyway due to the fact that they're so different. For example, Before Crisis NEEDS a "translations" category, whereas Crisis Core doesn't. It's easier to apply that approach with the pages I'm writing because category headers such as "Gameplay" and "Release Information" applies to almost everything.

The idea is to have separate non-spoilerish pages for the Compilation of FFVII, which include a story premise summary, gameplay summary etc. That is why these Content Index pages lack intros and are straight to the point with content. If anybody can think of fitting intros (or anything else to make the pages both look and feel better) I'm all ears.

Why not include a link to the summary pages at the top of each content page, with a message that says something like "This page is an index of content related to the title. For a general overview of [whatever I am], click here".

As you may have noticed, I linked to the "Early Material File" translations in the FFVII page, but I have not done the equivalent thing in the Crisis Core page. This is because I'm not sure on whether or not the translations should be linked in two places. I like the idea of people being pointed to the unused FFVII material all in one place but then again maybe we should promote that the visitor goes to the Guide Book Translations page instead?

If the link is relevant to the article, I think it should be posted there, regardless of how many places it's popping up in.

- Should each index page have a Credits section at the bottom?

I think so, where it makes sense.

- Should offsite content/links have a section of their own, just to avoid the feeling that we are taking advantage of the works of others to make our site look better? (I still want TLS to be a hub for FFVII content, not just TLS-exclusive stuff, but there are still some questions and issues to be thought out here)

As long as credits are included I don't see why this is necessary. I'm assuming anything that uses offsite content links to the original content anyway, so having a new section with all the random links to offsite content seems a little silly to me. That's just my opinion though.

 

[Flintlock]

You asked me for input on this, so:

ATTENTION PLEASE! *Major edits since the first draft of this post which made little sense*

I should have realised this on my own, but Fangu had the brilliant idea that I can publish the FFVII "Content Indexes" before the major site redesign happens. These index pages is where articles, guides, image galleries and other media will be stored. This way they won't just get lost in the news history of TLS. =)

At present, the old equivalents to these new Index Pages are forum threads linked to under the "Content Information" header (see Front Page, Left Sidebar) such as this and this one.

These have not been updated, plus I dislike the idea of forum threads being the Content Pages for all the FFVII titles, hence these new index pages I've made. The plan is that instead of linking to these forum threads under the Content Information header, it will link to the index pages I've made. This is what I mean by "publishing" the pages, though they won't be visible in the newsfeed.

Here they are.
- FFVII - The Original
- Before Crisis
- Crisis Core
- Dirge of Cerberus

At present we have Advent Children & OtWtaS series all on the same page which does make sense. My own plan however is to have a page, "Novels & Novellas", which will include links to the OtWtaS series, Lateral Biography TURKS and Maiden Who Travels the Planet (despite it being non-canon). I'll link to both the Advent Children and Novels & Novellas page when I've got the latter tidied up a bit more.

Then there is also
- Guide Book Translations
&
- Canon of FFVII
that I'd like to link to under the Content Information header.


Due to us not having that wide an array of articles, the content categories are very varied. "Game Script", "Guides", "Interviews", "Mythos & Making Of" etc. I can't think of a system of categories that applies across all the pages at this time.

Story summaries, release dates, links to official sites and so on will be reserved for other pages. Prince Lex is at present working on these.



As you may have noticed, I linked to the "Early Material File" translations in the FFVII page, meaning that they are linked to both in there and in Guide Book Translations. I have NOT done the equivalent thing in the Crisis Core page though and linked to the Crisis Core Ultimania/Guide translations.
This is because I'm not sure whether or not the translations should be linked to in two places. On one hand we want people to find all information regarding a specific title *immediately* but on the other hand maybe it is good to make people look around both the Compilation-title-specific pages and the Guide Book Translations page.

Good work! That's all I have to say, sorry

Other Issues
- Should each index page have a Credits section at the bottom?
- Should offsite content/links have a section of their own, just to avoid the feeling that we are taking advantage of the works of others to make our site look better? (I still want TLS to be a hub for FFVII content, not just TLS-exclusive stuff, but there are still some questions and issues to be thought out here)

I think it would be a Good Thing to give appropriate credits on each page they are due. That being the case, we wouldn't need to have a page dedicated to them. Think of Wikipedia - imagine if they had a page that listed all their sources. It would be endless It's much neater to do it in-line. It also means that when something is being updated, only one page has to be edited instead of two. I think this is quite a small issue though.

 

[Fangu]

You guys that are working on index pages and other articles who are using HTML to style the document (font sizes, colors, alignments, etc) - beware that if you choose to use them, you might have to redo them once we move site. So please don't spend too much time and energy on the design - "bigger font here" and "I want this centered" is fine, but don't spend hours and hours fiddling with it, because it might look slightly different on the new site anyway.

Also, if you're hotlinking images, please have them be the correct size. The new site will not allow for tags like width="500" because the CSS will overrule it - this is to make sure any image is resized when a browser window is resized - or more importantly when the site is viewed on an iPad or a cell phone. Resizing still works. GLORIOUS WP!

(The site suffers tremendously for not having a working Visual Editor. But we will fix this.)

 

[Lex]

I was going to post "BUT I MUST DEFINE MY WIDTH", instead I'll say "THANK FUCK I CAN DEFINE MY WIDTH"

 

[Cthulhu]

Yeah, inline styling is bad, mmkay? if you want to have, say, a table formatted in a certain way, let us know and we'll turn it into something generic and reusable.

 

[Fangu]

A few points. Just getting my head together hopefully without writing tl;dr. These are my recommendations and my own opinion. I'm keeping it simple and detail-free as I find it better to do that through Skype or #tls. Think of it as an overview.

1. Work in progress

For orders' sake:
Current server/site/database = New server (thelifestream.net)
Test (demo) server/site/database = Old server (fhtagn.thelifestream.net)

Yop
Regarding the 3/4 points we discussed, I thought of something. I don't think it's a good idea to copy the current database to the test database. Because. I upgraded WP on the test server, and WP probably changed some settings in the database. I think the best way of having a properly Demo is to have Shademp and Lex to copy a version of their index pages to the test site. This doesn't take much time, it's a matter of copying the HTML, make a new Page on the test site and paste it into HTML there. (This even lets them get used to the Visual Editor.) I haven't discussed this with Shademp yet but it won't be too much work.

Shademp
Read above. Unfortunately, if we are to have a proper demo, I think it's the only way to do it. The other alternatives we suggested won't give us the demo we want.

Flintlock
As discussed, the main design focus needed is for the top menu, the borders for the front page and something cool for the "Featured" banner. (My memory isn't fooling me here, right?) Any ideas for CSS if you have time for is cool, but not necessary as we'll continue working on the site even after release.

Which leads me to...


2. The Release

I think we should set a date for the release now, commit and make a front page article to make it real - and to say 'yes this is happening no matter what'. For the release to happen on said date, which we agreed would be in July, there are some stuff that HAS to happen ("vital") and some stuff I've figured we won't have time to do before the release - but the work will continue afterwards ("pushed back"). I suggest a date like July 25th for Demo release (for Public Review) and August 5th or similar for full release. I know it's August and not July but I'm trying to be realistic.

I think it's really imortant to push this baby out of the nest now so it doesn't sit on its ass and grow into a big and uncontrollable worm-eating ugly baby bird.

VITAL
"The minimum needed to do for a release".

• Making sure the CSS looks adequate - not perfect - this is almost done (Fangu)
• The "Featured Image" function for Posts has to be finished (this is my biggest concern with the current design atm) (Fangu)
• Finish graphics (Flintlock)
• Finish index pages (Shademp and PrinceLex)
• PUBLIC REVIEW (this shouldn't take more than a few days IMO)
• Making any agreed changes after Public Review
• Yop reviewing the Theme (if he sees the need, which I guess he does) (Yop)
• Upgrading WP successfully to version 3.4 with the new stuff. This includes:
  • Making backups (Yop is the only one who can do this)
  • Closing down the Front Page with a maintenance message
  • Disable all plugins
  • Deleting the old WP, uploading the new (with care!)
  • Test the DB connection (shouldn't be a problem)
  • Choose the new theme (Child theme), enable only the few needed plugins (on the test site I went from 16 to 6 or something)
  • Test the basics, then remove maintenance message
• Making sure all articles and pages look okay in the new format. Must be done immediately.
• Making sure the new site works on pads, cell phones and in most browsers. Must be done immediately.

PUSHED BACK
"There simply won't be time".

• Getting comments from the forums for specific posts/pages. (There will be a "10 latest posts in the forum" on the front page, but anything else must be placed on hold.) The current WP comments will appear for at least all posts - this is a discussion Shademp is running with Authors - of which content should have comments or not. Yop has volunteered to have a look at the comments.
• Additional Graphic Design if necessary/ wanted (Flintlick)
• Continuing development on the index/ actual front page
• ...this list probably has a lot more bullet points. There will still be a lot to explore and do, which I really like. Version 1.0 is never the finished version of a product. We'll continue to make this site more awesome!

A final note on me (and Shademp) pushing for a release. I know some of you came in later than some of us (or came in early but haven't had time or cba to look at things) to the project and you probably might have many ideas. That is awesome. But as I see it, the project has to move forward and we have to agree on a solution that is good enough at the moment. Work will continue even after release, but as I said - this baby has to fly now.


The forums will not be affected by the upgrade btw.

 

[Madame Mayor]

All of that organization looks brilliant. So much better than what we had before.

 

[Cthulhu]

oi,

We can upgrade WP to 3.4 on both the current and the test server, actually, which would even out any possible differences in database structure.

 

[Fangu]

We can.

There is a chance the current site might look a bit funky, but I don't think I had too much problems with WP 3.3 + the current Theme (2.2 is it? "TheLifestream 3" anyway) If you're willing to risk it, let's ride

We can do parallell upgrading on each our server - oh the nerd points!
Backup and go?

 

[Flintlock]

Yes, Fangu. Great post, I'm fully behind you. I'm just acknowledging it from my mobile because I was out tonight. Yesterday I made a first draft mock-up of the things we spoke about. I guess you haven't seen it yet. Next time we're on IRC or Skype together I'll talk you through it. It's not my dream of what the site should look like, just what it could look like by release date.

 

[Lex]

Just FYI, as of two days ago, the index pages are finished

 

[Fangu]

Yesterday I made a first draft mock-up of the things we spoke about. I guess you haven't seen it yet. Next time we're on IRC or Skype together I'll talk you through it. It's not my dream of what the site should look like, just what it could look like by release date.

Did you post it somewhere or send it to me? If so, then sorry for not seeing it. Yeah definitely, let's IRC/Skype. I'm leaving for vacation soon though but I'm gonna bring my laptop.

I figured out why the menu isn't working properly on Apple products (iPhone, thanks Lex, and iPad, thank you boyfurendu) - it can be fixed in two ways:

1) Making the top links (Content, About, Community, Highlight) clickable (the easy solution)
2) Fixxing it with JavaScript (the time consuming solution)

That would require Lex/Shademp writing 4 new index pages (Content, About, Community, Highlight), but IMO they only have to be a few sentences. This is up to Shademp to decide though.

Also - when you're designing imagery for the borders/banners specifically, do keep in mind that they have to fit on 800px/500px/320px screens. (We have an option for using different images for these resolutions.)

This is the best iPhone emulator I've found so far: http://iphone4simulator.com/
iPad: http://ipadpeek.com/ (doesn't flip but I have an iPad at home)

Just FYI, as of two days ago, the index pages are finished

So all of them are ready to go? Awesome.

Also! Attn all Authors - the Visual Editor is now working on the current site. A plugin ("Scissors") was blocking it so with Yop's blessing I deactivated the plugin.

 

[Shademp]

I figured out why the menu isn't working properly on Apple products (iPhone, thanks Lex, and iPad, thank you boyfurendu) - it can be fixed in two ways:

1) Making the top links (Content, About, Community, Highlight) clickable (the easy solution)
2) Fixxing it with JavaScript (the time consuming solution)

That would require Lex/Shademp writing 4 new index pages (Content, About, Community, Highlight), but IMO they only have to be a few sentences. This is up to Shademp to decide though.

Argh, those pesky mobile devices -___-

To my very bone I dislike the idea about having those 4 extra index pages. But I, too, want this baby to fly so if the JavaScript solution is too cumbersome then I have a feeling that Lex is willing to create index pages for Content, About etc. I can discuss the Highlights page with Lex when I get back on Wednesday.

I think the best way of having a properly Demo is to have Shademp and Lex to copy a version of their index pages to the test site. This doesn't take much time, it's a matter of copying the HTML, make a new Page on the test site and paste it into HTML there. (This even lets them get used to the Visual Editor.) I haven't discussed this with Shademp yet but it won't be too much work.

Sounds easy enough.

So all of them are ready to go? Awesome.

My index pages *were* not entirely ready, but I fixed them up now so they should be ok.

Additional Indexes:
- Advent Children
- Novels & Novellas

Again, very bare-minimum with explanations and such. Another index, "Franchise Guide", is planned and looks intentionally crude because it shows examples of features that we WILL have.
- Franchise Guide

Also
- Affiliations

 

[Flintlock]

I can share my drafts of the front page and menu system.

I struggled for a long time with the size of the main headline font. It was too big and, in Verdana, pretty ugly. I tried using a smaller one, but that created the problem of empty space below which needed to be filled. So I came up with "related stories". I'm not sure if there's a WP plugin that could find them automatically with an algorithm based on keyword matches, or if we could just grab the (say) three latest articles from the same category that aren't already on the front page. Failing that, we could choose them manually, but that would be a pain in the backside. I'm sure one of the first two methods can be achieved

Speaking of categories, Fangu and I were thinking they should be restructured. For example, the FFU commentaries are currently filed under "Final Fantasy VII", which isn't great for people looking for news and resources connected to the game. On the draft I made a new Fan Commentaries tag, as well as Community Events (for playalongs, character battles etc). Feedback on this would be appreciated.

Questions, ideas, suggestions, criticisms all welcome and strongly encouraged

 

[Fangu]

front page

Okay NOW it's starting to look like something. It's about the little things, and you did them well. I approve. It won't be too hard to implement either, which of course is <3 in my world.

The "categories" makes a huge difference, IMO. The way you decided to use upper case - see I would never think of that. That's why you need a designer who can focus purely on how stuff looks without going "this can be changed in the CSS by using... blah blah"

menu system

WIN

Again, this won't be too hard to complete based on the current WP menu. It's just about swapping out some colors and putting in some images. The biggest challenge is to agree on how it's gonna look on >800px and >600px. Right now the menu elements stack vertically - most people go EEW! when they see how that looks. But I don't see any other way really, especially for cell phones.

I'm not sure if there's a WP plugin that could find them automatically with an algorithm based on keyword matches,

iirc searched words are never stored - the only way you can find related stuff is through the tag cloud - so you could look for articles that are tagged with the same words. I don't think tags have been used widely as a standard before in TLS articles, I'll have to check that. From what I've seen, some authors use tags a lot, others doesn't. So that's an option. Might even be a plugin made already.

or if we could just grab the (say) three latest articles from the same category that aren't already on the front page.

This is the easiest option IMO. I can implement it myself. It's a matter of writing 1 function.

 

[Flintlock]

That's why you need a designer who can focus purely on how stuff looks without going "this can be changed in the CSS by using... blah blah"

Right back atcha. When working on the graphics for a project, it's great to be able to come up with an idea, make a draft, and then have someone say "yes, I can do that, no problem". Because I either wouldn't be able to do it, or it would take me forever. I'm referring to this:

This is the easiest option IMO. I can implement it myself. It's a matter of writing 1 function.

Music to my ears

 

[Shademp]

I can share my drafts of the front page and menu system.

I keep getting "Error 403 Forbidden Location" when clicking on those links.

Speaking of categories, Fangu and I were thinking they should be restructured. For example, the FFU commentaries are currently filed under "Final Fantasy VII", which isn't great for people looking for news and resources connected to the game. On the draft I made a new Fan Commentaries tag, as well as Community Events (for playalongs, character battles etc). Feedback on this would be appreciated.

Like Fangu says, it is true that some have been using tags widely while some have not. Those extra tags are indeed great initiatives though, if we keep on using tags.

In case anyone forgot, Ryu is responsible for the TLS Commentaries index which is pretty much finished. It includes links to:
- TLS Let's Play FFVII

Fan's Eye View Series:
- Last Order
- On the Way to a Smile: Episode Denzel
- Advent Children Complete
- FF: Legend of the Crystals
- FF: The Spirits Within
- FF Unlimited

 

[Flintlock]

I keep getting "Error 403 Forbidden Location" when clicking on those links.

I was uploading them to Google Docs, and they worked for a while, but they must have timed out. Very strange. I put them on the TLS server now. New links (also edited into the original post): front page, menu.

Another thing I've been thinking about a lot is social networking. Each page/post should have its own "share" buttons for the main networks, but I think the front page should have something too. It should be a more general "like us on FB", "follow us on Twitter" style, rather than sharing individual articles. But where should they go in the layout?

 

[Cthulhu]

btw, if you need any testing on ipad / iphone / etc, I have the emulator / dev tools on my laptop, I can open the site up easy enough.

edit: also, I believe those site designs need some glowy TLS-colored drop shadow, they're kinda sharp atm, . And CSS3 has drop shadows, woot.