1

In short, I want to analyse a number of web pages, let's say, specifically homepages of Vox and HBR (but also a dozen others).

1) I want to figure out how much screen real estate they're giving to different categories, mediums, ads, navigation, etc. Eg, 25% of a the page is dedicated to featured stories, 15% is dedicated to audio/video.

2) I might break it up between above and below the fold, or hypothetically even try ways of weighing it according to a scroll map.

What's one way to do (1)? What might be a simpler way?

  • Simplest way is to take a screenshot and use Photoshop/Paint/etc to count pixels. If you are looking for an application to do that for you, software recommendations are considered off-topic on this site. – locationunknown Jun 25 '18 at 12:09
2

As far as I am aware there is no quick and easy tool to do this for a bunch of pages - just patience and mathematics

Grand a screenshot of the page you want to analyse.

Calculate the full area in pixels of the page that you want to analyse (width px * height px).

Page wireframe with whole area selected

Calculate the area in pixels of the element you want to analyse.

Page wireframe with single element selected

100 divided by the full area will give you the percentage covered by a single pixel - then multiply that by the element area to get the percentage of the page used by that element: (100/page)*element = % used by element.

In the example images above, the banner is roughly 13.5% of the page area

If you're thinking of doing this as a part of a design/ux audit then I would suggest doing both the full page and the 'above the fold' areas.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.