Design experiment - how the forum should look in console browser...

Maddox

Habitué
Joined
Jul 29, 2016
Messages
1,253
I'm afraid that I would find such a presentation very off-putting and would move on. As with most things presentation is probably the most important aspect that is going to be used to sell a product, regardless of what the product is. Most people using forums nowadays are much more fussy about looks and presentation.

It's like having a car with the best engine in the world, but it looks like a Lada. The same with forums - I've played on your site and it runs like a wildcat being chased by a tiger, but it looks horrible. You have a great engine room in your forum, now you need a great image to present it, when you can achieve that I believe that you will have a very credible alternative to all of the mainstream offerings. You need a designer to work with you to create something that I fully believe can be very special indeed.

;)
 

JohnFound

Participant
Joined
Mar 20, 2017
Messages
69
Maddox: Well, especially the skin "Terminal", presented above is not aimed to "sell" anything. It is just a design experiment - an attempt to answer the question "Is it possible to make functional web site by using only "terminal" means - monospaced, single size font, all distances multiply of character size." or looking from the other side: "Is it possible to create terminal browser that to render more or less acceptable contemporary web pages?"

But you are completely right that the project needs some competent front-end designer/programmer. I am not the one in this very case. :D
 

darnoldy

Curmudgeon
Joined
Dec 20, 2004
Messages
1,730
...all distances multiply of character size."
The idea that a web page should adapt its layout to the relationship between the user's default font size and the screen size is a good one. I have started spec'ing everything that I can in rem units--including media queries. Additionally, I think there is a place for a text-only (or at least an image-sparse) forum.

The green-on-black skin is just plain butt-ugly--but worse than that, its hard to navigate. It wasn't until I looked at the page source that I discovered you had other skins. All of them are better--some much.

Since I looked at your source, I have a few suggestions:

Get rid of all of the style attributes. They really shouldn't be in the HTML (I know they're legal, that doesn't make them right).

Be ruthless about giving every element a class (or more) and an ID. Make sure the classes and IDs are semantically-meaningful.

The above two things will allow front-end designers to reskin the forum with just CSS. You might want to look at http://csszengarden.com to see what can be done with CSS, but to look at the HTML that allows it.

Your html code lacks structure...

I would like to see you use <header> <footer> and <nav> tags for appropriate elements, but the browser you're writing for may not support them.

Some of the elements on the page should be headings (<h1>, <h2>, <h3>, etc)

--don
 

JohnFound

Participant
Joined
Mar 20, 2017
Messages
69
Oedipus: Thanks.

BTW, the skin has some secrets. The red and green bars on the ruler above the page are draggable - in order to make the page width and position more comfortable for very wide screens. Double click on the ruler maximizes the page width.

Also (but it needs registration) the post editor, when editing already created posts, has fairly controversial design - some people like it, other not.
https://theadminzone.com/members/oedipus.105317/
 

JohnFound

Participant
Joined
Mar 20, 2017
Messages
69
Get rid of all of the style attributes. They really shouldn't be in the HTML (I know they're legal, that doesn't make them right).

Be ruthless about giving every element a class (or more) and an ID. Make sure the classes and IDs are semantically-meaningful.

The above two things will allow front-end designers to reskin the forum with just CSS. You might want to look at http://csszengarden.com to see what can be done with CSS, but to look at the HTML that allows it.

Your html code lacks structure...

I would like to see you use <header> <footer> and <nav> tags for appropriate elements, but the browser you're writing for may not support them.

Some of the elements on the page should be headings (<h1>, <h2>, <h3>, etc)

--don
As a rule, I am not using style attributes in the HTML code, except some very special cases. Maybe some of them are not so special though. :D

I know in theory all good practices about CSS, HTML, etc. but I am probably not so good designer/front-ender in order to use them in the right manner. ;)

BTW, besides the CSS, the HTML code is also easy customized, because it is mostly generated from templates where only the database and some other information is replaced when the page is generated by the backend engine. For example, here is the template for one post, displayed inside a thread: https://asm32.info/fossil/repo/asmbb/artifact/2bfdbccc2fcbd8bc
 

darnoldy

Curmudgeon
Joined
Dec 20, 2004
Messages
1,730
...Maybe some of them are not so special though. :D
The ones I saw weren't that special. ;)

I know in theory all good practices about CSS, HTML, etc. but I am probably not so good designer/front-ender in order to use them in the right manner. ;)

BTW, besides the CSS, the HTML code is also easy customized, because it is mostly generated from templates ..
As someone who has styled a number of forums over the years (not as many as some here), I would prefer to work entirely in the CSS. What i want is clean well-structured (and well-commented) templates, What I hate is poring through the templates, trying to figure our where an element is generated.

For example, here is the template for one post, displayed inside a thread..
that code snippet was pretty-well-constructed. One change that I would make is:
Code:
<a id="[id]"></a>
<div class="post">
to
Code:
<div class="post" id="post-[id]">
the use of anchors (A tags with only IDs) is
deprecated.

I also believe that avatars and logos are presentation choices rather than content--so they belong as background images in the CSS rather than IMG tags in the HTML-- but that's a philosophical debate that is still unresolved, so I don't fault you for those choices.
 

JohnFound

Participant
Joined
Mar 20, 2017
Messages
69
to
Code:
<div class="post" id="post-[id]">
the use of anchors (A tags with only IDs) is
deprecated.
Hm, but why not simply:
Code:
<div class="post" id="[id]">
AFAIK, HTML5 allows numeric IDs. Or not?
 

BrandonSheley

loving life
Joined
Jan 2, 2006
Messages
2,604
I like the skin, is in't for everyone or even a majority of people out there but I could see some userbases really liking something stripped out like that.
 

Apple

Enthusiast
Joined
Apr 27, 2015
Messages
136
While, I'm not a huge fan of the style, the biggest issue about your skin is that logo. It should be legible at the very least. ;)

I believe with some colour tweaks, it could work a little better. Maybe tone down the neon green to something a little less distracting since all of your other colours are muted.

But to have something truly streamlined and attractive, I do recommend getting some help from a designer (same as Maddox above). I do love the idea and just how fast everything loads.

Screen Shot 2018-08-22 at 20.50.07.png
 

darnoldy

Curmudgeon
Joined
Dec 20, 2004
Messages
1,730
This is what I'm seeing in Firefox.
Its a default font issue... you're seeing it in a mono-spaced font, apple is seeing it in a proportional, serif, font.

I believe JohnFound intended to display it in a monospace font, but his font choice is either malformed, or being ignored.
 

darnoldy

Curmudgeon
Joined
Dec 20, 2004
Messages
1,730
its malformed CSS:

In this line:
Code:
*{font-size:16px;font-family:"Liberation Mono", "Source Code Pro", "Consolas", "Lucida Console", monospaced;outline:0 none;box-sizing:border-box;line-height:1.1875em}
the last choice for font-family should be "monospace"—there's an extra "d" in the actual code
 

JohnFound

Participant
Joined
Mar 20, 2017
Messages
69
the last choice for font-family should be "monospace"—there's an extra "d" in the actual code
Oh, stupid me! :cry: It is fixed now. Thanks!

P.S. But the logo from the above screenshots does not look so bad, actually. Very abstract. :D
 
Top