Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better support for large displays #101

Closed
wildcardjoker opened this issue Apr 27, 2019 · 23 comments

Comments

Projects
None yet
7 participants
@wildcardjoker
Copy link

commented Apr 27, 2019

I've just installed this extension, and I love the fact that it removes all the clutter.

However, I would like to request that the amount of whitespace around the list of email is reduced. At present, I find that most of the display on my 1920x1080 screen is wasted.

I've played with the CSS a little, and I've found that if I modify the left-margin property of the nH class and the width of the next <div> tag (which has the attribute role="main"), this decreases the margins to a much more palatable setting.

I have attached screenshots of the default and modified windows. In the modified screenshot, I have adjusted the width of the 'main' <div> tag to 1700px.

This was only a very quick modification, however I manually modified the CSS to match my screen sizes. I don't know how difficult it will be to modify the CSS to allow for different screen dimensions etc.

I appreciate all of your hard work on this extension. Thank you so much for making this available!
simplify-default
simplify-modified

@leggett

This comment has been minimized.

Copy link
Owner

commented Apr 27, 2019

I'm not going to do this for the default view. Reading is much worse for long line lengths. It isn't that big of a deal in the inbox but the inbox and conversation view are tied together.

I use a larger max-width on the preview pane though. Up to 1680px. Or you can make a local override with your own extension.

@leggett leggett closed this Apr 27, 2019

@EranBoudjnah

This comment has been minimized.

Copy link

commented Apr 27, 2019

I'm a new user of this extension, and this is the only annoyance for me with it. Would be nice to be able to configure this behaviour, and potentially some of the other tweaks?

@leggett

This comment has been minimized.

Copy link
Owner

commented Apr 28, 2019

I don't want to add settings to Simplify. It makes support more difficult (as there are the many permutations of Gmail times the many permutations of Simplify). I'd rather find a better solution for people maximizing their window on large monitors.

@EranBoudjnah

This comment has been minimized.

Copy link

commented Apr 28, 2019

Fair enough, keeping it simple makes sense. I do have a pending PR with a fix, but there was a comment there addressed to you so didn't want to action before you had a look :)

@leggett leggett changed the title Decrease whitespace around mail list Better support for large displays Apr 28, 2019

@leggett leggett added the enhancement label Apr 28, 2019

@leggett leggett added this to the v3 milestone Apr 28, 2019

@leggett

This comment has been minimized.

Copy link
Owner

commented Apr 28, 2019

I'm going to make this issue the place I track the ideas and feedback around better use of screen real-estate on large monitors.

@leggett leggett reopened this Apr 28, 2019

@leggett

This comment has been minimized.

Copy link
Owner

commented Apr 28, 2019

One idea is to make the nav wider on large displays... might be useful if people have a lot of nesting or long label names.

@EranBoudjnah

This comment has been minimized.

Copy link

commented Apr 28, 2019

Can you explain your assumption that "The optimal line length for reading is only 50-70 characters."?
I'm only expressing my personal view here, but when I scan through emails, I don't read every line to its fullest, but not being able to read everything when there's clearly real estate for it is frustrating - especially when about a third my screen is just white...

@leggett

This comment has been minimized.

Copy link
Owner

commented Apr 28, 2019

Sure...

First, some context. The inbox and the conversation have the same parent div where the max-width is set so they are linked. I could try and change the max-width really quick with a mutation observer but I don't think that will be a great experience nor do I think it is worth it.

Yes, in the inbox, you likely only are scanning the left 500-800px which has the star, senders, label, subject, and start of the snippet. If you're only reading the left side, then you don't really need the rest and it pushes the timestamp, attachment icon, and hover actions further from the thing you use to identify the message (the stuff on the left). So stretching the inbox is bad in my opinion but not the end of the world.

But in the conversation, where I assume you are reading the whole message, it is horrible. Here is a good explainer why: https://baymard.com/blog/line-length-readability

@EranBoudjnah

This comment has been minimized.

Copy link

commented Apr 28, 2019

First of all, thank you for the detailed reply!

As to the attachment icon - you make a good point. It may have been a poor choice to place it on the right (although I see why it was done, if the icons on the left are meant to help identify messages and attachments aren't considered a part of that identification). Having the timestamp on the right seems less of an issue, probably, like you said.

I thought the character limit idea would come from those principles you linked to, which is kind of why I asked.

I totally agree it will be horrible to allow full width for the message. However, when it comes to the inbox, I think there's a difference between reading blocks of text, in which finding the next line has meaning, to reading a single line as is the case in a list of items (like the inbox). Here, you don't have the overhead of needing to find the next line to continue reading.

Also, keep in mind we have the hovering effect to help us single out a specific line.

It's your extension, so essentially your call, just raising some considerations. Decoupling the inbox and the conversation might be worth it - they are significantly different.

@leggett

This comment has been minimized.

Copy link
Owner

commented Apr 29, 2019

Good to understand the push back is just on the inbox and not the conversation view.

@leggett

This comment has been minimized.

Copy link
Owner

commented Apr 29, 2019

#90 also improved how things work on large displays. It didn't quite work for me but I liked the approach and will likely build off of it.

@leggett

This comment has been minimized.

Copy link
Owner

commented Apr 29, 2019

@EranBoudjnah So can you say more about the benefit of stretching the inbox across a wide display? Are you reading entire messages in the snippets in the inbox? Do you just like the feeling that the space is being used? Or is it so the actions line up with the messages?

@leggett

This comment has been minimized.

Copy link
Owner

commented Apr 29, 2019

Playing with some stuff:
Screen Shot 2019-04-28 at 11 29 21 PM

Screen Shot 2019-04-28 at 11 36 00 PM

Screen Shot 2019-04-28 at 11 31 10 PM

Lining up the actions with the content is better. One of the reasons I didn't do this initially is the text button labels take up so much room, it doesn't really work. And it is variable across languages. I might be able to detect the width of the buttons and set a css variable so I do it even for text buttons at really high resolutions.

The other change I'm playing with here (moving search to the left) has other problems.

  1. You can't really leave it open all the time.
  2. You'd have to at least hide it when you opened a conversation or if you selected any items in the inbox.
  3. I don't like that the button that it minimizes to is so far from where the search box lives.

So I'll probably get this working with search staying on the right for now and push out a change later this week.

@EranBoudjnah

This comment has been minimized.

Copy link

commented Apr 29, 2019

Great to see that you're continuously improving this!

As to your question - the way I view my inbox is this: I skim through the emails. If any catches my interest or is the one I'm currently after, I might get lucky and be able to find everything I need without having to open that message at all. This is why the wider the view is - the better.

And OMG, the lined-up actions look so much better!

@AndrewKennedyRx

This comment has been minimized.

Copy link

commented Apr 29, 2019

I'd agree, I prefer having the action buttons lined up with the content, then I don't have to go hunting for them in what looks like a header bar (thus my brain automatically filters it out because I'm looking at content, not header), and the select-all check box is lined up with the individual check boxes on the messages.
The search bar makes sense on the right, it has room to expand, but is out of the way of the primary use; which I would argue is processing mail as it comes in, I use it much less than Google seems to think I should based on their original location. Also, having used Firefox for a long time before switching to Chrome, they had a separate search bar on the right side of the browser window, so right side search feels familiar to me.
Widening the nav might be a good use of the extra space on wide monitors, but I don't have a large folder tree to navigate (maybe I should...) so the current width works for me.
Overall, other than a couple tweaks like lining up the action buttons, I really like the extension. I think it just takes a bit of getting used to all the extra free space. But, on the plus side, it lets me see my background images more.

@lukasvermeer

This comment has been minimized.

Copy link

commented Apr 30, 2019

Reading is much worse for long line lengths.

+1 on this! I for one would definitely not want the UI to scale to a 5K screen. I would probably sprain my neck.

@TheSpyder

This comment has been minimized.

Copy link

commented May 1, 2019

When I installed the extension the tight width on my 2560x1440 monitor was quite jarring. It wasn't until I saw this thread that I turned on the preview pane and showed the folder list on the left. I now find it to be quite acceptable at the full screen width.

Perhaps surfacing the wider max-width with preview turned on change a bit stronger in the about / installation pages would help with some of these concerns 🤔

@leggett

This comment has been minimized.

Copy link
Owner

commented May 1, 2019

Yes, that with aligning the actions and pagination controls on the left/right on the content.

I considered this initially but it was more work and I deemed it not worth it initially. Never maximizing my window on large monitors and mostly using keyboard shortcuts, the current design seemed acceptable.

But the push back has been more vocal than I expected.

@TheSpyder

This comment has been minimized.

Copy link

commented May 1, 2019

The use cases are definitely interesting.

If I'm reading a lot of mail I will un-maximise my window (well, maybe not anymore 🤣), but I use JIRA a lot and that really only works well maximised. If I'm switching back to gmail for a quick update I'll just leave it at the size it is.

@ZackBoe

This comment has been minimized.

Copy link

commented May 5, 2019

For the inbox alone, the current width is rather unusable for me. I'm at 1440p using multiple inboxes, which can result in some incredibly short subject lines. In the second screenshot I've bumped the width up to 2000px with a userstyle.

wzD
Yji

leggett added a commit that referenced this issue May 5, 2019

Lot of work on #101
Started to work on lining up the actions with the content at larger resolutions. This is even harder to support than I expected (at least for how I'm approaching it).

I've don't have this working for preview pane or multiple inboxes yet and I bet there are some cases where it breaks.
@leggett

This comment has been minimized.

Copy link
Owner

commented May 5, 2019

I just pushed a bunch of changes on this. Still work to do. I'd love some feedback / suggestions on this if you think there is a better way to do this.

  • The biggest change is when your window is wider than 1641px, I line up the actions with the content. This was even harder than I expected (see the list of resolutions, views, and states in style.css line 244). There might still be bugs (there are so many different states to check). It isn't working yet for Preview pane or Multiple inboxes. And I'm not sure I'm approaching it the right way even. Would love some feedback / ideas on my approach.
  • I allowed the max-width on preview pane to go up to 2000px (Ideal ratio would be 55% width for message list and 45% for message -- but I don't force a ratio)
  • I think I've figured out how to allow side-by-side Multiple inboxes stretch wide but keep the messages maxed out at 1100px. It is based on a className I suspect changes a lot which means this could break any time Gmail changes it. Time will tell.
@leggett

This comment has been minimized.

Copy link
Owner

commented May 7, 2019

Ok, I think I have pinning the actions to the content working at lower resolutions now. I still haven't tested it on preview pane or multiple inboxes though and I want to do that before I release the improvements.

I'm also being more aggressive/thorough about hiding pagination and even settings at lower resolutions when both search and add-ons are open.

leggett added a commit that referenced this issue May 7, 2019

Further tuning on #101
I have pinning the actions to the content working at lower resolutions now. I still haven't tested it on preview pane or multiple inboxes though and I want to do that before I release the improvements to the chrome/firefox stores.

I'm also being more aggressive/thorough about hiding pagination and even settings at lower resolutions when both search and add-ons are open.

leggett added a commit that referenced this issue May 8, 2019

Finished #101, #31, #115, and #51
A lot of little fixes plus finishing up the work on supporting large displays and locking actions to the content at even lower resolutions.
@leggett

This comment has been minimized.

Copy link
Owner

commented May 8, 2019

Tested on preview pane and multiple inboxes. Since I allow a wider max-width, I'm not going to move the actions for now. Eventually, I could try and detect (and observe changes to) the width of the left pane in the vertical preview pane and move the actions over the content. But it will often bump into the pagination and search box so I'm leaving it alone.

To do vertical split pane right, I'll need to move a lot of things around (search to the left, actions to the right, select all... somewhere else). And that's a bigger task than this. I'll make a new task to track it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.