We design for above the fold.
Above the fold is different for every device.
We generally know which devices are important to us.
An iPad-centric design doesn’t need to be responsive.
An iPhone-centric design doesn’t need to be responsive.
The largest MacBook Retina display on the 16in has a width of 1728 x 1117px yet your Desktop view on the edit page defaults to 2448px width and no height specification.
So:
WHY do you only give us width RANGES as breakpoints? Those are “break ranges”. There’s no equivalent in code, as far as I know.
WHY do you allow us to affect only the uppermost width of the range, but default the view to some arbitrary non-central value in the middle of it. So if I want to be designing only for the iPhone 12 Pro Max, with 428 x 926 screen size, I have to set a range of 536px to 2196px to make the default view sit at 428px when the icon is clicked. Which by default then messes up all my other break range choices?
WHY don’t you allow us to set vertical depth, so we have SOME IDEA where our fold is, without having to publish and preview ON THE EXACT PHYSICAL DEVICE. I have to use a fixed section height or container within to force a depiction of screen depth (fold), but then I’m inexplicably presented with scroll bars… there are no scroll bars on an iPad. Have you seen one recently?
WHY do you allow a width of 320px as minimum breakpoint, which only applies to the iPhone SE and which has a bug that makes it default into the 344 break range, so you can’t even preview an SE if wou want to?
Have you SEEN Figma, or Sketch, or Adobe XD? They allow the user to design their work to the size that it is intended to be viewed on. Kinda sensible really, don’t you think ? You even have that feature yourselves in the Preview display, even thouh ALL you pixel dimensions are incorrect (since when has an iPad Pro had the size of 1024 x 1168?). Why not simply take those Preview settings, update them, include all the ones we care about, and allow us ro turn on/off the ones we want to use on the Edit Site page? Problem solved.
Stick a Landscape/Portrait toggle up there for good measure (it’s proven that most people view web content in Landscape mode), and HEY PRESTO all these breakpoint complaints will evaporate.
I know you’ll probably never even read this, because you’re too busy developing collaboration tools 99% of us don’t need, but hey, I still have to let you know how far off the mark this platform is.
This was the company’s frail and non-committal response from over a YEAR ago:
WHY ** do you only give us width** RANGES ** as breakpoints? Those are “break ranges”. There’s no equivalent in code, as far as I know.**
As CSS developer, that is what I work with all the time. Responsive design reacts to the screen width based on width pixel. For example @media (max-width: 780px) or @media (min-width: 780px) is exactly what is being conveyed here. I love how I can add up to 5 breakpoints ranges for more complex layouts.
Smart CSS tricks help control visuals when someone rotates their screen, and these tricks can be implement using the combination of breakpoints, design, and elements inspector configurations.
WHY ** do you allow us to affect only the uppermost width of the range, but default the view to some arbitrary non-central value in the middle of it. So if I want to be designing only for the iPhone 12 Pro Max, with 428 x 926 screen size, I have to set a range of** 536px to 2196px ** to make the default view sit at 428px when the icon is clicked. Which by default then messes up all my other break range choices?**
I do most of my customizations in the layouts within the layouts, and often apply different breakpoints ranges for individual elements themselves, which are different than the page’s breakpoints. I utilize the inspector for all the elements on the page to monitor the appearance as one goes down the screen.
I by default, don’t design for someone holding the phone horizontal, save a few situations like a gaming environment, but then again, I employ controls in the inspector to keep elements in that environment in check.
WHY ** don’t you allow us to set** vertical ** depth, so we have SOME IDEA where our fold is, without having to publish and preview ON THE EXACT PHYSICAL DEVICE. I have to use a fixed section height or container within to force a depiction of screen depth (fold), but then I’m inexplicably presented with scroll bars… there are no scroll bars on an iPad. Have you seen one recently?**
Vertical depth conditions are managed in the editor per element in the inspector, expecially when hidding unwanted scrollbars. In fixed heights, you can set the vertical at 100% or 100vh, then allow vertical (even horizontal overflow) while hiding the scrollbars.
As for dealing with exact physical devices, I don’t know if I would ever want to deal the everychanging environment of 5 types of mobile devices, 100s of different brands and versions, and all the different OS’s they use. I just deal with the averages.
WHY ** do you allow a width of 320px as minimum breakpoint, which only applies to the iPhone SE and which has a bug that makes it default into the 344 break range, so you can’t even preview an SE if wou want to?**
Zooming in will get you to the width really quick. I have several older clients that have their devices set to do just that. Their screen shots were insane. However, 320 is the basement, but I mostly focus on the. other maximum width end instead.
I know that there is much room for improvements, but there is a wishlist for Figma Sketch and Adobe XD, all which I use too.Finding techniques and tricks and applying them is the secret to making it work, but having the patience and the ability to let go of some of the things you can not control is golden in this business.
I be happy to check your situation, as I have the exact same devices you have.
@teejay I really appreciate you taking the time to respond with such detail and thought. Part of my frustration is that I have to deal with (what I perceive as) problems, withouty being able to talk them through. As you can see from my opening post, the last response from EditorX was a year ago… unacceptable in my world.
However. thank you again for the insight into how you address these issues. Would you be kind enough to explain further what you mean by this explanation, i wasn’t able to visualize what you meant:
“I do most of my customizations in the layouts within the layouts, and often apply different breakpoints ranges for individual elements themselves, which are different than the page’s breakpoints. I utilize the inspector for all the elements on the page to monitor the appearance as one goes down the screen.”
Breakpoints are not just for pages, but also individual elements on that page, or even inside any assets, like headers and footers. For example, I had very busy page, and everything but this cluster of circles needed more control over their placement. I gave that “container” which held them, 5 breakpoint control, while the rest of the page utilized the three by default. So, even on the deskop those circles in the cluster relocated/shifted position.
Since breakpoints deal with width, you must rely on design and the inspector to control the heights of the components of the page. For example, instead of using fixed pixels or even percentages, vertical heights is one of my favorite tools.
So, if you need the viewport to fill the screen of the desktop, tablet and mobile devices, you utilize the 100vh to cover the top to bottom effect. I use this often for artists and photographer sites. This dimension has nothing to do with your breakpoints.
This is what I love about EditorX and. some others are doing with respect to height/width responsive desiign.
Perhaps you could show me one of your issues and I could try to assist you with a solution.
Sometimes, it is the design that is the culprit to poor performance, which I have been guilty of often.
You know, it never even occurred to me that I could consider using a more granular approach to breakpoints at the element level… seems so obvious now you open my brain to the idea.
I’ve often battled with using breakpoints to try and fix just one element on the page, to the detriment of the rest of the page, now I’ll be able to take a much more rational approach.
