Display Browser Chrome on Static Mock-ups

In order to accurately show your static designs in context, make sure to show the browser chrome (URL bar, navigation bar, utility bar, etc) on your device mock-ups. This helps remind you, your colleagues and your clients that this is indeed a mobile web experience and not a native app.

More importantly, including browser chrome removes the false impression that you have the device’s full screen real estate to work with. Designers creating static boards can easily fall into the trap of thinking there are “standard” screen widths and heights (i.e.320×480). There aren’t, especially when you take into account that many times webpages are viewed inside the chrome of native apps (Facebook, Twitter, et al).

You can hide the URL bar for certain platforms and yes you can remove the navigation bar in iOS in once added to the homescreen (beware of this as it can break your navigation), but don’t use these reasons to design yourself into a corner. Things are prone to change as shown by iOS5’s introduction of tab chrome for iPads.

Think fluidly, don’t get married to specific resolutions and account for the chrome of the browser.