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...

That one isn't as bad. It's a cluttered mess with grossly varying pixel densities, but it's an improvement over the Sweet Bro and Hella Jeff quality of the first.

The color scheme is more consistent as well – it’s kinda made me start thinking about doing a grey/cyan color scheme.

Doesn't really fit well with the title though, does it?

I’m not saying the design is good, but I like the color scheme.

I could go into a lot of detail regarding the design but it would be mean.

The colour scheme is a bit too similar to our current Industrial theme.

Question: Should you come up with a colour scheme for the page elements first then come up with a banner, or come up with a banner that you like then match the page elements to it?

I'd say the former, it provides cohesiveness throughout the entire design. I'd like to see a more subtle colour scheme, pale tones and colours contrasted with strong and rigid lines.

Either works, really. From what I understand, most of the graphics are going to be hand done. If we were just cutting and pasting junk like pupbenny's banner, it would probably be easier to do the latter. How we're going about the project, however, is flexible enough for us to do either with ease.

That's not what I have done....

As I've said, this is a prototype of how it COULD look. That's why I've just "copied and pasted junk". I'm not going to spend hours making Oddworld images from scratch - Which I wouldn't even know how to go about doing that - when I'm just showing you guys stuff and giving you ideas.

The pixels look like that because I blurred them for effect. I also put smoke in to make it look like pollution and factories, ect again to give it effect.

EDIT: Here, I made another version quickly to show that I've blurred the image, not changed the size so much the pixels are blurred. Bare in mind I did this REALLY quickly just to show you. It would be in much better quality if I'd done it properly.



What one do you think is better? (If this one was in better qaulity and if I'd worked more time on it. ) If you think it's this one then I know you prefer quality, if it's the other then effect.

I suggest the banner first because thenr you can make the colour scheme suit around that instead of trying to make a banner suit around a simple colour scheme.

P.S. Sorry for double post. I was going to edit my previous post and paste this in that but accidentially pressed send....

You should drop this. It's too cluttered and it wouldn't work as a banner. Even if it is just "a prototype".