Task 14: Theme Features: Fluid-width versus Fixed width
WordPress Themes are classified using a set of specific features. You can use the search functions to find Themes that have the features you need most. As you test different Themes, notice certain key features that affect their ability to adapt to multiple display devices.
It is very important to design your site so that it will look good on any device. This requires that you think in terms of general spatial relationships rather than fixed positions for things. Even if your user is not using a mobile device such as a smartphone or tablet, the horizontal width of computer screens varies quite a bit. Your Theme might look great on a 20″ office monitor but may look terrible on a 14″ laptop monitor.
In the previous task you began to test how well your current Theme works on mobile devices. A more general property of Themes is whether or not they are designed to look good at a specific screen width, or if they adjust automatically to differing screen widths. Devices that are not classified as “mobile” come in many sizes.
The feature you need to evaluate in this Task is the behavior of the fixed-width versus fluid-width property of Themes.
- A fixed-width Theme is designed to display content using a fixed number of horizontal pixels. Themes that have a fixed-width design may give you a way to change the width settings, or they may come with preset widths that you cannot change. For example, the total layout might be set to take up 1000 pixels of space. If the user’s screen is more than 1000 pixels wide, the remainder will show up as a border.
- A fluid-width Theme is designed to display content using a variable number of horizontal pixels. Themes have a fluid-width design allocate space based on ratios of the actual total screen width on the user’s computer. For multiple column layouts, each column is assigned a target ratio of screen space. For example, the total layout might be set to take up 80% of the total screen width, leaving the other 20% as a border.
To view general information about your Theme and to get a link to the support site for it, go to Dashboard > Appearance > Themes. If you can’t find the feature listing for the Theme, ask for help from another member of your learning cohort.
If the feature listing for your Theme does not specifically mention width settings, you may need to use the configuration features of the Theme to look for relevant settings.
You can learn more about Fluid-width and Fixed-width design by reading a tutorial.
To complete this task…
- Determine if the Theme you are using has fixed-width and fluid-width settings. Some Themes have only one or the other, while other Themes support both types of layout.
- Experiment with the width settings by changing them and then viewing your site at different screen sizes. You can emulate the behavior of a different screen size by viewing your site in a browser window and then squeezing the window size horizontally. With a fluid-width design, you will see content move around as the screen space becomes more narrow.