Viewport Dimensions

Desktops and Laptop Devices

The Web Standards Group recommends that campus web pages targeting desktop or notebook browsers be designed for display adapters capable of at least 1024 x 768 pixels screen resolution, up to a recommended screen resolution of 1200 x 1024 pixels.

Fixed Width Layouts

"Fixed width layouts" refer to website layout designs that are set at a specific pixel width and do not change size with the user's browser. A fixed width layout is the most straightforward to design, although it may be less usable for users with browser sizes that are significantly different than the size of the design, including both widescreen desktop monitors and smartphones.

When designing a fixed width layout, 960 pixels is a common width to use as the maximum width of the design since it is easily divisible and fits within the recommended 1024 width range outlined above.

Mobile Devices

Keep in mind that there is an ever-increasing audience of site visitors that are visiting your site from mobile devices. Your desktop-targeted website design may not be usable on mobile devices. To address this, you may consider creating a responsive design (see below) or creating a version of your website specifically targeted to mobile devices.

If you wish to create a design targeted specifically to mobile devices (a "device experience"), the Mobile Web Framework (MWF) is a simple, powerful platform collaboratively developed by UC developers. The UCSB Libray hosts an instance of the framework that you can use within your projects.

Responsive Layouts

Responsive layouts are a newer approach to web design: media queries, a flexible grid, and flexible media (including images and video) are combined to create website designs that transform depending on the capabilities of the user's browser, specifically the browser's width.

With a responsive design, there may be no need for a design targeted to a desktop or mobile audience, as the responsive design will shift to meet the needs of either audience.

Printable Alternatives

Make sure that your page content prints appropriately. Test by printing, and if necessary, provide a printable alternative.