5 Replies Latest reply: Aug 31, 2009 1:42 PM by Buck.Wilson RSS

    Fixed width vs Elastic layout for your internal SBS site

    Iain Colledge

      If you go to a web designer and say 'Give me a great home page', they will usually come back with a nice looking fixed width design.

       

      The look is all groovy banners of attractive people talking and smiling in the middle of your home page and maybe somewhere you have some lines of recent content. Not too much though as it doesn't look as great as this cool flash animation that I've done for you and hey it's just lines of text right.

       

      Now a layout like this has a nice wow factor for when you show the execs or are new to your business SBS site. But on day two whilst you're trying to find anything to read or later on when you decide to do things like say build a table with more than 3 columns or maybe even compare a doc side by side the amount of scrolling one has to do starts to become a chore. The wow factor has got in the way of the usability factor.

       

      Jive SBS out of the box has an elastic layout, that means that things like widgets are fixed width and other areas expand or contract depending on the browser. For usability this is great, I like it when the designer allows me to use the full width of the 26" monitor that I bought rather than assuming that I'd be happy with the same workspace as the person with that old 17" that they never get around to replacing and who dominate the lowest 12% of visitors.

       

      Of course this means that there has to be some compromise on the home page, graphics to the sides and potentially resizable widgets in the middle. A great example I think is the EMC home page, the image I got from Chuck Hollis's excellent blog.

      emchomepage.jpg

      Have a look and you have the nice graphics but what springs to mind is that this isn't a website in the traditional brochure sense, this is bang on focused on the people! A huge recent content widget in the middle, polls, tags, all sorts of people focused goodness. Looks good for the wow factor but doesn't get in the way of usability. Now am not sure if the layout is fixed or elastic but then elastic it could be as there is nothing stopping this from happening, especially if the theme designer is intelligent in how they built the banner.

       

      Now for customer facing sites such as Clearstep I can understand that fixed is more important because it controls more strongly the look, but for internal SBS sites where documents are more complex and usability is key to productivity do elastic layouts have the edge?

       

      What is your opinion? Fixed or Elastic layout for Internal sites and what have you done?

        • Re: Fixed width vs Elastic layout for your internal SBS site

          Howdy!

           

          As a UI designer here at Jive, I thought I'd jump in. This is a fantastic discussion to be having, and your thought process is right on target.

           

          Elastic width layouts can be a blessing and a curse. In some cases (authoring content, adjusting for list and content readability, organizing your home page) it's quite nice to have.

           

          However, in other cases it makes some content difficult to read (when everything is stretched out onto one line), and in some cases it pulls your controls and actions contextually away from the object you're focusing on (think of the action box in a group or space, or the edit / remote controls in your bookmarks).

           

          Screenshot on 2009-07-01 at 9.53.16 AM.png

          Good, old fashioned context

           

          The fact is, with elastic width, there's an element we the designers can't "control" (the user could be using a 3000px wide monitor and likes SBS full screen), which has the potential to lead to minor usability issues. Whether or not the issues outweigh the benefits is strictly a personal matter for each of the users.

           

          Fixed width layouts are traditionally easier to customize, like you mentioned, and tend to be more aesthetically pleasing. I'll let the community experts speak more on their experience with this, but I wouldn't be surprised if people feel more comfortable with an aesthetically pleasing, fixed-width layout because it's what they're more used to. This could lead to increased adoption internally.

           

          Also if you intend to do any customization and theming, your internal designers are probably more accustomed to working with fixed width layouts as well.

           

          However, like you said, there are some huge usability wins for having an elastic width set up. Plus it makes the application feel more like... well... an application, and less like a web site.

           

          Screenshot on 2009-07-01 at 10.01.14 AM.png

          Fixed width: if you don't like the readability, then too bad!

           

          Fortunately, with Jive SBS it's relatively easy to change everything to a fixed width if an elastic width layout doesn't work out for your constituency. So I encourage some testing with your own internal customers!

           

          Again, this is a great discuission, mainly because all SBS users have to make this decision!

          • Re: Fixed width vs Elastic layout for your internal SBS site
            nnewcomer

            When you say, relatively easy to change to fixed width. Is that a CSS change or is that in the FTLs? Or is that something that is done in the Admin console.

             

            I would love to hear more as our designers have struggled with the elastic width and it also makes it difficult to control quality from monitor to monitor.

             

            Any help here would be greatly appreciated.

            • Re: Fixed width vs Elastic layout for your internal SBS site
              chrisholmes

              nnewcomer wrote:

               

              When you say, relatively easy to change to fixed width. Is that a CSS change or is that in the FTLs? Or is that something that is done in the Admin console.

               

              I would love to hear more as our designers have struggled with the elastic width and it also makes it difficult to control quality from monitor to monitor.

               

              Any help here would be greatly appreciated.

               

              I am also interested in this answer.  We have a fixed width, mainly due to the amount of customers we have to support and environments.  An Internal site is much easier to deal with elasticity, but when your internal is 17 different organizations with smaller "mini" orgs within the 17 well, its not so easy anymore.

               

              We had to change the CSS and the FTL's to accomplish our look.  Interested to know if this is what you mean by "easy".  Changing CSS/FTL's is certainly not hard or difficult, just something else to manage in the end.

              • Re: Fixed width vs Elastic layout for your internal SBS site
                nnewcomer

                Chris,

                 

                Any chance you would be willing to share a sanitized (no confidential info) version of what your version is like? Either on here or privately by email? We are making changes to ours and I would love to have some different reference points.

                 

                 

                Nova Newcomer

                COMMUNITY MANAGER

                 

                DIR           503-575-4109

                • Re: Fixed width vs Elastic layout for your internal SBS site

                  We've designed it to be easily implemented, but we have not put it into the admin console because as far as I know we don't officially support the fixed width layout. Many customers have had success with the fixed width layout, though, so I wouldn't be concerned with things breaking. We use fixed width on Clearstep to great effect.

                   

                  It just takes a minimal amount of CSS wrangling to make SBS a fixed-width site:

                   

                  Simply find the declaration for #jive-wrapper and change it from width: 100% to width: 960px (or however wide you want it) and set its margin: to 0 auto; and you're set. Two lines of CSS!

                   

                  You can further make it seamless  by making a background repeat-x on the body tag to match your header and our userbar (like Clearstep does), to give it that nice modern wide masthead look.

                   

                  Chris: It's interesting you mention that you find fixed width layouts easier to support across your organizations. Could you elaborate on the ways the elastic layout doesn't work out for your orgs? Elastic vs. fixed is a conversation we talk about frequently on the design team here at Jive, and we'd love as much customer feedback as we can get.

                   

                  Thanks!

                   

                  edit: I spoke too soon, for IE6 you need to be sure and remove or modify the following line:

                  * html #jive-wrapper { width: expression( document.body.clientWidth < 972 ? "970px": "auto" ); }

                   

                  if you're using a CSS file to override, just change it to this:

                  * html #jive-wrapper { width: expression( document.body.clientWidth < 960 ? "960px": "auto" ); }

                  (once again assuming 960 is the width you're after)

                   

                  If you're modifying source .css then just yank that line altogether.

                   

                  Hope this helps!