User Interface Design - Designing for Browser Viewports
User Interface Design - Designing for Browser Viewports
Designing / constructing a web application or web page requires consideration of several factors including accessibility, ease-of-use, visual appeal, support for challenged people etc.
Remember generally the browsers offer 60%-70% of the screen space to be used.. refered as “Viewport”. Refer the image below. The rest 30-40% is shared with the OS and Browser’s elements. So your web app/ page should display all the important user interface elements within that 60%. Anything that goes below that 60%, will get hidden but viewable once scrolled down.
So when you are starting your design in Photoshop.. remember to maintain the mockup’s dimension equal to the viewport’s dimension. Many people start with a blank image that measures 1024×768. Designs that occupy the entire 1024×768px will sure create scroll and may hide some important UI elements. Though it is subjective to the design, It is better to start with a blank image whose dimensions are lesser than viewport dimension. To start with the 990×570px could help you. This is not a standard dimension.. but relatively close to the generic viewport size offered by all browsers. If the product/app/page is accessed by broad range of different user groups, then consider 800×500px dimension.
Statistics says that browser market is shared with Microsoft’s Internet Explorer, Mozilla Firefox, Netscape/Mozilla Suite, Opera and Safari. While IE enjoys the majority, its close competitor is FireFox, followed by Opera. Except IE6 all other browsers support tabbed browsing. Exception being Maxthon, which is built upon IE. Do a little homework and testing in all browsers to test the design consistency.