Site Design

Pixel

Pixel

The Pixie King
They don't move indipendantly as it is now. They're locked at the same size and position. So just having 1 bg image would function the same way. Only thing that changes at different resolutions is the body of the site, exactly as it does with the 2 layers. Banner locked at the top.
 
Flintlock

Flintlock

Pro Adventurer
They move independently for me (and apparently for Yop and Lex, since they commented on it). What browser do you use? I'll have to check it out.
 
Flintlock

Flintlock

Pro Adventurer
I already addressed the problem at the size you're viewing it at and said I'd look into it:
Flintlock said:
It looks good until the browser is below 1250px, after which I'll probably need to add a media selector.
Click to expand...
but it's odd that it doesn't scroll at all, even vertically, as it does in Chrome.

Edit: It should scroll vertically now. Fraction does a weird thing where it copies the <body> background to a div called "dat-menu-container" as in-line styles. Chrome was showing the body background and Firefox was showing the container background... go figure. I'm not going to fix the width issue today because I think I'll have to brush up on CSS media selectors first, and I'm too tired right now.
 
Last edited:
Fangu

Fangu

Great Old One
Flintlock said:
It looks good until the browser is below 1250px, after which I'll probably need to add a media selector.
Click to expand...
I'll just say - we've all been there, thinking media selectors is something one will do later and probably won't take much time :monster:

And yeah % > fixed.

The mobile version is looking b0rked, but dunno if you're saving that piece of candy for later.
 
Flintlock

Flintlock

Pro Adventurer
Today's changes were all about small displays. The mobile/tablet layouts are no longer "b0rked". :monster:

There were lots of changes too small to mention, but the big one concerns the banner, which has been the subject of recent discussion in this thread. It's been moved slightly to the right in accordance with Pixel's mockups, and it now moves up and down independently of the background only while the browser is wider than the main content area. When the browser goes below that width, the banner gets fixed in place and shrinks with the rest of the page. Test it for yourself by going to test.thelifestream.net with a maximised browser window and scrolling the page, then shrinking the window and scrolling again. I've tested it on Firefox and Chrome (including various simulated displays thanks to the development console) but if there are any bugs, let me know.

One thing I'm not really sure how to tackle is that when the page is more than 600 px wide (i.e. tablet/desktop layout), the "slider" plugin shows the three newest posts at the top of the page, and latest-news-1.php shows the fourth post onwards, but when the page is below 600 px (i.e. mobile layout), the slider is hidden and the first three posts aren't visible at all. The default configuration of Fraction avoids this problem because it duplicates the slider posts underneath, which I didn't want for our site. I might have to disable the slider altogether and recreate that layout with just the "latest news" bit, but if anyone has a better solution (or if anyone feels strongly about keeping the slider and re-enabling the swiping features), please let me know.

There's still a lot to do.
 
Pixel

Pixel

The Pixie King
It definitely feels a lot better with everything scaling uniformly, and positioned correctly. I'll see if I can sort out a version of the top layer that doesn't look weird.

Only nitpicky thing I would suggest is moving the body down a few pixels, just to clear the bottom of the lifestream curve in the banner, so it doesnt feel cut off.
 
Flintlock

Flintlock

Pro Adventurer
Fixed. That was probably an oversight, an old height value I forgot to change.

What do you think about the banner at 600px and below? I'm wondering if we should make a separate version of it with bigger text for that size.
 
Flintlock

Flintlock

Pro Adventurer
Another round of mostly small changes done. They all add up. Although there's still a bit of tweaking to be done, I'm now pretty satisfied with the state of the front page, so I'll be moving on to other pages.

One thing I've noticed is that Firefox's CPU usage goes through the roof when the website is resized past the 600px threshold. Chrome and IE, the other two browsers I have installed on my computer, don't suffer from the same problem, so I have no idea why it's happening. I thought it might be something to do with disabling smooth scrolling since I read a developer's comment that that's needed for the responsive menu to work, but re-enabling it didn't fix it (and I haven't noticed any problems since disabling smooth scrolling, so I'm inclined to leave it disabled). I guess it should be possible to figure out what's happening through Firefox's developer tools but I'm not experienced enough with them to know how to do it. If anyone else knows how, please report what you learn.
 
Cthulhu

Cthulhu

Administrator
AKA
Yop
Flintlock said:
Another round of mostly small changes done. They all add up.
Click to expand...

You're going to turn into a decent software developer with that attitude, :monster:

Re: the performance, I can take a look with the developer tools, see what's hogging the cpu. It's possible that either Chrome and IE have hardware acceleration which Firefox doesn't yet, or Firefox has a performance bug there.

l'edit, I took a look; it seemed it was mostly busy with styling / recalculating styles / doing something, can't really tell where that was spent on. JS time was spent on a JS-based animation (which basically involves setting a property like the width of an item an X amount of times per second, which works but isn't great for performance), but again that was only one part of the operation. Probably best to report it to the author, they might know more about what exactly the style does when scrolling.
 
Channy

Channy

Bad Habit
AKA
Ruby Rose, Lucy
Just checked it out, the transparency of the banner scrolling away from Midgar was really neat. Loved it.

One question: is there any rhyme or reason to the organization of the articles and layout? Not knowing which is newer, you have some larger, some smaller, and then a column on the right of other stuff...
 
Flintlock

Flintlock

Pro Adventurer
Well, we chose a "magazine"-style theme, so it's basically supposed to be like that. All my customisation hasn't really changed the order the articles are presented in.

The theme shows the nine latest articles, starting with the big image, then the two next to it, and finally the six underneath in two rows of three. Everything else is displayed based on a certain category or tag: at the moment we have Translations and Unused Text in the left column (newest article bigger than the rest) and the Final Fantasy VII Remake on the right side (the moving image isn't actually a link at the moment, just a way of drawing attention to it). If you resize the window to below 600px or view it on your phone you'll see the section headings more clearly. If people think they should be more obvious on the desktop/tablet sites as well, that's something I can fix.
 
Pixel

Pixel

The Pixie King
I think it might be useful to replace the picture of the back of Cloud's head with social media links, itunes, facebook yutube, twitter? Or at least have them somewhere
 
Flintlock

Flintlock

Pro Adventurer
Yeah, they're definitely going somewhere, I just haven't decided where yet. The top of the sidebar is probably as good a place as any.
 
Lex

Lex

Administrator
Shouldn't we feature them in a more obvious place? Top of the sidebar sounds obvious enough mind you.
 
Flintlock

Flintlock

Pro Adventurer
I don't see any iTunes icons there, just a generic Apple icon. But I agree that the iTunes icon does look a bit out of place. The trouble is that Apple doesn't provide a generic iTunes icon, only a "get it on iTunes" badge which is much too wide for our purposes.

Besides, the first set is modified (shadows) in a way which, as I've pointed out before, goes against the terms of use of every one of those icons. The second set, iTunes aside, is exactly the same as the ones I'm using except with rounded corners, which would look out of place on our site where everything else is rectangular.

I might make the icons a bit smaller to increase the space between them.
 
Lex

Lex

Administrator
I know what Pixel means about the iTunes icon, it's the same size but it looks like it's slightly bigger because of the colour difference (it's so bright compared to the others). Might look better at the end? For the record that is the icon for iTunes Flint :D
 
Flintlock

Flintlock

Pro Adventurer
Lex: You're saying this is the iTunes icon? Because it isn't.

Pixel: That isn't the iTunes icon either, but an replica. Notice how the musical note is different. Sure, we can use that if we want and use it to link to iTunes - nobody's going to stop us - but it would be better to use the actual logo if possible.
 
You must log in or register to reply here.
Top Bottom