How to Layout a Private Msg?

HTML & CSS
1

Just when I thought I was almost done… Bam!! Another set-back?! :frowning:

I could use some advice on both laying out my Private Message page, and then tweaking my CSS accordingly.

My Private Message page is somewhat unique in that it incorporates thumbnails of the people on the distribution list.

The current design I have looks great, except that I just realized that when the Sender looks at his/her Sent PM, there is no way to tell which Users are on the “To:” list and which ones are on the “Bcc:” list because they are all crammed on the same row!! :eek: (For a Recipient, everything being on the same row doesn’t matter…)

Questions:

1.) If I created a 3rd row for the “Bcc:” recipients, then I assume that is way to much to digest for a simple PM, right?

2.) What about making it so that both the “To:” and “Bcc:” recipients are on the same 2nd row? (If that would look good, then I definitely need hep tweaking my CSS!!

3.) Is there some other option that would make more sense? :-/

Feeling really trapped on this one… :frowning:

Sincerely,

Debbie

2

P.S. This is what I am thinking would look best, but who knows?!

Imagine in the screenshot I posted above, if after the first 3 Recipients, was a <dt> Bcc: </dt> followed by the last 2 Recipients.

Since I am limiting the # of Recipients to 5, I think this is doable.

But, if you guys like that design/layout, then my HTML/CSS needs to be flexible enough, so that any combination of “To:” and “Bcc:” Recipients will fill just the 2nd “Row” in my Private Message.

(Unless you think having Row 1 be for the “From:”, Row 2 for the “To:” and Row 3 for the “Bcc:” is okay?!)

For instance, things might look like…


TO: Username1, Username2, Username3, Username4, Username5

TO: Username1, Username2, Username3, Username4  BCC: Username5

TO: Username1, Username2, Username3  BCC: Username4, Username5

TO: Username1, Username2  BCC: Username3, Username4, Username5

TO: Username1  BCC: Username2, Username3, Username4, Username5

and so on...

Sincerely,

Debbie

3

Personally, I wouldn’t want the thumbnails, but that’s just me. My big concern is having too large of a group would cause scrolling - I know you’re only allowing five now, but that number will most likely have to grow as your community (hopefully) grows. I’d also be concerned for mobile users and/or those without high speed connections - that’s stuff I wouldn’t want to download.

To save real estate, I would either a) remove the images or b) make them only visible on hover. You could make it a user configurable option on whether to include them or not.

Your other choice would be to color code them somehow - add a different colored border, change the opacity of the image (which is probably how I’d do it - reduce the opacity of those that are BCCed).

Which ever way you’d do it, I personally would want to see sent to, CCs (if you have them) and BCCs on separate lines.


To:  Username1, Username2, Username3
CC: Username4, Username5, Username6
BCC:  Username7, Username8, Username 9
4

:-/

5

I’m partly with Dave regarding the thumbnails. I certainly wouldn’t want a thumbnail of me/my avatar in the “from” field of my own messages - I know who I am. :slight_smile: I like the idea of having show/hide images as an option.

Personally, I wouldn’t really care how the information is displayed, as long as it’s clear and easy to find. If you’re using thumbnails, I’d suggest having TO and BCC on the same line. If you’ll never have more than five entries, it doesn’t matter if all of them are TO, all are BBC or any combination of the two; if five images fit on the line, you should be OK.

6

Another body jab on Debbie’s Thumbnail idea… :injured:

Off Topic:

Not to get too far off topic, but here is why I did what I did…

Assuming we want Thumbnails…

For an INCOMING PM, the Recipient would obviously want to see a Thumbnail for From:. And before you jump in and say, “But don’t show me the To: because I know what I look like” here is the catch…

If the PM was sent to four people including yourself, then you would want to see Thumbnails for the other 3 Recipients, and so for consistency, you would want Thumbnails for everyone in the To: list.

Right?!

However, in my OP, I am asking for help with the layout of a SENT PM, so the logic flips somewhat…

As the Sender, I concur that I don’t necessarily need to see my own Thumbnail. I could do that, but its more work, and I figured, “Why?”

But as the Sender, I would want to see Thumbnails for the “To:” and the “Bcc:”, and lumping them together is problematic as I’ll describe below…

(For an INCOMING PM, I did combine the “To:” list and “Bcc:” list together, because the “To:” list is “public knowledge”, and so a “Bcc Recipient” might as well see the “To:” list merged with his/her name. And, of course, the people on the “To:” list would not see the “Bcc:” Recipient(s) ever!)

However, for a SENT PM it most certainly does create a problem if you lump the “To:” list and the “Bcc:” list together!!

(Maybe I sent a PM “To:” Hawk and Ralph saying that you, TechnoBear, do a great job here at SitePoint and deserves a promotion, and I also “Bcc:” you personally to let you see the compliment. As the “Sender”, when I look at this old PM, it would be important for me to know that I sent the PM “To:” Hawk and Ralph, but that I sent you a Blind Copy as well. Right?!

If everything was piled together, it would take away a key piece of information which is that I chose to “Bcc:” some people and not others…)

Sincerely,

Debbie

7

Ah, no - you’ve misunderstood what I meant.

I suggest you have two adjacent sections on the same line, one marked TO, which could contain from 0-5 entries, and one marked BCC, which could also contain 0-5 entries. As the total number of entries will never exceed 5, it won’t matter which section they’re in - five entries should fit in any combination.

8

A-ha! I follow you now.

Ironically, if you look back up to my OP, you’ll see I was pondering the same idea… :wink:

(This is why I chose the CSS Forum, because originally these seemed like the best idea, and if so, I think I’ll need help from some guru like Paul O’ to tame my <dt> and <dd> tags!!)

Does anyone else like that idea?

Sincerely,

Debbie

9

Yes, I know. That’s why I didn’t think I needed to spell it out in detail. :slight_smile:

10

What about everything on the same row? That’s saving a lot of space.

11

I like that. :tup:

12

You are an “Eager Beaver” if there ever was one!!! :lol:

Sincerely,

Debbie

13

That’s exactly what I had in mind, but if you’re going to include a thumbnail in the “From” field, then I like Francky’s version better. (I dislike having to scroll, so anything which saves vertical space appeals to me. :))

14

What do you think about how I have the “To:” and “Bcc:” hanging out to the left of Thumbnails to follow?
(Thanks Francky, but I like my design better if it is something that can easily be done with CSS.)

Comments on that particular aspect?

Francky?

I have to vote against that one. (I think having the “From:”, “To:” and “Bcc:” all on one row is too busy!!)

As far as vertical scrolling…

In this handheld device world, isn’t that the direction things have turned to?? :-/

(BTW, I could make the “From:” (for Sent PM’s) to be just a Username, but if that adds to much more time to modify things, then that idea is out.)

Sincerely,

Debbie

15

:slight_smile:

[ot]

Fortunately, I seldom have to use a handheld device, but if I do, anything which adds to the amount of scrolling I have to do to reach the important stuff just annoys lumps out of me. :frowning: [/ot]

16

Maybe this ship is finally turning…

So, TechnoBear, a quick recap to see if I know what YOU would ideally like…

Incoming Message: (Sent to “User4”)


FROM:	DoubleDee (+pic)

TO:	[B]User4 (+pic),[/B] User1 (+pic), User2 (+pic), User3 (+pic)

DATE:	1/16/2014

SUBJECT: Re: Incoming Message

(Here, I collapse the “To:” and “Bcc:” lists into a single Distribution List, since the Recipients wouldn’t need to know if they were Bcc’d or who was Bcc’d.)

Sent Message:


FROM:	DoubleDee  [SIZE=2]**Here I'd have the Pic for simplicity, but will consider dropping it![/SIZE]

TO:	User1 (+pic), User2 (+pic), User3 (+pic)	BCC:	User4 (+pic), User5 (+pic)

DATE:	1/16/2014

SUBJECT: Re: Sent Message

(Here, the Sender of the PM does need to know who was on the “To:” and “Bcc:” lists.)

Are we on the same page?

Fair enough.

Sincerely,

Debbie

17

Are you sure you mean that? Surely showing the BCCs on an incoming message defeats the purpose of BCCing them in the first place?

18

Oops! It’s be a long day… :blush:

See my updates to Post #16…

Thanks,

Debbie

19

Looks OK to me. (Of course, what I’d ideally like would include the date in British format - 16/1/2014 … :p)

20

If that was you being a trouble-maker in my other thread, then you’ll recall that “Customizing Date-Formats” is in v3.0 :wink: