One of the common pitfalls I’ve seen people unknowingly walk into when branding SharePoint is applying a fixed width layout to a SharePoint site when it isn’t called for. In this article, you will learn what a fixed width layout is and when to apply it to your SharePoint site.
A fixed width layout is a term used to describe a web design that has a specific width, such as 990px, assigned to the container around the page content.
The width doesn’t change regardless of what size the browser window is. This example is always 990 pixels wide.
Below is a screenshot of a site that many of you are very familiar with, http://Twitter.com. Twitter is a popular example of a fixed width layout. This screenshot illustrates what Twitter’s fixed width of 1000px looks like when my screen resolution is set to 1024px x 768px. This page fills my browser window.
In the next screenshot, I change my screen resolution back to it’s default setting of 1600 x 900 pixels and view the same page. Notice that the page content is still 1000px but you can see more of the background design on either side. In a fixed width layout, the content width stays the same regardless of the size of my browser window or my screen resolution.
Most fixed width layouts are designed to fill the browser window at a screen resolution of 1024×768 or higher. Over 85% of all users have a screen resolution higher than 1024×768. 1024×768 pixels is at the very tail end of being the “standard” and acceptable screen resolution to design for. Here are a few more examples of fixed width designs:
Out-of-the-Box SharePoint has a Liquid Layout.
A liquid layout fits the screen dimensions of the user’s browser. In layman’s terms, it fills your screen.
The screenshot below shows a SharePoint team site in a fully expanded browser on a computer with a screen resolution of 1024×768.
The next screenshot shows the same site at a resolution of 1600×900. The content stretches to fill the browser window.
Functions of a Fixed Width Layout
Fixed width layouts are often chosen for styling purposes to make a site look cool/sexy/pretty/web 2.0. But a fixed layout serves a functional purpose.
1. Consistent Look and Feel – By providing a consistent width on every page, regardless of the amount or type of content, this layout allows for a consistent layout and structure on every page.
2. Controlled Content Placement – The fixed content container width allows for control of content placement and content relationships. This ability to control content placement allows meaning to be ascribed to relationships between elements using principles found in Gestalt Theory. The use of these principles allows for a more controlled design of the journey a user takes through the site. These relationships can be used to communicate importance, direction, priority and flow.
3. Improved Readability – According to WebStyleGuide, it is recommended that text length stay under 365px to ensure good readability. A fixed width prevents text from stretching into long lines making it hard to read. By keeping lines of text shorter, it makes it easier to read. You can see in the
Is Fixed Width Layout Right For Your SharePoint Site?
The purpose of your SharePoint site helps define whether a fixed width layout is appropriate. If the purpose is to communicate and inform, a fixed width layout may be a good design decision. Fixed Width layouts help deliver a branded message and guide a user to accomplish tasks. This is an important piece of many types of sites such as the following:
- Internet Sites – Public facing sites communicate marketing messages, which are carefully crafted to elicit emotions and product brand. This requires control of the layout.
- Communications Portal – A communications portal delivers news and branded messages to many internal users.
- Web Application – User tasks are critical in web applications such as turbo tax and Mint.com. If you are building a web application on SharePoint, you may want to use a fixed width layout to help guide your users to important tasks.
- Blogs – Most users are familiar with a fixed width layout for this type of content. This blog is an example of a fixed width layout.
If your site doesn’t easily fit into one of the previously mentioned categories, find out if your site qualifies for fixed width by analyzing the purpose, business process and type of content you have.
When You Shouldn’t Use Fixed Width
In general, if you need a lot of real estate, require an expandable content area or have many users adding content, fixed width is not the ideal design choice. Fixed width layouts especially pose challenges in two very distinct scenarios in SharePoint.
1. Collaboration – Any site that is primarily used for collaboration is not a good candidate for a fixed width layout. Users aren’t surfing for content in a collaboration site. They are trying to accomplish a task. Keeping more content “above the fold” allows the user to accomplish tasks faster. Also, fixing the width of a collaboration site means that an unsuspecting user can add content that will spill outside of the fixed width as seen in the screenshot below.
2. Document Management – Most document management scenarios require users to spend a lot of time in document libraries. Document libraries provide a view of metadata associated with the content types associated with the library. A fixed width layout limits the number of columns that can be part of each view before spilling over the content area.
If an early adopting user is exploring collaboration and feels responsible for “breaking” something, that user will be negatively impacted. Don’t let your users experience content spillage or the horror of “breaking the branding.” It will be hard to win those users back.
Quick & Dirty non-ie7 fix for content spillage: If you are lucky enough that your design doesn’t need to be compatible with IE7, you can add display:table to the container that has the fixed width applied or the container around the content area. This makes the outer container behave like a table and accommodate content inside it. This doesn’t work in IE7)
SharePoint 2010 Fixed Width Resources
Many of you will probably stumble upon this article looking to find out HOW to implement a fixed width layout in SharePoint 2010. I feel for you and appreciate you taking the time to read or scan this article. I’ve included several resources with code / script examples. Just remember, there isn’t one master strategy to implement fixed width for every scenario.
If you have a solution you’d like listed here, please send me the link and I’ll include it.
Using a fixed width layout isn’t about making it look sexy, cool, modern or web2.0. The fixed width layout is a design decision that impacts the functionality of your site by limiting the amount of space for content, controlling the content container width which then allows the content to be structured and designed. This can either be a pro or a con depending on the purpose of your site.