Forum skin project

[Havoc]

I still don't get how this will translate into a forum skin?

[AvengingGibbons]

I still don't get how this will translate into a forum skin?

Me neither, Havoc xD... Manco, could you explain what the webpage consisting of text at different font sizes means for this project? I think some of us don't understand why the things you are showcasing are relevant.

[Nepsotic]

I think he's just redesigning the template at the moment.

[Manco]

I still don't get how this will translate into a forum skin?

Me neither, Havoc xD... Manco, could you explain what the webpage consisting of text at different font sizes means for this project? I think some of us don't understand why the things you are showcasing are relevant.

Look at any page on the forums and note the amount of text there.

Typography is the bones of any good design.

e: For those interested, Adobe have just released their new app Reflow. It’s intended to use in making responsive webpages, but it also looks to be a nice lightweight layout tool for those not familiar with writing code. I recommend you check it out if you’re interested in making websites at all.

[Manco]

Minor update: I've started work on combining the typographic scale I made with the grid framework I came up with. There's a few bugs surfacing but that's to be expected, and it's stuff that's easy to fix.

I also took the time to set up a template for metadata in the HTML head; Open Graph tags, favicons, iOS icons etc.

Lastly, I'll point to the link I edited into my previous post again - Reflow is probably going to be very useful for simple prototyping, especially if you don't know code.

[Manco]

I’m taking a break from coding to think about layout considerations; specifically, how do we fit the forums into what would be a very small, narrow screen like a phone?

Consider the index page: it’s a table of five columns with header rows. When you try and scale that down to a narrow viewport, you either end up with some very narrow, cramped columns; or you can try and stack the table cells, which causes problems with the header row.

What I’m thinking is to basically simplify the index for mobile screens so that only two columns show: the Forum column and the Last Post column. I think it makes sense to keep these because, in my experience, these are the main things people care about because they’re navigational. The other columns — post count etc — are more ancillary information that wouldn’t really be beneficial to keep for a mobile screen.

That then would leave the question of how best to lay the remaining sections out. My current thinking is to stack the columns like so:


(above: a terrible rough example)

But I’m interested to hear other ideas.

[Nepsotic]

It looks fine like that, I reckon. But you have to take into account screen rotation. How will that layout be when landscape?

[Manco]

It looks fine like that, I reckon. But you have to take into account screen rotation. How will that layout be when landscape?

According to Reflow, kinda like this:

[Havoc]

You know there are plugins available that auto detect a mobile browser and select a specific skin for that user, right? Why not have one cool skin and one mobile skin?

[Manco]

Plugins usually rely on browser detection and scripts which aren’t always reliable and are usually more resource-intensive than just using CSS media queries.

Besides, why not have a cool skin that’s also a cool mobile skin?

[Havoc]

In practice the two rarely go together. To have a skin that adapts to the small screen of a phone you can't have any images anywhere since those have a fixed size. And that includes (or mainly is) the very wide header image. Mobile browsing also requires larger buttons because the current links are a bitch to press sometimes (the image buttons especially). In short, the low image and large button requirements for a mobile skin directly contradict the many images and small compact buttons of the normal skin.

Also, newer versions of vBulletin are made to deal with this problem a lot better already. It would help you and your project if Alcar would get off his ass and upgrade the forum to a newer version and get us out of the damn stone age piece of shit.

[Nepsotic]

Isn't AbeBabe the only one who can actually do that at the moment?

[Manco]

In practice the two rarely go together. To have a skin that adapts to the small screen of a phone you can't have any images anywhere since those have a fixed size. And that includes (or mainly is) the very wide header image. Mobile browsing also requires larger buttons because the current links are a bitch to press sometimes (the image buttons especially). In short, the low image and large button requirements for a mobile skin directly contradict the many images and small compact buttons of the normal skin.

Two things:

1) Images can be scaled.

img {
width: 100%;
height: auto
}

That’s the CSS you need. Put the image in a container element now and it will scale to fit it no matter the width.


2) Modern buttons don’t need to be images any more, we can style them with pure CSS. Which scales infinitely. And even if we want to stick an image on a button, point #1 still holds true.

I still need to get a vBulletin install set up so I can dissect it, but I think you’re overcomplicating things – we can build the vast majority of basic skin functionality with just HTML and CSS.

[Havoc]

Two things:

1) Images can be scaled.

img {
width: 100%;
height: auto
}

That’s the CSS you need. Put the image in a container element now and it will scale to fit it no matter the width.


2) Modern buttons don’t need to be images any more, we can style them with pure CSS. Which scales infinitely. And even if we want to stick an image on a button, point #1 still holds true.

I still need to get a vBulletin install set up so I can dissect it, but I think you’re overcomplicating things – we can build the vast majority of basic skin functionality with just HTML and CSS.

I think you surpass me in knowledge on HTML and CSS . I might be over complicating it a bit, but having actually dug into vBulletin skinning for many versions, sites and years I can tell you that there's more to it than just writing some HTML and CSS. There are certain elements of the vBulletin backend system that need to be in the skin templates. And there are an estimated few hundred templates to build up from scratch. Some for the tiniest things such as a single image or button. All those templates are linked and referenced in other templates and it's an absolute bitch to puzzle all those things together. I've had many a headache altering skins for this software

[Manco]

Yeah, when it comes to any kind of CMS (be it vBulletin or something like Wordpress) piecing all the myriad bits of template together is going to be a time-consuming nightmare.

That’s why I’d like other dudes to get involved here. Come on guys, floor’s open.

[Slog Bait]

I'm still on board. I don't have any current input though so... just let me know what I can do.

[Nate]

Isn't AbeBabe the only one who can actually do that at the moment?

In terms of forum permissions, Alcar can do anything Cloverfield can. The difference is that Cloverfield has experience in updating the forum skins for new versions of vBulletin.

[AvengingGibbons]

Manco, in the images you posted, regular users of this forums dont need all that forum description crap: "Talk about things such as upcoming games..." No need for it, us regulars know what each forum category is for. Maybe have that description reveal itself when a button is pressed.

[Slog Bait]

I feel the descriptions are necessary specifically for new comers. However, I've always felt the descriptions were a bit lengthy, and for mobile it just clutters everything. A suggestion for whoever it concerns would be to redo the forum descriptions so they're shorter and to the point.

[Nepsotic]

Or maybe have that description reveal itself when a button is pressed, like AvengingGibbons said.

[Slog Bait]

It's entirely possible to have both, you know.

[AvengingGibbons]

A simple layout like that would be lovely. I took inspiration from the Windows Phone messaging app. The small grey squares are where the profile pictures would be. Ignore the quotation marks, I was just playing about... The 'dot dot dot' s would bring up more information about that user (infact, pretend the dot dot dots arent there.. you could just tap the profile picture to bring up more info on the user)

The problem I have is where to put the user's name.. I wouldn't want it to go in the speech bubble.

[Manco]

Manco, in the images you posted, regular users of this forums dont need all that forum description crap: "Talk about things such as upcoming games..." No need for it, us regulars know what each forum category is for. Maybe have that description reveal itself when a button is pressed.

I feel the descriptions are necessary specifically for new comers. However, I've always felt the descriptions were a bit lengthy, and for mobile it just clutters everything. A suggestion for whoever it concerns would be to redo the forum descriptions so they're shorter and to the point.

Or maybe have that description reveal itself when a button is pressed, like AvengingGibbons said.

My take on this is that it’s important not to hide too much information.

There’s a school of thought in web design which says that if your content is worth hiding on a mobile then there’s no need to keep it around for the desktop version either.

That makes some amount of sense to me, but at the same time I feel that sometimes an element that serves to enhance rather than being vital can cause more trouble than it’s worth if you keep it around.

In this case, the forum descriptions remain fairly important. For regulars who know where each forum is and what goes in it they get glossed over, but for newer users those descriptions are vital.

I think as well having those descriptions there adds content to the page, which breaks up the index page from just being, y’know, a dry list of forum names.

A simple layout like that would be lovely. I took inspiration from the Windows Phone messaging app. The small grey squares are where the profile pictures would be. Ignore the quotation marks, I was just playing about... The 'dot dot dot' s would bring up more information about that user (infact, pretend the dot dot dots arent there.. you could just tap the profile picture to bring up more info on the user)

The problem I have is where to put the user's name.. I wouldn't want it to go in the speech bubble.

Couldn’t the username go above the avatar?



On the other hand, this does raise the issue of what happens if someone has a long username, title or location.


On the coding note, Zurb released Foundation 4 recently: http://foundation.zurb.com/

I haven’t had a chance to stress test it, but apparently they’re focusing on making it mobile-first, semantic and more lightweight, which is exactly what I want from a framework. I’m giving some thought over whether to keep on rolling my own code or if I should throw out what I’ve done so far and work with Foundation, which would save a ton of hassle because of the amount of prefab CSS they’ve already done.

[AvengingGibbons]

Manco, what you're saying about the forums names being kind of dry, a nice relevant icon beside each forum name would fix that.

And about my design, I would have thought to put the names where you suggested, but like you realise there's not much room to fit an entire username.

[Fred The Fuzzle]

I'd place the username within the paragraph itself, ignore the poor typesetting, this was a rush job.



I'm all for Foundation to be used, it cuts development times significantly.

[STM]

Hmm, with a layout like that though, how would you handle rep, profile stats like post count and custom titles? Would you omit it completely?

[AvengingGibbons]

Hmm, with a layout like that though, how would you handle rep, profile stats like post count and custom titles? Would you omit it completely?

As I said earlier, upon touching the profile picture, more information on the user would be shown.

I imagine some small icons within the speech bubbles along the bottom to handle rep, reporting and quoting. Alternatively, keep the current design, and upon tapping a speech bubble, a menu of options is shown allowing repping, reporting and quoting.

[Phylum]

It would be nice to have a rep indicator of sorts. A mobile friendly option might be to have a dynamic square that recolours itself to be greener as you approach 10,000* rep, starting at a dull grey. Also, CTs are a big part of people's profile if you ask me. I often remember older members that have stopped posting by their CTs.

*You could use some fancy log scale to even out the colour between newer members and OANST.

[Havoc]

I'd place the username within the paragraph itself, ignore the poor typesetting, this was a rush job.



I'm all for Foundation to be used, it cuts development times significantly.

How would that scale up to a desktop version though?

[Fred The Fuzzle]

How would that scale up to a desktop version though?

Depending on how Manco/whoever decides do go about the CSS, mobile designs and desktop designs can be distinctively different within the same HTML/CSS document (s). Rest assured, the desktop design wouldn't be a simple scaled up version of the mobile version, that would just be incompetent and lazy design work.