Sometimes the best way to learn and work with new methods is by actually testing them. To help you on this approach, we’ve created a tool to help you understand and play with responsive development using REM. Take a look at the stackblitz below; and if you’d like to check out the repository please visit it at Github and don’t forget to give it a like!
Here are a few key takeaways from this example:
- REM is responsive based, so if you change the font size on the parent (DOCUMENT), the REM will be responsive based on the font size of the parent.
- EM is similar to REM but instead of being responsive with DOCUMENT, is responsive based on the father element with a size declared. In this example, the header module uses EM.
- PX is the non-responsive unit. This should be set on the DOCUMENT level only.
A great benefit of using this tool is that it will help you easily identify key characteristics within your product such as good scalability, component flexibility, overall behavior, and reading experience that will allow you to review your application’s compliance with mobile accessibility standards even from an early point in your development. If you’d like to learn more about mobile accessibility improvements, don’t forget to check out our accessibility guide.
Now that you’ve seen the tool in action, let’s quickly recap some of the benefits of implementing REM in your own projects.
- Your team will easily be able to test how your product performs across different devices
- You’ll be able to quickly spot any resizing issues before release to better optimize your product for your end users
- Previewing your designs early on in the project will give your team a leg up in the implementation project
You can always add this tool to your bookmarks! And share it with your colleagues that might find this useful.
Creating digestible, visual examples can provide realistic insights to those members on your team who might not be as immersed into the reasoning behind coding and back end decisions, so by following an easy to understand approach you’ll be able to bring your entire team together. Failing to do so can result in draw backs and miscommunications, so make sure to align correctly and see the results of having everyone on board!
