How to test responsive webdesign on Firefox browser (no add-ons)?

, , , ,

 What is a responsive web design?
"Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)."


How do know if a website is made Responsive?

Just open the website in a browser on mobile device such as mobile phone or tablets. If the website is rendered so that is fits your device's screen it is. Otherwise, you will see only a partial portion of the website on the device and you might need to scroll to sides to see the end of the page.

Responsive webdesign testing from within Firefox Browser with drag feature

Responsive webdesign test tool is already included in Firefox's Developer Tools. There is no need of installing any additional add-ons to enable it. 
  • Click on the Firefox Menu Icon (top right corner) > Developer (wrench icon) or from Menu bar > Tools > web Developer
  • Select select  "Responsive Webdesign View"

Hotkey to toggle Responsive Webdesign View:

You can also start "Responsive Webdesign View" in Firefox using the hotkey "CTRL+SHIFT+M".







As you drag you can see the size and the page layout change. 

Page view at 908x640

Page view at 374x640

If the website does not have a responsive design, then the layout will not change but you will see only a part of the page. You would need to scroll to sides of the screen to see the contents on the sides.


Comment with Facebook

8 comments:

  1. Be Healthy NewsApril 6, 2016 at 5:03 PM

    Thanks for introducing about Responsive web design. It's really awesome.
    Responsive Web Design Company in Indore

    ReplyDelete
  2. Drupal Website Development ServicesMay 10, 2016 at 10:56 AM

    Really nice...
    Drupal Web Design Company in Qatar

    ReplyDelete
  3. Drupal Website Development ServicesMay 11, 2016 at 10:53 AM

    Thanks for sharing the useful information with us.. carry on
    Drupal Web Design Company in Qatar

    ReplyDelete
  4. AnonymousMay 25, 2016 at 5:01 PM

    Great representation. Thanks for sharing information about responsive web design on mozilla. your blog is rich of information.

    web design and development company

    ReplyDelete
  5. UnknownJune 1, 2016 at 3:55 PM

    Responsive Design Mode makes it easy to see how your website or web app will look on different screen sizes. Check this CU Web design hope you will like this.

    ReplyDelete
  6. RamanballaJune 2, 2016 at 4:15 PM

    Thanks for posting very useful information.
    IOS app development Qatar
















    ReplyDelete
  7. AnonymousJune 11, 2016 at 3:05 PM

    Great lists that really presents at lot of interesting examples. We are currently trying to educate our clients in Responsive Design, and I will add this to a “must read list” :)

    Cado Magenge
    App Development Companies Melbourne
    Magento Development Company
    Responsive Web Design Company Melbourne

    ReplyDelete
  8. Bangaloreweb guruOctober 6, 2016 at 4:29 PM

    The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up..
    Bangalore Web Design Companies | Website Development Company

    ReplyDelete

Subscribe to: Post Comments ( Atom )