Anyone else dislike the profiles on the right?

Discussion of non-phpBB related topics with other phpBB.com users.
Forum rules
General Discussion is a bonus forum for discussion of non-phpBB related topics with other phpBB.com users. All site rules apply.
User avatar
Tastenplayer
Registered User
Posts: 762
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: Anyone else dislike the profiles on the right?

Post by Tastenplayer »

Either on the right or above the post. I want to read the content, not see the profile first. Above the content I find quite good. Assumes, however, that no oversized avatars are used in the forum. Otherwise, the profile first catches the eye again when it is above the post.
But it is like so often in life: Doing right by all people is an art that nobody can do.
User avatar
JimA
Community Team Leader
Community Team Leader
Posts: 7816
Joined: Thu Jul 31, 2008 5:54 am
Location: The Netherlands
Name: Jim Mossing Holsteyn
Contact:

Re: Anyone else dislike the profiles on the right?

Post by JimA »

Tastenplayer wrote:
Sun Sep 13, 2020 8:36 am
Above the content I find quite good.
This would be me as well. I don't mind the left or the right, but above the post is generally the best for me.
Jim Mossing Holsteyn - Community Team Leader
Knowledge Base | Documentation | Board rules

If you're having any questions about the rules/customs of this website, feel free to drop me a PM.
User avatar
david63
Registered User
Posts: 18303
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Contact:

Re: Anyone else dislike the profiles on the right?

Post by david63 »

Personally I find that having the profile above the post disrupts the flow of a topic.
User avatar
3Di
Former Team Member
Posts: 16032
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Anyone else dislike the profiles on the right?

Post by 3Di »

Agreed if the whole profile is there, that's not my case.
Just the avatar (whatever dimension will be it will be resized to fit), the nickname and the timestamps.

Obviously the necessary buttons based on the core code (auths) as usual, see my above shot.

The mini-profile next to posts as it is ATM it is quite redundant, I think that in order to "better know" an user you have to go to its profile page.
That leaves more room to content, which is what really counts.
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: Anyone else dislike the profiles on the right?

Post by Gumboots »

You're neglecting an important factor: screen size. While it is obviously true that having profiles beside posts is impractical on a phone, it is also the case that lines of text which are too long as less easy and natural to read. This is a well-established principle in typography that has been known for many decades. On larger screens it therefore makes sense to use some of the width to hold the user details. This provides less interruption to the flow of the page, and easier reading of post content.

Having said that, personally I don't much care which side the avatar is on. I tend to find the left a bit more natural, and would normally choose that if given a choice, but it doesn't bother me either way.
User avatar
3Di
Former Team Member
Posts: 16032
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Anyone else dislike the profiles on the right?

Post by 3Di »

I indeed took care of mobiles if that's what you are talking about. (here is a shot from a 400px)
2020-09-14 05_38_29-Studio - Proteus - User video comment • page 1.png
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: Anyone else dislike the profiles on the right?

Post by Gumboots »

Lol. No, I was primarily talking about desktops, laptops, and larger tablets. In other words, devices that have screens wide enough to make good use of the extra width.

Short version: Small avatars on top = good on narrow screens. Avatar/profile at the side = good on wider screens. I think it's called "responsive design". ;)
User avatar
3Di
Former Team Member
Posts: 16032
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Anyone else dislike the profiles on the right?

Post by 3Di »

Man, I think we all know what we're talking about here uh? (e.g. responsive design) perhaps you're missing something here IMHO.

Here we are talking about minimalist profiles and always on top of the content, which fulfills the responsive design concept in full.

Forget that the topic is relative to the right or left, here I propose and we were discussing about something different, which obviously remains in topic precisely because we are talking about mini profiles. If in a 1920px screens the mini-profile takes the 20% of it... it goes by itself that we get the 20% less of the content, see like a video or an image or whatever.

Look at what it looks like this post if I remove the mini profile next to my post, you can imagine I can just add the mini avatar next to my nickname et voilat! Here we go, same concept.
2020-09-14 06_07_31-phpBB • Anyone else dislike the profiles on the right_ - Page 2.png
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: Anyone else dislike the profiles on the right?

Post by Gumboots »

3Di wrote:
Mon Sep 14, 2020 3:59 am
Man, I think we all know what we're talking about here uh? (e.g. responsive design) perhaps you're missing something here IMHO.
Or perhaps you are. Both are possibilities, yes? ;)
Here we are talking about minimalist profiles and always on top of the content, which fulfills the responsive design concept in full.
No. The topic was about whether profiles should be on the right or on the left. Having them on top is another option, which wasn't mentioned until later.

What I am saying is that I can see good reasons for both arrangements, at the side or on top, depending on the size of the viewport. On top makes sense on small screens. At the side makes sense on larger screens, IMO. Having a responsive layout which can change depending on screen width also makes sense.
Forget that the topic is relative to the right or left, here I propose and we were discussing about something different, which obviously remains in topic precisely because we are talking about mini profiles. If in a 1920px screens the mini-profile takes the 20% of it... it goes by itself that we get the 20% less of the content, see like a video or an image or whatever.
Yes, but if the content is text, I certainly do not want to have to read lines of text that are 1920px long. If the post content is text, having it 1920px wide is a very bad idea. In that case, have 20% taken off by the profile would be an advantage. If you want references, see:

Line length | Butterick’s Practical Typography
Shorter lines are more comfortable to read than longer lines. As line length increases, your eye has to travel farther from the end of one line to the beginning of the next, making it harder to track your progress vertically. Aim for an average line length of 45–90 characters, including spaces.
Readability: the Optimal Line Length
Having the right amount of characters on each line is key to the readability of your text. It shouldn’t merely be your design that dictates the width of your text, it should also be a matter of legibility.

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable.
Web Typography | Line Length
Line length, or "measure", is an important factor that influences both aesthetics and readability. A line length that is too short causes the eye to jump too frequently from one line to the next. If it is too long, it causes the reader’s eye to double back.

An ideal line length is based on the font-size. Robert Bringhurst suggests in The Elements of Typographic Style a line length of 45 to 75 characters.
User avatar
3Di
Former Team Member
Posts: 16032
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Anyone else dislike the profiles on the right?

Post by 3Di »

Much a do for nothing IMHO. An excerpt here:
Gumboots wrote:
Mon Sep 14, 2020 5:23 am
Yes, but if the content is text, I certainly do not want to have to read lines of text that are 1920px long.
If a style sets its width the problem does not arise, and even not. It seems to me that you're poking around arguments that are well known but don't fit the theme in the end. Anyway, thank you for your contribution. :)
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: Anyone else dislike the profiles on the right?

Post by Gumboots »

Well, you were arguing that having post content 1920px wide was a good thing, because it allowed bigger images and videos. You now seem to be agreeing that text 1920px wide is a bad thing, so I'm not sure why you were previously arguing that it was a good thing. :D

And basic readability is not "much ado about nothing". It is, or should be, a fundamental consideration.

If you think having avatars on top of posts is the best solution for everyone, all the time, you're entitled to hold that opinion. I have good reasons for disagreeing with it, and you may find that some other people also have good reasons for disagreeing with it.

My preference is for an unobtrusive title (not bold) at the top of the post, with the avatar/profile to the left of the post content. I find this is the most natural flow. Think of it like a conversation. If someone starts speaking, but you don't know who they are, and you only find out later, that's a weird way to have a conversation. Usually you'd identify and acknowledge the person who is about to speak.

Having the profile at the left follows this convention. My peripheral vision picks it up before I go straight to the post content, and I know who has written the post. I find it less obtrusive than having the profile/avatar above the post. It causes less of a break in the flow of the page. As long as wrapper width is set to give a comfortable line length for post content, plus whatever width is required for the profile/avatar, it all works nicely.

Having the avatar at the right is ok, but for me it's not as natural. I have to "go look over there" to find out "who wrote this stuff". Anyway, I'm running them on the left. I just added my own CSS to set them the way I like them. If you want them on top, just throw a few lines of CSS into Stylus and you can have them on top. Then we'll both be happy.
User avatar
3Di
Former Team Member
Posts: 16032
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Anyone else dislike the profiles on the right?

Post by 3Di »

Discussing more than arguing... I admit I am not that fluent in English. Sorry if I was not so precise or clear as you want. :P

Shortly: you are making a big deal for nothing IMHO. Too much a do here for nothing really, that's my opinion.

And yes, everyone has the right to express his or her opinion respecting each other, I usually disagree in a perfumed way if I do so but this does not mean that the opinion of others is or should be downplayed, it is not my aim.
If, however, you think you can stick me on the wall using my deficency in expressing myself correctly in your language then I warn you that you are crossing a minefield, if I were you I wouldn't play so much on it. ;)

Careful, I might ask you to show us what you can do at this point, visual examples etc. :ugeek:

Are you simply a theorist or can you put what you're trying to tell us (something known BTW) visually intopractice
as we can and we do with phpBB :?: I am not speaking about simple websites, got it? Please, be our guest.
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: Anyone else dislike the profiles on the right?

Post by Gumboots »

I'm not trying to stick you on a wall, and I'm quite sure your German and Italian are far better than mine. I'm just joining in a thread about "Anyone else dislike the profiles on the right?". Everyone else was joining in with their opinions, so I felt like joining in too.

This all comes down to personal preference. Some people in this thread like avatars on the left. Some like them on the right. Some like them on top. You were arguing for having them on top, so I suggested reasons why someone might like them at the side. I try to make my points clearly because things often get misinterpreted online. That's all. No hidden agenda.

If you want a picture, sure. Hang on a minute and I'll sort a screenshot.

_what_I_am_using_here.jpg
ETA: Screenshot added.
User avatar
3Di
Former Team Member
Posts: 16032
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Anyone else dislike the profiles on the right?

Post by 3Di »

I want code, not only pictures. I do want code!

Once again, I am talking about profiles at the top of the content, I understand you are following the thread.
But this thread has had some variation in its path and you've fallen into the crossroads, you just had to go further and not quote me.

I am not interested in right or left, just on top. The same applies to the people those are following our "niche" discussion. Sorry.
Last edited by 3Di on Mon Sep 14, 2020 8:42 am, edited 1 time in total.
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: Anyone else dislike the profiles on the right?

Post by Gumboots »

Note that this is just what I run for my own use on desktop. So far I haven't bothered trying to make it fully responsive. Anyway, it's code.

Code: Select all

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.phpbb.com") {  
  #top-social, .forabg .topics, .forabg .posts,
  .forumbg .posts, .forumbg .views, .header .lastpost,
  .phpbb-ads .phpbb-ads-ad,
  .postprofile .profile-joined {
    display: none;
  }
  html {
    background: #214770;
  }
  body {
    padding: 6px 0 66px;
    background: linear-gradient(#111E2C, #214770 300px);
  }
  #wrap {
    max-width: 1152px;
    box-shadow: 0 0 5px 2px rgba(0,0,0,.7), inset 0 3px 18px rgba(100,100,100,0.25);
  }
  body .phpbb-header {
    height: auto;
    background-size: contain;
  }
  body.search .phpbb-header {
    background-image: url("file:///B:/Banners/banner_9.jpg");
  }
  body.community .phpbb-header,
  body.support .phpbb-header {
    background-image: url("file://B:/Banners/banner_2.jpg");
  }
  body.downloads .phpbb-header,
  body.customise .phpbb-header,
  body.customisation-database .phpbb-header {
    background-image: url("file:///B:/Banners/banner_6.jpg");
  }
  body .phpbb-header h1 a {
    width: 100%;
    padding-top: 14.29%;
    height: 0;
  }
  html > body .phpbb-header h1 a {
    background: none;
  }
  .top-social-home {
    right: 4px !important;
  }
  .phpbb-navbar {
    border-radius: 0;
  }
  body.community li.but-community > a {
    color: #234663;
    text-decoration: none;
    background: linear-gradient(#888, #ddd 9px, #eee, #ccc);
  }
  #page-body .navbar {
    margin: 0 0 4px;
    background: #e8ecee url("/assets/images/images/silver/row_bg.gif");
    border: solid #7C8891;
 
    border-width: 0 3px 3px;
    border-radius: 0 0 5px 5px;
  }
  ul.navlinks {
    border-top-color: #AABBC7;
  }
  .forabg, .forumbg {
    padding: 5px 5px 4px;
    border-radius: 8px 8px 5px 5px;
  }
  .forums {
    border-radius: 0 0 3px 3px;
    overflow: hidden;
  }
  .header dt {
    padding: 0 9px 2px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
  }
  .collapse-btn {
    margin: -22px 0 0;
    opacity: .4;
  }
  .collapse-btn:hover {
    opacity: .75;
  }
  .phpbb-ads {
    min-height: 0;
    margin: 5px 0 0;
  }
  ul.topiclist dt .list-inner {
    margin-right: 260px;
  }
  ul.topiclist .lastpost, ul.topiclist .redirect {
    float: right;
    width: 260px;
  }
  /* Better messaging icon. */
  .fa-commenting-o::before {
    content: "\f075";
  }
  /* Make usable "top" link. */
  .top {
    display: none;
  }
  .section-viewtopic .bar-top + .post .top,
  #topicreview + hr + p .top {
    display: block;
    position: fixed;
    top: 20vh;
    left: 0;
    width: 32px;
    height: 60vh;
    margin-top: 0;
    background: #0003;
    line-height: 60vh;
    text-align: center;
    border-radius: 0 90% 90% 0;
    opacity: .3;
  }
  .section-viewtopic .bar-top + .post .top:hover,
  #topicreview + hr + p .top:hover {
    background: #0009;
  }
  /* Tweak damnable alerts. */
  .phpbb_alert .alert_close {
    float: right;
    margin-right: -20px;
    margin-top: 5px;
    border: 4px solid #0000;
  }
  .alert_close>.icon {
    font-size: 20px;
	}
  .postbody > div {
    display: flex;
    flex-direction: column;
  }
  .postbody > div > .first, .postbody > div > h3 {
    margin-right: 4em!important;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.3em;
    text-align: right;
    opacity: .6;
  }
  .postbody {
    width: 83%;
    float: right;
	}
  .postbody .content {
    flex: 1 0 auto;
    padding-top: .7em;
    border-top: 1px solid #C4CDD3;
	}
  .hasjs .postbody .post-buttons {
    position: static;
    max-width: 100%;
    padding: .7em 0;
    text-align: right;
    order: 9;
  }
  .post-buttons + .author {
    float: left;
    margin-top: -1.7em;
    margin-bottom: 0;
    opacity: .6;
  }
  .post-buttons > li {
    display: inline-block;
    float: none;
	}
  .post-buttons > .responsive-menu {
    display: none;
	}
  .postprofile {
    float: left;
    width: 16%;
    border: 0;
	}
  /* Hide footer rubbish. */
  #page-footer > *, #copyright {
    display: none;
  }
  #page-footer > .navbar {
    display: block;
  }
  /* Bloody search results page index.*/
  .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    color: #888 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: underline;
  }
  /* Trial of avatar shenanigans. *//*
  .avatar-container>a {
    position: relative;
  }  
  .avatar-container>a::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    border-radius: 50%;
    border: 2px solid red;
    box-shadow: inset 0 0 0 2px green;
  }    
  .avatar-container img {
    border-radius: 50%;
  }
  /* End of avatar shenanigans. */
  @media (max-width: 1200px) {
    #wrap {
      max-width: 88%;
  }
}
  @media (max-width: 700px) {
    #wrap {
      max-width: 100%;
    }
    body .phpbb-header {
      background-size: cover;
    }
    body .phpbb-header h1 a {
      padding-top: 20%;
    }
    #page-body .navbar {
      margin: 0 -5px 4px;
      border-radius: 0;
    }
    .forabg, .forumbg {
      padding: 5px 3px 3px;
      border-radius: 0;
    }
    li.header dt {
      text-align: start;
    }
    ul.topiclist dt .list-inner {
      margin-right: 0;
    }
  }
}
Post Reply

Return to “General Discussion”