Mobile Frame Hangar Aesthetic Changes

[Dukayn]

Hi all, you may have noticed that the aesthetic of the Mobile Frame Hangar has undergone a couple of changes in the past day or so. This is due to Schoon enabling the Mod Team to have proper back-end access which allows us to manage the site much better than we previously have been able to.

The main reason for this was to try and stop the spambot registrations which were requiring the open windows for registrations, which we are working on. In the meantime - well, basically I got bored and started fiddling with the Styles and whatnot. I would like some feedback on the new visual style on the Hangar - I tried not to make it too drastic, and I hope it's an upgrade to what was already in place. I am willing to listen to suggestions however.

On my todo list as far as the look of the forum goes is to change the background on the individual forums to match the style of the Navbar (the semi-transparent effect). I would like to hear what you guys think of such a change, if you think it's worth putting the effort into implementing or if you think it would busy up the site too much.

Any and all feedback is welcome (that said, please keep it civil even if you dislike it )

Cheers,
Dukayn.

[milt69466]

Not bad. Simplistic and clean, I like it.

[Mantisking]

I think the banner looks better with just the silhouette image and the solid color.

[spacemonkey]

Have to agree with Mantisking. Maybe it's just this particular background but to me the words and the Chub silhouette look "fuzzy" without the contrast of the solid color.

[Blorf]

I'd appreciate any efforts put into making the design a bit more responsive. (In the web design sense of the term, which mostly means works well across multiple screen sizes.)

[Thaddeus]

Have to agree with Mantisking. Maybe it's just this particular background but to me the words and the Chub silhouette look "fuzzy" without the contrast of the solid color.

That's the drop shadow in action.

[Dukayn]

I'd appreciate any efforts put into making the design a bit more responsive. (In the web design sense of the term, which mostly means works well across multiple screen sizes.)

What resolution are you using? I've got the background at 1920x1080, but I know some folks can have higher resolutions so it might not work that great at those resolutions. I'm not aware of what the higher resolutions really are though, so if you could let me know then that would help in sorting something out.

Have to agree with Mantisking. Maybe it's just this particular background but to me the words and the Chub silhouette look "fuzzy" without the contrast of the solid color.

That's the drop shadow in action.

Yeah, there's a drop shadow on the lettering but not sure about the Chub. I could add a semi-transparent box to the banner, that should help with some more contrast.

[Thaddeus]

You're having too much fun with this, Dukayn.

[Dukayn]

You're having too much fun with this, Dukayn.

No such thing

[mraichelson]

The tiny white negative space on the corners of rounded things is giving me a little OCD eye twitch. That said: glad to throw some code at things if it will help as well.

[Dukayn]

The tiny white negative space on the corners of rounded things is giving me a little OCD eye twitch. That said: glad to throw some code at things if it will help as well.

Oh yeah that can be fixed. But tiny white rounded corners are kinda low on the list

[Blorf]

For the background, just set the background-size to 'cover'. That would take care of larger screen cases. I'm more concerned about the smaller screens—tablets, mobile, etc. I'm not sure what restrictions are put in place by the template engine, but anything that makes it easier to read and browse would be great. (And before you ask, I think installing an app to browse a web forum is ridiculous with the capabilities of CSS and small devices now. These things can and should just be handled properly by the site itself. Take a look at Digg Reader or forecast.io for some great examples. In the case of Digg Reader, the web version is actually better on mobile than the app.)

The box corners can be easily done by removing the images all together. The 'corner-top' and 'corners-bottom' spans are simply bloat. Add a border-radius property to each of the boxes instead. It would be cleaner code, faster loading, and aesthetically better.

Same with the transparency on some of your boxes—lose the image and use an RGBA background color. It's cleaner and faster loading. You can also use the technique elsewhere in places you might not be able to load an image.

[Dukayn]

I've used a resolution tester, and even with the larger banner, the site looks ok (in landscape mode, obviously) at most mobile resolutions. Some of the really small resolutions aren't great, but really most people will be viewing from a computer or decent resolutioned smartphone or tablet, let's be honest. Also, there's Tapatalk available for this forum as well which is a really good app if you don't like using the site via mobile.

I'll look into those alternatives to the images, thanks. I've done some web design in the past but nothing overly complex so my knowledge isn't brilliant.

[Blorf]

I can tell you the current small-screen experience is serviceable, but not exactly great. There's lots of room for improvement. Not the header specifically, but throughout.

And yes, I know that's mostly the fault of a 10-year-old default theme which you didn't build. But I get paid to build sites all day, and sometimes I get paid to teach other people to build sites all day... so I have a lot of opinions!

[Dukayn]

Yeah, I'm not going for perfect here I can understand that from a professional's standpoint there's lots of room for improvement. phpBB isn't exactly the best and greatest option around, but it was free and as you pointed out I didn't build the template (or even the site in the first place )

Thanks for the tips you have given though, I'll definitely look into implementing them as it sounds like they'll do what I want them to and make things smoother overall.

[Thaddeus]

Man, I love this new look.

[David Artman]

The kerning on the heading font is problematic. I'd adjust that (as it seems to be a graphic, not text).

I'd also turn off sigs (or at least turn off graphics in sigs). Ugly, cluttered, and slows down the site response. They were cute in the 90s... now they're tantamount to having a billboard on every wall and on every corner and on the sidewalk and on hovering blimps....

[Mantisking]

I'd also turn off sigs (or at least turn off graphics in sigs). Ugly, cluttered, and slows down the site response. They were cute in the 90s... now they're tantamount to having a billboard on every wall and on every corner and on the sidewalk and on hovering blimps....

You can use your User Control Panel and shut off the display of signatures.

[Blorf]

phpBB isn't exactly the best and greatest option around

phpBB is actually pretty good for forum software, the prepackaged template/theme is just outdated. A lot of the software alternatives are really poor.

Anyway, now that the header is wider, apply max-width: 100% to the image and it will (magically!) shrink if necessary. You'll likely also need height:auto !important on it, since it has a defined height in the HTML. Another phpBB forum I read has .postbody img { max-width: 100%; } and it really helps over there.

[David Artman]

I'd also turn off sigs (or at least turn off graphics in sigs). Ugly, cluttered, and slows down the site response. They were cute in the 90s... now they're tantamount to having a billboard on every wall and on every corner and on the sidewalk and on hovering blimps....

You can use your User Control Panel and shut off the display of signatures.

Ah, cool! Thanks!