Best Practices

When designing your applications, remember to leverage the social data through our APIs and utilize various integration points that we provide. You can learn more about the integration points here: http://hi5networks.com/platform/wiki/Anatomy

In order to create the most compelling experience for our users, we would recommend following the guidelines below:

  1. Technical
  2. Style guide for applications
  3. Viral
  4. International
  5. Co-registration

Technical

Using caching for data-heavy applications

Use hi5 custom tags

Style guide for applications

Page and Image Dimensions

The canvas page is 956 pixels wide, with no margins or padding.
The preview page is 620 pixels wide, with no margins or padding.
The profile module is 470 pixels wide with 7px of padding on both sides, leaving 456 pixels of content area.
The icon for updates is 15x15 pixels.
The thumbnail for the gallery is 120x60 pixels.

hi5 Colors

#222222: Body text
#404040: Headline text
#EE6700: Warning text, link hover
#085098: Links
#6E87AF: Module header fill
#999999: Fine print, 2px bottom border of module header
#CCCCCC: 1px Module border, horizontal line separators
#E3E3E3: Module subnavigation fill
#F3F3F3: Optional module background fill

Text Styles

Main headers { font: bold 14px Arial; color: #404040; padding-bottom: 5px; border-bottom: 1px solid #cccccc; }
Sub headers { font: bold 12px Verdana; }
Body text { font: 12px Verdana; line-height: 1.5em; }
Note text { font: 11px Verdana; color: #999999; }
List items { padding-top: 1px; padding-bottom: 1px; margin-bottom: 5px; }
Pagination div { border-bottom: 1px solid #cccccc; margin-right: 10px; margin-left: 10px; padding-top: 10px; padding-bottom: 4px; }

Viral

We want to make sure that applications that enrich our user's social experience are give the right tools to grow within the hi5 community. As you develop your application make sure that you leverage our viral channels:

  1. Invitations - users who have installed your application can invite their friends to use your app
  2. Notifications - when a user performs an action within your application, it can generate a notification to interact with the user's friends. These notifications are listed on the friend's homepage as notifications.
  3. Messages - your application can engage with users who have installed the application by sending them a direct e-mail
  4. Friend Updates - whenever a user interacts with your application, there is an opportunity for you to generate a friend update. These updates get posted on the user's profile page and also get sent to all the friends as a friend update
  5. Application Directory - this is the place where a hi5 user can discover the applications their friends have recently installed

International

hi5 is available in 19 languages with more being added each month. When you are building applications that reach tens of millions of global users, you need to give thought to internationalization (i18n) issues. Here are some tips that will get you conforming to i18n:

Don't hard code strings

In general, most developers begin by writing gadgets with their strings "hard-coded." Supporting multiple languages requires externalizing the user-visible strings into message bundles, a process called internationalization (i18n). Google has written a really clear guide: Google Gadgets and Internationalization. The guide covers the mechanics of creating i18n gadgets, what follows is some hi5-specific extensions and tips on good i18n practices.

Don't use concatenation or layout to combine properties into sentences!

<msg...> of     </msg>                                    translators ask... what's the context?
<msg...> Photo ${from} of ${to} </msg>          much better!

As a general rule, try to externalize complete sentences or phrases.

Don't impose grammar

<msg...>You posted a message to ${from} Scrapbook. </msg>
<msg...>his</msg>
<msg...>her</msg>

works OK for English, but not for other languages!  Using two separate messages would be better:

<msg name="male.posting">You posted a message to his Scrapbook.</msg>
<msg name="female.posting">You posted a message to her Scrapbook.</msg>

Punctuation is a part of grammar. Include it!

As a general rule, parameterize nouns and counts... not verbs, pronouns, particles, or other components of the sentence.

Co-registration

hi5 provides your application with a unique opportunity to engage users outside of hi5 to interact with your application. By using a co-registered page, this is your opportunity to get your site's members to use your application within hi5. When the user registers through the co-registration page, they automatically have your application pre-installed.

Close