How to use Responsive Design Mode in Safari

Anyone that works with websites knows how important it is that they scale correctly on all types of devices. While mobile is extremely important, desktop is still a primary way that a lot of people experience the internet.

On the Mac, Safari makes it extremely easy to check websites across all types of devices and screen sizes. To do this, you need to enable the Developer menu. Click Safari → Preferences, and then click the Advanced tab. Enable the Show Develop menu in menu bar option in the Preferences dialog box.

Responsive Design Mode

One that is enabled, go to the Develop menu on the Safari menu bar. Click Enter Responsive Design Mode.

Responsive Design Mode

You’ll now see options for various iPhones, iPads, and desktop screen resolutions. This will allow you to make sure your websites look good for everyone, regardless of device choice.

Responsive Design Mode


We have more helpful tips right here.


Wait. There’s a Bonus….

Custom Productivity Templates

We have a set of custom productivity templates that work well with the iPad app, GoodNotes. And if you want to try them out, we’ve put together a free guide that can help you.

We’ll show you…

  • How to create and save custom page templates in GoodNotes.
  • How to use those page templates to transform GoodNotes into your own productivity notebook (or any other type of notebook replacement).

Plus, we also have included a couple of our custom productivity templates for you to get started with. These templates are right out of our popular productivity course.

The custom templates and the guide are available for FREE to our email subscriber community. And you can get it right now. By joining the Sweet Setup community you’ll also get access to our other guides, early previews to big new reviews and workflow articles we are working on, weekly roundups of our best content, and more.

GET THE TEMPLATES