Video Transcript:

One of the most important aspects of responsive web design is testing your website before publishing it to the Internet.

As you only use one design in responsive web page layouts in EverWeb, you will need to make sure that this design looks correct when viewed on any device, be it a mobile phone, tablet or desktop computer.

One of the most convenient tools to use is Apple’s Safari web browser as it includes a Responsive Design Mode.

This mode lets you view web pages under all of Apple’s currently supported hardware, from iPhone through to iMac.

Furthermore, Responsive Design Mode allows you to mimic other browser software such as Google Chrome, Firefox and Microsoft Edge.

Safari’s Responsive Design Mode makes testing your website under different hardware and software environments quick and easy!

To use Responsive Design Mode you need to set Developer mode on in Safari.

Go to the Safari, Preferences menu option, click on the Advanced tab.

At the bottom of the window check the box for ‘Show Develop menu in menu bar’.

The Develop menu is added to the menu bar. Close the Preferences.

Now, when you want to test out your website in EverWeb, hit the Preview button and select Safari.

The currently selected web page will preview. Now go to the Develop menu and select ‘Enter Responsive Design Mode’ (or use the Control+Command+R shortcut key)

The Browser window will change and you will see a selection of screen sizes above which are screen resolution options and browser type options.

Click on the device or screen type that you want to preview with e.g. an iPhone 8 The Preview will change to show you how your website will look on an iPhone 8. You can interact with the previewed site as you usually would do.

If you want to view your site in landscape, click again on the iPhone 8 to change its orientation.

Apple’s Safari is a great time saver that helps you easily test and preview your responsive website!