Le Blog

Le blog laboratoire de F.L.D. Studio
0

Patientez...

Patientez

Interface utilisateur

Il est très important dans une interface utilisateur de fournir à l'internaute une indiquation sur la prise en compte et le déroulement d'une action. Lorsque qu'il clic sur un bouton et que le traitement peut être long comme par exemple pendant le upload d'un fichier, il est indispensable de l'informer qu'il se passe quelque chose et qu'il doit attendre. D'abord on le rassure,  sa demande est bien prise en compte et cela évite aussi qu'il appui plusieurs fois sur le bouton au risque d'induire un comportement non souhaité dans l'application.

Le bouton "Ladda"

Ce petit bout de code va parfaitement réaliser cette tache, 'il le fait avec originalité et efficacité. L'idée, simple, est d'afficher une animation à l'intérieur même du bouton. C'est très pratique car d'une part l'utilisateur voit que son action est prise en compte, que le bouton n'est plus cliquable pendant ce laps de temps et enfin on utilise pas de place supplémentaire dans le design.

Il s'agit d'un petit script JavaScript autonome et d'un soupson de CSS. A l'intérieur de la feuille de style on pourra d'ailleur faire un peux de ménage car il existe plusieurs façons d'afficher l'icone animée et les boutons peuvent être de différentes couleurs.  A noter que le loader ne requiére aucune image de type .gif animé, il est basé sur spin.js qui est encapsulé dans Ladda.

Ladda fonctionne à partir de IE9 et sur tous les autres navigateurs.

Ressource

Voir aussi : http://taitems.github.io/iOS-Overlay/ qui permet de créer un écran en overlay qui affiche un message par dessus l'écran en cours. Cette ressource permet de signifier à l'utilisateur différents évenement comme attente, succé ou erreur.

PACE : http://github.hubspot.com/pace/docs/welcome/ presque rien à configurer, pas de dépendance et detection automatique de l'affichage.

En CSS : https://github.com/tobiasahlin/SpinKit

Tutoriel animation CSS : http://tympanus.net/Development/ProgressButtonStyles/ et le ZIP du tuto

Sources à télécharger

Avec 'une image GIF animée : http://www.ajaxload.info/

Catégories: Développement WEB

Tags: Ressource

Commentaires: Pas de commentaires

0

Le Web en Stat

Statistiques du Web

Statistiques Web

Pour cibler son public il est indispensable de connaitre quelques chiffres. Une des questions que l'on est en droit de se poser serait par exemple : Quel navigateur est le plus utilisé en France ? Quelle part de marché représente les navigateurs de Microsoft en Allemagne. Pour trouver ces informations et bien d'autres encore, il existe des sites comme : http://gs.statcounter.com/ qui peuvent vous fournir se type d'informations.

Quelques exemples :

Source: StatCounter Global Stats - Browser Market Share

Source: StatCounter Global Stats - Mobile Browser Market Share

A savoir aussi, comment lisser les courbes du temps de chargements dans Google analytics : http://blog.madrzejewski.com/ameliore-courbes-temps-chargement-site-analytics/#more-181

Catégories: Développement WEB

Commentaires: Pas de commentaires

0

Responsive Web Design

Responsive Web Design aujourd'hui et demain

La problématique

Comme illustré ci dessus, le web jusqu'à l'année 2012 était essentiellement consulté à partir d'un écran dont on connaissait à peux près la taille, posé sur un bureau et relié à un ordinateur relativement puissant. Aujourd'hui la multiplication des médias utilisés pour naviguer à repoussée cette frontière qui devenait confortable, surtout avec la disparition progressive des "vieux' navigateurs.

Du smartphone à la TV connectée en passant par les tablettes, ordinateurs portables, liseuses et autres médias connus ou encore à venir (montre, lunettes,...), les résolutions d'écran, la vitesse des processeurs, la mémoire embarquée, la presence ou non de résseaux constituent autant de difficultés à résoudre pour proposer à l'internaute un contenu de qualité, lisible et rapide au chargement.

Etat des lieux

Un très bon article de Stéphanie Walter, publié dans  Smashing Magazine puis traduit pour Alsacreation sous le titre Responsive Webdesign – présent et futur de l’adaptation mobile  fait un point sur les outils et méthodes qui permettent aujourd'hui et sans doute mieux encore demain de gérer les différents aspects de ce nouveau chalange technique. Le terme design est trompeur car les problèmes soulevés par le web reponsive vont bien au dela du simple design.

Comment détecter l'appareil utilisé, comment n'envoyer que le bon contenu, autant de questions qui offre des reponses imparfaites à ce jour et qui demanderons encore à la communauté des concepteurs beaucoup d'efforts et de partages d'expèriences.

Lire qussi cet article sur le responsive et les grilles fluides : http://davidl.fr/webdesign.html

Ressources

Le responsive design fait et fera encore couler beaucoup d'encre (virtuelle ou pas).  On peut par exemple télécharger le livre blanc du responsive design de l'entreprise d'ergonomie miratech (.pdf 4Mo) ou se procurer des livres comme "Projet responsive web design : Du recueil des besoins à la mise en ligne" de Jérémie Patonnier et Rudy Rigot. A lire aussi cet article sur le blog de l'agence LunaWeb

Voir aussi : http://coding.smashingmagazine.com/tag/responsive-web-design/

Un retour sur expérience : http://mobile.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/

Etat des lieux à la fin 2013 : http://html5doctor.com/responsive-images-end-of-year-report/

Ressources à télécharger

Responsive-design-miratech.pdf (Retour sur expérience - .Pdf 4Mo)

Conférences

Conférence sur le RWD au breizhcamp 2013 : http://www.infoq.com/fr/presentations/responsive-web-design-ihm?utm_source=infoq&utm_medium=videos_homepage&utm_campaign=videos_row2

Des exemples en lignes

Le mieux, au final sera de pratiquer par soi même de tester, (beaucoup) et de rester attentifs aux nouveaux standards qui seront disponibles dans les navigateurs de demain tout en continuant (hélas) à gérer les plus anciens, ceux d'aujourd'hui en fait.

Synthése

Un document .pdf (858Ko) expliquant de façon très claire et synthétique la différence entre le Responsive Web Design, le design adaptatif et le site mobile dédié.

Catégories: Développement WEB

Tags: Download, pdf

Commentaires: Pas de commentaires