10

Ask DN: Feedback on Thwock (responsive development tool)

over 7 years ago from , ripe.com

Thwock is a tool to showcase and test design solutions across different display dimensions.

It's still a work in progress but we would love to get any comments or feedback.

View a demo here

View on github

This is a product of ripe. In addition to testing, we’ve found this tool useful to show the responsive of designs to our clients.

15 comments

  • Clark WimberlyClark Wimberly, over 7 years ago

    Another idea: maybe the tool could show an array of devices all at once? I feel like seeing an overview might be even more useful than hopping from device to device.

    Great start!

    3 points
  • Clark WimberlyClark Wimberly, over 7 years ago

    Looks useful for client presentations, but for testing I'm not sure how this would beat the tools in the "Inspect" window of Chrome.

    For testing, I really like how Brad Frost did it, with "random" and "disco" modes for testing at weird sizes: http://bradfrost.com/demo/ish/

    3 points
    • Jonathan SimcoeJonathan Simcoe, over 7 years ago

      Really dig this!

      0 points
    • Paul BestPaul Best, over 7 years ago (edited over 7 years ago )

      In our experience, it's useful as a secondary testing tool to validate the responsive system and prioritize small visual glitches.

      Because it lets you toggle the site in context between devices w/o using more accurate but cumbersome tools (ie iOS simulator), you can verify that the system works well at key inflection points (aka popular devices). With limited testing time available on client projects, it's a useful barometer.

      However, we'd agree that it's not able to replace other testing tools. The Brad Frost thing is awesome (as most of his solutions are)

      0 points
      • Clark WimberlyClark Wimberly, over 7 years ago

        You don't even need an iOS simulator though. Literally everything this tool does is built right into Chrome (and Safari, and others), just a few clicks away. Chrome has all the popular devices built in, along with things like tweaking pixel ratios and screen sizes. Have you played around with that? It's really neat!

        I can admit that your's looks a whole heck of a lot nicer, though.

        1 point
        • Paul BestPaul Best, over 7 years ago

          Hadn't actually played with it yet. Ya, that is a much better way to test.

          This was initially envisioned as a showcase tool to create screenshots for our portfolio, and then we saw the potential in showing off sites to clients or presenting coded designs with this tool. The testing usecase was just a happy accident. Thanks for pointing out the chrome tools!

          0 points
  • Steve Berry, over 7 years ago

    Neat! I am going to use it for some mockups. Being able to quickly save a JPEG would be nice.

    3 points
    • Paul BestPaul Best, over 7 years ago

      Steve,

      Thanks for your comments! At the moment, we're trying to keep the tool 100% client side so that people can easily stand it up on their own servers without too much work.

      This is because sites often have cross-domain security policies that prevent iframes from setting them as a source. For sites like this, you'll need to set up Thwock on your own server so that the domain source is the same.

      If anyone knows of a client-side screenshot generation method, please let us know! We haven't found one yet.

      0 points
  • Jonathan SimcoeJonathan Simcoe, over 7 years ago

    Dig it.

    1 point
  • Jaime SelvaJaime Selva, over 7 years ago (edited over 7 years ago )

    Looks very useful (for presentations), but with initial transitions doesn't work, for example with my new website. Besides, I recommend you change the button label "Screen" to "Check URL".

    1 point
    • Paul BestPaul Best, over 7 years ago (edited over 7 years ago )

      Jaime,

      Thanks for your feedback. We'll be considering the UX of that button as the tool evolves.

      The reason your site is not working is because of 'Content Security Policy'. Thwock pulls in external sites as iframes. There are certain rules restricting sites from being used an iframe's source. Webflow.io is denied because of its 'frame-ancestors' parameter. See here for more info

      If there's a better strategy than iframe for the external sites we're open to it, but security policy is usually not something you can, or should, get around.

      1 point
  • Gavin McFarlandGavin McFarland, over 7 years ago (edited over 7 years ago )

    Love it, thanks for sharing. Very nice to be able to see from a distance what my design looks like at different resolutions. +1 for being able to see several devices side by side.

    0 points