New Celestia Website and new Forum design

Avatar
Topic author
Alexell M
Site Admin
Posts: 303
Joined: 07.10.2010
Age: 30
With us: 14 years 1 month
Location: Moscow, Russia
Contact:

New Celestia Website and new Forum design

Post #1by Alexell » 13.12.2017, 23:51

Hello everyone! :hi:

As is known, Celestia website was created by Runar Thorvaldsen back in 2005.
Since then, the world of web-based technologies have been many changes and I have long wanted to Celestia website became beautiful and modern.

Introducing a new modern design of the website, made with the latest web technologies (HTML5 + CSS3).
The new website has become not only very beautiful, but also more informative and contains more useful links.

Default style of phpBBex forum engine no longer fits the style of the website, so we had to change it too.
We are also launching a new design of the forum in dark colors.

Note: if someone does not like the new forum design, you can restore the old style in the settings (User Control Panel => Board preferences: My board style).

Thanks to people who provided landing for the new website: Pixelarity.
Thanks to people who have helped in the work on the content of the new site: Selden Ball, FarGetaNik.
Thanks to people who have helped in the work on the new forum design: hd321kbps.

New website and new forum are now adapted for mobile devices!
We hope that users will be pleased! :wink:

Added after 38 seconds:
P.S. I will visit the forum for a few more days, after which I can not appear on the forum and reply to email and PM until February 2018.
Admin of celestia.space
PC: Intel Core i7-8700 @ 3.20GHz, SSD, 16 Gb RAM, NVIDIA GeForce GTX 1080, Creative Sound Blaster ZxR. Windows 10 x64.
Phone: iPhone Xs 256 Gb. iOS 14.
Image

Avatar
Cham M
Posts: 4324
Joined: 14.01.2004
Age: 60
With us: 20 years 10 months
Location: Montreal

Post #2by Cham » 14.12.2017, 03:06

It's pretty. Nice job :clap:
"Well! I've often seen a cat without a grin", thought Alice; "but a grin without a cat! It's the most curious thing I ever saw in all my life!"

Avatar
Topic author
Alexell M
Site Admin
Posts: 303
Joined: 07.10.2010
Age: 30
With us: 14 years 1 month
Location: Moscow, Russia
Contact:

Post #3by Alexell » 14.12.2017, 09:17

Cham, Thanks)
Admin of celestia.space
PC: Intel Core i7-8700 @ 3.20GHz, SSD, 16 Gb RAM, NVIDIA GeForce GTX 1080, Creative Sound Blaster ZxR. Windows 10 x64.
Phone: iPhone Xs 256 Gb. iOS 14.
Image

Avatar
Goofy
Posts: 280
Joined: 30.08.2011
With us: 13 years 2 months
Location: Italy

Post #4by Goofy » 14.12.2017, 10:40

Hi Alexell, the new format is very nice.
Just sone little suggestions: the bold font you used is a bit too "visible", IMHO.
I mean it's white on black, is it really needed to make it bold, too?
Another: in another topic I see Chaam giving a coded reply with dark green text color.
Well, dark colors are badly visible on black.
Perhaps it could be better to avoid dark ones, IMHO.
My little cent.
Anywqay, well done and thank you to all the participants to the web project. :clap:
Bye
Goofy :smile:
"Something is always better than nothing!"
HP Omen 15-DC1040nl- Intel® Core i7 9750H, 2.6/4.5 GHz- 1TB PCIe NVMe M.2 SSD+ 1TB SATA 6 SSD- 32GB SDRAM DDR4 2666 MHz- Nvidia GeForce GTX 1660 Ti 6 GB-WIN 11 PRO

Avatar
Chuft-Captain
Posts: 1779
Joined: 18.12.2005
With us: 18 years 11 months

Post #5by Chuft-Captain » 14.12.2017, 14:03

Alexell,

Nice job in general on the re-design.
Just a couple of observations:
1. I suggest when viewport is reduced to phone size, it would be better to keep the "last post" link:
lastpost.png
lastpost.png (286 Bytes) Viewed 59904 times
, and lose the "pages" links:
pages.png
pages.png (720 Bytes) Viewed 59904 times
.
On phones I think most people just want to check latest post, and once there you have access to other page links anyway.
I think this would be more convenient on phones.

2. Dark colors (especially dark reds as used in admin profile names) lose a lot of clarity with a dark background. Historically, this sort of dark red has also been used by a number of people for emphasis and/or edits of their posts, so those threads may be less readable now.
I'm not sure what the solution is... perhaps a slightly more moderate background might improve this.
Also, if the background is too dark, then people will probably start to use lighter colors for emphasis from now on, and those posts will then be unreadable for people who decide to retain the old style light format.
It's very difficult to get it just right for all situations, however you should take into consideration that the switch from a very light background to a very dark one will have some adverse affects on previous posts which were made in the context of a light background.
This is why I think a less extreme / more moderate background color might be better ... perhaps something in the mid-greys (maybe the photographers grey standard might work ... and should be quite restful for the eyes), but white text font may become a problem if you go too light.

CC
"Is a planetary surface the right place for an expanding technological civilization?"
-- Gerard K. O'Neill (1969)

CATALOG SYNTAX HIGHLIGHTING TOOLS LAGRANGE POINTS

Avatar
Carl M
Posts: 17
Joined: 25.09.2005
Age: 65
With us: 19 years 1 month
Location: Lexington KY USA

Post #6by Carl » 14.12.2017, 15:59

I like it. The contrast is good. It is easier for me to read. The appearance is good as well. I have just logged in and this is my first time seeing the new site. This is my first impression comments. Overall, it looks like a great job. Thank you all for the hard work.

REF: Dark Red on Dark Grey background. Hmm, I could not make the previous sentence Dark Red. But, yes, it is difficult for me to read due to low contrast. I was going to try Orange to see if that would work better. But I cannot change my font color. I must be doing something wrong. Chuft-Captain was able to do so.

I was unable to post to the thread that was discussing this. So, I have included my comment here.

I am using Chrome browser on Windows 10 64bit right now.

Thank you,

Carl
Carl

Avatar
Chuft-Captain
Posts: 1779
Joined: 18.12.2005
With us: 18 years 11 months

Post #7by Chuft-Captain » 14.12.2017, 17:18

Carl wrote:Hmm, I could not make the previous sentence Dark Red
Carl,

Above the posting box you should see some options, one of which is "color":
options.png
options.png (4.46 KiB) Viewed 59878 times


If you click on "color", a palette will appear:
palette.png
palette.png (6.42 KiB) Viewed 59880 times


then just select the text who's color you want to change, and click the palette on the color you want:
select.png
select.png (3.37 KiB) Viewed 59880 times


which does this:
change.png
change.png (4.07 KiB) Viewed 59880 times


Added after 36 minutes 54 seconds:
Alexell,

Carl's difficulty changing his font color may have been due to not being able to recognize the formatting buttons for what they are.

Under the old theme, they stood out quite obviously as buttons:
old_style_buttons.png
old_style_buttons.png (3.6 KiB) Viewed 59867 times


Under the new scheme, the background color is so close to the button color, that maybe they are not so obviously buttons:
theme_buttons.png
theme_buttons.png (3.14 KiB) Viewed 59867 times


With perhaps a more moderate background color, eg:
new_style_buttons.png
new_style_buttons.png (3.16 KiB) Viewed 59867 times


these buttons would again be more obvious in the new theme.

(Or, perhaps the addition of some light borders and shading to the buttons would help.)
"Is a planetary surface the right place for an expanding technological civilization?"
-- Gerard K. O'Neill (1969)

CATALOG SYNTAX HIGHLIGHTING TOOLS LAGRANGE POINTS

Avatar
Carl M
Posts: 17
Joined: 25.09.2005
Age: 65
With us: 19 years 1 month
Location: Lexington KY USA

Post #8by Carl » 14.12.2017, 18:23

Thank you Chuft-Captain. That was very helpful. You are correct about how the formatting buttons work. I did not understand the procedure. I thought that I could highlight the text, then select the color I wanted, then click enter. I will save your instructions for future use in my notes.

Thanks again for taking the time to do this.

Gratefully,
Carl
Carl

Avatar
gironde M
Posts: 851
Joined: 16.12.2016
Age: 72
With us: 7 years 11 months
Location: Montigny-Les-Metz, France

Post #9by gironde » 14.12.2017, 20:28

The new design is wonderfull.

The black background is softer for eyes that are less assaulted by blue light.

thank you to all the designers.
Gironde

Avatar
selden
Developer
Posts: 10192
Joined: 04.09.2002
With us: 22 years 2 months
Location: NY, USA

Post #10by selden » 14.12.2017, 21:03

I'm also on another forum (avsforom.com) where a black background is an option but not the default. People who use the black background (like me) often have to "yell" at people who specify their own text colors instead of just using the defaults. Personally I find the bbcode directives bold [ b ], underscore [ u ] and italics [ i ] to be more than sufficient to emphasize things in my posts. (I usually use underscore.) Those bbcode directives have the advantage that they work in all color schemes.
Selden

Avatar
Chuft-Captain
Posts: 1779
Joined: 18.12.2005
With us: 18 years 11 months

Post #11by Chuft-Captain » 17.12.2017, 11:15

I've consolidated and re-posted here most of the material I posted yesterday in the thread that was destroyed by the "backup" problem....

My personal conclusions from all of this information and from personal experience is that a dark background theme is not necessarily a bad choice for a website which is predominantly displaying screenshots of scenes from Celestia (which tend to be predominantly dark of course).
However, I believe that when the main activity is reading and posting text and discussion, rather than viewing images (ie. a forum), then a dark-text on light-background (lowered-contrast) theme makes for easier reading and is less tiring in the long run. Regardless of whether it's dark-on-light or light-on-dark however, I do think that reducing the contrast between text and background (within reason) makes for better readability and less eye-strain.
I do think it's a good idea to NOT have the glare of a bright white background, however I don't think that a "high-contrast" white-on-black theme is the best solution, because "high-contrast" brings it's own set of issues (in terms of loss of focus causing text-legibility issues). This is actually quite analogous to some of the issues seen with photographic lenses at their extreme limits (after all, the eye is also a lense, and the same rules of physics/optics apply).
Most of my personal conclusions do seem to be backed up by the experiences and research presented in the following links.

1. This page: https://www.quora.com/Are-dark-themes-for-IDEs-and-code-editors-good-for-the-eyes presents the merits of high-contrast versus reduced-contrast themes:
lowcontrast.png
lowcontrast.png (1.19 KiB) Viewed 59791 times


2. A reddit thread with various opinions about contrast, readability, etc is here: https://www.reddit.com/r/programming/comments/4nrsw1/is_dark_theme_in_ides_actually_worse_for_you/

3. This thread summarizes research about "light-on-dark" versus "dark-on-light" themes: https://ux.stackexchange.com/questions/53264/dark-or-white-color-theme-is-better-for-the-eyes and concludes:
There has been a lot of research on this topic since the 1980s and a lot of it still holds true today. One study from the 1980s states this:

However, most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background.

Reference: Bauer, D., & Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp. 137-142). London: Taylor & Francis

The reason why this matters is because of focus. As this article on UXMovement states, "white stimulates all three types of color sensitive visual receptors in the human eye in nearly equal amounts." It causes the eye to focus by tightening the iris. Since the eye is focused, dark letter forms on light backgrounds are easier to read. When using a dark background with strong light letter forms, the iris opens to allow more light in, but that causes letter forms to blur. Why?

People with astigmatism (approximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the "deformed" lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.

Jason Harrison – Post Doctoral Fellow, Imager Lab Manager – Sensory Perception and Interaction Research Group, University of British Columbia

Now there seem to be varying factors into contrast and legibility. Room ambient lighting. Brightness of the monitor. Also you can mitigate the straining effects of white (#FFF) on black (#000) by simply lessening the contrast like using a light gray (#EEE, #DDD, #CCC) on a dark background (#111, #222).

4. Finally, here again are the comparison screenshots I posted of this thread in it's 2 current themes ... ideally you should open each of these screenshots in it's own tab so that you can view each in isolation from the others (R-mouse->"Open link in new Tab"):
light.png
hexagon.png


... plus a very rough lowered-contrast hack of the hexagon theme:
less_extreme.png


... and just for balance, the reverse approach ... a lowered-contrast "dark-on-light" version of hexagon:
dark_on_light.png


Personally, I find something like the last one (a lowered contrast dark-on-light theme) is more legible and readable than the other three.

CC
"Is a planetary surface the right place for an expanding technological civilization?"
-- Gerard K. O'Neill (1969)

CATALOG SYNTAX HIGHLIGHTING TOOLS LAGRANGE POINTS

Avatar
K.A.V M
Posts: 16
Joined: 10.08.2016
Age: 34
With us: 8 years 3 months
Location: Marseille

Post #12by K.A.V » 07.05.2018, 16:01

Forum registration is fixed.

plug
Posts: 1
Joined: 24.05.2018
With us: 6 years 5 months

Post #13by plug » 26.06.2018, 11:08

Good disign, it comforteble to read :wink:

Avatar
Topic author
Alexell M
Site Admin
Posts: 303
Joined: 07.10.2010
Age: 30
With us: 14 years 1 month
Location: Moscow, Russia
Contact:

Post #14by Alexell » 08.07.2018, 08:16

Chuft-Captain, buttons "last msg" & pages are well displayed on the phone.
Attachments
photo_2018-07-08_11-14-38.jpg
photo_2018-07-08_11-14-30.jpg
Admin of celestia.space
PC: Intel Core i7-8700 @ 3.20GHz, SSD, 16 Gb RAM, NVIDIA GeForce GTX 1080, Creative Sound Blaster ZxR. Windows 10 x64.
Phone: iPhone Xs 256 Gb. iOS 14.
Image

Avatar
Topic author
Alexell M
Site Admin
Posts: 303
Joined: 07.10.2010
Age: 30
With us: 14 years 1 month
Location: Moscow, Russia
Contact:

Post #15by Alexell » 08.07.2018, 08:33

selden, If you or others want to have a white background as before, you can switch to the old forum stype in personal settings.
Admin of celestia.space
PC: Intel Core i7-8700 @ 3.20GHz, SSD, 16 Gb RAM, NVIDIA GeForce GTX 1080, Creative Sound Blaster ZxR. Windows 10 x64.
Phone: iPhone Xs 256 Gb. iOS 14.
Image

Avatar
Topic author
Alexell M
Site Admin
Posts: 303
Joined: 07.10.2010
Age: 30
With us: 14 years 1 month
Location: Moscow, Russia
Contact:

Post #16by Alexell » 08.07.2018, 12:12

I did a little work to make the color gamut of the forum less contrast, and also added borders to buttons and selectors.
For more I did not have time.
Please write here if you need to change colors anywhere else.
Admin of celestia.space
PC: Intel Core i7-8700 @ 3.20GHz, SSD, 16 Gb RAM, NVIDIA GeForce GTX 1080, Creative Sound Blaster ZxR. Windows 10 x64.
Phone: iPhone Xs 256 Gb. iOS 14.
Image

shaikmohsin
Posts: 1
Joined: 04.10.2018
With us: 6 years 1 month

forum design

Post #17by shaikmohsin » 04.10.2018, 12:42

Nice job in general on the re-design.


Return to “Announcements”