Le Blog

Le blog laboratoire de F.L.D. Studio
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

0

Flat design

Flat Design

Tendance minimaliste

Le "flat design" comme son nom l'indique est du design à plat. C'est une tendance très forte cette année qui affecte le design des sites Internet et qui s'oppose principalement au skeuomorphisme qui à l'inverse s'ingénie à reproduire la réalité dans les interfaces virtuelles. On trouvera dans le blog de tuto.com un bon article qui explique tout cela.

En résumé il s'agit de simplifier à l'extreme les interfaces utilisateurs avec un certain nombre de rêgles comme l'utilisation d'applats de couleurs et la suppression de tout éléments décoratifs superflux. C'est même un comble car après avoir cherché pendant des années à faire des boutons en relief ou à arrondir les angles des blocs, chose aujourd'hui très simplement réalisable en CSS3 et bien cette tendance tend à supprimer tout cela !!!

L'approche graphique n'est pas loin de celle de l'école du Bauhaus et la fameuse phrase de son 3ème directeur Ludwig Mies van der Rohe :

Less is more

On y retrouve aussi le concept forts des architectes modernistes comme Le Corbusier, ou Walter Gropius qui est que la forme dicte la fonction.

Le "flat design" est aussi la fille du "'responsive design" qui lui n'est pas une tendance artistique mais un ensemble de techniques visant à afficher un contenu plus ou moins identique sur des médias de tailles différentes (du smartphone à la T.V.) Un des impératifs du responsive étant la légéreté, le flat se prête très bien à l'exercice car il n'est plus necessaire de rédiger des lignes et des lignes de CSS pour s'occuper du décors.

Tendance lourde ou mode passagère j'obterais plutôt pour la première hypothése. De nombreux sites qui se refont un look cette année adoptent ce style de design aussi bien pour des raisons techniques que esthétiques. Une galerie de sites "flat"  :  http://fltdsgn.com/ ou une adaptation pour Jquery UI

Lire aussi cet article sur le blog de l'agence LunaWeb

Codes Couleurs du Flat Design

Flat Couleurs

Outils

Les couleurs du Flat et un site pour les trouver

Palette CSS

Catégories: Humeur

Commentaires: Pas de commentaires

0

ProcessWire for Ever

CMS Critic proplusé par PorocessWire

Nouvelle distinction

La nouvelle vient de tomber comme ont dit, plutôt la newsletter de  CMS Critic qui comme son nom l'indique est un site qui parle des CMS (Content Management System). Ce qui déclenche ce post c'est justement l'adoption par ce site de  ProcessWire comme moteur de sa nouvelle mouture. Qu'elle belle démonstration de la puissance de cet outil. Les concepteurs indiquent qu'il remplace WordPress qui auparavent fonctionnais  avec une trentaine de pluging et 30Mo de base de données. La taille de celle-ci est à présent divisiée par 6. Le design de base repose sur le framwork CSS  Foundation et de meilleurs temps de réponse sont au rendez vous  de ce nouveau moteur.

Aprés avoir été élu meilleur CMS de l'année 2012 par la critique, voila une belle reussite pour ce CMS qui je l'avoue à aussi ma modeste préférence. Après l'avoir découvert par hasard à l'été 2012 je l'avais utilisé pour la conception du site de la société MSD Informatique et aussi pour la Ligue Motocycliste de Bourgogne . Ce CMS agnostique, qui n'impose ni feuilles de styles, ni javascript pré-conçus offre une grande liberté de conception pour toute sorte de projet. Le blog que vous lisez en ce moment est lui même un module de ProcessWire.

ProcessWire est un outil pour développeur, pas fait pour que utilisateur lamda monte son site par lui-même donc et de ce fait permet de conceveoir à peux près n'importe quoi avec une qualité, une robuteste et une élégance de codage encore rarement atteinte par les produits concurents. J'espère que ce début de notoriété reconnue lui fournira sa chance auprès de la communauté des développeurs qui parfois à tendance à suivre les "standards du marché" sans trop les remettre en question.

L'article de CMS Critic : http://www.cmscritic.com/cms-critic-is-now-powered-by-processwire/

Tous les articles : http://www.cmscritic.com/search/?q=processwire


Chez ProcessWire

La page par défaut habillée par ZURB Foundation 4 : http://modules.processwire.com/modules/foundation-site-profile/

Du "Hanna Code" (PHP,HTMLJavascript) dans les textareas avec ou sans editeur enrichi : http://modules.processwire.com/modules/process-hanna-code/

Code used by this module for generating encoded signatures was adapted from Google's Extended URL signing gallery sample for PHP:  http://gmaps-samples.googlecode.com/svn/trunk/urlsigning/UrlSigner.php-source

Organiser le back-office d'un site multi-langues : http://modules.processwire.com/modules/language-field-tabs/

Construire un site multi-langues :  http://processwire.com/api/multi-language-support/multi-language-urls/

Intercepteur d'image pour les formater : http://modules.processwire.com/modules/textformatter-image-interceptor/

Catégories: Développement WEB, Humeur, Processwire

Commentaires: Pas de commentaires