Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


LowEndBox v2.0 is LIVE! - Page 2
New on LowEndTalk? Please Register and read our Community Rules.

All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.

LowEndBox v2.0 is LIVE!

24

Comments

  • jbilohjbiloh Administrator, Veteran

    @Hotmarer said:
    @jbiloh Something broke because I'm still getting the old design.

    I've purged the CF cache.

  • armandorgarmandorg Member, Host Rep

    It's not like i use LEB that much but looks like a good job compared to last one.

  • I see the points of improvement but as a whole i dont like the new design.

  • raviravi Member

    @jbiloh said:

    @ravi said:
    1) Header and main should have equal left margin.

    2) Main left margin AND Sidebar right space should be equal.

    This two can be fixed by modifying this css code to:

    #content { margin: 30px 360px 0 30px; }

    I made this change and did not see any difference. Am I missing something?

    Looks like cache issue. I still see the old css:
    #content { margin: 30px 360px 0 25px; }

    I guess, the site has LiteSpeed Cache plugin installed.

  • LordSpockLordSpock Member, Host Rep
    edited July 2022

    More constructively, the font doesn't render wonderfully at least for me and makes it much more difficult to read - I can manually change it with a browser script, but the font is too condensed and not very thick so is harder to read (I have mild dyslexia). It is not so bad when the font is larger, but in smaller areas it sucks. This is a double issue as the green used fails WCAG AA on smaller text.

    The big image view generally makes it more difficult to find the content I'm looking for, I liked having a bigger overview of each post and it not taking up a ton of screen real-estate. I think it's probably fine to do that on the home page - but in the individual categories it would be nice to have something a bit more traditional.

    Still broken on ultrawide monitors too (100% zoom, no DPI scaling. It's okay in larger zoom which I use normally anyway) (https://i.imgur.com/GPtoldS.png).

    First names rather than usernames showing is a bit of an interesting choice too - I feel like more of our regulars would pick out raindog308/Not_Oles over Andrew & Tom. I get it might be an editorial choice to make it feel more personal though - just think the "techy" audience might actually appreciate usernames a little more.

    I think with a few tweaks this could be end up being a nice visual refresh though.

  • jbilohjbiloh Administrator, Veteran

    @LordSpock said: Still broken on ultrawide monitors too (100% zoom, no DPI scaling. It's okay in larger zoom which I use normally anyway) (https://i.imgur.com/GPtoldS.png).

    What resolution are you running? We will investigate this.

    @LordSpock said: First names rather than usernames showing is a bit of an interesting choice too - I feel like more of our regulars would pick out raindog308/Not_Oles over Andrew & Tom. I get it might be an editorial choice to make it feel more personal though - just think the "techy" audience might actually appreciate usernames a little more.

    Good suggestion, we will consider changing this.

    @LordSpock said: I think with a few tweaks this could be end up being a nice visual refresh though.

    We will continue to listen to feedback and make tweaks :)

  • LordSpockLordSpock Member, Host Rep

    @jbiloh said:

    @LordSpock said: Still broken on ultrawide monitors too (100% zoom, no DPI scaling. It's okay in larger zoom which I use normally anyway) (https://i.imgur.com/GPtoldS.png).

    What resolution are you running? We will investigate this.

    3440x1440.

  • jbilohjbiloh Administrator, Veteran

    @LordSpock said:

    @jbiloh said:

    @LordSpock said: Still broken on ultrawide monitors too (100% zoom, no DPI scaling. It's okay in larger zoom which I use normally anyway) (https://i.imgur.com/GPtoldS.png).

    What resolution are you running? We will investigate this.

    3440x1440.

    Thanks, we are working to fix this now.

    We are also going to roll back to preferred forum usernames rather than first names as you suggested.

    More fixes coming shortly.

  • HotmarerHotmarer Member
    edited July 2022

    @jbiloh

    Make a bug bounty program where you can receive the racknerd server as a reward.

    Please center image ...

  • jbilohjbiloh Administrator, Veteran

    @Hotmarer said:
    @jbiloh

    Make a bug bounty program where you can receive the racknerd server as a reward.

    Please center image ...

    We are working on both of those issues now.

    Thanked by 1Hotmarer
  • JasonMJasonM Member

    love it. quite clean and clutter-free and sleek too!

  • ralfralf Member

    All this talk of commifying is seriously going to trigger a certain Russian Telecoms guy.

    Thanked by 1bulbasaur
  • saosangmosaosangmo Member
    edited July 2022

    Error on mobile
    https://ibb.co/FWMBTth

  • jbilohjbiloh Administrator, Veteran

    @saosangmo said:
    Error on mobile
    https://ibb.co/FWMBTth

    That's fixed.

  • AXYZEAXYZE Member
    edited July 2022

    UX Problems

    Hover

    Problem:
    No hover effect on "Explore" section

    Same thing in "About LowEndBox" side box, comments side box, latest posts... and list goes on.

    Solution:
    Remove div.frontpage ul li a { color } & #menu .block a { color }.
    Color #0d9a3a (exactly the same) is already global for 'a' tags, setting it again breaks hover functionality.
    Removing these two lines repairs it and slightly decreases bundle size.

    Text readability

    Problem:

    This text isn't easy to read and there's no suggestion that they are clickable.

    Solution:
    Increase font-size from 12px to 13px, add separators with this line:

    #nav-bar li:not(:last-child) {border-right: 1px solid #e7e7e7;}

    End result

    Subtle effect, but will help first time visitors to understand the site.

    Honestly I would change a lot of stuff, this website is not easy to understand (I would ever argue it was easier before, because there was more contrast between sections IIRC and less visual distractions, apart from ads ofc, here I cant focus on anything, I need to consume everything at once and it will be to much for 99% of first time visitors, check if bounce rate on homepage will reflect on this).
    Biggest problem with UX is lack of icons. It's a lot faster to "read" icon than to read text in some cases - just look at some hosting panels, if they have icons its a lot easier to find options and to remember where they were, you can have different shapes, colors...
    But on LEB there's also one even more important aspect. A lot (maybe majority) of people coming aren't english-natives, icons are easy to understand even if your english is not so great, it helps a lot with navigation.

    Thanked by 2ravi adly
  • jbilohjbiloh Administrator, Veteran

    @AXYZE said: Text readability

    Problem:

    This text isn't easy to read and there's no suggestion that they are clickable.

    Solution:

    Increase font-size from 12px to 13px, add separators with this line:

    nav-bar li:not(:last-child) {border-right: 1px solid #e7e7e7;}

    End result

    Subtle effect, but will help first time visitors to understand the site.

    Excellent suggestion, thank you. Implemented.

    @AXYZE said: Honestly I would change a lot of stuff, this website is not easy to understand (I would ever argue it was easier before, because there was more contrast between sections IIRC and less visual distractions, apart from ads ofc, here I cant focus on anything, I need to consume everything at once and it will be to much for 99% of first time visitors, check if bounce rate on homepage will reflect on this).
    Biggest problem with UX is lack of icons. It's a lot faster to "read" icon than to read text in some cases - just look at some hosting panels, if they have icons its a lot easier to find options and to remember where they were, you can have different shapes, colors...
    But on LEB there's also one even more important visitors. A lot (maybe majority) of people coming aren't english-natives, icons are easy to understand even if your english is not so great, it helps a lot with navigation.

    Fair point. If you have other suggestions I'd love to hear them.

    @AXYZE said: Hover

    Problem:
    No hover effect on "Explore" section

    Same thing in "About LowEndBox" side box, comments side box, latest posts... and list goes on.

    Solution:
    Remove div.frontpage ul li a { color } & #menu .block a { color }.
    Color #0d9a3a (exactly the same) is already global for 'a' tags, setting it again breaks hover functionality.
    Removing these two lines repairs it and slightly decreases bundle size.

    I am having a difficult time following this change. I think it makes sense but could you help me by making the instructions clearer?

  • AXYZEAXYZE Member

    @jbiloh said:
    I am having a difficult time following this change. I think it makes sense but could you help me by making the instructions clearer?


    color from 'div.frontpage ul li a' overrides 'a' color as you can see above.
    Browser treats 'div.frontpage ul li a' as most important, because it is most specific to that element. pure 'a' is global, its last option it will choose.

    pure 'a' has hover effect (change of color) already implemented.
    removal of color from 'div.frontpage ul li a' elliminates unnecessary overwrite of any global 'a' rules and because of that hover effects start to work.

    Same thing applies to color from '#menu .block a'. If you remove that color will be inherited from global, pure 'a' so hover effect will start to work.

    Removal of these "site-breaking" lines will also decrease amount of text so decrease the whole bundle size and browser paint time (it doesn't need to paint same color twice).

    Thanked by 1ravi
  • AXYZEAXYZE Member

    And wild idea.

    Before

    After

    You may say it's too much green, but hey! Doesn't it add personality? Like, isn't that more friendly, more rememberable, less 'corporative'?
    Apart from obvious color change I also added

    border-radius:10px

    to 'div.frontpage'. I hate many sharp edges in main containers, idk.

    Thanked by 1raindog308
  • raindog308raindog308 Administrator, Veteran

    @JabJab said:
    @Hotmarer said:
    @jbiloh

    Interesting - this looks normal for me, but I've only looked on iOS.

    @jbiloh said: Please center image ...

    The old CSS was so bad I had to add "hspace=20" to most of the leading images on the old template. I've stopped doing that so hopefully some of these "slightly offset" issues will flush out as new articles appear.

  • raindog308raindog308 Administrator, Veteran

    Just wait until we move LowEndTalk to vBulletin.

  • LordSpockLordSpock Member, Host Rep

    @AXYZE said:
    And wild idea.

    Before

    After

    You may say it's too much green, but hey! Doesn't it add personality? Like, isn't that more friendly, more rememberable, less 'corporative'?
    Apart from obvious color change I also added

    border-radius:10px

    to 'div.frontpage'. I hate many sharp edges in main containers, idk.

    Quite inaccessible for any users who might need clear contrast between text and background.

  • @raindog308 said:
    Just wait until we move LowEndTalk to vBulletin.

    End is ...

  • @Kebab said: I don't like that it's too wide, I don't like moving my head.

    You could always use a thinner browser window? Or zoom or high-DPI settings, and sit further back.

    “Your design is too wide when I have the browser full width on my monitor that is uncomfortably wide for my field of view when I sit close to it” always puts me in mind of Red Dwarf's “also, human eyes don't seem to have a zoom function” in reverse!

    Under Windows you can use the default half-screen behaviour (win+left or win+right - though at 1920px with default scaling it doesn't look good half-screen, I'm not near the bigger screens to check on them ATM), or for finer grained control there is FancyZones in MS' PowerToys and a number of 3rd party options, and there have similar options on Linux (depending on what window/desktop manager you prefer) for as long as I can remember using it much on desktop.

  • @jbiloh said:
    Let me know what you think should change.

    I'm no expert so I can't tell you exactly what to change, but the main thing's been mentioned in this thread already. Look at that screenshot of the HostSailor post. That's just not readable. Images seem to be taking up too much space too...

    For reference, I'm on an Android with a screen on the smaller side. Lowendbox has always looked like this for me, and I manage by putting it in desktop mode. Still, it would be nice to see this fixed.

  • HxxxHxxx Member
    edited July 2022

    @jbiloh My opinion. Ditch the green. Rebrand to something new.
    I would have imagine the new website looking like this (one of these magazine/blog style themes/demo):

    https://themeforest.net/item/foxiz-wordpress-newspaper-and-magazine/34617430
    -For example the primary demo: https://foxiz.themeruby.com/default/

    That uses elementor should be quite simple to make it work.

    Other option is to use Divi theme from ElegantThemes, top notch.

  • jbilohjbiloh Administrator, Veteran

    I've got about 20 different changes we are rolling out in the next 24-48 hours based on user feedback.

    More updates soon.

    Thank you to everyone who has taken the time to help.

    Thanked by 1LordSpock
  • AXYZEAXYZE Member

    @LordSpock said:

    @AXYZE said:
    And wild idea.

    Before

    After

    You may say it's too much green, but hey! Doesn't it add personality? Like, isn't that more friendly, more rememberable, less 'corporative'?
    Apart from obvious color change I also added

    border-radius:10px

    to 'div.frontpage'. I hate many sharp edges in main containers, idk.

    Quite inaccessible for any users who might need clear contrast between text and background.

    Contrast ratio between #3D3D3D and #F4FFF4 10.58:1, WCAG requirement is 4.5:1.
    Its more than twice what is required, what research/standard are you following that you say its "quite inaccessible"?

    It should reduce strain if anything.

  • LordSpockLordSpock Member, Host Rep

    @AXYZE said:

    @LordSpock said:

    @AXYZE said:
    And wild idea.

    Before

    After

    You may say it's too much green, but hey! Doesn't it add personality? Like, isn't that more friendly, more rememberable, less 'corporative'?
    Apart from obvious color change I also added

    border-radius:10px

    to 'div.frontpage'. I hate many sharp edges in main containers, idk.

    Quite inaccessible for any users who might need clear contrast between text and background.

    Contrast ratio between #3D3D3D and #F4FFF4 10.58:1, WCAG requirement is 4.5:1.
    Its more than twice what is required, what research/standard are you following that you say its "quite inaccessible"?

    It should reduce strain if anything.

    The green links on the green background is 3.58:1. WCAG AAA is 7:1 (AA is 4.5). (Both designs are poor on that front).

    Thanked by 1adly
  • AXYZEAXYZE Member
    edited July 2022

    @LordSpock said:

    @AXYZE said:

    @LordSpock said:

    @AXYZE said:
    And wild idea.

    Before

    After

    You may say it's too much green, but hey! Doesn't it add personality? Like, isn't that more friendly, more rememberable, less 'corporative'?
    Apart from obvious color change I also added

    border-radius:10px

    to 'div.frontpage'. I hate many sharp edges in main containers, idk.

    Quite inaccessible for any users who might need clear contrast between text and background.

    Contrast ratio between #3D3D3D and #F4FFF4 10.58:1, WCAG requirement is 4.5:1.
    Its more than twice what is required, what research/standard are you following that you say its "quite inaccessible"?

    It should reduce strain if anything.

    The green links on the green background is 3.58:1. WCAG AAA is 7:1 (AA is 4.5). (Both designs are poor on that front).

    Aaaahh! I thought you meant main content dark grey color.
    Of course green textlinks in this box should be darker! :)

    I just tweaked background colors and rounded border of box - its not final design, just idea to show different approach - instead of easily forgettable, "corporative" white design we can play with colors :)

    WCAG AA is more than enough from testing we have done on different groups (e-commerce, so we analyze it to maximize conversions) and from research articles I have read from institutes, but there are of course other variables (black text and dark grey bg is less readable than white text and light grey bg even tho contrast values are the same etc...) so even if something is not above that value there is still a fair chance it will be easily readable. And fair chance it wont. :) But AA is this nice middle ground where you can get crazy with color and be sure people can see it clearly.

    I'm partially colorblind so I already know about this stuff and tested it in a lot of cases, but if you say AA is not enough and I should target AAA then could you share more? Maybe I need to refresh my knowledge :)

  • emgemg Veteran
    edited July 2022

    Congrats on the new website. It must feel good to see your hard work come to fruition.

    You got me to look. I have not been on LEB for a while. It encouraged me to sign up for my first new VPS in eight years. Your new website must be working. At least it worked on me. :-)

Sign In or Register to comment.