[Website Creation] How to check responsiveness.
Honestly, checking responsiveness is incredibly difficult.
There are so many sizes, and it never ends...
Checking on a PC,
then on a smartphone,
and checking tablets too...
👉 "What is the right way to do this?"
For those who have worried about this,
this time I will introduce a method that will make your work much easier all at once.
First, what is responsive design?
In a nutshell, responsive design is
a mechanism where the design changes according to the screen size
.
For example...
・Side-by-side on PC
・Vertical layout on smartphones
・Intermediate size on tablets
This refers to a design that changes to be easy to view for each device.
What is Responsively App?
"Responsively App" is
a tool that allows you to check the display of multiple devices simultaneously. It is completely free.
Until now, I used to check with developer tools, but with "Responsively App," you can see them side-by-side, so it's convenient!!
https://responsively.app/
By just entering one URL,
・PC
・Smartphone
・Tablet
you can display all screens at the same time.
■ How to use (Super easy)
1. Copy the site URL
2. Launch the app
3. Paste the URL
■ What is so great about it?
1. You can check all devices in an instant
Usually, you check by switching devices
using Chrome's developer tools, right?
👉 This takes a huge amount of time
But with this tool
👉 You can check everything on one screen
2. Scrolling and operations are synchronized
When you scroll one screen
👉 All other devices move the same way
In other words
・Broken layouts
・Margin misalignments
・Awkward font sizes
👉 You can notice them at a glance
3. Completely free to use
Even with such high functionality
👉 It is completely free (and lightweight)
How to add custom sizes
If a device size is not in the list, you can also add it via custom size!!
👉 Open the device list (Devices)
2. Click "+ (Add Device)"
3. Enter the following 👇
How to check code
Responsively App is
not just for checking the appearance
👉 It is also possible to check and debug code
It integrates with Developer Tools (DevTools),
・Checking HTML structure
・Adjusting CSS
・Identifying causes of layout breakage
and more can be checked on the spot.
In other words 👇
👉 You can perform design checks + code checks at the same time
is what it means.
Summary
Knowing tools that improve work efficiency significantly changes the speed of web production. First, please try out various things 😃