Manco and I already agreed that we want to go for a more subtle design aesthetic, something that screams "Oddworld" without necessarily having characters and screenshots clumsily plastered across it.

Yes you can. That's the point of a responsive layout.

I think what Nate means is that in essence they will be two distinct things and twice the work of just doing one or the other.

I'd disagree with that - as long as you know from the start that you're building a responsive layout you can take steps to keep your workload from getting too large.

Essentially all you're doing is building two layouts using the same base elements - the only difference is that instead of both being separate sets of files they're built together.

I'd be happy to help out, I'm great at Photoshop and I know a wee bit of Javascirpt as well. Personally I'd like something minimalistic, convey the atmosphere of Oddworld without having to display any entities.

Of what was mentioned in the first post, I have experience in:

• HTML
• CSS
• PHP
• Javascript
• Image Editing

As I mentioned on the blog, though, I am a particularly poorly motivated individual right now. If you need someone for any of the above and think you can keep me interested for long enough, feel free to PM me or something.

With apologies, I doubt I'll be keeping up to date with this thread as the subject's interest has made it difficult for my abysmal attention span to read through. A shame, because I am also interested.

You'd be a lot better off taking the existing themes and just coming up with new images. Much the same way as Native, Honeybee and Industrial are structurally similar.

Yes, I didn't have a W. :P

Also, remember I've worked only about an hour on this guys. It's not like that'd be the final version that we'd out straight up on the Oddworld Forums. It's more like a prototype of what it could look like.

Still...it's very in your face and overtly Oddworld, even ignoring everything else.

Do we have a list of people who are actively willing to work on this yet, by the way?

So far I count Manco, Slog Bait, Sekto and myself...

I know you are yet to discuss the skin design and all that, but I think the first question I have to ask is what exactly is the type of design you want, a more modern approach, a pixel one, minimalistic, grungy, etc? Because I do want to help out, but if I don't know what is the ideal design here, I really can't offer myself to help.

Yes, but then we’d still be stuck with the janky old structure that doesn’t adapt well to modern devices.

Industrial uses tables for layout. That line of thinking has been dead for a while.

The point here isn’t to just come up with a new color scheme and image set, it’s to build a much better overall structure. Yeah it’s more work, but I would be more satisfied with the end result and I think other people would be too.

And me.

What do you mean you didn't have a W? Do you mean you don't have a W key? Are you clipping letters from virtual magazines like it's some kind of MS paint ransom letter?

Look you can’t blame a kid for wanting to take a page outta Jamie Reid’s book.

vBulletin 3.X uses tables for structure. You don't like it? Tell Peter to upgrade to 4.

Themes don't need to be adaptable. They just need that wonderful combobox at the bottom that lets you change which theme you're using.

It uses them by default, but the documentation is pretty clear that you can go and edit the HTML yourself. There’s nothing to say you have to put the PHP hooks within tables.

Yeah, browsing on mobile is infuriating.

Some choice quotes in this article: http://www.webdesignerdepot.com/2013...esponsive-web/

Manco, check out Foundation. I've used it before on responsive websites. It's rather powerful and easy to use.

I've tried it on the DSi's browser, it was ok, but then again you have the zoomed in view and the one where you move the little box around so it probably isn't as bad.

A side note, what is a general average of screen resolutions for mobile devices?

Why are you posting that? I already know that OWF is a pile of arse on a mobile browser. That's why I said you need a mobile-centric theme.



Whatever. I'm not coding this, so you're free to do whatever you like. I'm just trying to encourage you to be a bit more modest with your scope. Ambition is all very well and good, but I'd prefer to actually see this project completed, rather than run out of steam halfway through.

I've used Foundation before myself. It's a good tool for getting to grips with responsive design and for quickly prototyping designs.

However, I find the amount of base code they provide to be a bit overwhelming and it can be difficult to manage when you want to start applying more distinctive styles, and I don't like how they aren't yet taking a mobile-first approach (although that's changing for version 4).


We'll never know until we try. I personally think we can get this done and I'd rather see it done properly first time rather than doing half a job.

I didn't know what the Rupture Farms font was, so I found two images of the Rupture Farms logo. One said something other than Ruptre Farms though. With these I managed to aquire and make the letters I needed. The one that did say Rupture Farms was thinner lettering than the other, which is why the 'Forums' bit has a few thin letters. I did attempt to lengthen them out, however.

It is online definately. Look up Oddfont, I believe Havoc posted a thread a while ago containing links and names of them.

That or you could use whatthefont.com to find similar (possibly freeware) alternatives.

Yes, I've seen that topic, but i can't see a font for Rupture Farms. :( Only the Oddworld logo font. (Which has been used in my pupbenny logo. ;) )

EDIT: I've just seen it. My mistake, it was on the first post. :P >_< Thanks. :)

I know I already quoted this above but I'm gonna do it again to say:

If you know a little bit of HTML/CSS and want to boost your knowledge of responsive design then I absolutely recommend Foundation. When I was figuring out the basics it was a huge help to me; it uses simple CSS classes to ease you in and you can totally use it for layout out of the box.

Their documentation is especially useful for figuring out how to get the most out of it, and I'm totally gonna borrow some of their smarter tricks when working on the OWF skin.

--------

Speaking of the skin, it's great to see that quite a lot of people are interested, and it's even greater to see plenty of people offering to help out.

We haven't started yet. But that's fine, I think it's probably better if we took things slowly to start to make sure we know exactly where we're going and what we're doing.

We need to start planning this out properly, though. So far it's all been talk (and yeah a lot of that talk is me I know), but we still don't have a really good idea of the process we'll be taking to get this done (again, my fault).

I'm not suggesting we get started right this instance, but we need to start discussing the roadmap for this shit. So let's talk about some planning.

Obviously the process needs to go something like this:

1. Layout / structure designing

We need to look at how the new skin will be laid out on screen. This involves looking at the current layout, seeing what works and what needs improving; mocking up (or prototyping if you prefer to dive straight into code) layout designs and then discussing them to decide what works best; and settling on a final design to take forward for the next step.


2. Prototyping and testing

Taking forward the final agreed designs and coding them up, then testing them on a variety of devices and browsers.

Steps 1 and 2 will likely cross over a lot; I think if we take to designing certain elements or blocks of the skin piece by piece we can get shit done quicker.


3. Converting to vBulletin

Probably the toughest step. This is where we take the finished HTML and CSS code and convert it into a set of theme files ready to be used on the forum. To do this we're going to need to know exactly how vBulletin software interacts with themes to place content in them - which we should have an understanding of before we start getting too deep into step 2.


So with those three steps in mind, people need to start thinking about where they want to help and what they'll need to do to so.


Also, two addenda:

1. Don't think too hard about images. We want to start with the structure and layout before we get into stuff like banner graphics.

2. Mobile first. After thinking about Nate's posts earlier I think he does have a point. I'm still committed to a fully responsive theme, but I think it would be wise to place the most emphasis on the mobile design to begin with. As long as we take care with designing the structure, adding the desktop designs in a later stage should still be perfectly feasible, and we can still design both alongside each other to an extent.

I looked into the header of the page, with all the banner and stuff in it. Found out that it was pretty much just made of , ,

and tags. So I guess creating a new structure for the banner would be reasonably easy. I did notice a tableception, the very top links row with oddworld.com in it is actually a within a that contains the edge of the slig graphic and a long black bar. Edit: Fuck, how do I fix this? Dumbass me thought I could put the tags in normal text on vBulletin, clearly not able to then. Edit 2: nvm fixed itself.

You can wrap it in [html] or [code] tags.

Yeah you're gonna find a whole ton of table, th and tr tags in the page source. Hopefully we'll be able to clean that up.

Here’s some stuff about CSS that I’ve been researching: read if you’re into that shit.

-----

Something that has been worrying me about this project is browser support. Some of the more useful responsive techniques are relatively new additions to the W3C standards, so are we going to run into issues before we even get started?

Well I did a little digging and there’s a great website called Can I Use which documents browser support for HTML5, CSS3 etc.

One of the main headache-saving CSS rules I use is box-sizing.

By default, CSS measurements for margins and padding are added onto whatever width you set to an element (so an 80% width box with a 15% padding will take up 95% of the actual space).

This is a pain because it forces you to keep track of every single measurement and make sure they don’t add up to the wrong number, which is tedious when you’re working with large amounts of elements.

box-sizing changes that by making the padding and margin relative to the width (so an 80% width box with a 15% padding will still take up 80% of the actual space and the 15% gets calculated within that 80% space).

So what browsers support it? Turns out a whole fuckin’ lot. Most recent browsers support it out of the box and many older versions support it with prefixes.

The only notable exception is Internet Explorer 7 and 8, which both make up a significant chunk of the browser marketshare. Luckily, Can I Use even links to a polyfill to get around this problem. So we can use this pretty safely.

The other thing is media queries, which are actually the thing that responsive layouts rely on to work at all.

The support for this is a bit different to box-sizing in that pretty much everything under the sun supports it, except every version of IE prior to 9. Fuckin color me surprised. But hey, this one has a polyfill too, so we can use it as well!

-----


On a non-technical side, I’m thinking it might be a good idea to take a screenshot of the forums index page and then annotate it in Photoshop (or something similar) to map out the basic page elements. The reason for this would be to figure out what elements we need to build and style for the new skin.

So something like this:

http://i.imgur.com/XOzZYS5.png?1

But more in-depth, of course. I would try and focus on major blocks rather than like individual text links or anything.

Here’s a base screenshot if you want one: http://i.imgur.com/lMSzmIp.png

Can I suggest you install a development version of vBulletin 3.6.10 so you know how a theme is even put together? You can't just design your own code and slap it on the forum. You have to follow the template files that come with vBulletin.

Broke down the very top banner of industrial.
http://www.oddworldforums.net/attach...1&d=1359659421
This specific bit, not including the second row of links, is all contained within one table. It's two rows, two columns.

The red lines obviously show cells, the blue box is another table contained within the cell. Just a little confusing.

Still wondering why the second links break when I take it apart. Maybe they rely on the CSS? There is a div tag I think. I'll have a look later.

I’m not even sure if that’s possible. Jelsoft certainly don’t offer older versions of vBulletin for download.

There may be some less than legal versions floating around somewhere.

Sounds like a surefire way to get in trouble with my web host. I could set up a local server but that only benefits me.

If you throw it in a password protected folder and remove it as soon as you're done with it you should be fine. I've been doing that forever and never got in trouble yet :).

I took your guys feedback on my banner and made a new one.



This one could be called something like the 'Corporation' skin.

It's still bad. The colours don't stand out or compliment each other, and I didn't even realise "www.oddworldforums.net" was written in the top corner, and that's just the start. If you're interested in this stuff you should probably take a graphic design course.

I dislike it less than the last one

I don't think it counts as a banner though, look at how small the title is.

Slapping 5 different images together and using a soft brush on the edges is not graphic design...