Design: Specs & Responsiveness

Before handing off design specs to development, check if you’re considering all the necessary viewports and breaking points. Access Github Repo.
development-workflow; good-practices; documentation; specs;
Checks are saved in your local storage

Viewports and Breaking Points

Here is a list of viewports and breaking points for most common platforms to check your design specs for responsiveness. Remember to check all the important ones your software should be working on and if they're not here, add them to the list ;)
  • Mobile phones (width between 320px and 576px)

  • Tablets (width between 768px and 992px)

  • Medium Desktops (width between 992px and 1200px)

  • Large Desktops (width between 1200px and 1920px)

  • Ultra Wide Desktops (width is more than 1920px)

  • TVs TVs work with a 16:9 aspect ratio. Normally when you're dealing with Smart TVs, the minimum width is 1920px, but that can increase dramatically, so check this further before starting a TV project.

  • Wearables

    • The line of products and wearable displays is changing fast since it's a new market, so research is very recommended since there is no fixed standard. Pixel density and aspect ratio varies a lot, so check for your specific case when designing for wearables.

Yay! You completed the checklist top to bottom!
Now spread the ❤︎ by thanking the author, making improvements or creating you own checklist!