An example showing the browser's interface:

enter image description here

and without it:

enter image description here

I'm not sure if it is to improve the visualization of the work or it is just a aesthetic thing.


  • Think of it this way; do you want me to be impressed at your design or do you want me to be impressed that you're using a Mac? – Ben Brocka Dec 21 '11 at 17:36
  • The first design (in my opinion) works better with the browser chrome, because it's not a "traditional looking" webpage. The second doesn't need it so much because the design is clearly a site (multiple columns, navigation elements, etc.). Either way, I'd include some sort of border, though, as example two just "bleeds" into the surrounding page in this case. – Daniel Newman Dec 21 '11 at 20:25
  • I would also add that if you do decide to use browser chrome, use the most minimalistic, stripped down browser possible... your fist example has distracting extension buttons on the toolbar. – Daniel Newman Dec 21 '11 at 20:28

I would not generally include the chrome, because it introduces unnecessary clutter - including such as in your example, details like other bookmarks, address bar and operating system specifics that detract from the overall context which is the content you intend to show off.

The amazon, bitly, eBay, tumblr and other bookmark icons are surplus to requirements, and although the address bar itself can initially seem useful as a way to incorporate (and convey) the URL of the page in question, that doesn't necessarily remain a constant for as long as the image is around.

My initial reaction to the first image provided is - oh - they're using an Apple OS, rather than thoughts about the content itself.

Different people use different browsers and if including the browser chrome was 'standard' we'd get a whole mish mash of different browsers and extraneous information - there would be no 'standard' standard.

Another reason not to include the chrome is that on some platforms the background is semi transparent, showing fuzzy representations of the desktop background, and would look awful if captured and displayed out of context. The same goes for browsers with the ability to customise the skin, such as with FireFox.

Otherwise, typically the chrome is just a plain old gray which is intended not to clash with any website content, but as a result does nothing to really show off a website either. Removing the chrome allows you to set off the website against a suitable background, be that black, white or anything else appropriate.

If you look at nearly all the results of Google Images search for 'web design portfolio', or you look at books like the Web Designers Idea Book, or the Taschen Icons series, there's no browser chrome ruining the views.

The only time to include the chrome is if the chrome is an important part of the information you are trying to convey - such as the positioning of an element with respect to the border frame, or the relative position of an element in one browser compared to another, but if the primary intention is to show off the content, there's no need to include the chrome - even if you are using an Apple!

| improve this answer | |
  • 1
    +1 on "oh - they're using an Apple OS". it does distract. – Naoise Golden Dec 21 '11 at 12:07
  • 1
    When I see the page framed I immediately notice the browser. It always seems to be Safari's chrome when they do this too... – Ben Brocka Dec 21 '11 at 17:35

In this particular case, screenshots excluding the browser are fine.

We may include the browser when
- a context is expressly needed or desirable
- a particular browser is referenced, recommended, etc.,
- part of the browser features (say, the address bar) is referenced
- the UI has a white background without border - use the browser to frame it
- to clearly distinguish the image as a screenshot (and not a print, etc.)

There could be more reasons. Your one page on a white background without a border still looks OK to me, that could be an exception.

| improve this answer | |

This is an aesthetic choice (which can affect UX, but isn't really a UX issue per se). However, the first thing you notice with your examples (even though the designs are so different as to make for an uneven comparison) is that the first one is neatly bordered. The first one also jumps out as a web design screenshot, rather than potentially a brochure design, book/magazine page layout, or something else.

It's a neat and clean way to provide context as well as present the URL of the webpage (though it would be preferable if the first image could be blown up on selection to make the address bar easier to see).

If I were presenting a mockup to a client, I wouldn't frame it in a browser window, but I think including it in a portfolio works for a lot of minimalist designs. But definitely choose the browser carefully, as some look better than others. I would also clean up the browser chrome and get rid things like bookmark shortcuts or 3rd-party toolbars.

The only downside I can think of is that certain people have strong biases against certain OSes and browsers, but in the grand scheme of things, I don't think it really matters. But you can always avoid IE just to be safe.

My advice is to choose the option that fits best with your portfolio design. It's ultimately an aesthetic decision after all.

| improve this answer | |

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.