El Capitan’s Safari has a great new tool for web designers. In the Develop menu, there is now an Enter Responsive Design Mode menu item. (To turn on the Develop menu, go to Safari > Preferences, and check Show Develop menu in menu bar.) When you switch to this mode, you see the current web page in the following display.
You can view the web page easily as it displays on a range of iOS devices, as well as other browser resolutions, by clicking the icons above the page display. You can also choose the user agent (which web browser is being emulated), and choose to view your assets in 1x, 2x, or 3x.
If you design websites, this is a big time-saver. You no longer have to manually resize windows, or view sites on other devices.
This looks to be incredibly useful!
This looks to be incredibly useful!
Exists on Chrome since years, and has many more options, like speed throttling. Will probably come to safari in 3 years after Apple figures out how to copy it…
This is a textbook Apple performance. They aren’t inventing a new responsive design tools – they’re emulating their competition – but their version is a much nicer presentation. Asset selector is a nice touch, too.
Keep selling your soul. Safari’s version is much more refined then Chrome and it’s developer tools have a much easier time targeting classes, ids among other things. Chrome is a bloated nightmare anymore.
Exists on Chrome since years, and has many more options, like speed throttling. Will probably come to safari in 3 years after Apple figures out how to copy it…
This is a textbook Apple performance. They aren’t inventing a new responsive design tools – they’re emulating their competition – but their version is a much nicer presentation. Asset selector is a nice touch, too.
Keep selling your soul. Safari’s version is much more refined then Chrome and it’s developer tools have a much easier time targeting classes, ids among other things. Chrome is a bloated nightmare anymore.
Also shows Split Screen mode for iPad (and secretly?) for desktop too, but not blue preview icon.
Also shows Split Screen mode for iPad (and secretly?) for desktop too, but not blue preview icon.
Anybody knows, how can I resize to an exact resolution?
So typing in numerically i.e. 1180x768px
sorry see my reply as a separate comment…
Anybody knows, how can I resize to an exact resolution?
So typing in numerically i.e. 1180x768px
sorry see my reply as a separate comment…
the simplest way is to paste this address as a bookmark:
javascript:window.resizeTo(1024,742)
make a bookmarks folder in the bookmarks bar with all the sizes you want.
the simplest way is to paste this address as a bookmark:
javascript:window.resizeTo(1024,742)
make a bookmarks folder in the bookmarks bar with all the sizes you want.
How to easily take screenshots of the simulated screen, only?
Take a screenshot in Safari, then crop it.
I wouldn’t mess with taking screenshots of simulated screens. It’s not meant to render everything perfectly; it’s only meant to view representations of sizes. (in other words, fonts look horrible/chunky. If you’re wanting screenshots to show clients, then personally, I like showing all other device widths represented; it shows you’re testing, and that’s awesome.
How to easily take screenshots of the simulated screen, only?
Take a screenshot in Safari, then crop it.
I wouldn’t mess with taking screenshots of simulated screens. It’s not meant to render everything perfectly; it’s only meant to view representations of sizes. (in other words, fonts look horrible/chunky. If you’re wanting screenshots to show clients, then personally, I like showing all other device widths represented; it shows you’re testing, and that’s awesome.
Anybody knows, how can I bring back default resolution values? Is there simple way or I need to do it manually with each preset?
Anybody knows, how can I bring back default resolution values? Is there simple way or I need to do it manually with each preset?