bradfrost/ish.

ish. is yet another viewport resizer

What

View Demo. ish. is yet another viewport resizer. What's with the name, you ask? Small-ish. Medium-ish. Large-ish. That's the idea. Many have long been preaching to let content, not device widths determine breakpoints in responsive designs, so rather than determining several fixed breakpoints, ish. roughs out general ranges in order to better serve the entire resolution spectrum.

Why

Do we really need another viewport resizer? After all, there's no fewer than 19 viewport testing tools out there already.

The real reasons for this tool is to educate and to facilitate a mental shift. Many clients, designers and developers get hung up on specific device widths, which is why this tool doesn't include any such language, device chrome or anything like that. Ish. helps keep everyone focused on making a design that looks and functions great at any resolution.

How

1. Find the URL button in the top left and enter any url.
2. Once the site loads find the Size button and expand the sizing options
3. Choose Small-ish, Medium-ish, Large-ish, Xtra-Large-ish, or any random size (many thanks to Jordan Moore and his Responsive Roulette for the idea). Or enter any specific value.
4. Watch as the site resizes and look for any visual or functional oddities along the way.
5. Use Alt+U to toggle in and out of Focus Mode
6. Focus Mode will remove the ish. UI and focus on the content (useful if demonstrating a site to clients)
7. Once in Focus Mode, use keys 1 - 5 to resize the viewport

Who

Who is this for? Clients. Visual designers. Developers. Really anyone involved in the project that needs educated about creating truly device-agnostic websites.

Where

You can find the project on Github. You should set up ish. on your own server or dev environment for best results.

ish.'s Issues

X-Frame-Options header issue

A lot of ecommerce sites use the header for 'X-Frame-Options' set to 'sameorigin' to guard against clickjacking. And because ish. runs a site in an iframe that header value does not allow ish to run. To test this, use https://www.amazon.com as the site and view the console message in Chrome Dev Tools.

Focus Mode Not Working

I can't activate Focus Mode. Alt-U doesn't do anything on Mac in Chrome or Safari. I've tested on two different machines. Looking at the system preferences for keyboard shortcuts, I don't see something else overriding that key combination.

I combed the ish source looking for where the keyCode was defined, but I couldn't find it.

My suggestion would be to set the keyboard shortcut as a settable variable. But if you could just point me to where to set this, I'd be happy to do it myself.

Frame resize bar isn't visible in Chrome

Chrome 36.0.1985.125, Mavericks, no extensions installed - the draggable resize bar doesn't seem to be visible.

It's there in the markup, and 'should' work, but this is possibly a bug in chrome that prevents it from being visible. If you delete the iframe from the DOM it oddly becomes visible again.

maxViewportWidth larger than physical screen width with zoom

Would someone be able to add a zoom feature, similar to Chrome dev tools - toggle device toolbar, where users could test their work on viewport widths that are larger than the actual physical screen width?

Would love to test my work on 4k screens but naturally my dev screen is not larger than 1920px, I am a poor kid and still have an old analogue TV that I barley ever turn on.

Seeing how a layout might scale on those fancy big screens would be awesome.
Is there a tool for that actually?

Demo not found

ish. demo at https://bradfrost.com/demo/ish/ is not found. 😢 Sincerely, missing Disco Mode.🕺🏽

Minor css error

The menu bar is out of alignment starting at the "S". i.e. Not flush along the bottom.

To make is nice and flush the "top" value in ".sg-controls" (line 148) should be changed from "0" to "-2".
( It should be the same as the "top" value in ".sg-code-contains code {" which is "-2" )

And thanks , it works great.
Glen

Make ish a plugin

I'd like to separate the ish interface from the task, so it can be included on any project for any purpose.

The javascript already does a pretty good job of declaring the interactive elements in variables, we'd just need to make sure these are used throughout and we can pass new values into the method.

Can't Scroll on Mobile Safari iOS7

1. Go to ish demo
2. Scroll

Expected result- page scrolls
What happens - doesn't scroll

License Type?