New TLS Front Page

[Fangu]

^ It might be cache related. If you usually see the changes just by going back to the overview page, you can try hitting F5 / reloading the page, or try a different browser.

Edit: Ninja'd
Edit 2: Yes, something is definitely different when it comes to remembering viewed topics. Experiencing it myself atm in both "New Posts" and the "Latest Posts" plugin.

 

[Flintlock]

Okay, here are a few things that caught my eye.

1. The search bar and RSS icon are not vertically aligned in the menu bar; they're a little too high. Should be an easy fix.

2. All the article images on the front page feel too big. From the conversation above it seems like getting them right is an ongoing project, which is good. I guess it's a matter of taste, but I think they would look better shrunk down a little, as they were in the draft.

3. The text-to-white space (or black space) ratio in the "more news" and "latest from the forums" sections is a bit too high. I think that either the font size should go down a notch or the line spacing should be increased. Or both.

4. The materia orbs currently in use seem like they aren't glowing, as they're pretty pale. As Kuroto pointed out to me yesterday when we were looking at it together, it makes them seem inactive. I notice they have a thin dark outline as well, which makes them stand out in the "happening now" bar in an unpleasant way. I think I already shared the blue one I used in the draft, but here it is again.

5. On the subject of the "happening now" box, is that going to be there all the time, or only when there is something actually going on? If it's the latter, I think it would be nice if it appeared at the top of all pages, including articles themselves. Also, how would one go about updating what it says?

6. The headings of "more news" and "latest from the forums" are quite badly rendered in my browser (Chrome, 1366x768). Here's a screenshot to show you what I mean. How does it look for everyone else?

7. There seems to be a 1px black border running down the left of the page that isn't there on the right. Why is that? Also, the main banner is still off-centre on the forum.

8. I still need to design an arrow for the menus, don't I? I said it was a five-minute job, but those are the ones that always get postponed... I'll get on it. Also, I'll pop into IRC in a bit

 

[Cthulhu]

On #1, the damn thing's too dark, how am I supposed to be able to spot that? .

On #3, I don't see what you mean and/or your sentence is a bit formed. Did you want more or less space between text / more or less density?

On #4, supply decent images and we can fixx it; for now we just used the ones from the forums due to a lack in graphic skills.

On #5, it can be removed and added whenever needed. Not sure where it can be placed and when though, maybe we could do a template edit to make it appear on all pages. To edit it, you'll need admin access and edit the appropriate widget, chuck some HTML in there.

On #6, yeah I see that too; it's to do with the choice of font, which seems to be rather iffy about size. I can fuck around with it, but Fangu's also working on stuff, not sure which version is / should be leading atm (the one live now or the one on fhtagn, which I synchronized this afternoon).

On #7, aaaaaaaaaaaaaaaaaaaaaaaaaa

On #8, yes. .

 

[Fangu]

1. The search bar and RSS icon are not vertically aligned in the menu bar; they're a little too high. Should be an easy fix.

I want to add that the bar seems to be at a fixed width, which is still breaking the responsive design of the cell phone version.

2. All the article images on the front page feel too big. From the conversation above it seems like getting them right is an ongoing project, which is good. I guess it's a matter of taste, but I think they would look better shrunk down a little, as they were in the draft.

Maybe I should just switch them all from 7:5 to 3:2 2:1? (In the draft, both are 2:1. Edit: Sorry for the confusion here!!) How do you think that will work? The best thing is to have them all be the same ratio, but the top one slightly bigger.

5. On the subject of the "happening now" box, is that going to be there all the time, or only when there is something actually going on? If it's the latter, I think it would be nice if it appeared at the top of all pages, including articles themselves. Also, how would one go about updating what it says?

Only ppl with access to editing Widgets in the WP Admin panel can edit that text. Atm that's only Admins, but pretty sure that can be changed to include Editors/ Authors as well, but I think we should do this through Twitter or similar instead.

It's set to be shown only on the Front Page at the moment. The plan was to have it showing on the FP at all times; like leave a link to the IRC chat or something if nothing special is going on. It can be set to hidden if the Widget is empty though, but this is harder to do if we're to control the bar through Twitter or similar. Thoughts?

 

[Cthulhu]

Actually, replacing the announcement with a twitter feed would work, .

 

[Flintlock]

On #3, I don't see what you mean and/or your sentence is a bit formed. Did you want more or less space between text / more or less density?

Sorry, I meant that for the size of the box, there is currently too much text, or not enough space between the lines.

Maybe I should just switch them all from 7:5 to 3:2 2:1? (In the draft, both are 2:1. Edit: Sorry for the confusion here!!) How do you think that will work? The best thing is to have them all be the same ratio, but the top one slightly bigger.

I just tried them out in GIMP, and I think 2:1 would look good! That would make the images a bit taller than in my draft, particularly the main image, but I can live with that

Only ppl with access to editing Widgets in the WP Admin panel can edit that text. Atm that's only Admins, but pretty sure that can be changed to include Editors/ Authors as well, but I think we should do this through Twitter or similar instead.

It's set to be shown only on the Front Page at the moment. The plan was to have it showing on the FP at all times; like leave a link to the IRC chat or something if nothing special is going on. It can be set to hidden if the Widget is empty though, but this is harder to do if we're to control the bar through Twitter or similar. Thoughts?

I'm not entirely sure about making it our Twitter feed, as we could use that for lots of things that wouldn't be appropriate for the front page. Say someone asks us a question about an audiobook and we reply "@Person The next one should be available early next year" - we wouldn't want that on the front page. So I think it would be best to edit it manually. Speaking of Twitter, though what's going on with it? I can handle it if no-one else will, but I'm not very good with it. I tried to nominate Lex once as he seems to be an expert

As for the arrow, it turned out to be more like a one-hour job, but only because I'm fussy At first I thought "let's just keep it simple, two lines pointing to the right will do it", but then I tried to find a way to connect it to FFVII without making it overly complicated, and that was tricky. In the end my mind turned to this logo, which we've also borrowed for our main banner. I took one end from it (circled here), cut it up, shrunk it, rotated it, and ended up with this. The drop shadow looks better in context, which you can see here. What do you think?

 

[Fangu]

I'm not entirely sure about making it our Twitter feed, as we could use that for lots of things that wouldn't be appropriate for the front page. Say someone asks us a question about an audiobook and we reply "@Person The next one should be available early next year" - we wouldn't want that on the front page.

I was thinking that we just set up a new Twitter account, and give the password to whoever wants to update the site. It's a cheap fixx but I think it's a good option.

 

[The Twilight Mexican]

Loving the arrow, Flint.

 

[Pixel]

We could do with having a link to the facebook page somewhere

 

[Cthulhu]

Yes.

One option would be to just add it to 'Community'; perhaps a bit nicer would be to add FB and Twitter icons next to the RSS icon, move search a bit to the left. We should probably also add social sharing links to posts and pages.

 

[Fangu]

I'd like to put more stuff into the actual Front Page, maybe that's just me but I do feel it's a bit naked at the moment. There could be a separate section for social media, like a box at around 150 px high stretching over the width of the content (like the happening now-bar) with Facebook, Twitter etc. info.

Also, each article has the option of a 100x100 px thumbnail. We could use those for something cool, like the top 10 articles or something (most read or most commented etc). And/ or the latest 10 WP comments.

Makes it look more dynamic etc.

Also, 2:1 imagery is done on the test site: http://fhtagn.thelifestream.net/
Top story header could use more room.
Thoughts?

 

[Cthulhu]

Icons for the 'more news' list would be nice; we'd have to do something for the forum poasts too in that case, like avatars. We'd have to figure out how to crop them without fucking them up too much though, . I'd say there's still plenty of vertical space to play with; on my screen (1200 px high) the site is a small one and a half pages tall and loads in ~600 ms, most of which is spent by the server having to think about stuff and other such latencies (I probably should check caching and server settings etc, but it's good enough for now), I don't think adding more content would significantly add to that. Or that it'd really matter much, but hey .

btw, you may have missed a closing tag somewhere on fhtagn <3

 

[Fangu]

Re: Forum avatars, first we need to figure out how to get the binary files (!) out of the database; URL's keep changing so hard linking them is no good (gaah!)

And yeah, 1280 is the next width to go. I fully support it. Problem is we'd have to edit the width of the forum too. Which might need some tweaking and also some members might get scared

(Closing tag where? I haven't inserted the footer yet if that's what you mean (lazy))

 

[Flintlock]

I'd like to put more stuff into the actual Front Page, maybe that's just me but I do feel it's a bit naked at the moment. There could be a separate section for social media, like a box at around 150 px high stretching over the width of the content (like the happening now-bar) with Facebook, Twitter etc. info.

I agree that it feels naked, or at least underdressed Not entirely sure what your idea of that social bar would be though. Why not draw a sketch of it, or implement it on the test site? I can make suggestions about the design if needs be.

Also, 2:1 imagery is done on the test site: http://fhtagn.thelifestream.net/
Top story header could use more room.
Thoughts?

The top story header should be edited to fit onto two lines, imho Apart from that, the line-spacing of the related stories could come down a bit. That won't get us all the way, but it would be a start. Afterwards, we could make the list of three into a list of two - that's what I did in the draft - or reduce the main headline font size.

Related: we need to start making sure that our intro text on posts is coherent on its own. We discussed this a long time ago, I recall. I just think it looks so much better if the text on the front page doesn't end with "... more".

Icons for the 'more news' list would be nice

What kind of icons do you have in mind?

 

[Octo]

Hey guys, just checked out the new layout (sorry its taken me so long!) Overall its looking pretty good, I've no complaints in terms of content. I suppose the only thing I would say is that the edges of everything look a bit stark? Might be nice to have some drop shadow/bevelled edges/borders or something?

But really thats just a very minor cosmetic thing and its hardly worth mentioning. I just wanted to make this post more than 'great job guys!'

Sorry if its already been mentioned I havent read through the whole thread.

 

[I Am Not Me]

New layout is awesome! Gonna have to get used to navigating it, but I'm always like that to new sites anyways.

There's just one thing I want to know. Is it really alright to have an easily accessible link to an NSFW thread right on the front page?

I don't really care (just curious if it's really okay), but I think others might.

 

[Fangu]

There's just one thing I want to know. Is it really alright to have an easily accessible link to an NSFW thread right on the front page?

Thank you for spotting this! The forum pull query was set up before we had all those Google spider problems.

I'm gonna hard edit this by adding a way to put in thread numbers that shouldn't show up in the query. As for now you need FTP access to edit the file in question, but this is definitely something every Author should be able to do. Making a way to exclude threads qoes quite high up on the list, along with the Featured Image and access to the Happening Now bar.

Edit: Ass thread removed by hardfix, now I'm gonna have to search TLS for all threads with 'NSFW' in the title (Which is another option btw, I could make it so that any thread with NSFW in it is ignored. But that would have to require some sort of middle stage storage as going through all forum thread titles when someone enters the front page is a tiiiiny bit overkill...)

Edit 2: Working on fixing the responsiveness of the top menu now - seems like setting the width to 99.3% does the job, but it's not optimal. I did edit the live server but caching stops it from showing right away. Trying to figure out what makes it bleed at 100%. I'll look into the RSS button and the search bar next, they do not look good/ dissapear in < 800px and < 600px. Edit 3: Figured out what makes it bleed - the borders are displayed on the outside of the bar. Will find fix. Edit 4: Meh, landed on editing the width for #access. Regarding that, a note: To anyone editing the CSS, it's vital for the responsive design that the @media stuff on the bottom stays on the bottom, because it's the last thing the browser checks.

I'll see what I can come up with to make the menu / search bar / RSS icon look better in the different responsive design versions.

 

[Flintlock]

It never occurred to me that posting a GIF in the ass appreciation thread would assist the front page development process

 

[Danseru-kun]

Thanks for the hard on this guys! That's all I can say because I can't review stuff like this. ;

 

[Fangu]

The top story header should be edited to fit onto two lines, imho Apart from that, the line-spacing of the related stories could come down a bit. That won't get us all the way, but it would be a start. Afterwards, we could make the list of three into a list of two - that's what I did in the draft - or reduce the main headline font size.

Have a look now? I did the following:

- Put in a 5 px margin on top of the top story image
- Reduced the line height of Related articles from 1.5 em to 1 em (normal)
- Gave the header and text of the top story more space

I can also give the picture a bit more space to the right, the actual image source is much bigger than appears on the front page.

Also... fairly sure the big picture on your draft is 3:2...? I tried measuring it on my screen with a pen but I failed; lazy (I remember you posted a draft with measurements once, but I can't remember if that was based on the last version or not; also, thread has too many pages...)

What kind of icons do you have in mind?

A thumbnail version of the Featured Image, but in 1:1 format. WordPress already makes thumbs, we just have to tell it to start using the size we want it to.

 

[Flintlock]

Have a look now? I did the following:

- Put in a 5 px margin on top of the top story image
- Reduced the line height of Related articles from 1.5 em to 1 em (normal)
- Gave the header and text of the top story more space

That's a definite improvement. There's just one line of overhang now.

Also... fairly sure the big picture on your draft is 3:2...? I tried measuring it on my screen with a pen but I failed; lazy (I remember you posted a draft with measurements once, but I can't remember if that was based on the last version or not; also, thread has too many pages...)

Yes, it was approximately 3:2, but the smaller images were about 2:1. That's what I meant when I said that I had used 2:1 in my draft. We're aiming to make all the images use the same ratio though, right?

A thumbnail version of the Featured Image, but in 1:1 format. WordPress already makes thumbs, we just have to tell it to start using the size we want it to.

Alright. I thought you might have meant custom icons to go with each category. That would have been a tough assignment, as I'm not used to working on such a small scale.

Going back a couple of pages:

Was just messing around in photoshop. I dont know if this is possible, but imagine something like this border thingy(...but actually good looking) around the top of each article

Spoiler: Image

Where would you suggest putting that border, exactly?

 

[Fangu]

That's a definite improvement. There's just one line of overhang now.

Thx. I also changed the responsive stuff, if you make your browser window smaller you'll be able to see them. Not quite sure about butting "Related articles" under the top story image on 650 - 1000 px windows (like iPads) but it does help for < 800px windows, like when you're holding your iPad vertically.

We're aiming to make all the images use the same ratio though, right?

Yep.

Where would you suggest putting that border, exactly?

I think he means on single pages (an article's own page). He was talking about the headers of the single pages right before he posted that.

 

[Flintlock]

I think he means on single pages (an article's own page). He was talking about the headers of the single pages right before he posted that.

Yes, but where on the page?

 

[Fangu]

Around all of the content, I presume?
idk that would mean a border within a border, which would look kinda funny. But we should do something with the single pages design. I suggest putting something on top of them (between the top menu and the content). Maybe small thumbnails to related articles, a path or whatnot. Anything on the sides will just be distracting.

 

[Flintlock]

How about making the padding on the main div 40px, like it is on the front page? I know it's not going to solve the problem entirely, but pushing in the content a little might make it seem a little "busier". I think one of the problems at the moment is the discrepancy between the size of the images/videos and the text paragraphs.