: Photoshop Guides for widescreen web designs Does anybody know what the guides should be set at get a basic viewport for the typical 13" widscreen laptop? Anybody know of a template of sorts

@Megan533

You could also consider making your left and right margins elastic so it can adjust to the various makes / models / users out there. I will typically create a div that's less than 800 px wide and center it in the body. The content goes in there and it stays a consistent width no matter how wide they make the browser window. It makes life a lot easier when figuring out page layout and flow.

Vote Up Vote Down

@Odierno310

This will vary with the make and model of a specific laptop but at 13" and widescreen: either 1366x768 or 1280x800 pixels is a pretty safe bet for the screen res. taking the smallest dimension of both gives a likely 1280x768


take approx 120-150px off the vertical height (browser/OS chrome)
take approx 20px off the horizontal width (scroll bar)


this leaves approx 1260x600 px for a maximised window.

you should make sure your webdesign works at a number of different resolutions though. It is common for a user to run their web browser at less than full screen, and your design should be fluid to accomodate this.

Vote Up Vote Down