3 ms·

Buried in there is a tool for a quick view of any site across laptop, tablet and smartphone form factors: http://material.io/resizer/ http://material.io/resize

Buried in there is a tool for a quick view of any site across laptop, tablet and smartphone form factors: http://material.io/resizer/ http://material.io/resizer/ I've never seen this tool before and don't know if it's new with this site, but it is amazing and I'll be using it a lot from now on! Edit: Thanks for the references to the browser dev tools, which clearly are more appropriate for development - I intended rather more emphasis on the quick view part being the amazing thing, as in lining the three up side-by-side with a nice skeuomorphic ui, and being able to share a link that just works for demos to people not familiar with their browser's dev tools.

alexbock 10y ago
Safari has this built-in under "Develop->Enter Responsive Design Mode" (⌥⌘R). The Develop menu can be enabled from the Advanced tab of the Preferences window. Firefox appears to have a "Responsive Design View" (⌥⌘M) as well.
SippinLean 10y ago
A similar (better) tool is baked into Chrome devtools
- bsimpson 10y ago
  Resizer is linkable, so it's easy to share with your colleagues in design and product. If you're a developer actively working on your own machine, DevTools is probably the better tool for you.
jordache 10y ago
umm this is just showing a responsive page in iframes of various dimensions.. The smartphone one is especially bad with browser scrollbars throughout. You can accomplish the same simply by resizing your browser, or achieve even better preview by using chrome's dev tools' device emulation feature.
telesilla 10y ago
I agree: while I use the Chrome tools for resizing, this is a lovely interface you could use to impress a client.
- jordache 10y ago
  Just get a mock up photo of an iphone. Put an iframe inside of it and voila. Zero magic. Just some prep work
macandcheese 10y ago
Emmet Re:View is an extension that gives you a "device wall" of your site (local or live) across all different viewports - very helpful! https://chrome.google.com/webstore/detail/emmet-review/epejoicbhllgiimigokgjdoijnpaphdp https://chrome.google.com/webstore/detail/emmet-review/epejo...
idid 10y ago
And, guess what, it works with http://localhost:* http://localhost:* too! It's brilliant. Thanks for the tip. As mentioned previously, I think it's super nice non-development related tool.

alexbock 10y ago

Safari has this built-in under "Develop->Enter Responsive Design Mode" (⌥⌘R). The Develop menu can be enabled from the Advanced tab of the Preferences window. Firefox appears to have a "Responsive Design View" (⌥⌘M) as well.

SippinLean 10y ago

A similar (better) tool is baked into Chrome devtools

bsimpson 10y ago
Resizer is linkable, so it's easy to share with your colleagues in design and product. If you're a developer actively working on your own machine, DevTools is probably the better tool for you.

jordache 10y ago

umm this is just showing a responsive page in iframes of various dimensions.. The smartphone one is especially bad with browser scrollbars throughout. You can accomplish the same simply by resizing your browser, or achieve even better preview by using chrome's dev tools' device emulation feature.

telesilla 10y ago

I agree: while I use the Chrome tools for resizing, this is a lovely interface you could use to impress a client.

jordache 10y ago
Just get a mock up photo of an iphone. Put an iframe inside of it and voila. Zero magic. Just some prep work

macandcheese 10y ago

Emmet Re:View is an extension that gives you a "device wall" of your site (local or live) across all different viewports - very helpful! https://chrome.google.com/webstore/detail/emmet-review/epejoicbhllgiimigokgjdoijnpaphdp https://chrome.google.com/webstore/detail/emmet-review/epejo...

idid 10y ago

And, guess what, it works with http://localhost:* http://localhost:* too! It's brilliant. Thanks for the tip. As mentioned previously, I think it's super nice non-development related tool.