Concevoir : Ressources pour un site Adaptatif (Responsive Design)

Tout pleins de ressources (images, vidéos et slideshows) pour réaliser un site au design adaptatif !

http://blog.websourcing.fr/webdesign-express-responsive-slideshow-image-video/

Concevoir : un Carrousel avec Ext JS

Au détour de mes lectures Webistiques, je suis tombé sur ce tutoriel pour la mise en place d'un carrousel avec la librairie de Sencha (voir ma précédente présentation).

C'est bien écrit et le rendu est sympa alors je ne peux que vous en conseiller la lecture sur BlogNT.

Concevoir : Tester le rendu de vos design adaptatif

Matt Kersley, designer web, propose une page permettant de visualiser rapidement le rendu de votre site à différentes résolutions.
Simple et pratique : http://mattkersley.com/responsive/

Concevoir : L'adaptabilité des vidéos

Vous voulez que vos vidéos YouTube, Dailymotion, Vimeo, etc. s’adaptent à la taille de la fenêtre de l'utilisateur.
Pour cela, utilisez FitVids.js : un plugin jQuery qui permet une largeur adaptative.

Encore du RWD (Responsive Web Design) !

Concevoir : L'adaptabilité grâce à des frameworks...

Aujourd'hui, je vous propose deux frameworks à mettre en oeuvre et à suivre de près... N'hésitez pas à me faire part de vos premières impressions !

• http://lessframework.com/ qui se base sur le concept de Responsive Design
• http://centage.peruste.net/ qui se base sur LESS (une syntaxe structurée pour le CSS) et calcule la mise en page optimale en fonction de l'équipement de lecture.

Concevoir : Ext JS, un framework impressionnant !

Voici un petit billet sur une technologie que nous mettons en œuvre depuis quelques temps chez Logi-Tech Informatique pour présenter des applications légères ergonomiquement efficace et agréable pour nos clients.

Ext JS est une bibliothèque Javascript Open Source (en GPLv3) qui propose de nombreux composants de RIA (Rich Internet Application).
A l’origine c’est une branche de la bibliothèque JavaScript développée par Yahoo! sous l'appellation YUI. Dès sa version 1.0, Jack Slocum, cherche à en faire un produit industrialisé. Ext-JS s'est ainsi rapidement retrouvé au rang des meilleures bibliothèques JavaScript Open Source. Elle est d’ailleurs utilisé par de grands noms comme Adobe, IBM ou encore Sony.

La version 4 vient d'être diffusée en version finale (avril 2011).
Les composants proposés par le framework Ext JS sont nativement hautement paramétrables. Malgré cela, il arrive que nos clients aient des besoins non couverts... aucun soucis, la mise à disposition du code nous permet de réaliser les évolutions nécessaires rapidement.

Avantages :

• Un nombre impressionnant de composants paramétrables à loisir
• Une "facilitation" de la mise en œuvre d'une architecture MVC
• Compatibilité avec les principaux navigateurs du marché
• Des graphiques ne nécessitant pas de plugins
• Une haute adaptabilité à votre charte graphique
• Une interopérabilité avec des références du marché comme Google Maps

Je n'avance pas que ce framework est LA librairie à utiliser mais notre retour d'expérience nous permet de confirmer sa haute valeur ajoutée pour qui souhaite réaliser des outils WEB ergonomiques et graphiquement réussis.
Pour plus d’informations sur les possibilités de la librairie Ext JS 4 : http://www.sencha.com/products/extjs/examples/

Concevoir : Less, moins de CSS pour d'avantage d'efficacité

Une bonne façon de s'obliger à structurer ses développements CSS : http://lesscss.org/

"LESS est un langage de présentation qui étend CSS pour lui apporter ce qu’il manque : productivité, facilité de maintenance et un héritage de propriétés. Il ressuscite quelque peu le fameux CSS Server Side.
À vrai dire, il apporte tout ce qu’il manquait à la réalité du terrain. De la souplesse et une possibilité supplémentaire d’industrialiser les développements d’interface."

Un très bon article de Thomas Parisot sur le sujet : http://www.clever-age.com/veille/blog/less-moins-de-css-pour-davantage-d-efficacite.html

Concevoir : CSS3, un bon site pour trouver de l'inspiration

Vincent De Oliveira nous propose différentes créations en CSS3 avec de bonnes explications.
Un très bon point de départ et de nombreuses inspirations pour le développement CSS3.

Il faut un navigateur compatible...

http://www.css3create.com/

Concevoir : Mockup ? Kesako ?

En informatique, le terme mock-up (qui vient du même mot anglais qui signifie une maquette à l'échelle 1:1) désigne un prototype d'interface utilisateur. Un mock-up a ainsi pour rôle de présenter les idées sur l'utilisation d'un logiciel. (Wikipedia)

Sur ce site vous trouverez une sélection de 18 outils gratuits de création d’interfaces graphiques (et de schémas) pour vos projets. L'auteur donne son impression pour chaque outil testé.

Le mockups qui sort du lot est : Mockflow qui est une application, online ou en application, via une interface Adobe Air, qui permet de maquetter des applications avec différent rendus tel que :

• Facebook
• iPhone
• iPad
• Android

Concevoir : eZ publish sera notre CMS PHP de prédilection !

Suite à une étude réalisé en juillet 2010 (« HARDIS - e-Solutions - Veille - Choix d'une solution CMS Open Source.pdf »), nous avions sélectionné deux CMS (un PHP et un Java) qui répondaient à nos attentes pour un système de gestion de contenu performant et robuste.

eZ publish nous semble être une bonne solution dans un environnement PHP car :

·         il permet une gestion multi-site simple et claire.

·         il propose un nombre important de fonctionnalités en natif. Cela permet de s’affranchir de la tâche fastidieuse d’installation et de paramétrage des plugins et assure lors des montées de version une plus grande robustesse.

·         il possède une interface d’administration conviviale, dissociée de la partie FrontOffice et présente le site sous forme arborescence ce qui permet une navigation rapide.

·         malgré une communauté moins importante, la qualité et la réactivité des développements est très bonne. Le business model de la société eZ n’y est surement pas étranger.

eZpublish est aujourd'hui une solution CMS très aboutie. C'est ce que l'on peut appeler une solution "professionnelle", en comparaison avec d'autres types de CMS, à visée plus communautaire.

Pour Logi-Tech Informatique (Groupe HARDIS), eZ publish est un outil pérenne, avec une adaptabilité extraordinaire aux besoins spécifiques, grâce à une architecture ouverte 100% objet, basée sur le modèle MVC.

Concevoir : L'adaptabilité maximale ou le Responsive Design

La multiplication des médias permettant l'accès à nos sites devient extrême.
Là où, il y a encore 2 ans, on devait traiter le cas de l'affichage d'un site dans 2 résolutions cibles (800x600 et 1024x768), on arrive à un nombre de résolutions possibles quasiment égal au nombre de terminaux (tablette, smartphone, portable, TV, ...).

Si vous avez déjà été confronté aux problématiques d'impression sur des sites Web, vous avez surement, au moins une fois, résolu cette problématique par l'utilisation d'une feuille de style dédiée à l'impression(media="print").
De même, il est envisageable de traiter la multitude de support par du spécifique :

• définition de redirection en fonction du média sur un site dédié = une charge de maintenance importante (même si c'est en partie géré si l'on utilise un CMS)
• chargement d'une feuille de style spécifique au média = autant de CSS que de terminaux, à faire évoluer pour tout nouveau terminal non compatible
• optimisation du site pour les médias de faible résolution = limitation des possibilités en terme d'ergonomie et de contenu

On voit clairement qu'il n'y a pas de solution miracle parmi celles ci-dessus, une réponse à ce manque d'adaptabilité passe par le "Responsive Design". Basé sur les "Fluid Grids", "Fluid Images"  ce concept propose une mise en page adaptative...

A partir de votre Mockup, vous définissez l'unité de base de votre page et toute la mise en page est définie sur la base de cette unité via la définition de taille en ems (si vous avez bataillé avec IE pour le redimenssionnement de texte cela ne doit pas être une unité inconnue ;)).

De cette manière, vos conteneurs (div) sont eux aussi proportionnels à votre contenu, dans l'exemple d'Ethan Marcotte,

on définit :

• corps de texte : 16px (soit 1 em)
• Titre H1 : 1,5em (24px/16px)
• Enumeration : 0,875em (14px/16px)

En traitant les conteneurs à l'identique (#page{max-width.61.75em} soit 988px/16px) on a une taille maximale variable fonction de la taille du texte du navigateur.

Ajouter à cela la nouvelle capacité de CSS3, à savoir les media queries et vous avez un environnement adapté au média qui consulte vos pages au sein d'un même design : That's all folks !


Sources :
http://www.w3.org/TR/css3-mediaqueries/
http://www.alistapart.com/articles/howtosizetextincss/
http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/fluidgrids/
http://unstoppablerobotninja.com/entry/fluid-images