Two new exiting tools have just landed in Firefox 15: Responsive Mode and Layout View. These new tools will help web developers test their responsive websites in different screen sizes right within the browser.
Responsive Mode provides an animated web-view within a window. The small inner window, which mimics the viewport of a device, includes a drop down menu with some common screen sizes, using these you can quickly resize a website and test its responsive design without actually resizing the Firefox window. Some predefined sizes are 320×480, 360×480, and 1920×900. For a custom screen size, just drag and resize the small window.
You can also change the orientation of the inner window to see how your layout looks in landscape or portrait mode. This tool is not a substitute for actual device testing, but it’s handy for quickly testing mockups.
Responsive Mode is accessible from the Web Developer menu: Tools > Web Developer > Responsive Mode, in Firefox 15.
If you’d like to try out this tool, grab the Firefox Nightly Channel from the download link, or if you’d like to see it in action without downloading, check out this demo video:
Download: Firefox Nightly
|
|
Tweet |