Google объявил о релизе Material Design Lite. Это не то, что можно представить из названия – упрощенная версия Material Design; а скорее, фреймворк для легкой реализации Material Design на веб-сайтах.
В течение года после того, как Google представил Material Design в 2014, он изменил Google до неузнаваемости. Все, начиная от Google Drive до ОС Android представляет минималистичнй стиль Material Design. Даже заставка на странице поиска Google переняла элементы Material Design.
Одним из главных камней преткновения для широкого внедрения принципов Material Design за пределы собственных продуктов Google, был конкурирующие стили, представленные фреймворками. Было несколько попыток со стороны общины рационализировать Material Design и, например, Bootstrap; Material Design Lite является попыткой обеспечить Google-одобренную реализацию.
Material Design может заменить многие части Bootstrap. Тем не менее, это не значит, что все будет совпадать с Bootstrap. Вместо этого MDL обеспечит наличие компонентов, указанных спецификацией Material Design. Это позволяет получить наиболее полное и точное решение. – getmdl.io/faq
Как я могу использовать Material Design Lite?
Реализация кода Material Design (MD), Material Design Lite (MDL) небольшая (около 27 кб gzip) библиотека компонентов для использования на веб-страницах и веб-приложениях.
Она написана в Sass с использованием BEM, и может быть загружена из GitHub, затем модифицирована для ваших целей. Или вы можете импортировать полный фреймворк из CDN Google.
Вы можете отобрать элементы для интеграции с вашим дизайном, или если вы ищете очень простой вариант, Google предоставил настройщик тем, который позволяет вам сделать (очень) незначительные изменения во фреймворке прежде чем использовать его.
Что входит в Material Design Lite?
Библиотека компонентов MDL представляет MD версии общих элементов пользовательского интерфейса, таких как флажки, поля ввода текста и кнопки. Есть также MD элементы пользовательского интерфейса, такие как карты, слайдеры, выпадающий список и вкладки.
MDL также включает в себя пять шаблонов: блог, тему android.com, приборную панель, текстовую тяжелую веб-страницу и страницу самостоятельной статьи:
template-1
template-2
template-3
template-4
template-5
Поддержка браузеров MDL
MDL будет, как говорит Google, работать в “современных браузерах (Chrome, Firefox, Opera, Microsoft Edge) и Safari”. Немного отодвинули Apple в сторону, это означает, что он будет работать в последних двух основных версиях всех известных браузеров.
MDL был оптимизирован для поддержки контента тяжелых сайтов. Его основными целями являются портативность браузера, независимость устройства и отказоустойчивость. Первые две цели соответствуют адаптивному дизайну, и, хотя отказоустойчивость была вытеснена прогрессивным улучшением в последние несколько лет, эмуляция подразумевает, что отказоустойчивость это важная особенность.
MDL включает в себя тест, который нужно пройти до того, как усовершенствования JavaScript MDL будут применены к фреймворку. Старые браузеры, как IE9, провалят тест и будут поддерживать CSS версию. Старинные браузеры, как IE8, даже не полностью будут поддерживать CSS версию. Например, использование Flexbox, с которым ни IE8, ни IE9 не может справиться; однако отказоустойчивость MDL подразумевает, что даже IE8 должен отображать некоторые из фреймворков правильно.
Проблемы Material Design Lite
Многочисленные проблемы UX в MD, естественно, переходят и в MDL. Например, один из самых отличительных элементов MD, плавающая кнопка, часто располагается непоследовательно, и в мобильной версии требуется дополнительное нажатие.
Вообще, MDL хорошо создан, однако есть некоторые непонятные вопросы; это, например, еще один фреймворк, который опирается на JavaScript для макета.
MDL задействован даже в типографике. Шрифт по умолчанию – Roboto, и, хотя вы можете сменить его, я не уверен, что большинство пользователей сделают это.
CSS фреймворки, как Bootstrap и Foundation, всегда включали в себя визуальные элементы. Но они не были отчетливыми, как в MDL. MDL продвинулся дальше, чем большинство фреймворков, представляя полный визуальный стиль; MDL похож на фреймворк с повесткой дня.
Следует ли вам использовать Material Design Lite?
MDL является способом, по которому должны быть созданы большинство веб-сайтов – так думает Google. И хотя нет абсолютно никаких предположений, что Google будет применять этот способ, он, конечно, мог бы, если захотел; Google хочет, чтобы результаты поиска, который он предоставляет клиентам, были быстрыми, ясными, удобными для пользователей, что является лучшим способом, чем добавить использование фреймворка, которым он управляет к своему алгоритму?
Использование любого фреймворка неизбежно вносит некоторые заимствованные визуальные элементы. Тем не менее, наиболее успешные фреймворки являются такими, потому что они гибкие. MDL отличается тем, что это не просто фреймворк, а фреймворк, который поддерживает определенный подход к дизайну.
MD, как руководство по дизайну, является хорошо продуманной попыткой рационализировать продукцию компании Google в единый бренд. Его недостаток в том, что его бренд слишком характерный, чтобы применяться за пределами продукции Google.
Мы можем многому научиться у MD, но его массовая реализация – что является огромной силой MDL – в основном не имеет смысла.
Высоких конверсий!
