The
Firefox web browser isn’t as much of the web world’s darling as it once was seeing how quickly
Chrome has gained adoption, but they’re still releasing new, interesting, and often useful features in their updates. The latest is the 3D View that they’ve added to their Inspect tool (a feature that is quite useful for web developers).
In short, the Inspect tool allows people to view a webpage’s structure, content, styling, and additional information in a much more digestible way than simply looking at the site’s source code (speeding up both development & testing).
The 3D viewer augments the, already useful, Inspect Element tool with the ability to view a webpage in full 3D with each of the site’s components busted out to help visualize the pieces that make up any given page. At first, this seems like an “ooh shiny” add-on feature, but revisiting it a few times showed that it can help people understand how a page is built at a much deeper level at first glance than most other tools. Users can see all of the wrappers, buttons, images, etc. that a page consists of without having to look at any code or navigate any DOM trees… it actually can be a valuable tool.
I could go into further detail covering what all a DOM inspector does for web development, but I’d like to give some examples of popular sites/services with a head-to-head comparison of a competitor so you can see, at a glance, what kind of differences the 3D viewer exposes in terms of how a site was built.
*All sites were set to the default scale & turned to show depth.
** Warning: Some of what you’re about to see isn’t pretty.
Microsoft vs. Apple
Google vs. Bing vs. DuckDuckGo
GoDaddy vs. Namecheap vs. Hover
Constant Contact vs. Vertical Response vs. MailChimp
DotNetNuke vs. Drupal vs. WordPress
Digg vs. Reddit
Facebook vs. Twitter
HRB (we have to include ourselves, of course)
Speaking as a web developer, this is just one way to help demonstrate that advanced functionality & interactivity doesn’t always have to succumb to complexity.