Coming Soon: Simplified Main & Profile Pages

Our next release after the Tab Manager will introduce the New Message Center on your network, a streamlined Ningbar, and iPhone support. This release is now slated for either September 11th or 12th Friday, Sep. 26 at 6 p.m. Pacific..

As part of this release, we’re also making a number of subtle changes to the layout and design of your network’s Main Page as well as your members’ Profile Pages. These changes are important to support OpenSocial applications at the end of September as well as to streamline the different modules across your network generally for a better overall experience.

Here’s what the new simplified Profile Page will look like. You can click on any of these screenshots to see a full screen version:

New Profile Page Design


We want your network to support as many features as you want with the best member experience possible. The goal then of this redesign was to make a network with no theme and a ton of features look clean and inviting. To achieve this goal, we’re making the following changes to the Profile Page:

  • There is now a 15 pixel border between the columns vertically and a 10 pixel border between modules horizontally. Today the border is only 5 pixels. By spacing things out a bit more, pages with a number of different features shouldn’t feel as crowded.
  • We’ve standardized the text size across modules. This, again, should help pages with a number of different features feel less crowded.
  • We’ve optimized the display of modules for the narrow and center columns. On a few of our features today, the module may look good in one column and not as nice in another. We fixed that here.
  • The modifiable Page Title available to your members today will move to the middle column and each member page will gain a standard “name’s page” title up top. This will help simplify navigation while continuing to give you and your members a spot to make a statement.
  • The current feature navigation on the left column moves up horizontally under the new page title. If the member hasn’t contributed to a specific feature, then the navigation will still show up but be grayed out until they add content. For example, if a member hasn’t joined any Discussions but you have Discussions enabled on your network, then Discussions will be grayed out on this member’s Profile Page. We don’t want to hide unused features entirely for two reasons: (1) so the member has yet another reason to join groups and (2) to keep the navigation consistent across Profile Pages on your network.
  • The new Tab Manager will not enable you or your members to control these Profile Page navigation tabs in the same way as the main network navigation. However, you, as the Network Creator, will be able to change the text of them, as always, from the Language Editor.

And here are the modifications to the Main Page:

New Main Page Design

We’re making the following changes to the Main Page:

  • There is now a 15 pixel border between the columns vertically and a 10 pixel border between modules horizontally. Today the border is only 5 pixels. By spacing things out a bit more, pages with a number of different features shouldn’t feel as crowded.
  • We’ve standardized the text size across modules. This, again, should help pages with a number of different features feel less crowded.
  • We’ve optimized the display of modules for the narrow and center columns. On a few of our features today, the module may look good in one column and not as nice in another. We fixed that here.
  • The Blog feature by default will be a tab in your main navigation. With the new Tab Manager, you can adjust where it will go.
  • The default Member module setting will default to small thumbnails from large thumbnails. Large thumbnails have a slightly modified design that just tightens up the layout. There will also be a slightly broader number of Edit options for each module.

A few other things to note:

  • If you are using one of our standard themes, all your features should automatically adjust to fit to these new column sizes. If you are using external third party widgets in the HTML text boxes, you may have to adjust the size of your third party widget to fit this new center column width. It will depend on the widget.
  • If you have custom CSS on your network’s Main Page or Profile Page, this redesign may require you to make adjustments. We’ll provide the specific CSS changes we’ve made to you ahead of the release. If you are concerned about how these changes may affect your network, you can also drop us a note at the Ning Help Center. We want to ensure a smooth transition.
  • These changes will have no impact on the style, size, or design of your header or footer.
  • We are also making subtle adjustments to the Member Admin Box, or the box in the upper corner of the right column that appears for someone when they are signed in and says “Sign Up or Sign In” when you aren’t. If you have modified this box to, say, change the Sign Up message, this redesign will require a bit of work to preserve your changes. Again, drop us a note in the Ning Help Center for specifics.

Thanks in advance for your great questions and feedback. We appreciate it!

About the Author:

Gina Bianchini – who has written posts on Ning's Official Blog on Social Networking Sites.


  • Clement

    Will our custom header be effected? in the sense of height and width of our header pic…

  • Roland Taylor

    Wise changes.
    The profile pages idea is wonderful, but I wish we could arrange the “sub-navigation” tabs with the tab manager (or a profile page layout editor, that would be a great feature for NC’s).

    All in all though, great stuff :-)

  • j. wings

    you know, i liked the old front page design, which also had wider columns, between features, so this is a good idea i think. So all of the extra space is coming out of the center column? What is the new center column content width?

    Also, one thing has always annoyed me… if you look at the members box… the member icons default size should be such that they line up on both left and right side.

  • Alexis

    Awsome changes. Just in time for christmas.

  • Nick Verwymeren

    “We’ll provide the specific CSS changes we’ve made to you ahead of the release.”

    Where can we get these specific CSS changes?