Keep in mind that font rendering engines on many platforms don’t cope
well with light text on dark background. Sub-pixel anti-aliasing
engines work best on black text on a light background. DPI is reduced
with light text. Every time I read a site that used a “dark theme”, one
thing I notice immediately is that the text appears to be somewhat
pixelated around the edges.On 16/06/13 21:23, Sik the hedgehog wrote:
2013/6/16, Julian Winter :
@Jonathan Greig: Using cool and dark colors is not good on the eyes if
you want to read something. The contrast between the font and the
background should be quite high. Black on white or white on a black
background for example. A dark website can feel burdensome for a lot of
people. Light colors feel more inviting. Especially for new users who
want to give SDL a try.
The images on the other hand are a good way to bring more colors to the
new design. Imagine a more colorful picture instead of the SuperMeat Boy
screenshot!
You know, am I the only one who finds light on dark easier on the eyes
than light on dark? But yes, high contrast is very important.
Message-ID:
<CAEyBR+UNF=Nk1pTgyB15+iFR_mcQPcWaot4Pr8-A1fRaG93X8A at mail.gmail.com>
Content-Type: text/plain; charset=UTF-8
2013/6/16, Julian Winter :
@Jonathan Greig: Using cool and dark colors is not good on the eyes if
you want to read something. The contrast between the font and the
background should be quite high. Black on white or white on a black
background for example. A dark website can feel burdensome for a lot of
people. Light colors feel more inviting. Especially for new users who
want to give SDL a try.
The images on the other hand are a good way to bring more colors to the
new design. Imagine a more colorful picture instead of the SuperMeat Boy
screenshot!
You know, am I the only one who finds light on dark easier on the eyes
than light on dark? But yes, high contrast is very important.
Did you mean “am I the only one who finds light on dark easier on the
eyes that dark on light?” ? At any rate, I myself find dark
backgrounds and light text easier on the eyes, and if I remember
correctly I saw an article ~11 to 12 years ago that said this reflects
reality. Light colored backgrounds apparently cause more eyestrain
than dark, just because of the additional photons. Even with the
printed book, apparently they use white paper and black ink because
it’s cheaper and less vulnerable to smudging than coloring the entire
page EXCEPT the text black. I myself use a text editor called Metapad
specifically because it allows me to set it’s color & font properties
without affecting those of any other application (specifically, I use
black & dark grey).
That having been said, most of the site isn’t likely to be viewed for
long periods of time, and lighter colors are more inviting than dark.
I would personally consider changing the background to a light blue,
but even that would still be a bright color. And hey, I’m pretty
certain that the new site uses CSS, so if nothing else the actual
color info could be pulled into a separate file from the layout, and a
Javascript-fueled drop-down box could be used to change out different
color schemes at view-time. Regardless, while darker colors would be
better from an ergonomics perspective, lighter are actually the
preferable for this specific case.> Date: Sun, 16 Jun 2013 15:23:58 -0300
From: Sik the hedgehog <sik.the.hedgehog at gmail.com>
To: SDL Development List
Subject: Re: [SDL] New website: feedback requested!
But, in my opinion, the website will be more better if you add a
"Showcase" column in index.
2013/6/17 Jared Maddox > > Date: Sun, 16 Jun 2013 15:23:58 -0300
From: Sik the hedgehog <sik.the.hedgehog at gmail.com>
To: SDL Development List
Subject: Re: [SDL] New website: feedback requested!
Message-ID:
<CAEyBR+UNF=
Nk1pTgyB15+iFR_mcQPcWaot4Pr8-A1fRaG93X8A at mail.gmail.com>
Content-Type: text/plain; charset=UTF-8
2013/6/16, Julian Winter :
@Jonathan Greig: Using cool and dark colors is not good on the eyes if
you want to read something. The contrast between the font and the
background should be quite high. Black on white or white on a black
background for example. A dark website can feel burdensome for a lot of
people. Light colors feel more inviting. Especially for new users who
want to give SDL a try.
The images on the other hand are a good way to bring more colors to the
new design. Imagine a more colorful picture instead of the SuperMeat Boy
screenshot!
You know, am I the only one who finds light on dark easier on the eyes
than light on dark? But yes, high contrast is very important.
Did you mean “am I the only one who finds light on dark easier on the
eyes that dark on light?” ? At any rate, I myself find dark
backgrounds and light text easier on the eyes, and if I remember
correctly I saw an article ~11 to 12 years ago that said this reflects
reality. Light colored backgrounds apparently cause more eyestrain
than dark, just because of the additional photons. Even with the
printed book, apparently they use white paper and black ink because
it’s cheaper and less vulnerable to smudging than coloring the entire
page EXCEPT the text black. I myself use a text editor called Metapad
specifically because it allows me to set it’s color & font properties
without affecting those of any other application (specifically, I use
black & dark grey).
That having been said, most of the site isn’t likely to be viewed for
long periods of time, and lighter colors are more inviting than dark.
I would personally consider changing the background to a light blue,
but even that would still be a bright color. And hey, I’m pretty
certain that the new site uses CSS, so if nothing else the actual
color info could be pulled into a separate file from the layout, and a
Javascript-fueled drop-down box could be used to change out different
color schemes at view-time. Regardless, while darker colors would be
better from an ergonomics perspective, lighter are actually the
preferable for this specific case.
The new design looks great to me. As, as been said before, a larger logo
would be nice. Generally, I like the brightness of the design, but a bit
more color would make things nicer IMO.
It would be nice to connect to the real database to better judge how the
design fits with actual content. For example, I wonder how will the support
for more “fancy” OSes (other than Windows, Mac & Linux) be displayed given
the new layout for the “download” sections… The “filter” criteria are so
much nicer than on the current website.
The two screenshots on the front page are a nice touch. It reminds me that
I have been wanting to add the ability to upload/display screenshots for
all projects for years now, but I never found the energy to do so. That
would be a great addition too.
GaetanOn Thu, Jun 13, 2013 at 7:44 AM, Sam Lantinga wrote:
Julian Winter has been working on a redesign of the SDL website.
I know I’m late to the party, but here’re my 2 cents.
I dislike the small font very much. I suggest using “medium” instead of
"12/12px". Also, I’d remove those 2 screenshots from the right, to make
more way for the text.–
driedfruit
Alright. I’ve continued to work on the new website. I did my best to
consider the suggestions from our community.
Sam focused mostly on content and text.
This is what I’ve done lately:
bigger SDL Logo
highlighted (blue) the “download-hint-box” at the the top of the page
decreased min-(page-)width to ~ 600px
added 3 more header-backgroundimages
these header-backgroundimages load at random on each pageload.
built a theme-switcher (see footer) (remembers your setting, if you
use a HTML5 browser with local storage (should be default))
Sam and I are not sure about the header images and we need your help:
My suggestion is, that we leave out the header images.
I was surprised how well the dark theme turned out. (Thanks for the
guy(s) who suggested that!)
I like its minimalistic look, without the header images.
We could use these screenshots for the two containers on the right side
of the homepage. (Random picture load on each page refresh).
Sam, on the other hand, likes the extra splash of color with the header
images. He suggests that we leave the header-images there and implement
them (with alpha transparency) also in the dark theme.
I like the headers and I like the dark theme better than the light (I never
thought I’d say that…).
Refreshing with the dark theme in my browsers, however, flickers to the
light theme first before it shows the dark: Win7 Chrome 28.0.1500.72 m and
FireFox 22.0
Jonny DOn Tue, Jul 16, 2013 at 3:49 PM, Julian Winter wrote:
Alright. I’ve continued to work on the new website. I did my best to
consider the suggestions from our community.
Sam focused mostly on content and text.
This is what I’ve done lately:
bigger SDL Logo
highlighted (blue) the “download-hint-box” at the the top of the page
decreased min-(page-)width to ~ 600px
added 3 more header-backgroundimages
these header-backgroundimages load at random on each pageload.
built a theme-switcher (see footer) (remembers your setting, if you use
a HTML5 browser with local storage (should be default))
Sam and I are not sure about the header images and we need your help:
My suggestion is, that we leave out the header images.
I was surprised how well the dark theme turned out. (Thanks for the guy(s)
who suggested that!)
I like its minimalistic look, without the header images.
We could use these screenshots for the two containers on the right side of
the homepage. (Random picture load on each page refresh).
Sam, on the other hand, likes the extra splash of color with the header
images. He suggests that we leave the header-images there and implement
them (with alpha transparency) also in the dark theme.
Only suggestion I have at this point is in the various download pages
(games, libraries, etc.), on top of the name of the download clickable, you
should add a separate link on the far right of the table, for usability
sake. Otherwise, I think this is good.On Tue, Jul 16, 2013 at 4:03 PM, Jonathan Dearborn wrote:
I like the headers and I like the dark theme better than the light (I
never thought I’d say that…).
Refreshing with the dark theme in my browsers, however, flickers to the
light theme first before it shows the dark: Win7 Chrome 28.0.1500.72 m and
FireFox 22.0
Jonny D
On Tue, Jul 16, 2013 at 3:49 PM, Julian Winter wrote:
Alright. I’ve continued to work on the new website. I did my best to
consider the suggestions from our community.
Sam focused mostly on content and text.
This is what I’ve done lately:
bigger SDL Logo
highlighted (blue) the “download-hint-box” at the the top of the page
decreased min-(page-)width to ~ 600px
added 3 more header-backgroundimages
these header-backgroundimages load at random on each pageload.
built a theme-switcher (see footer) (remembers your setting, if you use
a HTML5 browser with local storage (should be default))
Sam and I are not sure about the header images and we need your help:
My suggestion is, that we leave out the header images.
I was surprised how well the dark theme turned out. (Thanks for the
guy(s) who suggested that!)
I like its minimalistic look, without the header images.
We could use these screenshots for the two containers on the right side
of the homepage. (Random picture load on each page refresh).
Sam, on the other hand, likes the extra splash of color with the header
images. He suggests that we leave the header-images there and implement
them (with alpha transparency) also in the dark theme.
The only thing the old site really needed was taking care of the
wiki’s being a slough.
I’m rather suprised this wasn’t taken care of, instead the looks being
paid attention. All the other things were manageable, but the docs
unresponsiveness many a time forced me to resort to the grep. Not to
mention killing any motivation to update it.
That’s a site about a library, no? Kinda expect the most used part
would be the API documentation, examples and caveats, not some
flashbang about being great.–
I’m rather suprised this wasn’t taken care of, instead the looks being
paid attention. All the other things were manageable, but the docs
unresponsiveness many a time forced me to resort to the grep. Not to
mention killing any motivation to update it.
Since SDL is under MIT, it means that the website needs to also be a
marketting venue for the SDL developers. This means it will need to look
appealing in some fashion. Also, I believe Sam and Ryan have both
addressed the wiki speed issues, and it is much faster now.
That’s a site about a library, no? Kinda expect the most used part
would be the API documentation, examples and caveats, not some
flashbang about being great.
This is a common complaint, and the common answer is: the wiki is community
driven, so it is up to the community to keep it up to date. Email Sam if
you want a wiki account, and you can join the effort. If you see a
wikipage out of date, and don’t want the responsibility of editting the
information yourself, use the feedback form on the website, and post a
message here on the mailing list.On Tue, Jul 16, 2013 at 4:42 PM, Alexander Sabourenkov wrote:
I dislike the small font very much. I suggest using "medium"
instead of “12/12px”. Also, I’d remove those 2 screenshots from the
right, to make more way for the text.
Have you tried “Ctrl” + “+” ? You can adjust the font-size just
like you wish.
I can also adjust the whole theme with user css, or disable it
completely and enjoy default HTML styling, but that’s beside the point
when we discuss some theme in particular
Other then that, sure. BTW, maybe we could get a box with HG commit log
or something cool like that somewhere?
P.S. 1em would be good tooOn Wed, 17 Jul 2013 07:49:03 +0200 (CEST) Julian Winter wrote:
I dislike the small font very much. I suggest using “medium” instead of
"12/12px". Also, I’d remove those 2 screenshots from the right, to make
more way for the text.
Have you tried “Ctrl” + “+” ? You can adjust the font-size just like you
wish.
I fear we don’t have enough text to leave the right images out. The homepage
would seem very empty.
Refreshing with the dark theme in my browsers, however, flickers to the
light theme first before it shows the dark: Win7 Chrome 28.0.1500.72 m and
FireFox 22.0
That’s true. Thanks for the hint. … But it only flickers for me on the first
page. I’ll try to take care of it. Otherwise, let’s hope that the visitors go to
the frontpage just once.
…
We still don’t know anything about the screenshots/header-images! (see mail from
yesterday) Come on guys!
I dislike the small font very much. I suggest using “medium” instead of
"12/12px". Also, I’d remove those 2 screenshots from the right, to make
more way for the text.
Have you tried “Ctrl” + “+” ? You can adjust the font-size just like you
wish.
I fear we don’t have enough text to leave the right images out. The
homepage
would seem very empty.
Ideally, we shouldn’t require the user to do it. Also if it’s indeed
specified in absolute units as mentioned… ugh. There’s a reason why
relative units (em, ex, rem, etc.) exist, so the user can specify the
best font size for him/her and the site adapts accordingly (just so
you know, 1em is supposed to be the ideal size for normal text).
(yes, I know, some people seem to think that 1em is way too big and
ugly, but honestly it seems to be fine for me, and that’s considering
I’m using 1024?768 - though Arial isn’t one of the best fonts out
there either, so I think that may have helped with the idea that 1em
looks ugly…)
Agreed about the images though. I don’t see anything wrong with them,
and no need to add more text for no reason (besides shorter columns
are easier to read). If anything, the screenshots add credibility to
SDL. Reputation is important.
Alright. I’ve continued to work on the new website. I did my best to
consider the suggestions from our community.
Sam focused mostly on content and text.
You did not answer/address my questions though ;-).
This is what I’ve done lately:
bigger SDL Logo
I would personally have it a little larger yet, to match the width of the
column (on large resolutions).
highlighted (blue) the “download-hint-box” at the the top of the page
decreased min-(page-)width to ~ 600px
The page does not render correctly with a window width below ~930px (the
screenshots on the right overlap with the text). If you cannot make it
render properly at all resolutions, and you have to choose between a bit of
scrolling and unreadable text, I would go with the scrolling anytime.
added 3 more header-backgroundimages
these header-backgroundimages load at random on each pageload.
Looks good but that definitely seem redundant with the screenshots on the
right. IMO, you should not have both.
nitpick:
the world of goo shot is not that great
it would be nicer if the openttd(?) shot did not include any menu.
built a theme-switcher (see footer) (remembers your setting, if you use a
HTML5 browser with local storage (should be default))
Sam and I are not sure about the header images and we need your help:
My suggestion is, that we leave out the header images.
I was surprised how well the dark theme turned out. (Thanks for the guy(s)
who suggested that!)
I like its minimalistic look, without the header images.
We could use these screenshots for the two containers on the right side of
the homepage. (Random picture load on each page refresh).
Sam, on the other hand, likes the extra splash of color with the header
images. He suggests that we leave the header-images there and implement
them (with alpha transparency) also in the dark theme.
What do you think?
As I said, I find them redundant. But I also realize that not having
anything would feel empty. So what about some banner made of several
screenshots blended together, possibly with some (nicely highlighted) code
snippet. Something similar to the banner at: http://sylvainhb.blogspot.be/On Tue, Jul 16, 2013 at 9:49 PM, Julian Winter wrote:
The page does not render correctly with a window width below ~930px (the
screenshots on the right overlap with the text). If you cannot make it
render properly at all resolutions, and you have to choose between a bit of
scrolling and unreadable text, I would go with the scrolling anytime.
The page does not render correctly with a window width below ~930px (the
screenshots on the right overlap with the text). If you cannot make it
render properly at all resolutions, and you have to choose between a bit
of
scrolling and unreadable text, I would go with the scrolling anytime.
Have you hit “F5” ?
Of course…On Wed, Jul 17, 2013 at 10:18 AM, Julian Winter wrote:
I like the headers and I like the dark theme better than the light (I
never thought I’d say that…).
Refreshing with the dark theme in my browsers, however, flickers to the
light theme first before it shows the dark: Win7 Chrome 28.0.1500.72 m and
FireFox 22.0
Jonny D
Seems to be a quirk where the javascript won’t load until after all the
images are loaded on the page.
Julian, the theme js should be loaded in the of the document to make
sure it gets loaded before any image loading - and avoid that good old
document.ready() (or the equivalent, I haven’t peeked at the js on the page
yet). :)On Tue, Jul 16, 2013 at 4:03 PM, Jonathan Dearborn wrote:
Ah, yes, I should have. One slighly hackish thing you could do is toss a
hash/number sign in from of all the image source tags, then after you do a
theme change, iterate over all the images and update the source to remove
the hash. This should alleviate the problem, I suspect. I could toss some
js your way if you want, although judging by the structuring and code you
have, you seem more than capable :)On Wed, Jul 17, 2013 at 10:14 AM, Julian Winter wrote:
Looking good. I quite like the dark theme, only thing is the background
colour for the “Main” and “Documentation” headers could be a little more
contrasting. If you were going to keep the header images, might I suggest
colourising them so that palette matches the site’s theme?On 17 July 2013 22:22, Alex Barry <alex.barry at gmail.com> wrote:
Ah, yes, I should have. One slighly hackish thing you could do is toss a
hash/number sign in from of all the image source tags, then after you do a
theme change, iterate over all the images and update the source to remove
the hash. This should alleviate the problem, I suspect. I could toss some
js your way if you want, although judging by the structuring and code you
have, you seem more than capable
On Wed, Jul 17, 2013 at 10:14 AM, Julian Winter wrote:
