Choosing the Width of Your WordPress Website

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

Every website starts with a layout that takes width into consideration. When designing your WordPress website, keep in mind the differences between fixed and fluid widths.

Fixed: This is a static width that’s determined by a set number of pixels. This type of layout stays the same size no matter how big or small the user’s computer monitor and resolution are.
Fluid: This is a flexible width, determined by percentages that create an experience in which your website fills the entire width of your readers’ browsers, no matter how big or small their monitor size and/or screen resolution is.

When choosing between a fixed and fluid width, keep in mind that computer monitors and resolutions come in several sizes, and people who surf the web use their browsers in many ways. Some users fully maximize their browser windows so that they take up the full height and width of the screen. Other users do the same, but use different toolbars and sidebars in their browsers that decrease the screen size in which your website can be displayed.

More rare, but still in practice, are users who use a portrait (vertical) setup for their monitors rather than the typical, default landscape (horizontal) layout. Your challenge is to design your website so that it fits correctly in your visitors’ browsers, no matter what their setups are.

Screen resolution is also a factor to strongly consider and is a setting on each computer system that can vary greatly among your website visitors. Screen resolution is the number of pixels wide followed by the number of pixels high that a computer monitor uses to display content on a computer screen; the greater the numbers, the higher the resolution. So, for example, a resolution of 1600 x 900 (or 1600 pixels wide by 900 pixels high) is a greater resolution than 800 x 600 or 1024 x 768.

A fixed layout at 960 pixels displayed on a 1024-pixel-wide screen resolution.

A fixed layout at 960 pixels displayed on a 1600-pixel-wide screen resolution.

W3Schools is a website that leads the way in providing tools and resources for web designers; it keeps track of the statistics on what screen resolutions are most, and least, used on the web from year to year, and the results are then published to help designers understand how people use the Internet. The site’s most recent report for 2011 indicates that the majority of people who browse the web use a 1024 x 768, or greater, screen resolution.

The type of layout, fixed or fluid, that you decide to use greatly depends on your own preferences. However, as computer monitor sizes get bigger and bigger for desktop and laptops and then smaller and smaller for mobile devices and tablets (such as the iPad), designers are finding that they may have to alter their regular design techniques to account for the various screen sizes out there.