ish.

What

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. Or, if you’re feeling saucy, choose Disco Mode to watch the viewport bounce around like a maniac.
  4. Watch as the site resizes and look for any visual or functional oddities along the way.

Who

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

Where

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

16 Comments

  1. Neil

    Yeah pretty nice Brad, I like the the randomness of every size, should definitely help get away from the idea of expected screen sizes. Even myself when I hit ‘S’ first time was thinking “that doesn’t look like 320px…” so yeah I like this.

    Any chance of bookmarkletising it?

    Also, you said top right for the URL, not top left…

  2. Brett Jankord

    I like it. Nice, simple, and easy. I especially like that you went with S, M, L, XL instead of mobile, tablet, desktop. I think this is a more accurate measure when talking about web capable devices.

  3. Dean

    I created some viewport mixins for a work project, I think going abstract is the way forward.

    I went with chucky, rancor, megatron, and clover. Hurrah for movie monster sizes.

    http://www.geekstir.com/movie-monster-size-comparison

  4. Alex

    Great Idea. Great Tool.
    Question: where M,L,S sizes are coming from? Currently I see that S – is 203px, M – 667px ?

    Thanks !

    • brad

      The sizes are ranges. So clicking the S, M, L, XL buttons will give you a rough size, not a specific dimension every time. The idea is to break out of the 320, 480, 768, 1024 bucket mentality.

  5. Alex

    ah. Thanks. Random feature is very handy 🙂

  6. Chris Ruppel

    Brad, this is a really great tool. I’m loving how the URL field accepts my local dev environments so I can do this on the fly while I develop.

    As other have pointed out, the controls specifically avoid the typical breakpoint mentality, and I think we all agree that it’s better to avoid limiting your assumptions to a handful of device dimensions. Dean mentioned using abstract breakpoint names which could definitely help get away from device dependence.

    With Sass+Compass there’s even more flexibility at your fingertips. Using an extension like Respond-to lets you set many meaningful breakpoints all catered to your content instead of relying on a small, finite number of absolute layout changes (even if you’re avoiding specific device dimensions, four/five hard breakpoints can still limit your design sometimes).

    So you can have nav-sm, nav-lg, headline-sm, headline-lg, grid-max, ultrawide-monochrome, or any other threshold your content calls for. Because it’s all about designing for content not breakpoints, right?

    Check it out: https://github.com/snugug/respond-to

  7. Rik

    I used the disco button in a presentation. Hammered the point home.

  8. Aaron Gustafson

    Well done as always Brad!

  9. Scott Birdsey

    Fantastic teaching tool – thanks Brad –

  10. Eric J. Davis

    Thanks, Brad. This is great. Enjoying Disco mode on a Friday.

  11. Lewis Cowles

    I really like this tool, the one thing that niggles me is the un-justified text, it’s hurting my eyes

  12. Datu

    Love Disco! 🙂

  13. Nate

    What is the format for entering a custom size? I’ve tried many formats – 320px, 300×200, etc. – and I get an error message stating “Please match the requested format”.

    What is the requested format?

  14. Clayton

    The format for entering a custom size is just putting in 1 number to be the length. For instance “1000” works just fine. You cannot put a height, as that is dictated by the width.

  15. Chris

    For anyone wanting a bookmarklet, simply create a bookmark and use this as the URL:

    javascript:location.href=’https://bradfrost.com/demo/ish/?url=’+window.location.href

Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.