Blog d'un Éternel Geek

Google nous introduit dans le Material Design en douceur

http://vivageek.livehost.fr/data/images/news/design/flat.png

L’expérience Material Design avec MDL la simplicité apportée à Google pour répondre aux attentes des internautes.

 

MDL vous permet d’entrer à l’aspect design material et se sentir à vos sites Web. Il ne repose pas sur des Framework JavaScript et vise à optimiser pour une utilisation multi appareil pour les navigateurs plus anciens et pour offrir une expérience immédiatement accessible à tous.

Mais c'est quoi Material Design Lite ? Google nous explique le long de tutoriels très détaillé ce qu'il en est de ce nouveau design en vigue.

Material Design Lite

Une mise en œuvre de composants matériel de conception vanille CSS, JS, et HTML.
Matériau Conception Lite (MDL) vous permet d'ajouter un aspect design Matériel et se sentir à vos sites Web de contenu statique. Il ne repose pas sur des frameworks JavaScript ou bibliothèques. Optimisé pour une utilisation multi-appareils, se dégrade gracieusement dans les anciens navigateurs, et offre une expérience qui est accessible à tous.r.


Utilisez MDL sur votre site?


Ce document est destiné aux développeurs qui contribueront à compiler ou MDL. Si vous cherchez à utiliser MDL sur votre site ou application web s'il vous plaît laisser un lien vers mdl.io.


support du navigateur

IE9

IE10

IE11

Chrome

Opera

Firefox

Safari

Chrome (Android)

Mobile Safari

B

A

A

A

A

A

A

A

A

Navigateurs de grade A sont entièrement pris en charge. Navigateurs de grade B seront gracieusement dégrader à notre expérience de CSS uniquement.

Vanille ça me parle ? tous le monde connais le framework open source Vanille qui est très souple également mais qui utilise le js comme de la gourmandise.

La c'est très clair on nous dispense d'une plateforme qui va nous permette de nous iniser délicatement au MLD avec Google.

Google ne lancerait-il pas les modes ces dernières années en terme de Design Web ?

Faut voir !

Je me suis intéressé ce matin au Material design Lite, c’est un outil proposé par Google qui permet de concevoir des sites Web sur ce principe. Il est évident que je suis allé tester cette application afin devoir ses limites mais aussi ses possibilités. Donc j’arrive sur la page de présentation de cette application qui d’ailleurs est disponible sur Github.

http://www.getmdl.io

https://github.com/google/material-design-lite

Sur la première page nous pouvons remarquer comme sur le screen des formes flat.

Google en peut dire s’est mis à l’heure du material design, on remarque que depuis quelques temps Google fait coïncider Android et les sites Web. Ces démarches d’utiliser de nouvelles applications. Alors comment se présente cette conception matérielle lite de Google. En arrivant sur la page de getmdl.io, on a le choix entre Getting started donc commencé de suite, components qui nous donne un aperçu des différents objets possibles très codés par Google comme une table des boutons des menus c'est très abordable et surtout le travail est vraiment bien fait j'ai apprécié notamment le transparente hider, je pense que je vais pouvoir le proposer sur une démo que je construirai.

http://vivageek.livehost.fr/data/images/news/design/flat2.png

http://vivageek.livehost.fr/data/images/news/design/flat3.png

Il y a en cliquant sur style des exemples et découvre les couleurs palettes Customisable à volonté. Si vous cliquez sur Template vous avez des exemples de ce qu’il est possible de faire avec l’application Google c’est impressionnant j’ai apprécié notamment le Dash bord et le bloc qui par sa simplicité nous donne un aspect agréable de ces techniques.

http://vivageek.livehost.fr/data/images/news/design/flat4.png

http://vivageek.livehost.fr/data/images/news/design/flat5.png

Il est possible également de récupérer via le code source c’est Template pour les personnaliser comme on le souhaite. Je vous cache pas que le Template Android est vraiment pas mal aussi voir l’un des mieux que j’ai pu entrevoir de se proposer.

Ce kit nous permet de récupérer des éléments de code comme d’autres Framework et de les inclure également sur notre CMS blog ou site Web comme bon nous semble. À nous par la suite de l’inclure ou de le changer suivant le style de notre site. Il est évident qu’il faut avoir aux moins quelques connaissances en htm et en CSS avant de se lancer avec cette application. Cependant, le code étend très simple à comprendre et bien expliqué par Google un débutant saura facilement se débrouiller avec les éléments des codes distribués.

http://vivageek.livehost.fr/data/images/news/design/flat6.png

Il est à souligner l’effort de Google pour cette initiative. Cet aspect modulable et simpliste va permettre à certaines personnes de réussir à se lancer dans le matériel design. De nos jours, tout le monde sait qu’il est important d’avoir des blogs ou sites Web qui ont des formats et détails en dessous de 50 kilo-octets. C’est indispensable pour que la surcharge de travail du serveur ne devienne pas un réel problème avec une page qui se charge très lentement et qui va faire fuir les visiteurs. Ce renouveau de style donc le flat est vraiment une aubaine pour tous les designers et webmasters. Les Template ont coudent essentiellement CSS en HTML il est proposé les images qui sont également personnalisables et les fonts. Il n’y a pas de JavaScript inclus dans les codes ce qui est intéressant quand on sait combien cela lourd d’une page dans les exemples je vous aiditilyaandroid.com qui en fait une reprise de la page d’accueil du site Android.com. D’un Template nommé blogs qui met surtout en valeur les bases d’entrée d’un blog c’est-à-dire l’image, le texte et surtout l’abonnement toujours en Material Design. Ils utilisent la fonction navigation horizontale et le carrousel ce qui est appréciable sachant que c’est tout codé en CSS. Le Dash borde est un modèle qui a été conçu pour afficher les visualisations de données et d’informations avec une navigation verticale sur le côté gauche. Le Template tex TV Web page a été mis en exemple pour présenter comment il est facilement modifiable la mise en place d’une information dense mais lisible. Le dernier qui s’appelle article stand alone a été mis en exemple celui-ci pour nous présenter le contenu d’un texte qui utilise une structure en forme de carte pour bien mettre en valeur le contenu ce qu’il en résulte de cette expérience Google matériel design, donne les moyens peu importe que nous soyons débutants professionnels de créer un bloc voir plus suivant nos capacités techniques comme un site Web ou un forum en utilisant comme base donc le matériel design. Le plus de ce mois et que l’on peut entrevoir les bonnes méthodes à utiliser lors de la mise en place d’un bloc d’un menu d’un contenu afin qu’il soit lisible que la page soit rapide et surtout que l’ensemble puisse être référencé par Google. C’est un peu comme si nous donner la bonne façon de faire pour leur plaire je trouve que l’initiative est très louable je suis même déjà en train de tout miser pour une des applications que je vais mettre en ligne avec mon blog. Donc c’est pour vous dire que si vous voulez débuter dans le matériel design je pense qu’il n’y a pas à hésiter une seule seconde. Je vous mets le lien en dessous qui vous amènera directement sur le lieu téléchargement du Github. Et également le lien pour aller sur le site getmdl.io.

J’espère que cette intrusion dans le nouveau design vous aura plus en tout cas moi j’en redemande j’espère que d’autres initiatives que ça soit de Facebook YouTube ou de grands groupes seront à venir en tout cas on suivra ça de près.

Merci à bientôt.

 






 Geek me     Je suis un Geek dans l'âme. 18 ans à silloner internet pour récolter des informations afin de comprendre son fonctionnement. Idéalement j'étudie également le comportement humain.

C'est afin de vous partager mes connaissances que j'ai ouvert ce blog alors je vous souhaite une bonne lecture.



À lire également


Écrire un commentaire

Votre adresse de messagerie ne sera pas publiée.

Quelle est la cinquième lettre du mot mtbimy ? :