Know the Complexity of a Website’s Design Easily with Firefox

July 11, 2013

When it comes to web developing, I still use Firefox with Firebug add on, despite Firefox, Chrome and Opera having their own “Inspect Element” built in. One of Firefox features can also be used to determine how “complex” or heavy a websites design actually is.

If you would like to know how complex a websites design is, Firefox’s own developer tool comes in handy – more specifically, its 3D view button. Once any website loads up in Firefox, right click on the webpage and select “Inspect Element”. In the developer tool section, click on the cube (which says 3D view) on the top right corner of the section.

Once you are in the 3D view, use your mouse, scroll button, arrow keys and even the WASD keys to control the 3D interface. Once you bring the website horizontal, you will be able to see the number of layers the website uses, in 3D.


The complexity of the design is based on this – if you see a large number of layers, the website design is complicated. If you see less amount of layers, it is less complicated.

The general observed trend is that popular website (ex: Mashable, The Next Web, Lifehacker, New York Times, Twitter, Pinterest etc with an exception of Google) who have a separate group of web developers working on their site, have complex design whereas other smaller websites have a simpler design.

Also noticeable, are the layers that advertisements carry (which are very huge), mainly because they are iframed, through Javascript.

Subscribe for more updates!

Weekly Newsletter