ish. 2.0

I’m happy to introduce ish. 2.0. For the uninitiated, ish. is yet another viewport resizing tool. It’s called “ish.” because it focuses on general ranges (small-ish. medium-ish. large-ish.), rather than popular device widths. It’s our jobs as web designers to make sure our interfaces look and function across all screen sizes, and ish. is here to help.

Here’s what ish. includes:

Disco Mode

‘Disco Mode’ is a fan (and client!) favorite because it’s the ultimate stress test for your designs. Disco Mode randomly contorts the viewport to all sorts of random values, which is important to test the resiliency of your designs.

Hay! Mode

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! –Stephen Hay

Stephen’s advice to let content, not device breakpoints determine breakpoints is sound. So to honor him I created Hay! Mode, which starts at the minimum viewport size and slowly but surely expands until it’s time to stop. Simply hit the Hay button again (while audibly shouting “Hay!”) to stop it. Take note of the viewport dimensions and dive back into your CSS. And speaking of getting the viewport dimensions…

Pixel-to-Em Converter

Translating px units to ems and vice-versa can be a pain in the ass. There are lots of great calculators out there, but this thing is built right into the tool.

What I’m most excited about is that you can easily change the value of the viewport to any screen size, and use your up and down arrows to fine-tune the value. Step up and down while focused in the em field to change the viewport 16px at a time, or step up and down through the pixel field for ultra-fine control. That way you can easily hunt down those pesky 1px instances where your design breaks.

Ish. pixel-to-em units in action

Manual Resize

Thanks to the efforts of Dave Olsen (@dmolsen), ish. now has a manual resize mode, which I use all the time. It’s great, and doesn’t require you resizing your entire browser window to get a smaller display.

Ish Manual Resize

Saved State

Dave also did some phenomenal work getting ish.’s viewport to stay at its current value even after refresh. This way you can see where your design is breaking, make the necessary tweaks, then refresh in the exact same state.

I’ve also added states so that you can share a website with Disco Mode or Hay Mode switched on. Fun for the whole family!

Integrated with Pattern Lab

A lot of ish.’s new features were first implemented in Pattern Lab, a tool Dave and I made to create atomic design systems. Now, at face value it seems like ish. is a weird addition to a pattern library, but I can speak from experience that it’s proved to be an invaluable tool for everyone involved in the project. Here’s what makes it awesome:

  • It gets people to speak the right language–There’s nothing more satisfying than hearing a client say “on small screens…” Small screens. Not “iPhone view.” Not “mobile view”, “iPad view”, and “‘web’ view”. By abstracting viewport sizes to “Small, Medium, and Large”, clients and colleagues become more considerate of the myriad viewports we’re designing for, rather than just the gadgets they have in their pockets.
  • Resolution testing is baked into the process–A lot of responsive projects I’ve seen put off testing smaller screen sizes until the last minute. With ish. built into Pattern Lab, it’s easy to consider the entire resolution spectrum the whole way through the process.
  • Ensure molecules and organisms work across the board–It’s important for our components, not just pages, to be flexible across the board. Baking a viewport resizing tool like ish. into a pattern library ensures each element is flexible. This will become especially important in the future when element queries and web components are things.
  • Designers and clients can give better feedback–Instead of vague feedback, designers and clients can now get really specific (“At 604px the navigation drops beneath the logo” etc). This makes communication between disciplines so much better.
  • Development tool–and oh yeah, ish. is a pretty great developer tool. Real-time px-to-em conversion, resizing, Disco Mode, and the rest of it helps me be a better web developer.

Now’s the time where I remind you that viewport testing is no substitute for device testing, and that there’s a whole bunch of things that you can only learn by testing on real devices. That’s entirely true. But with that being said, viewport testing is extremely helpful while you’re doing your initial design and development to make sure things aren’t totally out of sorts.

You can get ish on Github, or just use the demo.