File Under: Responsive Design

Focus on Content, Not Screen Size With ‘Ish’

Webmonkey in “Ish” (not even remotely responsive-ish). Image: Screenshot/Webmonkey

There are, according to developer Brad Frost, some 19 viewport testing tools available for checking out your responsive web designs at various screen sizes. That did not, however, stop Frost from building his own, slightly different, responsive design viewport tester — Ish.

Frost’s Ish is different in that it doesn’t showcase specific devices; instead the size options are small-ish, medium-ish, large-ish. Even better, clicking S, M or L will not always get you the same size viewport. Click small once and you might see your design at 320px, but click it again and it might change to 216px.

The point is to not get hung up on how something looks on the latest iPad or the new Nexus, but to make sure your breakpoints are suited to your content and that your design looks good no matter what screen it’s on. Here’s Frost’s reason for building Ish:

The real reason 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.

Using Ish is simple; just head to the demo page and click the URL button in the upper left corner. Plug in your site’s address and once it loads you can start playing with the size button in the upper right corner to test how your site responds. Be sure to try the “disco” option, which will make the viewport dance around between sizes (and if you must, you can plugin a specific screen width).

If you’d like to grab the code behind Ish for yourself, head on over to GitHub.