¿Qué tan popular es el diseño de material de google?

Answer 1

El sitio web no está cambiando al patrón de diseño de material por alguna extraña razón. Solo puedo pensar en web.WhatsApp y el sitio web de diseño de Google en sí que se basan en MD.
En realidad, los sitios web generalmente se ven en computadoras de escritorio y portátiles, por lo tanto, el navegador tiene una gran capacidad en términos de memoria y procesador. Por lo tanto, los sitios web que se diferencian de los demás no necesitan algo como el diseño de materiales para lograrlo. Son capaces de hacer cosas como reproducir videos en segundo plano, mostrar gráficos de alta definición, tal vez renderizar en opengl o algo así.
Por otro lado, los dispositivos portátiles tienen recursos limitados, por lo tanto, el diseño es una de las pocas cosas que ayudan a una aplicación a superar a su competidor al proporcionar un servicio similar.
Además, el sitio web ha estado en el mercado desde el nacimiento de internet. Con el tiempo, los desarrolladores han formado algunas convenciones que todos siguen a nivel mundial. Entonces, hay algo así como pautas de diseño no dichas seguidas por todos, entonces ¿por qué cambiarían innecesariamente al diseño de materiales?
Para concluir, diré que si planea hacer un sitio web informativo normal, use bootstrap y diferencie su sitio web por características como videos de fondo, animaciones, el banner giratorio en la parte superior de la pantalla que implica cargar (el que viene en YouTube debajo de la url cuando haces clic en un enlace de video)
Utilice el diseño de material si está creando una aplicación web para una aplicación de Android que se base en el diseño de material. Ayudará a mantener la vista consistente, por lo tanto, una mejor experiencia de usuario.

Answer 2

Las estadísticas de Bootstrap y Google materializan lite

Mire estas estadísticas, obtendrá la idea.

Pero si quieres descubrir los pros y los contras …

<1> Rejilla

Grid es la parte más importante del marco, ya que hace que la página web responda a todos los dispositivos.

• La cuadrícula Bootstrap divide la página en 12 columnas de igual tamaño. Dependiendo del ancho de la ventana gráfica, se aplican cuatro clases de tamaño diferentes: extra pequeño (de 0 a 768 px de ancho), pequeño (768 px a 992 px), mediano (992 px a 1200 px) y grande (1200 px +).
• MDL tiene un sistema de cuadrícula similar, pero solo tiene tres tamaños: teléfono (0 a 480px), tableta (480px a 840px) y escritorio (840px +). El escritorio MDL tiene 12 columnas, la tableta tiene 8 columnas y el teléfono tiene solo 4 columnas.

Docs: Bootstrap Grid | Rejilla MDL

<2> Navegación de encabezado

Los encabezados en Bootstrap se llaman Navbars. Comienzan colapsadas en las vistas móviles y se vuelven horizontales cuando hay suficiente espacio para ellas. En el interior, puede anidar una variedad de elementos diferentes que se pueden colocar con la ayuda de las clases.

Del mismo modo, las navegaciones de encabezado MDL comienzan colapsadas detrás de un menú de hamburguesas y se expanden con el crecimiento de la ventana gráfica. Ellos también tienen diferentes estilos y posibles posiciones.

Docs: Bootstrap Navbars | MDL Navigation

<3> Pie de página

Bootstrap en realidad no tiene componentes de pie de página separados, mientras que Material Design Lite tiene dos opciones, un mini y un mega pie de página. Para este ejemplo, hemos traducido el diseño MDL predeterminado a Bootstrap, utilizando la cuadrícula y un poco de CSS adicional.

Documentos: pies de página de MDL

<4> Pestañas

Ambos marcos usan una sintaxis bastante similar para crear pestañas seleccionables con contenido diferente. Una serie de enlaces para intercambiar entre las pestañas, y una matriz de divs, seleccionables por id, para almacenar el contenido. Ambos también requieren JavaScript para funcionar (Bootstrap también requiere jQuery).

Documentos: Fichas Bootstrap | Pestañas MDL

<5> Botones

Los botones predeterminados de Bootstraps son rectangulares y tienen un montón de opciones de tamaño. Pueden cambiar su color a través de CSS o con las clases modificadoras. Otra característica única de Bootstrap es el botón dividido, que es mitad botón, mitad desplegable.

MDL ofrece botones rectangulares y circulares. Google tiene una guía sobre cómo y en qué situaciones usar los diferentes tipos de botones. Todos los botones en MDL admiten el efecto de animación ondulada.

Docs: Botones Bootstrap | Botones MDL

<6> Tablas

En Bootstrap, la capacidad de respuesta se logra utilizando una barra de desplazamiento en la parte inferior de la tabla. MDL aún no ha agregado la capacidad de respuesta a sus tablas. ¡Pero agregaron diferentes estilos a las tablas para hacerlo atractivo!

Docs: Tablas Bootstrap | Tablas MDL

<7> formularios

• Los formularios de Bootstrap admiten más tipos de elementos de entrada y tienen clases para alinear etiquetas y entradas, pero no tiene una biblioteca incorporada para validación.
• Si bien MDL tiene pocos elementos de entrada, pero los que tienen animación de material lo hacen atractivo y divertido. tienen coincidencia de patrones y verificación también. MDL validación de soporte.

Documentos: formularios Bootstrap | Formularios MDL

<8> Menú desplegable

• Aquí Bootstrap le da una ventaja al dividir un botón que hace que la mitad f sea el menú desplegable de botones y la otra mitad normal.
• ¡Mientras que MDL ofrece efectos de animación suaves en comparación con la técnica de Bootstrap!

Se necesita JavaScript en ambos casos.

Documentos: Menú Bootstraps | Menú MDL

<9> Información sobre herramientas

Bootstrap le brinda la mejor experiencia en caso de información sobre herramientas. Le da la opción de mostrar la información sobre herramientas en la parte superior o inferior, a la derecha o a la izquierda, ¡o simplemente puede hacer clic en él!

MDL se ha ido con un enfoque simple aquí. Solo dos opciones de diseño pequeño y grande.

Docs: información sobre herramientas de Bootstrap | Popover de Bootstrap | MDL Tool-tips

<10> iconos

Bootstrap viene con la fuente de iconos Glyphicons, que le ofrece más de 250 bonitos iconos para elegir. Vienen incluidos con el archivo CSS bootstrap y no se necesita ninguna configuración especial.

MDL usa un conjunto de íconos que Google lanzó hace algún tiempo llamados Iconos de material. Este es un gran conjunto de casi 800 iconos. No se incluyen con MDL, por lo que debe vincularlo en la sección HEAD de su página:

Para aprender Bootstrap->