Designing responsive websites has 2 sides to it, it means clients can have a site that works on all size screens and devices and Google will like this. But the downside is having to check and make changes for the all the different screen sizes.
I mainly use the Divi theme and within that there are options for changing sizes of fonts, dividers, images etc by desktop / tablet / mobile, but it doesn’t always get it right. It means I needs to actually see the site on lots of different devices.
Testing your website on different screens and devices
I use Screenfly to do this, as you can choose a device and see the live site on it. Go to the site and drop in the URL of the site you want to test.
The options you have for viewing are
1 – Different devices and within those tabs are various screen sizes
2- Refresh the site if you make changes
3 – Rotate the screen, so you can choose an iPad and see it in landscape and portrait
4 – Allows you to scroll down the page that is loaded
You can see any issue with text and spacing and then correct them on your site and refresh on Screenfly to check again.
Seeing your website on a mock-up of different screens
This can be useful for displaying your site, I use Techsini you put in your URL and it will display it on the mock-up. If you want to use this elsewhere you can do a screen grab of the page. It also allows you to change the background colour.
