This post was most recently updated on June 17th, 2019
Responsive web design is web application designed with respect to all the shapes and sizes of the different screen resolutions of desktop and mobiles in the market.
With different technologies, various OS, and its multiple screen sizes demands that the website or application should have tested for the responsiveness.
Scenarios / Test cases for responsive testing are-
1. Content fit – The content should fit properly as per the screen resolution.
2. The images and videos should properly rendered in the mobile responsive screen
3. Videos should play properly on the mobile responsive screens
4. The text,color and font should be same on different screen sizes
5. The UI should render properly while zoom in and zoom out the screen
6. The scrolling multiple times should not impact the UI or functionality
7. Navigation of the Links, buttons should be proper
8. The UI and functional behavior of the app should be same in portrait and landscape view
9. Links should be clickable when screen zoom out
The device matrix for reference where we can perform cross browser testing and mobile responsive testing.
| Desktop ( Desktop mail client – Outlook / Desktop web-mail – Outlook ) | |||
| Windows desktop | Version | Screen size/ resolution | |
| 1 | Desktop -Bigger screen | Latest version | 1920 * 1080 |
| 2 | Desktop – Medium Screen | Latest version | 1920 * 1080 |
| 3 | Desktop – Small screen | Latest version | 1366*768 |
| Mobiles/Tabs/Laptops | |||
| iOS | Version | Screen size/ resolution | |
| Phones | |||
| a | iPhone XR | 12 | 6.1” |
| b | iPhone SE | 11 | 4” |
| c | IPhone 7 | 10 | 4.7” |
| Tabs | |||
| d | iPad pro | 12 | 12.9” |
| e | 10.5-in. iPad Pro | 12 | 10.5” |
| f | iPad mini Pro | 11 | 7.9” |
| Laptops | |||
| g | Mac book | 12 | 12” |
| h | MacBook air | 12 | 13.3” |
| I. | MacBook pro | 12 | 15.4” |
| 2 | Android Os | ||
| Phones | |||
| a | Galaxy Galaxy note 9 | 8.1 | 6.4” |
| b | Galaxy S9 | 8 | 5.8” |
| c | Galaxy S8 | 7 | 6.2” |
| Tabs | |||
| e | Samsung Galaxy Tab S4 | 8 | 10.5” |
| f | Samsung Galaxy Tab S3 | 7 | 9.7” |
| 3 | Laptops | ||
| a | Windows laptop | Latest version | 14” |
| b | Windows laptop | Latest version | 13.3” |
