Anyone else dislike the profiles on the right?

[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.

[JimA]

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.

[david63]

Personally I find that having the profile above the post disrupts the flow of a topic.

[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.

[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.

[3Di]

I indeed took care of mobiles if that's what you are talking about. (here is a shot from a 400px)

[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".

[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.

[Gumboots]

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.

[3Di]

Much a do for nothing IMHO. An excerpt here:

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.

[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.

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.

[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.

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.

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.

[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.

ETA: Screenshot added.

[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.

[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;
    }
  }
}