Giter VIP home page Giter VIP logo

am-i-responsive's Introduction

am-i-responsive

A high fidelity preview of your responsive design across Desktop, Laptop, Tablet and Mobile.

I take a lot of screen shots of the various device breakpoints for responsive design and it takes a while to prepare them. This tools allows me to get what I need quickly, and hopefully it can be helpful for showing your more visual clients what you mean by responsive design when a suite of products isn't at the ready.

This is not a tool for testing, it is really important that you do that on real devices. This instead is a tool for quick screenshots (for me) and to visually allow people to “get” what you mean in client meetings.

How it works

Add your URL to the input field and press GO! to see how your website looks across a few different viewports.

Viewports

  • Desktop
  • 1600x992px scaled down to scale(0.3181)
  • Laptop
  • 1280x802px scaled down to scale(0.277)
  • Tablet
  • 767x1024px scaled down to scale(0.219)
  • Mobile
  • 320x480px scaled down to scale(0.219)

A note on the vieports

The viewports I have chosen are based on the devices that were a part of the responsive PSD layout I previously bought. Apologies to all the Adroid fans out there, you can save the “Adroid has a bigger market share” because although you're right I just don't care. Plus if you're going to use this to sell RWD to new clients they're likely to be more familiar and wow'd by Apple stuff anyway.

Updates

  • 10/02/13 Updated so that pressing enter after adding a url will use the ?url get variable to update the iframes. This also means that you could share a link like http://ami.responsivedesign.is?url=http://www.thegreatdiscontent.com and it will load it up, helpful for emailing clients.
  • 09/02/13 Added jQuery UI for the ability to drag the elements around the page. Remember that the
    's are more than the visible image so you might need to play around a bit with where you can click. Thanks Tim.
  • 09/02/13 update the layout to be responsive across devices (even though it was just a tool for screenshots), although the iframes are WAY taller on tablet and iphone then they should be, still need to fix that... thanks @silentritual & @amberweinberg.
  • 09/02/13 Scroll bars removed from tablet and mobile, cheers @benbrignall.

am-i-responsive's People

Contributors

justincavery avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.