Forum skin project

[Manco]

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.

[Nepsotic]

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

[Varrok]

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

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

[AvengingGibbons]

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?

[Nate]

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

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.

[scrabface]

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.

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

[Sekto Springs]

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.

[Mac Sirloin]

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

[Sekto Springs]

Wil would just love that.

[Phylum]

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.

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.

[Sekto Springs]

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.

[Manco]

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.

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

[Phylum]

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.

[Manco]

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.

[Fred The Fuzzle]

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.

[Carnix]

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.

[Nate]

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.

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.

[pupbenny]

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

Is that... an upside down M?

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.

[STM]

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

[Steamer_KING]

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.

[Manco]

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

[RoryF]

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

And me.

[Sekto Springs]

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

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?

[Manco]

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

[Nate]

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.

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.

[Manco]

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

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.

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.

[Nepsotic]

Yeah, browsing on mobile is infuriating.

[Manco]

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

“Squishy” is a linear scaling of a website. Does the site go from skinny to fat? Instead of linear scaling, responsive web design should focus on establishing a site core and progressively loading from there, based on capabilities. Imagine a site that had to be built for a tiny cellphone running IE7 on an EDGE network. That should be your core site and then scale up based on screen size and capabilities.

I have a friend who’s working on a responsive site for a client. She’s building the site in Photoshop in desktop size. After a few mockups on some pages, she wanted to show what the site would look like in a tablet and a smartphone, so she did those mockups too. After presenting to the client, she was given some creative tweaks. There are about 50 PSD files for this site at this point. It takes her a few days to revise the layouts.

Responsive web design also means changing the way you design. Instead of laying out an entire page in Photoshop, I use Samantha Warren’s Style Tiles to articulate visual design. By designing a site’s visual brand and interface elements outside of an actual layout, you can communicate design directly and combine it with the layout from the prototype to create your responsive site in the browser.

[Fred The Fuzzle]

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

[RoryF]

Yeah, browsing on mobile is infuriating.

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?