15

Hello Orion friends 🙂
I want to give my suggestion that Orion should implement the responsive design mode natively without using extension.

Noted that I would like to share this opinion as a web developer point of view, feel free to against me if I miss anything.

Why do I use responsive design mode?

  1. To see how my website design works in varies of screen sizes and resolutions.
  2. Debug (inspect elements) just in case something not working as expected.

Problems?
Current solution solved (1) well.
But extension that Orion integrated is using iframe to display a website, and it caused the following issues.

  1. When we inspect elements, we will see HTML elements of the extension at the top, which cause a lot of noise and consume too much indent. Let's compare between Orion and Safari.

Orion - plenty of noises, wasted indents.

Safari - actual elements since the top

  1. Some websites not allowed to display on iframe without tweaks - for example Kagi

  2. (optional) Even I put only 1 screen in responsive design mode, but it's loading laggy and not smooth compare to Safari (that we open the website already and enter responsive mode later). I assumed that because it needs to render both extension viewport and iframe.

    4 days later

    Would like to hear more about this from people who upvoted. Safari's repsonsive mode is extremely primitive.

      7 days later

      Additional suggestion from me:
      No need to implement like responsive viewer extension.

      We need a few things for simple usage

      • Can view the website in any resolution (one screen at a time is okay. Safari, Firefox and Chrome did this).
      • Can change the user agent.

      • Safari is very primitive as they just implemented those requirements. Which is enough for non-hardcore frontend development.

      • Firefox and Chrome are just adding more features like speed throttling.

      And many other features are nice to have and can add later.

      3 months later

      I would also love a native version of the responsive design mode. The current system integrated into Orion offers much better functionality over Safari's, but is very buggy and hard to use due to being non-native as well as being incompatible with some sites due to CSP and X-Frame-Options restrictions, not to mention breaking ⌘R refresh muscle memory which instead exists responsive design mode. I agree with basing it off the more flexible Chrome/Firefox approach rather than Safari's rigid presets.

      (It would also be nice to be able to resize the Orion window itself to even narrower than the current 500px limit to allow quickly checking responsive styles without needing to fire up a full responsive design mode, but that'd be a separate request)

      3 months later

      I'm not a heavy web developer, so maybe I'm not the target audience, but I upvoted because:

      1. The "inspect element issue" discussed already
      2. The ⌘R refresh closing out the extension
      3. The native Safari version is simply much faster

      To be clear, we absolutelty believe this should be native, we just wanted to give users soething before we had time to do this (not an easy task.)

      Btw I beleive Safari's solution is also JS based?

      11 days later

      I prefer Safari's responsive design mode. As it is simpler to understand, use and it does the job.

      Orion's responsive design mode seems to be more intended for web developers who would want to test the website on multiple screens.

      However, if Orion does want to keep it, it can add an Experimental Features Flag to enable/disable it (just like pdf library).

      No one is typing