Mobile responsiveness, the phrase that’s become a service offering rather than what used to be techy industry jargon used by professionals. If you’re website isn’t optimised for mobiles, then you’re putting yourself at a serious disadvantage.
Beside the point – as a website developer it is inherent in our day-to-day we test all the sites we build for their responsiveness to a whole array of devices. I know, I know, there are a thousand tools online that will test them for you, a bunch of Chrome add-ons that can automatically resize your window size to the same dimensions as whatever device.
However (and true to ‘you learn something new everyday’) I found out that Safari’s developer tools has an inbuilt functionality that will render any website to whatever screen size /device you are looking to test. I found it much easier to use than any of the other tools, or browser extensions I’ve used before and decided I had to write up this short blog post right away to tell everyone about it!
Okay, so down to the good stuff.
Make sure the ‘Develop’ menu item is enabled in your Safari browser. You do this by going to Safari > Preferences (or if you’re lazy like me, just hit Command + ,) and then going to the ‘Advanced’ tab and checking the ‘Show Develop menu in menu bar’ option.
Go to whatever website/page you’re wanting to test the responsiveness on. Go to Develop > Enter Responsive Design Mode (or again, if you’re lazy, just hit (Command + Option + R). Your window will do some magic hoo-ha and ta-da you can see your website in a bunch of various different screen sizes.
The great thing about this tool is that it allows you to also do cross-browser checking to make sure all your snazzy scripts and transitions are all working as intended.
I know I am probably missing out on some great tool that EVERYONE else is using but for me, so far, this one takes the cake!
If you have any questions regarding the development of mobile responsive websites, or even why absolutely EVERYONE thinks that it’s necessary, feel free to drop me a line at firstname.lastname@example.org, or contact us on our contact form!
Also published on Medium.