Website, Part two (plan, roadmap, final decisions)

[svenskmand]

Just for archival purposes the images are in: /home/project-web/opendungeons/htdocs/wolfcms/public/themes/opendungeons/images

[StefanP.MUC]

Hmmm crap But is it not possible to use tables? Is it only possible to change the CSS style-sheet of WolfCMS or why is it that we cannot just use a table for the parchment texture and the borders?

We can use the whole HTML + CSS standards to design the website, there's no restriction. But it already looks pretty good, why should we switch now?

Tables have three major disadvantages (when used as a design element) compared to CSS:
- CSS is rendered dynamically and "on-the-fly" while the website is streamed into the browser, tables however need to loaded completly, then need to be build up internally, and then displayed. This slows down the page loading. Modern CSS engines are also more optimized than the plain HTML elements like tables.
- Tables have far less parameters about position and size than CSS div conatiners.
- The HTML standard also allows more space for interpretations to the browser. Tables can look different on different browser without violating HTML standard. If CSS div containers look different on different browser then you have at least one browser that either has a bug or does not fully follow some web standards.

[svenskmand]

Ok. I now more or less fixed the issues. There is only one think left. There is a tiny white line downwards and sidewards in the corners that is more and less noticeable at different zoom levels. I do not know if it is a bug in Firefox, I will try IE to see how it looks in them to compare.

I just updated the borders. They now look much better

Edit: the white line is also there in IE, but it dances allot more around across zoom levels. So it must be a browser error.

Also could you move the menu and everything below it 10 pixels down the page. The menu is currently too close to the logos bottom.

Also how about fonts. Can we use a custom font? Or are there some standard fonts?

Edit^2: I see that we actually can use custom fonts then we should use the "Museum Bible" font.

Nice I just tried it and it looks really nice the fonts should just be larger. But that can be corrected. True awesomeness

Edit^3: I now just multiplied all font-size tags value by 1.6, and it looks pretty good I have renamed the original screen.css file to screen.backup.css. Currently it does not work in IE. But there is a hack to make it work in my link above. The .otf file just need to be converted into a .eot file.

Edit^4: Now it also works in IE. I used this page to convert the .otf file to a .eot and a .ttf as specified in the hack.

Edit^5: The headings in the Development section of the Website does no use the Bible font, I do not know why. But I also only have a basic understanding of CSS.

Edit^6: I found out why. the H1 and H2 headings had a font-family setting further down the stylesheet.

Edit^7: I begun to tweak the text colors. What do you think?

[StefanP.MUC]

Custom fonts are a feature of CSS3, too. Here is a list of alle browsers and the CSS3 features they support:
http://www.normansblog.de/demos/browser ... list-css3/
We should at least avoid everything that can't be done by at least one browser in its latest stable release. So, @font-face should be ok, border-images however not.

Yes, I think I read somehwere about the white pixel bug a while ago. If it would be a mistake in the border picture or the coordiantes than we should always still see the stone texture shining through. and since we don't see it, it is this bug.

Now for the changes:

• I'm not sure if we should use text-shadow. It was in CSS2, was then removed in CSS2.1 (because of bad browser support) and reindroduced with different behaviours in CSS3. IE9 does not support CSS3 text-shadows. So we don't have full CSS2 and we don't have full CSS3 support for it. This could lead to very unpredicted behaviour. Also, it seems to slow down the page rendering (scrolling the page feels very lazy).
• Not sure if I like using the font. The letters look good, but it doesn't much differ from Times-like fonts. Also I don't like that the numbers are only half the size than the capital letters. Numbers should have the size of capital letters.
• The h2 header in the sidebar is too big.
• The h2 header in the content has a good size, but the color could be slightly darker
• The font size for the normal text looks good
• Links shouldn't be underlined (underlined links are so 1995 )
• link color looks good
• line-heigth is slightly to big, imho. Maybe 1.3em or 1.4em.

That's what came to my mind by lookign two minutes on the page.

Later this day I'll try to change some small thing to see how it looks then.

[StefanP.MUC]

I just did some text-shadow tests. The IE9 (and so all below it) does not support it (I tried very basic shadows, even they were not displayed). So we should not use this style element. (I removed it)

I also did some small adjustments (link underlines, font size, font-weight, removing some redundant options).

[svenskmand]

Custom fonts are a feature of CSS3, too. Here is a list of alle browsers and the CSS3 features they support:
http://www.normansblog.de/demos/browser ... list-css3/
We should at least avoid everything that can't be done by at least one browser in its latest stable release. So, @font-face should be ok, border-images however not.

What border-images are you refering to?

I'm not sure if we should use text-shadow. It was in CSS2, was then removed in CSS2.1 (because of bad browser support) and reindroduced with different behaviours in CSS3. IE9 does not support CSS3 text-shadows. So we don't have full CSS2 and we don't have full CSS3 support for it. This could lead to very unpredicted behaviour. Also, it seems to slow down the page rendering (scrolling the page feels very lazy).

It is just as responsive here. What machine are you running it on?

[*] Not sure if I like using the font. The letters look good, but it doesn't much differ from Times-like fonts. Also I don't like that the numbers are only half the size than the capital letters. Numbers should have the size of capital letters.

It is very different from Times, and it has a much more ancient look to it, which fits OD. If you can find another open source font that is better then I would like to know.

Links shouldn't be underlined (underlined links are so 1995 )

I only changed the colors and added shadows. The rest was there from the start.

If it works in Firefox and Chrome then we should keep it. It still looks fine in IE even though it does not render the effects. I do not see why we should remove it when it does not destroy the rendering in IE. Also no one who actually cares about FOSS would be crazy enough to use IE. So it does not matter whatever IE works or not. But even with the text-shadows the rendering in IE is still working, although without the shadows. Also according to your link text-shadow will be supported in IE 10, and since our website is not going to be changed in a long time then it make sense to keep the text-shadows. When IE 10 comes out those crazy enough to use it will also see the shadows. Until IE 10 they will just see the site without shadows. So we should keep the shadows.

[StefanP.MUC]

This border-image:

Ok did you by the way look at this? It seems to do exactly what we want with CSS and the borders.

Maybe it's just an optical illusion with the slowing down, my computer is definitly good enough to render it quickly.

Yes, font looks good, I only don't like the number size. But let's hear at least one more opinion about it.

Hmm, intentionally cutting off a large user base (IE8/9) is something I totally disagree with. Let's hear other opinions about this as well.

[svenskmand]

This border-image:

Ok did you by the way look at this? It seems to do exactly what we want with CSS and the borders.

Ahh ok, but we do not need that anymore, I fixed the tiles for the borders and it now looks correct

We are not cutting the IE users off. With the text-shadows on they work in all other browsers than IE, and in IE they simply does not appear. It is not that the page looks weird in IE. But if we choose to not have the text-effect then we are cutting off everybody else than the IE users. That makes no sense. With the text-shadow on we will have gracious degradation on IE. And when IE 10 comes out the shadows will work for the IE users too.

If having the text-shadows on degraded other behavior of the site on IE it would have been a problem, but that is not the case. On IE the website with text-shadows enabled works just as good as it does without the text-shadow.

Also this website is for people who care about open source. Those people knows how to install an alternative browser. And even if they would use IE, the site would still look correct to them (minus the shadows), and when IE 10 comes out it will look 100 % correct to them.

[oln]

I think it's okay to use CSS3 features and features that is not supported in IE as long as the site looks somewhat ok without the extra features.

[svenskmand]

I agree. If the IE version did not work or looked wrong, then it was another question.

[StefanP.MUC]

OK, then I'll re-add the shadows tomorow (but less complex than they were, the first shadow were actually three shadow layers with different properties).

[svenskmand]

OK, then I'll re-add the shadows tomorow (but less complex than they were, the first shadow were actually three shadow layers with different properties).

That was only for the headers, and the links. For the headers I think it looked good, but for the links it might have been too much.

I will be working with the colors of stuff now. So I will just make a backup of the current screen.css file, in case you have changed something you want to keep. I will name it screen.stefan.css. I can also redo the shadows to use less shadows if you like. I will do that then you can see if you like it.

[svenskmand]

I have now finished with the colors of stuff that I can see. Only one thing the link "New Website! And some other news." on the home tab has a color that I cannot figure out how to change. It is a link in a h3 header, but if I make a section like this

{l Code}: {l Select All Code}

#header h3 a {
   color: #ff0000
}


then it does not change the color of it :S

[StefanP.MUC]

That's because the headline was in a another div container of class="first_entry", I removed it because we don't need it.

There's also something nor quite right with the paddings of the headlings I think. The text overlaps on some line breaks (for example in the quick links bar or if two different headlines are in a row).

I just made the headline shadows less complex (only one shadow). And I changes the color to white. Now it looks like it glows. I like this much more. The text shadow is still the same.

I'm also currently unifying a lot of stuff. No need to tell every id or class the property of this html element. If every html element in all classes/ids should have the same property (like shadows or colors) than it is enough to override it globally for this html element. This makes the css files much more compact and better to read (also for the browser).

[oln]

I think the glow is too strong now. Also, there should be a line or something under Latest news to seperate "Latest News" from the article headline.

[StefanP.MUC]

Yes, I can reduce the radius a pixel and maybe also make the glow darker.

Ok, unified the headings, made h1 smaller, the glow darker and shorter, and added <hr>.

[StefanP.MUC]

Unified some more. Everyone working on the css files should from now on normally only change the global values. And only change the id's and classes if a specific part of the website should look other than the rest (like the navigation). Example: Because normally all links should look the same it is enough to only change <a> globally and only override it for the navigation #nav instead overriding it for all possible id's and classes.

[svenskmand]

Unified some more. Everyone working on the css files should from now on normally only change the global values. And only change the id's and classes if a specific part of the website should look other than the rest (like the navigation). Example: Because normally all links should look the same it is enough to only change <a> globally and only override it for the navigation #nav instead overriding it for all possible id's and classes.

Ok I will try and remember that

Regarding the glow on the headlines I do not like the white glow. I think a darker redish glow looks better. I can try to making it with only one shadow. Why do you not like more shadows by the way?

Edit: I think this is much better:

{l Code}: {l Select All Code}

text-shadow: 1px 1px 4px #000000;

[StefanP.MUC]

Yes, the color and radius of the glow/shadow can still be optimized.

Optically the complex shadow looked good, no question there. But as I said, the text-shadow property is chaotically implemented by both, browsers and web standards (introduced, removed, re-introduced with slightly other behavior in the not-yet-finalized CSS3 stabdard, some browser have it, other's dont - and the ones that have it maybe still implement it in different ways, some may use CSS2 others may use CSS3 style).

So, if we use such "chaotic" features we should at least try to keep it to an minimum.

edit: OK, changed to the dark shadow from your edit. It looks good if I concentrate, but with my color weakness it is very stressfull to look at (contrast between parchment and text).

[oln]

Picking up on this again, are we satisfied with the look (besides the menu bar), or do we need to do more changes?
Otherwise we should try to finalise the content and subsequently move to the new site.
I can agree with the contrast between the parchment and text is a bit stressful, so should we try to darken the parchment a bit? (We could also brighten it and use black/dark text instead, but i think that wouldn't fit with the theme quite as well.)

[StefanP.MUC]

I was waiting for someone to do a menu background tile (one small tile). I was suggesting that the menu goes over the whole screen width, not only the parchment size, because this will be much easier (e.g. no need for end caps on the left and right and no messing around with pixel-exact positioning).

Content-wise the development part is mostly done. Forum link also there. So mainly we need to finish the style of the menu and fill the front page and the about page with content.

[oln]

Yeah, the menu background should cover the whole length. Any ideas for what it should look like?

[svenskmand]

I think the readability is excellent, what is it you do not like about it? Could you make a quick sketch of how you want the menu bar to look like?

[StefanP.MUC]

I think some Dark background, maybe some fading from black to dark grey to black. Nothing really special. Maybe something like on the OpenClonk or Battle for Wesnoth websites.

[svenskmand]

I think some Dark background, maybe some fading from black to dark grey to black. Nothing really special. Maybe something like on the OpenClonk or Battle for Wesnoth websites.

It is the menu you are talking about here, right?

Is it not possible to make a menu that does not extend to the sides? Like this?