Site Design

[Flintlock]

Take your time; now we know the theme is going to be a dark one (well, the poll hasn't closed yet, but I don't see the result changing), I can start working on that. The background is pretty much the easiest thing to change anyway so we can tweak it until we get it right.

I think the text in the banner looks better than it did in your previous mockup, but I'd still make it a bit bigger and reduce the letter spacing. And to be fair, the main reason it looks different (apart from the size) on my mockups is that Gimp doesn't handle Photoshop text very well.

I agree that it would be a good idea to make the body stand out a bit from the background, but I don't think a gradient is the way to go. While gradients are making a quiet comeback in web design, they're pretty much all self-contained (i.e. with a definite edge, like in this example). The "fade to black" gradient still feels very much out of date. If we can't come up with a better solution, I'd prefer just pushing the body colour up a touch, perhaps to something like #07191d, to increase the contrast without dramatically changing the theme.

 

[Pixel]

Take your time; now we know the theme is going to be a dark one (well, the poll hasn't closed yet, but I don't see the result changing), I can start working on that. The background is pretty much the easiest thing to change anyway so we can tweak it until we get it right.

I think the text in the banner looks better than it did in your previous mockup, but I'd still make it a bit bigger and reduce the letter spacing. And to be fair, the main reason it looks different (apart from the size) on my mockups is that Gimp doesn't handle Photoshop text very well.

I agree that it would be a good idea to make the body stand out a bit from the background, but I don't think a gradient is the way to go. While gradients are making a quiet comeback in web design, they're pretty much all self-contained (i.e. with a definite edge, like in this example). The "fade to black" gradient still feels very much out of date. If we can't come up with a better solution, I'd prefer just pushing the body colour up a touch, perhaps to something like #07191d, to increase the contrast without dramatically changing the theme.

To be fair, those are very different uses of gradient, which do look pretty throwbackish. This is more tied in with our aesthetic and much more subtle... and could actually to with being a bit mor subtle. I'd just rather work toward something that looks good and works for us, than chasing trends

 

[Flintlock]

You're putting words in my mouth. I didn't say "we should follow the trend", only "this is the trend", just to contrast it with what you'd put forward.

 

[Flintlock]

With the dark theme winning comprehensively in the poll, I'm going to start working on the Wordpress theme on the test server. To avoid confusion and editing conflicts, I'd ask other people with access to the theme to let me know if they want to make any changes.

Edit: I'm already finding example of custom code in the Fraction theme .php files. Please put all changes in the child theme.

 

[Lex]

^Who did that? It couldn't have been me, I wasn't ever near the .php files.

 

[Claymore]

*whistles innocently and backs out of thread very slowly*

 

[Flintlock]

No harm done, but I'm going to get a copy of the original theme from Claymore when he gets home so I can run a diff to see what changes have been made. Wouldn't want to lose them in an update.

 

[Fangu]

Yeah the right thing to do is create a functions.php file in the child theme folder for any custom additions. See the Worpress doc.

 

[Flintlock]

Report: the only differences WinMerge found were the addition of a banner above the main content box (default Fraction style is to have a tiny logo to the left of the menu, see this preview) and the fix described below:

Edit: Found it. Fractions was missing the <?php wp_link_pages();?> right under <?php the content();?> in page-single.php. Not sure why they decided to not allow that function in Pages, when they didn't remove it completely - the page still breaks, but the links are missing. Might actually be a bug, someone should complain
Anyway, I added that line, however, it can be customised to say something other than "Pages:" etc. Just edit that line to send in an argument array instead:

Spoiler

<?php 
	$args = array(
		'before'           => '<div class="post-pages"><p>' . __('Pages:', THEME_NAME),
		'after'            => '</p></div>',
		'link_before'      => '',
		'link_after'       => '',
		'next_or_number'   => 'number',
		'nextpagelink'     => __('Next page', THEME_NAME),
		'previouspagelink' => __('Previous page', THEME_NAME),
		'pagelink'         => '%',
		'echo'             => 1
	);

	wp_link_pages($args); 
?>

Or some such. (Code is snipped from Fraction's news-single.php (corresponds to post-single.php. Not sure why they decided to rename, but whatever.))

Both changes have now been outsourced to the child theme.

 

[Pixel]

Haven't had much time today, but made some of those changes. Font spacing a little closer, font 10% bigger. I don't want to go too big, or it starts throwing off the balance, and looks bad imo. Rejigged a few things too, still figuring out the buildings at the sides.

https://drive.google.com/file/d/0Bw4Tk7aQlnO5OHJhWWRQZU9TUkU/view?usp=sharing

 

[Fangu]

Oh. Guess I should have specified about php bugfixes and child themes.

I'll just stop.

 

[Flintlock]

"I'll just stop"? Have I offended you? I'm not sure what you mean. If the bugfix was in the parent theme then it would be prone to being overwritten by an update, wouldn't it?

 

[Fangu]

Yes. All edits belong in a child theme folder, be it code or CSS.

When I found that bug I didn't think anyone would actually go in and edit any code files. Had I known I would have explicitly mentioned where and how it should be fixed.

Stopping because, without fully understanding how this project currently works, I'm just causing trouble with my "help".

 

[Flintlock]

I disagree with that assessment, but it's your prerogative. Will I be able to ask you for help privately?

 

[Flintlock]

Haven't had much time today, but made some of those changes. Font spacing a little closer, font 10% bigger. I don't want to go too big, or it starts throwing off the balance, and looks bad imo. Rejigged a few things too, still figuring out the buildings at the sides.

https://drive.google.com/file/d/0Bw4Tk7aQlnO5OHJhWWRQZU9TUkU/view?usp=sharing

Do you think you could come up with a version of the banner that's 200px tall? If we could shrink it down to that size, we'd be able to get the headlines for the fourth, fifth and sixth stories (e.g. "Cloud Strife headed for Super Smash Bros." on the test site) visible when a visitor with a 1080p screen resolution and maximised browser window first opens the page. At the moment the initial viewport contains a lot of imagery and very little text to go with them.

If you think 200px is too short, then just get as close as you can and I'll try to find the rest of the savings somewhere else.

 

[Fangu]

I disagree with that assessment, but it's your prerogative. Will I be able to ask you for help privately?

Yeah sure, also that goes for anyone

 

[Lex]

I'm actually kind of fascinated by the way the logo and lifestream move as you scroll. That's really interesting.

 

[Pixel]

This is at 206pixels, I think
https://drive.google.com/file/d/0Bw4Tk7aQlnO5czN1cHZoajN4NzQ/view?usp=sharing

 

[Flintlock]

Looks good. If you could send over just the banner (with transparency), I'll be able to put it up on the test site. I'd ask for the PSD but Gimp will render the fonts differently again and you won't like it.

 

[Pixel]

https://drive.google.com/file/d/0Bw4Tk7aQlnO5UGdNbDZBTDIyTUE/view?usp=sharing

I'm not too sure about that scrolling thing, since theres no control over the image composition. Its interesting, but I dont think it looks good tbh.

 

[Flintlock]

Yeah, I'm going to have to think about it. If we fix the entire background it'll be more consistent across browsers but we'll also have this problem when people scroll the page up. Another option would be to not fix the background at all but then we'd lose some visual interest further down the page.

 

[Cthulhu]

I'm actually kind of fascinated by the way the logo and lifestream move as you scroll. That's really interesting.

^, it's pretty neat and I haven't actually seen something like that before

 

[Flintlock]

Flintlock genius web designer confirmed

But really, it's just a transparent PNG file, nothing special. And it comes with its own problems which I'm going to have to figure out.

Edit: With a little help from Stack Overflow, I figured out how to fix the horizontal position of the banner relative to the background. The trick was to make it into the background of its container div. It looks good until the browser is below 1250px, after which I'll probably need to add a media selector.

 

[Pixel]

There's a bit of a problem with the way the glow around orbs and stuff look overlaid. I think in the PSD I have things set on layer modes, so transparencies look as Id like them to. But exporting to png without the background layers gets rid of blending modes.

Wouldnt you get the same function with just 1 bg image? That way there's full control of the graphics.

 

[Flintlock]

What do you mean by "function"? If you mean having the banner elements move independently, then no, it obviously wouldn't be possible. And I already mentioned what would happen if we used just one image:

If we fix the entire background it'll be more consistent across browsers but we'll also have this problem when people scroll the page up. Another option would be to not fix the background at all but then we'd lose some visual interest further down the page.

Pick your poison.