ui.dev Open in urlscan Pro
2606:4700:3034::ac43:bd50  Public Scan

Form analysis
1 forms found in the DOM

Name: rwdform —

<form id="rwdform" name="rwdform" class="flex items-center justify-center"><input
    class="w-96 !bg-[rgba(0,0,0,0)] border border-white text-brand-biege rounded-md py-2 pl-4 h-10 placeholder:opacity-50 placeholder:text-brand-biege focus:border-brand-biege outline-none focus:ring-0 undefined" type="url" id="url" name="url"
    placeholder="https://bytes.dev" value="https://lovesense.cam/site/mfc/"><button class="bg-white text-black border rounded font-black py-2 px-6 flex">GO!</button></form>

Text Content

SEE YOUR SITE RESPONSIVE

GO!


HOW IT WORKS

 1. Add your URL to the input field
 2. Click GO (reloads the preview) or press Enter (reloads the page)
 3. Admire your good work


FEATURES

 * http://localhost/ works so it’s great for taking screenshots of local
   development URLs
 * Send someone a link with your site already embedded by using
   ?url=http://www.yoursite.com - example


ABOUT AM I RESPONSIVE

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.


VIEWPORTS

Desktop1600x992px scaled down to scale(0.3181)Laptop1280x802px scaled down to
scale(0.277)Tablet768x1024px scaled down to scale(0.219)Mobile320x480px scaled
down to scale(0.219)


A NOTE ON THE VIEWPORTS

The viewports I have chosen are based on the devices that were a part of the
responsive PSD layout I previously bought, and yes they are all Apple. Apologies
to all the Android fans out there, I’m sure a few of you have the “Android has a
bigger market share” argument in mind but although you’re right I just didn’t
have that suite of images when I started. If there’s enough of a desire I could
do a suite of other products, but I’m just not sure if adding those will improve
the basic function of the tool.

Check out Bytes - the best JavaScript newsletter.

If you want to learn React.js, check out the best React course