Testing responsive design

Question

I'm working on a website using HTML, CSS and JS, and I use Bootstrap to make it responsive. I need to test it to see how it looks on different screen sizes. How should I test it? Should i use Google devtools or some other smartphone emulator?

Thanks!

Just open it in your browser and make the window smaller? :D — Niet the Dark Absol, Jan 06 '16 at 09:04
Noticed scrollbars when I tried that :/ I'm gonna try siobhan's solution — Mitch Tal, Jan 06 '16 at 09:07
So? Responsive design isn't just for mobile devices, it's also relevant for people on computers with lower resolutions, be it due to using an ancient monitor or they have vision problems and need everything to be bigger. They get scrollbars. — Niet the Dark Absol, Jan 06 '16 at 09:09

score 4 · Accepted Answer · answered Jan 06 '16 at 09:09

There are various browser tools to test responsive page.

For chrome - https://chrome.google.com/webstore/detail/browser-resize/pnmdcoaajafdppfpioijldebfbpogopn?hl=en-GB
For Firefox try "ctrl+shift+M". It will turn browser screen re-sizable. Using drop-down on left-top specific height-width can be defined.

score 0 · Answer 2 · answered Jan 06 '16 at 08:47

0

Mitch, if you have it save, you can open it on a normal browser e.g. Chrome or Firefox and test it there (control + o and select the file from your computer). Great thing about HTML and web design is that you only need an editor and a browser to test before it is published

answered Jan 06 '16 at 08:47

Siobhan Holubicka

147
1
4
17

Thanks for your quick reply, I'm aware that I can open the site and see how it runs, but I'm going to see it on my 17" screen. Will your solution help me see it as it'll appear on a 5" device? – Mitch Tal Jan 06 '16 at 08:53
use chrome and enable Emulation – KennyXu Jan 06 '16 at 08:59
Thank you! Sorry. I'm new to this. – Mitch Tal Jan 06 '16 at 09:00

score 0 · Answer 3 · answered Jan 06 '16 at 09:18

0

I believe that chrome has an option where you can set different size parameters for this very reason.

This plugin should surfice here

answered Jan 06 '16 at 09:18

SamCramphorn

143
1
2
14

Just as user3807099 suggested, thanks mate! – Mitch Tal Jan 06 '16 at 09:19
I didn't check that link, no problem. Good luck! – SamCramphorn Jan 06 '16 at 10:11

Testing responsive design

3 Answers3