LABEL.ch THE brand.intelligence™ COMPANY. http://www.label.ch THE brand.intelligence™ COMPANY. Tue, 15 May 2012 08:26:32 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Parallax website for Citroën http://www.label.ch/en/news/site-web-parallax-pour-citroen/ http://www.label.ch/en/news/site-web-parallax-pour-citroen/#comments Tue, 15 May 2012 08:26:32 +0000 ckolly http://www.label.ch/en/?p=4425

Every fall and spring, Citroën launches a website to communicate the season’s services to perform on vehicles, as well as available accessories. In previous seasons, these sites were in flash. Like every year, Citroën commissioned LABEL.ch to carry out its 2012 springs version. We recommended the creation of an HTML5 version with animations inspired by Parallax technology, a new trend that is more and more present in web design.

The result is a site contained in a single HTML page, separated into sections. Navigation between sections can be done via a fixed menu, buttons or a scrollbar. The transitions are fluid and various animations give an effect of perspective to the illustrations.

Visit “Rendezvous Services” by Citroën

]]> http://www.label.ch/en/news/site-web-parallax-pour-citroen/feed/ 0 The world of Romandie Network moves http://www.label.ch/en/news/le-monde-de-romandie-network-bouge/ http://www.label.ch/en/news/le-monde-de-romandie-network-bouge/#comments Thu, 03 May 2012 13:05:13 +0000 Bastien Léchaud http://www.label.ch/en/?p=4383

The most exciting projects are often the ones were you start from scratch, on a blank canvas. Our work for Romandie Network, the first online advertising agency of Suisse Romande, is one of these; the client trusted LABEL.ch to create their corporate identity, colors, logo, print design, website design and Facebook page design.

The results speak for themselves showcasing the homogeneous galaxy of Romandie Network. The website was done on WordPress, though you can barely tell, and allowed us to include all the products of the agency in a “blog” way, making it very easy for the client to manage its portfolio of offers.

]]> http://www.label.ch/en/news/le-monde-de-romandie-network-bouge/feed/ 0 (Fr) Le nouveau Photoshop CS6 vous séduira-t-il ? http://www.label.ch/en/blog/le-nouveau-photoshop-cs6-un-concentre-de-produits-adobe/ http://www.label.ch/en/blog/le-nouveau-photoshop-cs6-un-concentre-de-produits-adobe/#comments Thu, 26 Apr 2012 07:24:45 +0000 Julien http://www.label.ch/en/?p=4297 ]]> http://www.label.ch/en/blog/le-nouveau-photoshop-cs6-un-concentre-de-produits-adobe/feed/ 0 April 2012′s font – Blanch http://www.label.ch/en/blog/la-typo-davril-2012-blanch/ http://www.label.ch/en/blog/la-typo-davril-2012-blanch/#comments Tue, 10 Apr 2012 07:26:44 +0000 Julien http://www.label.ch/en/?p=4285

Designer: Atipus

License: Free

Type: Display face

Format: TTF Mac/PC font

Download Blanch’s font: http://www.atipus.com/tipoblanch.zip

]]> http://www.label.ch/en/blog/la-typo-davril-2012-blanch/feed/ 0 Create your first Open Graph app for Facebook http://www.label.ch/en/blog/creez-votre-premiere-application-facebook-avec-open-graph/ http://www.label.ch/en/blog/creez-votre-premiere-application-facebook-avec-open-graph/#comments Mon, 26 Mar 2012 06:47:15 +0000 Jérôme Hugon http://www.label.ch/en/?p=4233

The aim of this tutorial is to guide you through the steps to create a first application for Facebook using the Open Graph protocol.

Create a Facebook app

The first step is to create a Facebook app. Go to the Facebook developers website (https://developers.facebook.com) and click on the Apps link at the top :

 

Facebook Apps menu

 

On the manage your apps page, click on Create New App :

 

Facebook Create New App button

 

Fill in the fields App Name and App Namespace then click on Continue :

 

Facebook Create New App popup

 

Fill the captcha before clicking on Submit :

 

Facebook Create New App captcha

 

Click on the Website section at the bottom of the basic parameters page of the app and fill in the url of your website :

 

Facebook App Basic

 

Save your changes. That’s it, you have successfully created your Facebook app!

Allow your application to publish

To publish actions on the timeline of Facebook users, they must allow your app to do this. The simpliest way is to integrate the Facebook login button on a HTML page and ask for the publish_actions permission.

Here is an example of the index.html page to put under the root folder of the application on the server :

<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr” lang=”en-US” xmlns:fb=”https://www.facebook.com/2008/fbml”>
<head>
<title>Drive those cars</title>
</head>
<body>
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘[YOUR_APP_ID]‘,
status : true, cookie : true, xfbml : true
});
};
(function(d){
var js, id = ‘facebook-jssdk’; if (d.getElementById(id)) {return;}
js = d.createElement(‘script’); js.id = id; js.async = true;
js.src = “//connect.facebook.net/en_US/all.js”;
d.getElementsByTagName(‘head’)[0].appendChild(js);
}(document));
</script>
<h1>Drive those cars</h1>
<fb:login-button show-faces=”true” scope=”publish_actions”></fb:login-button>
</body>
</html>

Replace [YOUR_APP_ID] by the ID of your app :

 

Facebook App ID

 

Go to the webpage and click on the Log In button. In the window that opens, connect yourself by clicking the Log In with Facebook button :

 

Facebook - og app 2

 

The Facebook plugin on the main page will refresh and show the following message :

 

Facebook - og app 3

 

Open Graph schema definition

It’s time to define the Open Graph schema. This will allow us to define an action and a linked object. For this example, we will define the action of driving a car object.

In the properties section of the application, click on the menu Open Graph :

 

Facebook - og app 4

 

You will be automatically redirected to the Getting Started wizard. Fill the action drive and the object car on the page then click on the Get Started button to begin the configuration :

 

Facebook - og app 5

 

The first step for defining the schema is to define the action. You can let the default values for properties and click on Save Changes and Next to go to the second step which is the object definition.

You can define custom properties for your object. In our example, we will add the property Horsepower to the car object definition.

Click on Add Another Property:

 

Facebook - og app 7

 

Define the property as below:

 

Facebook - og app 8

 

The preview will help you to have an idea about how the object will be displayed on the users timeline :

 

Facebook - og app 9

 

Then click on the Save Changes and Next button at the bottom of the page to go to the next step.

The last step of the configuration is to define how datas will be displayed and aggregated on the users timeline. For now, we will choose Drive for the field Data to Display and Gallery for the field Layout Style. We will keep other values as they are :

 

Facebook - og app 10

 

Click on the Save and Finish button to validate your schema. You will be redirected to the management page for Open Graph schema within your application. You will notice that besides the action Drive, appears a link Submit :

 

Facebook - og app 11

 

It allows you to send your action name for approval to the Facebook team to verify that this is an action “politically correct”. You must do this if you want your application to be public.

Publish actions on users timeline

To publish actions on users timeline, the first step is to create a product page. Here is an example :

<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr” lang=”en-US” xmlns:fb=”https://www.facebook.com/2008/fbml”>
<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# [YOUR_APP_NAMESPACE]: http://ogp.me/ns/fb/[YOUR_APP_NAMESPACE]#”>
<meta property=”fb:app_id” content=”[YOUR_APP_ID]” />
<meta property=”og:type” content=”[YOUR_APP_NAMESPACE]:car” />
<meta property=”og:url” content=”Put Your Own URL Here” />
<meta property=”og:title” content=”Sample Car” />
<meta property=”og:description” content=”Some Arbitrary String” />
<meta property=”og:image” content=”https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png” />
<meta property=”[YOUR_APP_NAMESPACE]:horsepower” content=”125″ />
<title>Drive those cars</title>
<script type=”text/javascript”>
function iDriveIt()
{
FB.api(
‘/me/[YOUR_APP_NAMESPACE]:drive?car=http://fb.hugon.ws/drive-cars/ds3racing.html’,
‘post’,
function(response) {
if (!response || response.error) {
alert(‘Error occured’);
} else {
alert(‘Drive was successfully published with ID : ‘ + response.id);
}
});
}
</script>
</head>
<body>
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘[YOUR_APP_ID]‘,
status : true, cookie : true, xfbml : true
});
};
(function(d){
var js, id = ‘facebook-jssdk’; if (d.getElementById(id)) {return;}
js = d.createElement(‘script’); js.id = id; js.async = true;
js.src = “//connect.facebook.net/en_US/all.js”;
d.getElementsByTagName(‘head’)[0].appendChild(js);
}(document));
</script>
<h1>Drive those cars</h1>
<h2>DS3 Racing</h2>
<p>
<img title=”DS3 Racing” src=”http://fb.hugon.ws/drive-cars/img/ds3racing.jpg” width=”320″/>
</p>
<form>
<input type=”button” value=”I drive it” onclick=”iDriveIt()” />
</form>
</body>
</html>

Simply replace [YOUR_APP_ID] by the ID of your app and [YOUR_APP_NAMESPACE] by the namespace of your app.

The Head tag of this page contain the namespace definition and the open graph properties. You can easily have this base by clicking the link Get Code in front of the object Car :

 

Facebook - og app 12

 

It’s the javascript function iDriveIt which allow your page to post contents of the action on the users timeline. This is to use the Facebook API, after the namespace of the application appears the action (drive) then the parameter value for the object (car), we associate the URL that contains the schema with values of the object. This URL can be different from the page that carries the publication of the action :

/me/ns-drive-cars:drive?car=http://fb.hugon.ws/drive-cars/ds3racing.html

The application is now ready to be used !

How actions are displayed

Go to the product page on your website and click on the button I drive it :

 

Facebook - og app 13

 

If everything went well, you should see the javascript confirmation message :

 

Facebook - og app 14

 

And on your timeline should appear a new activity:

 

Facebook - og app 15

 

If you are doing several actions, they will be formatted according to the parameters defined:

 

Facebook - og app 16

 

Customize the display of an object in the timeline

You will notice that the property Horsepower does not appear on the Facebook timeline. To display this information, you must modify the aggregation parameter of the action. In the Drive aggregation, change the property Caption Lines with the value Horsepower : {car.horsepower} :

 

Facebook - og app 17

 

Facebook replace the information between brackets by the values of the object when displaying. You will notice when entering this field that Facebook offers a list of possible field to insert :

 

Facebook - og app 18

 

By refreshing yopur timeline, you will see that the display would now take into account the property Horsepower :

 

Facebook - og app 19

 

Conclusion

You now have a good basis to start publishing content on the timeline of users from your site. Further, the Facebook built-in translation feature for application can help you to localize your application.

]]> http://www.label.ch/en/blog/creez-votre-premiere-application-facebook-avec-open-graph/feed/ 1 March 2012′s font – Lane http://www.label.ch/en/blog/la-typo-de-mars-2012-lane/ http://www.label.ch/en/blog/la-typo-de-mars-2012-lane/#comments Wed, 07 Mar 2012 07:31:07 +0000 Julien http://www.label.ch/en/?p=4277

Designer: Apostrophic Labs

License: Free

Type: Sans Serif

Format: TTF Mac/PC font

Download Lane’s font: http://www.fontsquirrel.com/fonts/Lane

]]> http://www.label.ch/en/blog/la-typo-de-mars-2012-lane/feed/ 0 2012′s Webdesign trends http://www.label.ch/en/blog/les-tendances-du-webdesign-en-2012/ http://www.label.ch/en/blog/les-tendances-du-webdesign-en-2012/#comments Mon, 05 Mar 2012 15:15:39 +0000 Julien http://www.label.ch/en/?p=4174
Au pôle Design, nous avons décidé de parcourir le web et de vous faire un petit tour d’horizon des tendances à venir en terme de Webdesign pour 2012.
Responsive design
On utilise le terme de «Responsive design» pour les sites web basés sur une mise en page adaptable à toutes les résolutions d’écrans. Le responsive design prend une place de plus en plus importante avec l’essor des tablettes tactiles sur le marché. Il faut désormais concevoir un design de site qui s’adapte en fonction des différents devices et résolutions de ceux-ci.
HTML 5 & CSS3
Le HTML5 déjà intégré dans les navigateurs web les plus récents, améliore l’accessibilité, et ce grâce à plusieurs choses :
L’introduction des balises «nav», «header», «footer» et «aside» est très intéressante car elle permet au navigateur de fournir aux technologies d’assistance une cartographie de la page web.
Avec les nouveaux éléments pour baliser le contenu et les éléments de sections, le Html5 est donc plus sémantique et améliore clairement le référencement.
Le multimédia, avec les balises «audio» et «video» permet de rendre son site plus dynamique et surtout de le rendre compatible avec les mobiles et tablettes ne permettant pas de lire le flash.
Le html5 est orienté sur la mobilité, celui-ci associé aux mediaqueries (CSS3) qui permettent de faciliter le développement sur les différents devices et d’améliorer l’apparence graphique et la lisibilité d’un site web.
Les polices Web
L’utilisation de l’API Google Web Font permet d’inclure de nouvelles polices, valables sur n’importe quel navigateur avec une seule ligne de Javascript, ce qui permet de changer des polices habituellement utilisées (Arial, Verdana, Times…) et donc de proposer un rafraîchissement des typos sur les sites web.
Animations & plugins jQuery
Les animations css3 et l’utilisation de la librairie jQuery permettent de dynamiser un site sans trop l’alourdir en terme de temps de chargement de la page.
L’une des tendances actuelles est au décalage des zones de contenus sur différents plans lorsque l’on scroll avec sa souris.
www.feelandco.com
Mais aussi au redimensionnement du background du site en fonction de la taille de l’écran :
www.reuge.com
Le placement décalé des zones de contenu est en vogue. 2012 souhaite rompre avec la monotonie des sites carrés ou tout les éléments sont alignés, désormais le contenu se réapproprie l’espace alloué et s’organise de façon plus ludique. On note également ici la navigation fixe en haut de page.
UX
Désormais en 2012, on ne parle plus de site web sans parler de l’expérience utilisateur , qui est l’une des clés primordiale pour créer un site utilisable et le rendre mémorable, cohérent et facile à utiliser.
Pour rendre une expérience engageante, il faut s’appuyer sur plusieurs choses :
- L’ergonomie du site : la tendance est à la navigation fixe, à savoir le menu principal accessible directement et ce à n’importe quel endroit de la page et du site, sans avoir à remonter en haut de page pour accéder à une autre rubrique.
- Un concept original qui fait ressentir à l’utilisateur le caractère émotionnel du produit/de la marque.
- Un Webdesign élégant, fonctionnel, interactif.
- En termes de contenu : ne conserver que l’essentiel, tout contenu n’apportant pas une réelle plus value à la marque/produit n’est que superflu.
- L’accessibilité.
- Il ne faut pas négliger la résolution des écrans, qui fait partie intégrante de l’expérience utilisateur.
Design épuré/minimaliste
En effet les designs des sites se veulent de plus en plus épurés et orientés sur l’expérience utilisateur : Par exemple, on laisse place aux visuels full screen mettant en avant le produit/la marque, on oubli les textes de descriptions à rallonge et on se focalise sur une navigation intuitive. On simplifie le design pour que l’utilisateur puisse mieux se projeter dans l’univers de la marque.
Tous ces détails apportent un confort visuel, une meilleure lisibilité et donc une meilleure expérience utilisateur.

www.fruute.com

Au pôle Design, nous avons décidé de parcourir le web et de vous faire un petit tour d’horizon des tendances à venir en terme de Webdesign pour 2012.On utilise le terme de «Responsive design» pour les sites web basés sur une mise en page adaptable à toutes les résolutions d’écrans. Le responsive design prend une place de plus en plus importante avec l’essor des tablettes tactiles sur le marché. Il faut désormais concevoir un design de site qui s’adapte en fonction des différents devices et résolutions de ceux-ci.Le HTML5 déjà intégré dans les navigateurs web les plus récents, améliore l’accessibilité, et ce grâce à plusieurs choses :L’introduction des balises «nav», «header», «footer» et «aside» est très intéressante car elle permet au navigateur de fournir aux technologies d’assistance une cartographie de la page web.Avec les nouveaux éléments pour baliser le contenu et les éléments de sections, le Html5 est donc plus sémantique et améliore clairement le référencement.Le multimédia, avec les balises «audio» et «video» permet de rendre son site plus dynamique et surtout de le rendre compatible avec les mobiles et tablettes ne permettant pas de lire le flash.Le html5 est orienté sur la mobilité, celui-ci associé aux mediaqueries (CSS3) qui permettent de faciliter le développement sur les différents devices et d’améliorer l’apparence graphique et la lisibilité d’un site web.Les polices WebL’utilisation de l’API Google Web Font permet d’inclure de nouvelles polices, valables sur n’importe quel navigateur avec une seule ligne de Javascript, ce qui permet de changer des polices habituellement utilisées (Arial, Verdana, Times…) et donc de proposer un rafraîchissement des typos sur les sites web.Les animations css3 et l’utilisation de la librairie jQuery permettent de dynamiser un site sans trop l’alourdir en terme de temps de chargement de la page.L’une des tendances actuelles est au décalage des zones de contenus sur différents plans lorsque l’on scroll avec sa souris.www.feelandco.comwww.reuge.comLe placement décalé des zones de contenu est en vogue. 2012 souhaite rompre avec la monotonie des sites carrés ou tout les éléments sont alignés, désormais le contenu se réapproprie l’espace alloué et s’organise de façon plus ludique. On note également ici la navigation fixe en haut de page.Désormais en 2012, on ne parle plus de site web sans parler de l’expérience utilisateur , qui est l’une des clés primordiale pour créer un site utilisable et le rendre mémorable, cohérent et facile à utiliser.Pour rendre une expérience engageante, il faut s’appuyer sur plusieurs choses :- L’ergonomie du site : la tendance est à la navigation fixe, à savoir le menu principal accessible directement et ce à n’importe quel endroit de la page et du site, sans avoir à remonter en haut de page pour accéder à une autre rubrique.- Un concept original qui fait ressentir à l’utilisateur le caractère émotionnel du produit/de la marque.- Un Webdesign élégant, fonctionnel, interactif.- En termes de contenu : ne conserver que l’essentiel, tout contenu n’apportant pas une réelle plus value à la marque/produit n’est que superflu.- L’accessibilité.- Il ne faut pas négliger la résolution des écrans, qui fait partie intégrante de l’expérience utilisateur.

]]> http://www.label.ch/en/blog/les-tendances-du-webdesign-en-2012/feed/ 0 February 2012′s font – Ostrich http://www.label.ch/en/blog/la-typo-de-fevrier-2012-ostrich/ http://www.label.ch/en/blog/la-typo-de-fevrier-2012-ostrich/#comments Sat, 03 Mar 2012 07:19:52 +0000 Julien http://www.label.ch/en/?p=4164

Designer: Tyler Finck

License: Freeware

Type: Sans Serif

Format: TTF Mac/PC font

Download Ostrich’s font: http://www.theleagueofmoveabletype.com/ostrich-sans

]]> http://www.label.ch/en/blog/la-typo-de-fevrier-2012-ostrich/feed/ 0 (Fr) Google «socialise» son moteur de recherche http://www.label.ch/en/blog/google-%c2%absocialise%c2%bb-son-moteur-de-recherche/ http://www.label.ch/en/blog/google-%c2%absocialise%c2%bb-son-moteur-de-recherche/#comments Tue, 31 Jan 2012 08:19:20 +0000 Bastien Léchaud http://www.label.ch/en/?p=4200 ]]> http://www.label.ch/en/blog/google-%c2%absocialise%c2%bb-son-moteur-de-recherche/feed/ 0 December 2012′s font – RBNo2 Light http://www.label.ch/en/blog/la-typo-de-janvier-2012-rbno2-light/ http://www.label.ch/en/blog/la-typo-de-janvier-2012-rbno2-light/#comments Mon, 30 Jan 2012 07:46:53 +0000 Julien http://www.label.ch/en/?p=4130

Designer: Rene Bieder

License: Freeware

Type: New gothic Sans Serif

Format: OTF Mac/PC font

Download RBN02 font: http://fontfabric.com/downloadfont/RBNo2.zip

]]> http://www.label.ch/en/blog/la-typo-de-janvier-2012-rbno2-light/feed/ 0