Responsive design testing

Responsive design testing

How to test your responsive design for different device

Notes on responsive design testing

Testing your responsive design

With the built-in tools in Safari & Chrome, you can test your website’s responsive design and preview its effects on different device. Apart from the common aspect ratios such as 16:9 (For desktop/non-Apple tablets), 4:3 (iPad), ~20:9 (iPhone), some new aspect ratios for foldable phones could also take into consideration when coding your responsive design.

Testing Responsive Design on Chrome

To test your design using Chrome you may simply hit F12 or right click anywhere on your webpage and hit inspect.

“Inspect Option in right-click menu”

Click the icon beside the “Element” text label

Click icon

That’s it! You may now test out your design and choose the target device in the upper menu

Choose your target device

You may also add custom device for special aspect ratio

Add custom device

Testing Responsive Design on Safari

Testing on Safari is as simple as on Chrome with just extra few steps

1. Open Safari and open Preference

2. Navigate to the “Advance” tab

3. Enable the bottom option for “Developer” tab

4. Back to your webpage and navigate to the new “Developer” tab to enter “Responsive Design Mode”

5. You may now play around with your website with different device settings

Extra 1. Click on the same icon for iPads to preview your website in multi-task views

Extra 2. Click on the same iPhone icon to switch between landscape and portrait views

Extra 3. Use these buttons to adjust your preview screen size freely