New Layout Element Feedback: Potential Problems

Beta
#1

Hi!

I have few notes about the new functionality:

1.
This is what the Changelog says:

[Layout control] will automatically switch the active tab to the breakpoint you’re currently viewing in the builder. You can of course switch to any breakpoint you wish to style at any point, but this helps to ensure that you’re starting your work on the breakpoint you most likely intend to be updating.

That is not entirely correct. I work on 15’’ Laptop, and the open sidebar puts me into the 980PX-1199PX by default, while I am actually editing the 1200PX & UP breakpoint. This can easily be overlooked and and it is hard to get used to switch every time the Algorithm incorrectly assumes what am I editing. :slight_smile:

2.
Up until now the default reflow to the single column was at 481PX - 767PX. Now it is at 768PX - 979PX. I don’t think this is good thing to do. It is too early for the single column at this breakpoint and many old users used to the old way may start having broken layout simply because they don’t check this.

3.
Since the starting breakpoint was at 980PX-1199PX on a 15’’ laptop, whatever we make there, we have to re-make at the 1200PX & UP, [Edit: only if the layout is set to custom] and probably also at 768PX - 979PX, every single time. This is a lot of unnecessary work, in my opinion.

Here is what I would do:

There are only two logical Layouts, that are used in most cases. Probably over 95% of cases actually:

  1. Desktop—with whatever we have here. Let’s say a two column layout. We usually want it all the time no matter the viewport width, until too narrow so the Mobile has to kick in.
  2. Mobile—which is in most cases a single column that starts at 767PX.

Based on that, if we are forced to create a layout for several widths each time, it is time-consuming. So the logical approach would be that we always start on the full desktop width just like it was the case until now, and whatever layout we create there, it should cascade down until the mobile view starts. And the mobile view (single column) should start at 767PX just like before.

If sometimes we need special layouts, we can then easily change for any breakpoint, which is fantastic.

I see that cascading may be hard to pull-off so another approach may be to have only Desktop and wider Mobile by default, and then toggle on the additional ones if needed. Whatever the approach, the point is that we should avoid unnecessary repetitive work.

Off-topic:
Mobile view is still too wide. It is great as a breakpoint, but as a preview it is not usable, as the realistic preview starts at 360px. This is resulting with Headings that are sticking out and other design mistakes. I see those mistakes all the time done by X/Pro users who don’t check the design on the actual phone or in the browsers mobile view.

I think that the Responsive preview on the top should have a smaller button at the right side of the Mobile brekopoint preview, which would put the preview in 360PX width. It doesn’t have to be a breakpoint, just a “true mobile” preview.

Thanks!

1 Like
#2

Thanks for sharing this! Some of it definitely bleeds over into your off topic point because the current screen dimensions aren’t optimized for modern devices.

  • The initial column sizes are based on the width of your preview frame. I primarily work on a 15" as well, and it defaults to the LG breakpoint size.
  • When you click one of the options in “Choose a Layout” it will automatically set any larger items to the same value, and the smaller items to one column (100%).
  • For example, on your computer you’re viewing the LG breakpoint. When you click 4 Columns, it sets LG and XL to 4 columns and sets MD, SM and XS to a single column.

We tried a few approaches and this felt like the most predictable and unopinionated way to go. Another option we considered was potentially dropping to 2 columns (50% + 50%) if you were on MD or higher and you picked an option with more than 2 columns. How does this sound to you considering the above?

As for the mobile view being too wide: I agree, this just happens to be a really complicated thing to approach and we most likely won’t be tackling it until the Theme Options reboot when we have more room to work with and less risk breaking existing sites. At least at the time of this writing, and with what I know about the roadmap and info from other internal conversations what you can expect:

  • We will always have XS, SM, MD, LG, XL breakpoints. These will correspond with the five buttons we already have throughout the tool. We will keep this convention for consistency.
  • If you’re using Integrity, Renew, Icon, or Ethos, the media query px values will remain as they’ve always been. They are hardcoded into the static stylesheets and used in so many places that it would be risky for backwards compatibility to try changing this so late in the game.
  • There will be a new Theme Options paradigm. Think of it as “Roll your own stack / Use a classic stack”. Under this new paradigm you will be able to customize the px ranges for the XS, SM, MD, LG, XL breakpoints. All of the builders will respect these new values when referring to the respective screen sizes.

TL;DR; it’s a problem we intend on solving, but it’s quite systemic and can’t be reasonably addressed until we have more room to be inventive.

1 Like
#3

Ok, I didn’t realize that if you are on LG size, whatever you choose it will follow to XL. That is because I have chosen a custom layout, and that one did not set the XL one to that same custom layout. Which means it still has to be copy-pasted to XL. But Ok, that is not so common use case, so there will be no excessive clicking.

However, I am not sure that I like the fact that it will set the next smaller item to one column. That means that we will have to change the incorrectly set layout most of the time. I think that the layout set on LG or XL should also be on MD, and one-column should always start from SM downwards. This would ensure consistency and it would stay same as it was before. We can always go in and change the layout manually if we need different layout at MD.

With regards of the Narrower mobile preview, I didn’t mean that there should be a different media Query, or that you should mess with the hardcoded stylesheets. I mean that there should be a button that toggles this preview On/Off:

.cs-preview-frame-container {
    max-width: 360px!important
}

That’s it! Just to see how things are playing out at this width. It of course could be a visually different button, so it doesn’t get confused with the breakpoints. :slight_smile:

Tip:
If no official support for this, I am solving it with the Stylus Browser addon. I have applied the above CSS to this regex rule: .*\/pro\/.*, and turned it off by default. When I need a true mobile preview, I just turn it on with the checkbox.

#4

I think that the layout set on LG or XL should also be on MD, and one-column should always start from SM downwards. This would ensure consistency and it would stay same as it was before. We can always go in and change the layout manually if we need different layout at MD.

10-4 on that. I think we can make that adjustment. Our approach was more for predictability, but I see how this would be more efficient for quickly building pages.

With regards of the Narrower mobile preview, I didn’t mean that there should be a different media Query, or that you should mess with the hardcoded stylesheets. I mean that there should be a button that toggles this preview On/Off

Gotcha! I was assuming you meant changing the theme’s breakpoint sizes. I think what we will explore in the workflow improvement cycle (with the Layout Builder) is a way to drag to resize the preview frame. The 5 breakpoints (linked with the theme) would be shortcuts to quickly jump to a given size, but you would still be able to see more custom sizes.