DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

SBOMs are essential to circumventing software supply chain attacks, and they provide visibility into various software components.

Related

  • Five Steps To Building a Tier 1 Service That Is Resilient to Outages
  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • COM Design Pattern for Automation With Selenium and Cucumber
  • Designing for Security

Trending

  • MCP and The Spin-Off CoT Pattern: How AI Agents Really Use Tools
  • How to Reduce Technical Debt With Artificial Intelligence (AI)
  • Docker Model Runner: Running AI Models Locally Made Simple
  • Master AI Development: The Ultimate Guide to LangChain, LangGraph, LangFlow, and LangSmith
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Testing, Tools, and Frameworks
  4. Web Dev Basics: How to Verify the Responsiveness of Websites

Web Dev Basics: How to Verify the Responsiveness of Websites

Test the responsiveness of your design in a few, easy steps.

By 
rahul oberoi user avatar
rahul oberoi
·
Aug. 27, 19 · Tutorial
Likes (7)
Comment
Save
Tweet
Share
10.2K Views

Join the DZone community and get the full member experience.

Join For Free

Responsiveness is the ability of a website to render well across a range of devices, such as mobiles, desktops, and tablets. Responsive design makes a website more user-friendly, which in turn attracts more users to your website.

There are a few simple ways that one can determine the responsiveness of the website:

  • Drag or resize the browser window and verify if the content on the website is rendering according to the variations in size.

  • Using the toggle device option in browser console for mobile devices.

Let’s understand how to verify the responsiveness of a particular website in Chrome and Safari, two of the most-used browsers according to StatCounter (June 2019).

Usage share by browser (June, 2019)

Usage share by browser (June 2019)

Verifying Responsiveness on Chrome:

  • Go to the URL of a specific website on your Chrome browser.

  • Press f12 on your keyboard and open the browser console.

  • Select the Group Similar, Eager evaluation, and Autocomplete from history options, as shown in the screenshot below. 

Selecting desired options on Chrome

Selecting desired option in Chrome
  • You can change the view from desktop to mobile or vice-versa using the toggle toolbar.

  • You can view the website on various devices to verify the responsiveness of the website as shown below.

Verifying responsiveness across devices

Verifying responsiveness across devices

Verifying Responsiveness on Safari

It is very simple for a Mac user to verify responsiveness on Safari; one just needs to follow these steps:

  • Click on Safari and choose Preferences. Then, click on the Advanced tab

  • Enable the Show Develop menu in the menu bar option.

Showing Develop menu in the menu bar

Showing Develop menu in the menu bar
  • Once the Develop menu is enabled, go to the Develop menu on the safari menu bar and choose Enter Responsive Design Mode

Entering responsive design mode

Entering responsive design mode
  • After this, the user gets the option to choose from a variety of devices like iPads, iPhones, and desktop screen resolutions. With this, the user can verify whether the website renders well across various types of devices.

Checking rendering across various devices

Checking rendering across various devices

Users can also use online tools like Responsive and Screenshots, to test their websites — see the example below.

Responsive Design testing

Responsie Design testing

I found Responsive to be the right tool for me, but one can also use other tools like:

  • Responsinator

  • Screenfly

  • Ghostlab

dev Design Desktop (word processor) mobile Console (video game CLI) Evaluation Testing History (command)

Opinions expressed by DZone contributors are their own.

Related

  • Five Steps To Building a Tier 1 Service That Is Resilient to Outages
  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • COM Design Pattern for Automation With Selenium and Cucumber
  • Designing for Security

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: