Balancing Page Layout and Content with Web Parts

Good page design balances content and white space for readability. Here are some tips to manage your page layouts in SharePoint.

Use Web Part Pages in Place of HTML with DIVs

For any page with a multicolumn layout, a web part page is the easiest way to manage both content and structure. A web part page is organized into zones, each of which can contain multiple web parts. Zones in page layouts are controlled by the page template, which you can change in Page Settings even after the page is created.

Zones without web parts in them collapse, allowing web parts in other zones to flow automatically within the page. While you can specify the height and width of an individual web part, it's often best to take advantage of SharePoint's automatic resizing to accommodate different screen sizes and resolutions. Unless height or width are specified, pages will also reflow as windows resize in the browser.

Content is King over Formatting

For web designers used to starting from a wireframe, and specifying DIV height, width, float, &c directly in the HTML or in a CSS, web part pages can be disconcerting at first. Remember, Content Is King, so let SharePoint handle your heavy lifting for both presentation and structure.
Start by uploading some content into lists and libraries, and place those on your page as web parts. Then drag and drop those web parts around on the page, and tinker with the views, until your content is nicely balanced.

Even as King, Content wears a uniform. Keane uses the default standard SharePoint theme across all sites, and does not provide or permit custom CSS or themes. For best readability and consistency across the portal, do not use alternate fonts or font sizes in your text, and be judicious with your font emphasis with minimal use of bold, italic, highlighting, or colors. This will help balance your page design elements with the standard white space on a web part page.

When you find yourself formatting text, ask yourself why: consider what meaning you are attaching to the content, and whether you may want to use a more structured presentation. Are you emphasizing headings? Use a Heading instead, which will use the standard heading stylesheet. Creating a table? Put your content in a list and use a web part view. Check out some of the many [[Design Ideas for Migrating Web Pages to SharePoint Sites]]. And remember, manual formatting means more site maintenance. Use the SharePoint platform to your advantage.

Customize views for web part pages

When creating views for display in a multi-column layout, choose no more than 2-5 columns. One of these should be a link to the document or list item.

Recommendations for a What's New view of a document library:

• Type (linked to document) as a visual cue of what kind of file this is
  
• Either Title (linked to document with Edit menu) or Name (linked to document), but not both
  
• Modified, the date the document was last edited. For new items, this will be the same as Created, and a home page view doesn't need both.
  
• Edit (link to edit item) if you select Name instead of Title (since Name does not provide an Edit option)—this will not be visible to Visitors
  
• File Size (for libraries with large files), as a visual cue to users that they may be choosing to download a large file
  

You can also control how much content appears in a view by setting the Item Limit to display items in batches (with Next/Previous arrows), or to limit the number of items displayed. This can be useful, for example, to show just 3 months of reports by setting Item Limit to 3. This is particularly powerful with a What's New view, and can be a great way to surface content from different lists and libraries on your home page.