New default theme

[Kroc]

The "C=64" theme was specially designed for camendesign.com, and is not intended to be the default theme for users downloading and installing the code themselves. A new generic theme needs to be made that users can easily modify to suit their needs. The "C=64" can then be removed from the code.

Any input on design direction for a generic theme welcome. It needs to be basic, but not sterile, easy to modify, and with broad browser compatibility (including IE6 if possible).

[jonhoo]

Currently working on one in my fork called "grayscale". Have a look =)

[Kroc]

Looks nice, the header/footer are so-so; it's still early so I won't complain, but I think you have the post/replies look nailed.

The HTML will change a lot when I add post appending and esp. switching to POST for actions, this may still be a while away yet.

Also, I think the design would be enhanced with some judicious use of a single colour icon set, like something from here: http://webdesignledger.com/freebies/the-best-icon-sets-for-minimal-style-web-design

[jonhoo]

Yeah, it's still early in the development/design phase.. Besides, I'm not really a designer, more of a developer, so any suggestions are welcome =)

I think the theming system could do with a bit of a makeover, because it is quite hard to keep the code neat when all the HTML is defined in constants in a single file.. I've been looking into ways of getting around that, but haven't gotten very far yet...

You mentioned the need for a config.php file in the tweet to me, and I think that is a very good idea.. Some of the constants in the theme could probably be moved out there as well..

The icon set looks good - I'll see if I can incorporate them well in the design.

[jonhoo]

Hmm.. I'm a bit unsure which icon set will be better: http://somerandomdude.com/projects/iconic/ or http://www.tutorial9.net/downloads/108-mono-icons-huge-set-of-minimal-icons/ They're both freely licensed, but the latter is only available as 32x32 PNG. That said, I think it looks better than the former.. What do you think?

[Kroc]

When I have gotten around to working on the code again, I'll pull in what you've done so far and add my own flair to it. I work well when I have something to go on direction-wise.

[jonhoo]

I've done some minor new changes that I pushed earlier today design-wise, and tomorrow I'll move the template back to using CSS over LESS, as well as add icons a couple of places.

Just as a side note - I am using the icon pack as a font (see themes/grayscale/icons/iconic.css), which makes the icons easily scalable, themeable (well, colorable at least), and easy to use.

[Kroc]

Whilst using icons as a font is fine, it's not semantic (bad for screenreaders, and no alt text) and the default theme must be compatible with IE6.

[jonhoo]

Actually, it is both semantic and supported by IE6.. Semantic/accessible: Home (Text will be hidden with CSS, icon placed with :before IE6: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

[jonhoo]

Furthermore, I've been thinking about how to make the templating a bit nicer than using constants everywhere... Will try to implement an example later today (Australian time)

[jonhoo]

My idea for a better templating system turned out not to be as good as I thought, so I've abandoned the idea for now.. As for IE6 support, the issue is of course that the :before pseudo selector isn't supported until IE8. This means they will see the text, not the icon, but it is not due to @font-face not being supported... I suppose we could find a way of working around this so that we could still use font icons though.. Something like using two elements as such: !Home The problem of course is that this does make the code messier..

EDIT: This could be easily remedied by using: http://code.google.com/p/ie7-js/ . If the user uses IE < 8, and have JS enabled, then everything will work fine, with JS off, they will still see all the text, but with icons missing..

[Kroc]

imgs are not evil. Do not fear img elements. They are absolutely semantic—it is the misuse of img elements that is a problem just as misusing fonts for icons is likewise.

Think of the audience who will be reading this code. This is not the wild and wacky, expert, unflinching camen design theme—which serves its particular purpose—this is the default theme which must serve as a simple customisation base for the kinds of developers who are not fluent in PHP, HTML or JS and just want to run a forum and change a few strings to suit their preferences.

Getting them to jump through an icon-font / ::before / IE-hack hoop does not serve them and doesn't serve the purpose of the theme.

This is about achieving the goal without complexity, without dependence on third parties or other brands, without an over-engineered approach that demands of its users to commit to memory more extra knowledge than they care for.

<img src="thread.png" alt="" />

This is a completely semantic use of the img tag. This is an icon that is purely visual and represents something that is of no importance to commit to text or speech. That is, every thread (except stickies) has this icon, speaking "thread icon" for every one conveys nothing useful to the user. They know this is a list of threads, it had a title to begin with. Saying nothing is a valid option.

Remember that the alt text is what you read if that image is not visible—not a description of the image! Imagine it like toolbar icons that can be chosen to be viewed as icon only, icon and text, or text-only. Your back button would not be labelled "An arrow pointing left", it would be labelled "back"! Alt text should act as if there is no image there.

A sticky thread icon would look like this:

<img src="sticky.png" alt="Announcement:" />

So repeat after me: imgs are not evil :)

---

addendum: I have also thought of a simpler (and easier for newbs) template alternative, spurred on by your impetus to look at the issue.

[jonhoo]

I am fully aware that imgs are not evil, and normally, I prefer them to these kinds of hacks. My reason for wanting to use fonts in this case is that they provide scalable icons. Since SVG still has limited browser support, fonts are a lot more cross-browser compatible. This was again motivated by your decision to use ems for all font sizes. If a scaled view of the website has the design remain consistent, but all the icons either remain small, or are blown up, this is not exactly an elegant solution..

That said, I see your point about the default theme being for newcomers to modify, and in the end, you have the final say =) I'll go back to pngs then, but do know that this will increase the repo size as well, as images are fairly larger than code...

[jonhoo]

Great to hear about the template alternative! Looking forward to it.

[Kroc]

What I’m doing is populating an array with all the data, and then includeing a whole page template that just inlines the data values old-school PHP style. Whilst this increases duplication, there are only three pages on the site anyway, and it means that it’s massively easier for anybody to change the page in all sorts of ways with the minimum amount of skill required. This also, nicely, would help solve the problem of 404s and 403s needing to be templated, they can be issued statically instead.

[Kroc]

Oh, addendum. If you’re on a Mac go get ImageOptim it can shrink PNGs and JPEGs loslessly. For the benefit of those wanting to use larger sizes, include the SVGs in a separate folder, so the option is always open to them :)

I used ems in my current skin because that’s what worked best with the font and theme. In no way should the default theme take any inspiration from the C64 theme—that’s for my website only. :) The default theme needs to be low-tech, easy to modify, very broad browser support.

[jonhoo]

That templating technique will probably work quite nicely.. Will at least make the templates a lot more readable!

I have the SVGs for all the icons, so scaling them isn't a problem. Would like to have the actual on-page icons scale nicely as well though, but SVG isn't supported well enough yet, and we've already gone through the other option of using fonts..

Using ems is a good idea anyway, and I do think we should use that as far as possible. Again though, using static image icons does mean scaling won't look quite as pretty.. What would be great would be if we could find a reliable way of using SVG only on browsers that support them, and PNGs as fallback.. There are some techniques out there, but all have caveats unfortunately..

[Kroc]

I have now checked in the new template code, which is going to totally destroy your work so far, sorry :P It shouldn’t be too difficult to fix, just copy/paste the HTML blocks into the full pages, and if you haven’t changed the HTML much then your CSS will just work, I didn’t change any of the HTML moving from template1 to template2 code.

[jonhoo]

Done. =)

One thing you might note is that there should be a FORUM_NAME constant defined in config.php. Not all forums are called "Camen Design Forum" ;-)

Haven't had much spare time lately, so haven't been able to do much with the new template.. Hopefully I'll get some time on my hands soon. Feel free to modify the design if you want to (this applies to anyone, not just Kroc!)

[Kroc]

I’ll take it from here as far as official goes. I’ll fold this into the code and remove the C=64 theme and greyscale will become the new default theme. More config options can be defined then, such as forum name and author name / e-mail. Thank you massively for your contribution, I wouldn’t have done it myself and it helped prod me to redo the templating into something better.

[Kroc]

I’ve pulled in your changes—many, many thanks—and I’ve renamed the theme 'greyscale' (British spelling) to cover the heavy alterations I am likely to make. You haven’t attached any licence to your code, is it okay to put the regular licence headers on it (cc-by), and how would you like to be credited / included in the licence header?

[jonhoo]

I don't really have any requirements or preferences as far as licensing/creditation goes. Having my name somewhere would be nice though =)

I've deleted my fork now, but I'll continue keeping an eye on the repository in case I notice new bugs, features that might be needed, etc.

[Kroc]

Now fixed. New bugs will be filed for IE6, mobile support and so forth.