Fixed Width Layout

Lesson Learned: Using Fixed-Width Layouts in SharePoint

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.

fi

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.

image

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.

image

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:

image image image

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.

Screenshot 1: Liquid Layout in SharePoint at 1024 x 768

The next screenshot shows the same site at a resolution of 1600×900. The content stretches to fill the browser window.

Screenshot 2: Liquid Layout in SharePoint at 1600 x 900

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 FeelBy 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 PlacementThe 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. 

Gestalt Principles and Fixed Width Design in SharePoint

3. Improved ReadabilityAccording 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:

  1. Internet Sites Public facing sites communicate marketing messages, which are carefully crafted to elicit emotions and product brand. This requires control of the layout.
  2. Communications Portal – A communications portal delivers news and branded messages to many internal users.
  3. 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.
  4. 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. 

Content Spillage in Team site

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.

Screenshot 4: Content Spillage in Document Library

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.

Summary

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.

References

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks

About Marcy Kellar

Marcy Kellar is a SharePoint Solution Architect at Perficient and well known for her expertise in SharePoint branding. Her specialties include user experience design, branding and UI customization, information architecture, web content management, and usability testing. Marcy’s experience spans over 20 years and includes work in design, life sciences, psychology and R&D. Marcy is co-author of Beginning SharePoint Designer 2010 (Wrox, October 2010) and is a former professor at the Art Institute teaching user centered design courses, “Intro to User Centered Design” and “Usability Testing.” She is a popular speaker, author and award-winning artist and photographer.

fixed-width layout, lessons learned

11 Responses to Lesson Learned: Using Fixed-Width Layouts in SharePoint

  1. Nico de Jong
    Twitter:
    February 13, 2012 at 9:22 am #

    Marcy,

    I partly agree. Look and feel is also of great importance in team sites. Most of the users I work with spend about 30% on the content and 70% of their time on the look and feel – they want it too look like a website that their collaborators would like to use and thus they would do what is intended, collaboration – Often forgetting the real skills and agreements you need to get a group of people collaborating online.

    I wanted to use fix width for my team sites. Especially because I believe your 85% resolution is also true for us … To make it more future proof though I am thinking of using left and right padding instead .. a 15px padding – I think – would help for readability. I personally also dont like words touching the edge of the screen ..

    What is your opinion?

  2. Chris
    Twitter:
    February 13, 2012 at 9:55 am #

    I agree that collaboration sites are not a good candidate for fixed width. Generally, the fluid layouts work better for primarily collaborative environments, which is why I think MSFT went that route.

    For the vast majority of intranets I see, unless there’s almost exclusively WCM happening, I suggest retaining the fluid layout.

  3. Tom
    Twitter:
    February 13, 2012 at 11:33 am #

    I like how you wrote this up and used lots of visuals. Generally, I agree with your recommendations, too.
    The webstyleguide link is one of those cases of “do what I say, not what I do”, though. While the author suggests that most websites fall into the trap of presenting lines that are too long, the page the comment is made on is fluid. On my current browser width, the lines of text are much longer than the author’s suggestion!

  4. Tom Daly
    Twitter:
    February 13, 2012 at 1:06 pm #

    Great post, I agree with maintaining liquid layouts on the more ‘collaborative’ pages. I cringe internally when the clients ask otherwise.. because I know that once its all done they are going to complain once a user adds a list view webpart with 20+ columns and it doesn’t fit.

    Generally most of the publishing type sites I do are fixed width, but more consideration and guidlines go into populating those pages.

  5. Benjamin Niaulin
    Twitter:
    June 18, 2012 at 11:48 am #

    Amazing post, very helpful! Thanks Marcy!

  6. Steve July 5, 2012 at 4:18 am #

    I find that pretty much all the time clients want their nicely branded publishing site fixed width, but are happy to leave the collaborative sites out of the box.

  7. J. R. Whitener July 9, 2012 at 10:12 pm #

    Great article, Marcy. It helped clarify the roles of liquid vs. fixed in a SharePoint environment. I’m adding this article to my resources.

    On an aside, under Function of a Fixed Width Layout, item 3′s paragraph cuts out mid-sentence.

  8. AR July 26, 2012 at 8:30 am #

    Hey, great article. I was wondering if you can post something more about -
    “Quick & Dirty non-ie7 fix for content spillage”

    I have been looking for a solution to restrict the doc library columns in a 1024 fixed center width design.

    Thanks,
    AR.

  9. Jamie August 7, 2012 at 10:11 am #

    While agree that a fix width layout isn’t for all sites I don’t agree that its usefulness is likewise reduced due to the purpose of the site you are designing. Just because the site is a collaboration site doesn’t directly have any bearing on the decision of fixed vs. fluid design. The area you should focus on when thinking of doing the design to begin with is UX and this is followed by governance. Does my user actually need 20+ columns of data on that document library or is that just the OOB way of handling the content and can we restrict things and have the users understand/maintain that decision moving forward.

    You should first identify what columns of data are needed, how wide that area needs to be to support the data (all the while keeping readability at the forefront) and then decide if the fixed size will suffice. And if the original fixed size wont suffice identify what size will? You can then set the styles of the brand to be that larger size and override it with the page layouts. Thus any page that uses the page layout will be the smaller fixed and the system pages would be the larger fixed/modified fluid. This allows for the design to stay tight across all site pages and offer more real-estate when needed.

    In the end its the UX that drives these decisions.

  10. Matt December 3, 2012 at 2:03 pm #

    Good article to know what other people are thinking . From a web design stand point I perfer fixed width’s. Also, I tend to display quick launch as a horizontal drop down menu instead of keeping it on the left. Feedback is usually positive, giving my users a better experience as, long-term, the QL can get bogged down with whatever.

    I start with the 960 grid system for nearly all of my masterpage customizations. You can optionally download adaptive.js from the 960 site. Adaptive.js will load the appropiate css file based on the end users screen width.

    I’ve also found that having fixed width sites forces you to think about the layout and information arhitecture. I think most developers are not thinking about information architecture but rather styling.

Trackbacks/Pingbacks

  1. The 10 Worst Mistakes in SharePoint Branding and UI Design « Branding « Sharepoint « The SharePoint Muse - April 11, 2012

    [...] My Previous post goes into detail about why you shouldn’t Use Fixed Width Layouts in Collaboration Sites. [...]

Leave a Reply