Devlin, let's see just how much of that we could afford to do in CSS3, keeping in mind that not everything in CSS3 is supported by every browser...

Here's what we could do just with CSS3, without any images. Show me what your design looks like without any of these things, and then we can determine how many images we'd need:

• Rounded corners
  
• Glossy bars
  
• Custom fonts
  
• The 1px highlights on some boxes (potentially)
  
• Drop shadows on fonts (possible without images or CSS3, but it'd be jury-rigged)
  
• Drop shadows on anything else
  

Also, recommendations:

• More line spacing in text for legibility
  
• Wider or larger font in posts for legibility
  
• Pick a consistent style for non-standard text and stick with it. Right now, we have futuristic in the nav, serif in the userbox, and cartoony in headers. Too many, even if we avoid CSS3 custom fonts.
  
• If we're going dark, then make the white nav bits darker
  
• Consider making the 1px highlights on some boxes more subtle. A pixelated look doesn't seem to fit well with glossy bars and the page background in use.
  

Nope. Sorry.

I thought about all that ahead of time. The only images we'd need to use are the background image (that could either scale with the browser window or be static, but is normally 1440x900 and a 343k jpeg or 614k png), forum icons, the news jQuery scroller images, and the logo. I planned everything else to be made with CSS: the rounded corners, box-shadows (with inset), gradients with a solid background as backup for incompatible browsers, @font-face for the navbar font with a backup for people on mobile browsers, etc.

• Sure. I wasn't so worried about the font and spacing right now, as this was just a quick mockup. I justed Arial by default, but normally I prefer Verdana. EDIT: In looking at SEN's current CSS, I'll play with size 12 Trebuchet for basic text as well.
  
• No problem. See above.
  
• Hmm interesting. Everything but the logo and the navbar is Arial. The usebox/post text is regular Arial, and the "cartoony" headers are Arial Black Insolent (my mistake, they are supposed to be Arial Black). I don't really see them as cartoony, but I can just make them bold I guess. The navbar's font is Agency, which I tend to abuse in other designs of mine. I wasn't really bothered by the navbar having a different font than the rest of the page, though.
  
• I didn't want to go dark, that's my own issue with the look of SEN over the years. As I've said before, I think SEN has always been really dark, and I was hoping to try to change that a bit. Looking back, I think removing all the white in the Forums and Posts pages was good, but I still like the Portal page as is. Maybe I'll look into it more in the future.
  
• Really? Interesting. I think it works pretty well actually (aside from the #111111 backdrop). I'll look into that one.

EDIT:
I tried a few different things that I didn't post as well, but here they are:


The original gray to gray gradient.


Using the same gradient as the headers. This one looks alright on the post page, but blends in a lot on on the forums list and just stands out a lot on the Portal page.


Playing with the idea of an opaque black background for the name section. Don't mind that one too much.


Taking the above name section style and applying it to the navbar. This one actually looks decent across all the pages, but may look odd with an attached menu for a few of the links. This was actually going to be my original take on the navbar and name section, but having an opaque menu attached to it made me think this wouldn't look that good.


Playing with the idea of a gray navbar (same color as the forums on the forums list) and no name section background. This one looks okay on all the pages (including having the gray as the background for the name section), but it sort of clashes with the portal page as you're drawn away from it.


Here's a mockup of a dark version of the Portal page. I don't really like this much, but I assume many of you will prefer this (or something like it) to the one I made. If that's the case, then perhaps when v6 is out, we can do one of each.


As a general note, I do want to make sure that everyone knows and understands that this skin doesn't have to be the default skin for SEN and I'm not suggesting that it should be. This was just an idea I had for a skin that I'd like to see implemented, and my hope is that other people post up ideas of their own so we have more to choose from when Cecil is done. So in other words, if you really don't like it, you don't have to use it. Just making sure that's clear.

Post has been edited 10 time(s), last time on Mar 13 2012, 7:44 am by DevliN.

That's my favorite, but only when the dropdown is transparent as well. And that's not possible?

I like that one as well. It would be possible for the dropdown to be transparent, but if it happens to overlap text or something, it may look really awful. Then again, that might not be an issue if the links are redone anyway so the menu is never long enough to overlap the content.

This one looks really nice. Did you try to add a very thin black border to it? Might give it some kind of support.

Yeah, if used that one will have a border of some sort. I was just lazy and changed the opacity of the entire layer, border included.

Nice! That could work.

I agree with Cobb about the fonts - first thing I noticed was Serif for control panel and sans-serif for everything else. We shouldn't need more than two or three fonts total (including SEN-logo-thing), and I don't think it looks good if we mix serif and sans-serif.

I believe that you have too many layers in your layout. I dislike how those on top are wider than those below them most of the time, but not all of the time. I find the 3D-effect they create to be mildly distracting; personally, I think I'd prefer a more flat interface, but I might be in the minority there. I dislike how most layers are on top of a 'main' layer, yet two, the Navigation Bar and Control Panel, are separate entities.

Though I can guess what things do, you create confusion with your use of white, gray and yellow text. Most of the white text seems to be for non-links, except for the Navigation menu, Control Panel, and the words "Staredit Network" below the logo. All yellow text is links, but not all links are yellow text. The gray text is too dark, and generally seems to be unimportant; however, in the "New Maps/News/Contests" bit, I expect that New Maps and Contests are links, yet they're gray. Also, the 'Title' white text is too bold, decrease the font width. It stands out too much. The logo I can understand, but that title text is too bright compared to the rest of the interface.

I'd also go for a more touch-friendly interface; this means no dropdowns. Also, I'd stick with it being a fixed-width interface; I used to agree with Syphon's "fixed width wastes real-estate" mantra, but it eases development (Brings it down from infinite to maybe two cases) and no one wants to read a paragraph that stretches across 1600 pixels. You'd lose your line. Maybe a 700px (for portrait tablets) and a 1400px width, depending on active resolution.

Post has been edited 2 time(s), last time on Mar 13 2012, 8:50 pm by Centreri.

First link in the submenu is shoutbox, as it should be.

I don't mind.
Minimum should be 640 or 480 width though. The ideal thing is to set max width in your settings.

I don't mind either, as long as the paragraphs are 3 lines long or so. Beyond seven, it's difficult.

Also, ~1.2 line spacing. Definitely if it's variable width.

Changing width based on window size is do-able (CSS @media queries). Default text line-height is 1.2em or 1.25em depending on the browser. Slightly-higher values seem to help readability a bit for white-on-dark, but the effect probably differs from person to person.

And nobody forces you to on variable width. You decide how wide your window is. On fixed width however people have no choice but to follow your mantra.

I can resize my window every time I switch to and from a SEN tab, which is annoying and also compresses parts of the browser chrome that I want to remain wide (and that my muscle memory demands to be wide)...

Or we can add it as an option to profiles and then everyone wins. Any competent skin developer should be able to author their CSS to be full- or constrained-width based on a CSS class on the BODY (which PHP or other server-side code can supply), so it's not a matter of technical feasibility (or at least, it won't be in SEN v6).

Use a 2nd window.
But ofc you're right being able to choose is best.