This topic is to track feedback for the Full Screen Login / Create account styling made available on meta through: Discourse Design team experimentation topic
6 Likes
It will be preloaded?
I super like it. Small size modals are outdated on the common internet user apps from a while.
4 Likes
It feels really good! Very nice. 
Some feedbacks:
- Desktop – the width of social buttons on large screens might be too large and imposing. However, if you shrink them, it may require more effort to harmonize the visual between the left/right panels.
- Desktop – The close icon color might need more contrast for accessibility.
Screenshots
- Mobile – Very picky
. It seems the line height might be a little too high
- Mobile – I’m not sure of this one. It depends on the screen contrast. The social button border color seems barely visible (the first thing I noticed on my mobile, but looks okay on my second screen). I understand if it’s too much; it will surely be overwhelming. Maybe using
primary-300could help a little.
6 Likes
Thanks for such detailed feedback!
2 Likes
For now it is installed here on meta while we experiment and get feedback. If things are well received we would eventually make this default in the core product.
4 Likes
I think there is a lot of white space at the top. Why do I have to scroll to make the login button appear? As you can see in the end the whole text perfectly fits onto the screen.
2 Likes
On Safari on iOS, the “Welcome” text is cut off.
Swiping up or down doesn’t fix the issue either. Note also that the modal’s x is above the emoji.
I wonder if the best option here is to have a max-width limit for the full page treatment of the modal. Beyond a certain width it likely doesn’t make sense to still use the full viewport.
2 Likes
You know, I think this may be due to the fact that I am sticking to the left|right layout we had in the modal when auth login options were present.
I will explore bringing the alternative login options under the main login zone.
2 Likes
Ive made a bit of adjustments taking in most of this feedback, have a look and let me know what you think
@pmusaraj have a look as well, I’ve moved away from the 2 column layout and merged to one single view in the center of a full-screen, similar to google, and many other sites login pages.
3 Likes
It’s an interesting idea, but I’m not entirely sold on it, to be honest. Maybe there’s muscle memory on my part, for sure I’ve gotten used to the white/blue (or black/blue for dark themes) split in these screens, but to me that’s become a part of the Discourse identity as well. It feels like a big step to remove it.
Let me post some side-by-side screenshots, it helps to put things in context (they are different instances, but it’s just to give the idea of the change).
Further, in the sign up modal, the “Create Your Account” CTA is behind a scroll, you don’t see it right away.
Also, something else to think about, in all the full screen login screens the logo of the site is missing. Users usually know where they are, but the logo is an important additional validation that you’re indeed entering sensitive data (an email, a password) on the right site. In the old screens it’s there, sort of, courtesy of the modal frame.
7 Likes
Here is some feedback!
It looks good. I think it kind of misses some visual identity, though. 
. (EDIT: I get definitively the same feeling as Penar about the identity)
Mobile
It looks good in portrait mode.
Some issues in landscape mode:
- The header is cut off. You can’t scroll up, but you can scroll down.
Screenshot
It happens in portrait mode, too.
The keyboard pushes content up on the login page. It doesn’t happen on the register page.
About the landscape mode. Most people won’t use it, but it can happen, and it’s not a great user experience. I think you can adjust a few CSS to make the blocks float around the welcome message. Not ideal, but it’s okay:
However, the most visually appealing to me is to split credentials and social buttons in half:
- Not directly related. On mobile, the first input is focused, and It opens the keyboard directly. (I don’t know if it’s the same behavior everywhere)
I think it worsens the user experience for two reasons:- you don’t see the full page at first, and it’s not welcoming.
- you don’t see all the login options. (especially for users using social login – you have to close the keyboard every time)
Desktop
It mostly looks good, with some issues.
- It looks good on medium screen size:
- On large screen, I’m not sure. It looks good; however, while having all the social buttons on one line seems convenient, it looks unusual (small content centered, with below a large content). It’s not wrong, and it looks okay – it might be a habit from the previous style as your attention is focused on one centered place.
What you did before was actually quite elegant, and as suggested Penar, a max-width would be enough to make it look good. I would not mind seeing two columns on a large screen, then it wraps below automatically under some limit.
- On the responsive side – under some minimum height, you get a scrollbar on the left panel. I can’t test on a real device if it happens too. I think It would be more natural for user to scroll the page instead of the internal component.
Common
- The forum scrollbar is apparent when the login modal is opened, and you can play with it. It might confuses the user into thinking there is something when there is nothing. It can be trippy if the modal scrollbar appears as well at the same time.
Example
4 Likes
Another round of tweaks & adjustments were added today
4 Likes
Old:
New:
Sign up with social account is feeling extremely suppressed on a narrow screen now. I agree it looks visually better, but is not calling these actions out now.
Sidebar… on sign up we probably want to change the text to “sign up with Google”. Also it is confusing that some are sign in and others are log in.
4 Likes
this would also run afoul to their guidelines for social logins, we’ve had a few sites notified about non-compliant facebook buttons in the past (social login requirements might also be why some say “log in” vs “sign in” though I’m not 100% on that)
4 Likes
It looks like another share/follow icons on footer. Not good at all and I’m totally sure most of users don’t realize those are actually for login.
1 Like
Here we go.
Mobile
- In portrait mode, it looks good!
Possible improvements:- The social buttons appear fairly small on my phone (Android, FDH+, 2220x1080). To compare, my finger width is ~1,5cm, and the button width is 0.5cm on my phone screen. This might be an accessibility issue. I would try to make them a little bigger (gap as well).
- The social buttons appear fairly small on my phone (Android, FDH+, 2220x1080). To compare, my finger width is ~1,5cm, and the button width is 0.5cm on my phone screen. This might be an accessibility issue. I would try to make them a little bigger (gap as well).
-
When the keyboard is visible, it moves the modal up. I believe it’s related to this recent change here FIX: Modals on Android when keyboard is visible by pmusaraj · Pull Request #24442 · discourse/discourse · GitHub – However, I don’t think this should be applied to the fullscreen login modal. Experiencing a layout shift is not great.
-
In landscape mode, I assume it’s untouched. Some love would be needed in this area.
Desktop
It looks good overall!
I would be definitively in favor of this design. Thanks for bringing it back!
Large screen
I have two concerns with it:
- Those two panels are still a bit too far away
- The social buttons are a bit too large.
About 2. – You could introduce more breakpoints
@media screen and (min-width: 1536px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 70%;
}
}
@media screen and (min-width: 1920px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 60%;
}
}
@media screen and (min-width: 2560px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 50%;
}
}
At 2K resolution, it looks like:
About 1. – I’m unsure. Here is a possible alternative. The advantages are that the user’s view is always centered while keeping the visual identity. The blue panel width could be adjusted. This is not the exact impression feeling, but it’s pretty close.
Note: With the button width reduced, I’m pretty fine with the current design. I share this suggestion in case you do have an inspiration for it. I kind of like it.
A few CSS I noticed:
- The left panel does have a
padding-topof3rem– this doesn’t seem useful, and it makes the panel not centered compared to the right panel.
.login-left-side {
padding: 0 3rem 0 3rem
}
- The registration form is not vertically centered. It uses this CSS. Is there a reason?
.d-modal.create-account .login-left-side {
height: calc(80% - 6rem);
@media screen and (max-width: 900px) {
height: calc(100% - 6rem);
}
}
Centered looks good to me.
- The close button color contrast might need to be adjusted for accessibility reasons. I would use
--primary-very-highinstead.
.d-modal__header .modal-close .d-icon {
color: var(--primary-very-high);
}
That’s all for me!
3 Likes
This is the reason. I think the last resort for social logins on small screens is just showing the logo, but I need to be fact checked / do some checking on that.
2 Likes
I cant unsee it as that now, thanks for bringing that up!
Hmmm…
Looks like the only style guides I could find on the button were for Facebook & Google.
Facebook only wants you to have a rectangle button with “Log In With Facebook”. They also don’t want you having many options authenticate with services other than Facebook.
Google is fine with using only their logo if necessary as a log in button.
Took a quick look here on meta and it looks cool. Wont really affect me though as the main forum Im on is only SSO
1 Like