Voici un projet sur lequel j’ai travaillé suite à un tweet de Nicolas Rouyer qui a réalisé un superbe design inspiré par l’univers graphique des comics américains.
CaptainDash.com a été développé en HTML/CSS/JS et a été élu Site Of The Day par Awwwards.
Depuis janvier dernier, je travaille avec l’Agence Modulo. Une petite équipe, pleine d’idées et d’ambitions.
J’ai déjà réalisé de beaux projets, dont deux en marque blanche dont je ne peux pas vraiment parler (?) : une petite application Flash, et un site wordpress.
Mais vendredi dernier, c’est un autre projet que nous avons mis en ligne, le site du Festival de Saintes :
Il s’agit de mon premier “site élastique” : un site qui s’adapte à toutes les tailles d’écrans. Aussi agréable à lire sur ordinateur, tablette ou smartphone. Réalisé à grand coups de media queries CSS3 et de réflexions ergonomiques.
Cette technique, apparemment simple, cache en fait un bon nombre de problèmes techniques et ergonomiques. En effet, il faut faire avec le tronc commun des spécifications du W3C implémentées par les appareils, et arriver à fournir une expérience utilisateur cohérente et adaptée à tous les formats.
J’avais entendu parler des media queries il y a longtemps, mais c’est Quentin (toki-woki) qui m’a permis d’ouvrir les yeux sur cet univers merveilleux.
Aujourd’hui avec l’apparition massive d’appareils connectés j’ai du mal à imaginer mes futurs projets autrement qu’en “élastique”. Même si, comme toute technologie, il faudra l’utiliser à bon escient.
Sur cette lancée, j’ai finalisé et intégré un nouveau design pour mon site/page remitoffoli.com :
N’hésitez pas à me donner votre avis sur le sujet et sur les deux sites web. :)
Note : penser à redesigner le blog.
Here is a snippet to set a maximum lines to a TextField and truncate the end of the text with a “…” :
function truncate(textfield:TextField, maxLines:int):void
{
// the alternative text
var alt:String = "...";
// if the text displayed has more lines than wished
if (textfield.numLines > maxLines)
{
// index of the last char of the last line to display
var char:int = textfield.getLineOffset(maxLines) - 1;
// remove the length of the alternative text
char -= alt.length;
// get the last non space char index
char = textfield.text.substring(0, char + 1).search(/\S\s*$/);
// set the new text into the textfield
textfield.text = textfield.text.substring(0, char) + alt;
}
}
Using TextFieldAutoSize.LEFT and this code :
truncate(titleTxt, 1); descTxt.y = titleTxt.height; truncate(descTxt, 3);
You get this result :
