Choosing the Width of Your WordPress Web Site - dummies

Choosing the Width of Your WordPress Web Site

By Lisa Sabin-Wilson

Every WordPress website starts with a layout that takes width into consideration. Here are the primary types of widths you will need to consider when you start to design your website:

  • 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.

  • Responsive: This type of layout is considered device agnostic. In other words, the size of the device the visitor is using to browse the website doesn’t matter — the site will display perfectly on very large monitors down to the smallest mobile phone device. This layout is called responsive because it responds to the size of the viewing device.

When choosing between fixed, fluid, and responsive layouts, 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 that displays your website. Also in practice are users who use a portrait (vertical) and a landscape (horizontal) layout on tablets and mobile devices. Your challenge as a web designer is to design your website so that it fits correctly in your visitors’ browsers, no matter what their setups are.

Screen resolution, another factor to strongly consider, 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; the greater the numbers, the higher the resolution. So, for example, a resolution of 1600 x 900 is a greater resolution than 800 x 600.

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 2013 indicates that the majority of people who browse the web use a screen resolution greater than 1024 x 768.

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