Forum skin project
 

we’re making a skin (and checking it twice)

If you‘re reading this then you either obsessively check every thread that gets posted, or you have some kind of interest in a new forum skin.

You might not have read the blogpost I put up a few days ago, so I’ll reiterate. I think it’s high time we had a new skin for the Oddworld Forums, and I think we need to go a lot further than just hacking up the sprites and colour scheme from one of the existing skins and calling it a day.

We’ve had some not-so-successful attempts at making skins in the past, and I think this is down to a couple of reasons:

• There’s a lot of work involved in putting a skin together
• Trying to start by modifying an existing skin creates a terrible workflow
• It’s always one person who goes off to do everything themselves.

I think making a new forum skin should be more than just saving a local copy of Industrial and hacking new PNGs and colors in. So what I’m proposing is to make a forum skin by starting fresh from the ground up.

There’s a couple of reasons why I think this is a better way to go about things.

• By starting fresh, the whole project will be easier to manage and understand;
• We won’t be constrained by the pre-existing layout and design of an existing skin;
• Everybody can get some practice with using new tools;
• We can make improvements to the forum that would be nigh-impossible to do with one of the existing skins.

I want this to be a collaboration between forum users, rather than a single person trying to do everything. Partly because something of this scale would be too much for one person (a team of motivated people is far else likely to burn out than one person), but also because I think a full team is going to be vastly more efficient and effective at designing, building and testing.

So here is a basic overview of what I believe we are going to need to get this done:

Design philosophies

• Mobile first
• Responsive
• Progressive enhancement
• Separation of style and content
• Modular design
• Lightweight

Underlying tech

• HTML for semantic structure
• CSS for styling
• PHP for structure
• Some Javascript for fancy shit

Skills needed

• Layout design / Wireframing
• HTML / CSS coding
• Image editing / Artworking

You probably looked at those bullet points and didn’t understand half of them (and if you did, you would probably be very helpful if you got involved!). Don’t worry, because a) I want to make sure everybody who wants to help out has some idea of what this all means, and b) nobody will be expected to do everything that is on the list.

I’m currently working on some simple demos that should hopefully illustrate the stuff listed up there. For now, I think the most important thing is for everyone to look at responsive design, so here’s a couple of links:

• http://www.zurb.com/responsive (gallery of responsive websites)
• http://www.zurb.com/article/1133/wir...esign-and-many (some quick definitions of a few concepts, plus links to more in-depth related articles)
• I also put together a few links for tutorials, in-depth reading, etc (warning: tl;dr): http://owf.radicoolthings.com/resources

For now, what I want is to get people together who are interested in working on this. I want to know what your thoughts are on the ideas above, and in what ways you can help out. I’ve already spoken to a couple of people, but we need as many as possible.

reserved for future

As of downloading Unity a few days ago and poking through other people's scripts I now have a grasp on Javascript. I haven't applied it to anything real yet, but coming from Java and Python it's pretty self-explanatory. I might be able to do things with adequate examples and supervision if you need me.

If you're really short on heads I might be able to learn things. You can probably tell if a task is the kind of thing I could pick up in a few weeks before you delegate it to me. I'm not going to jump through any huge hoops seeing that I'm about to start my last year of highschool, but I'm around if I'm really needed.

So does that mean I'm not obsessive?

I wouldn't mind helping, if I can find the time. The image editing is probably what I'd be best at, but I've mucked about with HTML and CSS a bit as well.

I don't understand why you're focusing on 'Mobile first'. You can't make a skin that looks good on both mobiles and desktops; they're just too different. Either make a mobile skin (in which case you should keep the design elements to an absolute minimum) or make a desktop skin.

I will help out with some of the HTML/CSS parts, but I might look up more about how PHP puts content into it all.

So maybe we design one theme, but use different graphics for mobile and desktop versions?

I can edit pictures. I can do something

How about we actually come up with some ideas whilst people join in the project (if they do).

I vote for a RuptureFarms skin using some sources from the original game.

How about we let the graphical people discuss this somewhere it won't clog up the thread and then let them pitch ideas to us, possibly with mockups of what they'd look like. They could even make a new thread with a poll.

e: How about we let more people doing graphics sign up first.

In theory that could work, but the layouts for mobile and desktop themes tend to be different. Try googling 'vBulletin mobile theme'.

My point there was that even if the layouts are completely different and we have to design everything twice the desktop and mobile versions could be graphically similar.

Yeah, maybe.

That could work. As long as you realise that you've just doubled the complexity of the project.

Javascript is something that I’ve never taken the time to learn and I think you’re the first person to offer some help with that, brilliant!

I would say if you can get your head around Javascript you can probably pick up HTML and CSS quite quickly – I’d recommend you take a look at some basic tutorials and such; W3Schools is a good place to start.

The thing to understand about mobile-first is that it isn’t nearly as much work as it seems.

A design for a mobile site basically has to account for three things: 1) a narrow viewport, 2) finger-friendly interface, and 3) lower processing power.

The narrow viewport is easy. You start with a design that fits comfortably into a narrow screen, and you style text so that it is easily legible on a small device. Once you’ve done that, you can just add in media queries to target wider screens and then add CSS rules which adjust the layout to fit comfortably into a wider viewport.

The finger-friendly interface is even easier. You just make sure major navigation elements like headers, menus and buttons can easily be tapped without someone hitting the thing next to it by mistake.

Lower processing power is probably the trickiest, but we can account for that. The first way in which to do this is to minimize the amount of images that have to be downloaded. You can do this with a combination of CSS sprites, replacing things like gradients and pattern background images with pure CSS equivalents, and by optimizing and minifying all the code the skin uses.

Look at the gallery of responsive sites linked in the OP, and look at sites like the Boston Globe. It’s entirely possible to make one site that adapts to all screens.

The vBulletin documentation might be a good place to start. I admittedly don’t have very much PHP knowledge so every little helps here.

If you're interested in learning CSS and HTML (XHTML) it's very easy to get your hands on a copy of HTML for dummies. I'm not going to say any more than that.

I've been learning from examples so far, looking at the code for the Native Theme and changing some of the simple stuff, I know we're not merely lobotomising an existing theme but I find learning through being told what to do or physically diving in and mucking about is the best way to pick stuff up. So far I've just had a look at the very basic syntax structure and meta tags.

First order of business should be to upgrade the damn forum to 3.8. We're working with ancient code here.

I've also had a chance to play with Xenforo as of late and I can see why Alcar was interested in it. It's a lot easier to manage than vBulletin ever was.

The whole reason there’s been no upgrade is because of plugins, right? Like the blog plugin.

I’m just wondering if there’s any way to port the blog stuff to a format that could be used with another plugin, or if Xenforo or whatever have a similar solution built in.


I’ve actually started a simple HTML doc which explains some of the basic elements of HTML. Probably not as helpful as full tutorials, but it should make a good basic reference.

Xenforo offers addons that ads the functionality, yes. Dunno how easy it would be to port the blogs over though.

I think the main reason for not upgrading is because it would break the current skins with 100% certainty. Not only would we need a new skin, we'd need to repair the current ones.

You really don't need a commercial product to learn HTML or CSS. They're the bread and butter of web development, there are hundreds of brilliant free tutorials on the internet of all places.

There are, of course, thousands of rubbish free tutorials. But then there are rubbish commercial tutorials, too.

I'm sure, I was just offering the idea since the 'For Dummies' series is supposed to be a pretty good way to learn loads of different things. =)

I was interested in the prospect of a new Oddworld Forums Skin. So I decided to make one.



I'd call it something like the 'Magog Cartel Skin' or something like that.

I can help with pixel art and the odd bit of tweaking. I'm good at 3D modelling too

Only thing I'd change with that would be the red text. The last letters on it look strange and the text itself looks out of place on the background.

It's good except that part that you made

Wow. You managed to violate almost every basic rule of graphic design in one image. Congrats.

Is that... an upside down M?

I think sometimes we are just too honest

No, there are times for delicate criticism, and there are times for cold, blatant honesty. This one warrants the latter.

Well, it's incredibly crappy, then. Sorry.

Hey folks, I’ve put together a quick demo of a HTML page. It demonstrates a basic page structure (i.e. header, page content and footer blocks) and contains a couple of different basic HTML elements like headers, paragraphs, and images.

http://owf.radicoolthings.com/blocks

I recommend you take a look through the page source (right click > view page source or something similar); I’ve tried to write up some notes for the main elements.

Note that while this has some responsive basics (the header, body and footer adapt to fit into the browser window; paragraphs wrap instead of being cut off etc), it shouldn’t be seen as an example of how we’ll be building a responsive page – there’s a fair bit more to do for that.

I can hotoshop. So if you ever need more people who photoshop. I photoshop.

I can't hotoshop, but I surely can photoshop.

Question. Are you aiming for a design that is highly functional as a forum, or something really jazzy with oddworld imagery and icons splashed everywhere?

Yes. All of which you say may be true. But it's still not 'Mobile first'. You can make a mobile theme, or you can make a desktop theme. You can't make one theme that does both.

It's easy to be cynical and to make fun of other people's work. it's not constructive.

If I thought that image displayed even a modicum of potential, I would have offered something constructive, but it didn't. Unless we set some scathingly high standards for this endeavor, all the Fan Corner slobs will osmote to the help forum and turn this thread into a showcase for their terrible photoshops.

You should make a meat/brisket focused skin. To remind our members to eat.

Wil would just love that.

I think this can probably be avoided by having as little Oddworld in the theme as possible. Where doe Native and Industrial (and possibly the other themes I've never used) feature Oddworld outside of the header? We'll keep the less artistically inclined busy with tedious pixel-art UI elements.