Bring back device views in Responsive Design Mode

In Safari 17.0, the Responsive Design Mode was updated with two major changes.

  1. The quick device view icons that were at the top were removed in favor of a simple resizable web view.
  2. New integration with Xcode simulator for easily opening a website in a devices native simulator.

The new simulator integration is nice. It definitely promotes giving a much better testing of webpages since we get to see the webpage in the native app/environment. I think that this new integration is welcoming.

However, removing the device views has been a major step backwards. These views gave us quick access to checking webpage layouts across different devices with the click of a button. As a web developer, I am aware that these views are not a guarantee that the website will be fully functional on the device clicked on. The simulator is better for that.

But during the development process, these views were good for quick sanity checks as it was quick and "close enough". Having to launch multiple simulators to test on two different iPhones and two different iPads takes a lot of time. The devices have to boot up each and load the website. This wastes minutes of time vs the fraction of a second it did before, just for a quick check.

Another downside of the simulators is that if I am testing a web app that requires a login, I need to log into each app on every simulator. The older responsive design mode just used the exact session that I was logged into Safari with.

I submitted this as feedback as well... https://feedbackassistant.apple.com/feedback/13225118

Post not yet marked as solved Up vote post of joeworkman Down vote post of joeworkman
1.9k views
Posted by
joeworkman
Reply

  • Completely agree. Removing the device views is a major step back.

    It makes the whole development, inspect and debug process so much slower.

    Please bring back these device view buttons in Safari itself, instead of forcing people to load a Xcode Simulator for each device.

    —
    patrickplaggenborg
Add a Comment

Replies

The Safari dev team posted this today... https://webkit.org/blog/14670/simplified-responsive-design-mode/

My views are still the same. There needs to be some sort of function that allows us to quickly view a devices viewport natively in Safari. If the team did not like the "table" of devices, then change it to be a dropdown. I found the UX of the device table pleasing and different, but I will take a dropdown over nothing any day of the week.

To add insult to injury. I spent an entire day getting the new simulators working last week. Now they magically are all gone. Xcode sees them as installed in the platforms tab. Sadly it's prompting me to install them again.

Posted by
joeworkman
Post not yet marked as solved Up vote reply of joeworkman Down vote reply of joeworkman
Add a Comment

One more food for though item here... there are a vast array of user that "design" websites. I make software for website designers. I am definitely on the advanced side of the spectrum of dev tool users. I already had Xcode and the more advanced dev tools installed. But should we really expect an invdividual that is build a website for his local club to install Xcode and simulators? For these users, the device views are enough.

As an advanced users, I know it's easy to forget about the more novice/light users. But we need to make tools accessible for them too...

Posted by
joeworkman
Post not yet marked as solved Up vote reply of joeworkman Down vote reply of joeworkman
Add a Comment

I agree with the other posts. I think we all agree that the new Xcode simulator link is very useful and well done, but for a quick view of how @media is handled, in Web development it is extremely necessary. I will have to switch to Chrome or ResponsivelyApp to get work done.

Posted by
Aculine
Post not yet marked as solved Up vote reply of Aculine Down vote reply of Aculine
Add a Comment

Are you kidding me... So this is not a bug, but a "feature"? I spent whole evening trying to figure out why those options are missing..So there is no way to turn it on? Been using Safari as my main browser, but time to switch back to Chrome.. At least those options are still there...

Posted by
Lukas111
Post not yet marked as solved Up vote reply of Lukas111 Down vote reply of Lukas111
Add a Comment

This update is not useful. Apple removed the "useful" items.

How clean does the layout need to be? Will we eliminate all shortcuts in favor of a "simple"r design?

UX? Bad.

Posted by
jeffofish
Post not yet marked as solved Up vote reply of jeffofish Down vote reply of jeffofish
Add a Comment

I just returned to safari for my development, and this big nono. I don't want have huge tools like xcode installed, nor I have space for that. So no returning to safari is happening.

Posted by
Marek55
Up vote reply of Marek55 Down vote reply of Marek55
Add a Comment