Testing Mobile Web Sites(Responsive Web Design) Using Firefox

Responsive web design is a good way to make a website mobile-friendly, allowing us to adapt layouts according to device screen size.

Testing of mobile websites or responsive pages on your desktop with different mobile devices is a question we get quite often. There's a huge amount of devices out there and you need to make sure your sites work fine for the majority of them.

Modern web browsers are more developer friendly, by providing Developer Tools to make web development easy.In other browser you need to install some plugin to test responsive pages in different mobile devices, but Mozilla browser comes with a feature, which allows to test the Responsive Web design without using any plugin.

Testing with Firefox Responsive Mode

Available since Firefox 15, the responsive mode, also called responsive design view, is a mode especially built to test the mobile version of a website.

You can activate responsive mode in firefox browser by the steps mentioned below.

Step 1 . Launch Mozilla Firefox 15 or above.

Step 2 . Browse the website which you wish to test. For example – I am going to use my website url(http://www.javawebtutor.com/articles/hibernate/hibernate_hql_select_delete_update.html) for example purpose. this page is optimized for all mobile device.

Screen shot of Website in desktop is given below.

desktop view

Step 3 . Click on Tools tab of the browser, and select Web Developer –> Responsive Design View or the keyboard shortcut Ctrl + Shift + M as shown below to load the Responsive Design View.

desktop view

Step 4 . Select different resolutions(Device width and height) from the dropdown control on the left corner of the browser to test the website in different devices.

Suppose I want to test the page in Samsung galaxy S4, then you need to select 360*640 from the drop down because Galaxy S4 resolution is 360*640.

desktop view

Now consider you want to test your website in IPhone 6, you need to change the resolution to 375 x 667. This resolution is not available in the dropdown so you need to manually type the resolution then press enter.

Changing the view from Portrait to Landscape or vice versa

Responsive web view also allows to test Portrait or Landscape orientations. You can Click on rotate button, which toggles between the orientations as shown below.

desktop view

Landscape view of same page is given below.

desktop view

Testing of Touch Events

The far-right button in the Responsive Design View allows you to take a screenshot of the current view and next to this is the ‘Simulate touch events’ button.Using this button, you can translate mouse events into touch events. This way, if you click on the view with your mouse, Firefox won’t send a mouse click event but a touch event. This translation can be useful if your website or application needs touch events.

desktop view

This tip will allow you to browse mobile web sites or test them out from your PC.

Related Articles

  1. Maven Overview
  2. Maven pom.xml

comments powered by Disqus