The Best Pixel Sizes for Websites
Cell phones, tablets and computer monitors have different uses, users and dimensions that leaves the question of what the best layout size for a website to be determined by the needs of the website's primary users. If the site will be designed to be visited and viewed by 'standard' users on a wide-screen monitor in 1680-by-1024 pixel resolution, the website size should be tailored to fit within the main browser window. If the site is intended for use by mobile devices, it would be sized for a much smaller screen.
Other People Are Reading
-
Fluid vs. Static Layouts
-
The first consideration is whether your website requires a set dimension in pixels at all. Using percentages instead, you can create a "fluid" layout that re-sizes the content areas dynamically, depending on the size of the user's browser window. When used in combination with automatically wrapping text, fluid layouts may be the best choice when creating a website for standard screen resolutions as well as mobile browsers. Fluid layouts are achieved by using "width=100%" in the content's CSS declaration rather than "width=960px," for example.
Fitting Standard Screen Sizes
-
To create "fixed" or static layouts, the width of your main content divs, wrappers or tables must fit within a user's browser window, taking into account both the scroll bar and browser toolbar. You also want to consider designing for the majority. Over 80 percent of web browsers today use a screen resolution above 1024-by-768 pixels. This means you could design for 1680 x 1024 pixels, but it is a good idea to aim for a middle ground. 960 pixels wide and 980 pixels wide are two foolproof widths used to display content comfortably in the browser for anyone using a 1024-by-768 pixel resolution or higher. This system also scales well on mobile devices capable of displaying full websites. If this is too narrow, 1080 is the next-best width. Keep in mind the height of a standard browser window in any given resolution in order to keep the most important information above the "fold," or the point at which scrolling is required.
-
Mobile Screens
-
If you want your site to look good on a variety of mobile devices, you will need to design specifically for the device or create a special style-sheet that is used by mobile browsers to display a 'mobile' version of your webpage. A resolution of 240-by-320 pixels is a current standard for most smartphones and internet-ready mobile devices such as the iPhone. It is recommended to use percentages or 'fluid' layouts here, though, as many devices support both the landscape and portrait mode. If you created a website that was fixed at 320 pixels wide, it would appear cut-off if the user visits the page on a device that uses portrait browsing.
The Golden Grid
-
Perhaps the best system for determining layout dimensions is through the use of a grid system. Grids calculate perfectly balanced regions within a given width in order to provide a guideline for how to size elements within your main layout or content area. These elements could include promotional boxes, sidebars, ad-space or paragraphs. As an example, one layout using a total width of 1080 pixels and divided up using the golden grid would have a left-hand area for blog posts that is 739 pixels wide and a right sidebar that is 311 pixels wide, both using a 10 pixel margin. The end result is a perfectly balanced and aligned layout. You may experiment with different grids by visiting the grid system generator (see Resources).
-
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
