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

Discussion in 'Community Styling' started by JohnFound, Aug 20, 2018.

  1. JohnFound

    JohnFound Participant

    69
    35
    +83
    ... if the console browsers rendered HTML properly. At least partially:

    https://board.asm32.info/!skincookie/Terminal

    I have made this skin as an experiment, after some disappointing experience with text mode console browsers like links, elinks, lynx, etc.
     
    • Like Like x 3
    • Pure Genius! Pure Genius! x 1
    • List
  2. Maddox

    Maddox Habitué

    1,253
    407
    +972
    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.

    ;)
     
  3. JohnFound

    JohnFound Participant

    69
    35
    +83
    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
     
  4. Oedipus

    Oedipus Participant

    52
    13
    +15
    I don't know why I like this so much...Good job :)
     
  5. darnoldy

    darnoldy Curmudgeon

    1,727
    782
    +479
    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
     
  6. JohnFound

    JohnFound Participant

    69
    35
    +83
    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.
     
  7. JohnFound

    JohnFound Participant

    69
    35
    +83
    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
     
  8. darnoldy

    darnoldy Curmudgeon

    1,727
    782
    +479
    The ones I saw weren't that special. ;)

    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.

    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.
     
  9. JohnFound

    JohnFound Participant

    69
    35
    +83
    Hm, but why not simply:
    Code:
    <div class="post" id="[id]">
    AFAIK, HTML5 allows numeric IDs. Or not?
     
  10. darnoldy

    darnoldy Curmudgeon

    1,727
    782
    +479
    You could... but, for me, its about clarity.

    --don
     
    • Informative! Informative! x 1
    • List
  11. BrandonSheley

    BrandonSheley loving life

    2,604
    1,072
    +950
    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.
     
  12. radu81

    radu81 Fan

    657
    347
    +191
    Not a fan of this style, but your forum is fast, very fast!
     
  13. Apple

    Apple Enthusiast

    136
    43
    +87
    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
     
  14. TrixieTang

    TrixieTang Politically Incorrect

    8,509
    1,522
    +2,806
    What browser are you using?
     
  15. Apple

    Apple Enthusiast

    136
    43
    +87
    Firefox for mac. 61.0.02
     
  16. TrixieTang

    TrixieTang Politically Incorrect

    8,509
    1,522
    +2,806
    This is what I'm seeing in Firefox.

    Screenshot_2018-08-22  AsmBB Threads list skins .png
     
  17. darnoldy

    darnoldy Curmudgeon

    1,727
    782
    +479
    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.
     
    • Like Like x 1
    • Agree Agree x 1
    • Informative! Informative! x 1
    • List
  18. R0binHood

    R0binHood Habitué

    1,291
    432
    +1,032
    It’s similarly malformed on Safari on iOS

    B65920C4-4B07-41BC-B472-E9DB9E54985A.png
     
  19. darnoldy

    darnoldy Curmudgeon

    1,727
    782
    +479
    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
     
  20. JohnFound

    JohnFound Participant

    69
    35
    +83
    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
     
    • Agree Agree x 1
    • Appreciation Appreciation x 1
    • List
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.