How your Responsive Website Looks on Different Devices?

Published in: Web Design

A good number of websites - including the one you’re currently reading - are now using Responsive Web Design instead of building separate designs for mobile and desktop screens. The same design is served to all devices – including desktops, tablets, mobile phone, e-readers and even gaming consoles - and the layout magically adapts itself based on the screen’s resolution.

Also read: Responsive Web Design - A Dummies Guide

mobile responsive design

How to Test Responsive Design Websites

The best part about responsive websites is that you test the design in your desktop browser itself without requiring any mobile emulators. For example, the iPhone is 480x320 pixels in landscape mode and if you resize your web browser to that exact size, you’ll get a good idea of how your website looks like on the actual device.

Then there are tools available that will help you test your responsive design across all popular screen resolutions (or devices) from one place.

  • – You can use this tool to quickly test your site layout against standard screen widths (or breakpoints). The source code is available on Github and you can thus expand it as per your requirements.
  • – This is my favorite tool for two reasons – it supports a much larger number of screen resolutions (including TVs) and second, Screenfly sends proper user agent strings while requesting web pages for different devices. Thus you get the best of both worlds (see notes).
  • – Another nicely-done tool to help you understand how your responsive site will look on the most popular devices in various orientations. It can replicate the iPhone, iPad, Kindle and Android smartphones.

screen resolution

PS:Some websites – like or – use the Same Origin policy for the X-Frame-Options header and thus, in simple English, they cannot be embedded inside an IFRAME. However, you can still use Screenfly to test their designs as this tool sends the fetch request behind a proxy server and doesn’t just render pages inside simple IFRAMEs.

See more ways to test your mobile websites.

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Web Design

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube