tuespazio / ish. Goto Github PK

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.

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.

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 is this for? Clients. Visual designers. Developers. Really anyone involved in the project that needs educated about creating truly device-agnostic websites.

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