He leído varias fuentes que indican que el primer diseño móvil es casi esencial, lo cual no puedo negar que tiene beneficios obvios, como tiempos de carga más rápidos para móviles que generalmente tienen velocidades de descarga más lentas a través de 3G y 4G.

Pero, ¿qué pasa si está creando un sitio web más pequeño con muy pocas imágenes?

Me gustaría escuchar las opiniones de otros sobre este tema y si la gente piensa que hay excepciones. Personalmente, prefiero diseñar / codificar para escritorio primero y escalar desde allí. Pero, ¿es realmente tan importante diseñar / codificar para dispositivos móviles primero o los resultados finales no son lo suficientemente significativos como para molestar en ciertas situaciones?

Desde un punto de vista puramente de diseño, comenzar con la versión móvil primero tiene sentido.

La parte más difícil del proceso de diseño es siempre podar, nunca agregar. Por lo tanto, cuanto más pequeño sea el espacio en pantalla que se permita, más tendrá que pensar en lo que es importante en su diseño, qué información realmente necesita mostrar. Además, también te obligarás a pensar en la accesibilidad, ya que el texto y otros elementos serán más pequeños.

Una vez que haya diseñado la versión 'ligera', puede proceder a agregar elementos adicionales como elementos de diseño y ampliar elementos a medida que obtiene bienes raíces. Como señaló @Django, nunca debe dejar de lado las características del diseño.

Para su sitio, un ejemplo podría ser el menú. Decidió abandonar los elementos del menú y reemplazarlo con un icono de hamburguesa, que es el procedimiento estándar. Pero si los elementos del menú son una de las cosas más importantes de la página, no querrá ocultarlos detrás de un clic.

nota al margen: El rojo sobre azul en su sitio es realmente malo para los daltónicos, por favor considere cambiar esto.

Lo primero es la mejor práctica móvil : no es ley, y si comprende por qué "debería" usarlo, puede tomar una decisión informada sobre por qué no desea usarlo en un proyecto en particular, y eso está bien.

Vale la pena señalar que "móvil primero" se relaciona con el diseño / UX y la construcción en sí. El primer diseño móvil no acelerará su sitio para los usuarios, pero el primer desarrollo móvil sí lo hará .

Veamos los dos.

Móvil primero en diseño

El primer diseño móvil se trata de ayudarlo a reducir sus características y usabilidad a lo que necesita . La idea detrás de esto es la siguiente: en lugar de diseñar el escritorio primero, y luego luchar por poner todas las características que se te ocurrieron en una pantalla de 320 píxeles de ancho y mantener una buena experiencia de usuario, comienza con el móvil primero ...

Si el UX se está abarrotando o dañando por todas sus funciones en el móvil, se supone que debe hacer que se pregunte si el usuario realmente las necesita a todas. ¿Puedes deshacerte de algunos de ellos y realmente mejorar la experiencia? Si es así, ¿por qué los tienes? Tal vez no sean esenciales después de todo, y tal vez no deberían estar en su sitio.

La teoría es que esto le ayuda a reducir sus funciones a lo que realmente necesita , y luego puede escalarlo en una hermosa experiencia de escritorio.

Mobile primero en desarrollo

Con el primer desarrollo móvil , se trata de escribir primero la versión móvil, y luego poner excepciones para pantallas más grandes. La razón por la que esto es mejor (y más rápido) para los usuarios móviles es esta: tiene dos imágenes para un sitio web, una grande para escritorio y otra más pequeña para móvil. Si codifica el escritorio primero, su CSS se verá así:

.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 { 
      background-image:url('images/smallimage.png');
    }
}

Esto significa que el usuario móvil realmente descarga large.jpgantes de que el CSS lo apague. Esto es muy malo.

Mobile primero se ve así:

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 { 
        background-image:url('images/verylargeimage.png');
    }
}

El usuario móvil nunca descarga large.jpg.

¡Espero que eso ayude a aclarar un poco las cosas, si no las entendiste antes!

El origen de "móvil primero"

La idea de "móvil primero" en lo que respecta al diseño receptivo proviene de una época en la que los navegadores para dispositivos móviles eran mucho menos capaces de lo que encontraría en un dispositivo de escritorio. Muchos de ellos no admitían consultas de medios en absoluto, por lo que la idea de construir un diseño de escritorio sofisticado y luego pegarse en estilos usando consultas de medios para una vista estrecha cae de bruces.

La ausencia de soporte para consultas de medios es, de hecho, la primera consulta de medios.

- Bryan Rieger

¿El móvil primero sigue siendo relevante?

A pesar de que los navegadores para dispositivos móviles han alcanzado a sus homólogos de escritorio, "móvil primero" sigue siendo la forma más lógica de escribir sus estilos.

Prefiero pensar en términos de "evitar deshacer declaraciones de estilo anteriores". Un enfoque aditivo, en lugar de escribir estilos y luego anularlos más tarde, casi siempre conducirá a una hoja de estilo más compacta. Los estilos apropiados para la mayoría / todos los dispositivos deben encontrarse fuera de las consultas de medios, mientras que los estilos que solo son relevantes para una ventana gráfica específica deben estar detrás de una consulta de medios.

Compare un enfoque de "escritorio primero":

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

Para un enfoque "móvil primero":

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

Los resultados son los mismos, pero el último es más compacto. Ejemplos de estilos copiados descaradamente de los 7 hábitos de consultas de medios altamente efectivos de Brad Frost .

Hay algunas raras excepciones en las que "escritorio primero" es más apropiado que al revés. El más notable de estos es cuando estás haciendo cosas como tablas receptivas. Las vistas más anchas querrán los estilos predeterminados para las tablas, pero una vista angosta querrá anular todo eso para que los contenidos se puedan apilar verticalmente.

No rompas tus hojas de estilo

Una cosa que absolutamente no debe hacer es dividir sus estilos receptivos en archivos CSS individuales y usar el atributo de medios en el elemento de enlace. Esto tiene la consecuencia indeseable de que el UA descargue todas las hojas de estilo vinculadas (es decir, no hay mejora de velocidad para hacerlo).

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Entonces, el código debe ser móvil primero, pero ¿qué pasa con el enfoque del diseño?

Soy de la opinión de que no importa. Deben realizarse diseños para todas las ventanas gráficas relevantes para el diseño (esto puede implicar tan solo 2 o hasta 5 una vez que tenga en cuenta los puntos de interrupción menores que pueda necesitar), el orden no importa al final. Muchos diseñadores carecen de la disciplina para comenzar con un diseño de escritorio y encuentran que comenzar desde un diseño móvil es más fácil.

Si desea comenzar desde un diseño de escritorio, debe evitar la tentación de llenar todo ese glorioso espacio en blanco con el desorden que no mejora el contenido de esa página. ¿Realmente necesitas esa foto de 800x600 de una mujer sonriente sosteniendo un teléfono? Solo le está costando dinero extra al usuario móvil descargar descargas inútiles, y es solo una distracción visual para que un usuario de escritorio se salte.

Probé su sitio web www.cosmosdesign.co.nz en diferentes tamaños de pantalla y funciona bien en todas las pantallas. Con respecto a su pregunta para el primer diseño móvil, me gustaría decir que su enfoque de diseño debe considerar su público objetivo junto con muchos otros factores como imágenes, contenido, etc. Si su público objetivo utilizará este sitio web principalmente en computadoras de escritorio / portátiles, entonces puede seguramente continúe con su enfoque, pero si se trata de un sitio web que se verá principalmente en teléfonos y pestañas, entonces debe reflexionar sobre su estrategia.

También puede considerar diseñar su sitio web de manera receptiva usando Bootstrap (muchas otras opciones también están disponibles) y también puede optimizar sus imágenes para un sitio amigable para dispositivos móviles que también reducirá el tiempo de carga.

Para mí, la razón principal para hacer móviles primero es evitar una situación en la que su sitio móvil no hace todo lo que hace la versión de escritorio. Hay un montón de sitios web donde tengo que solicitar la versión de escritorio en mi teléfono para hacer algo porque, aunque el teléfono puede hacerlo, su versión móvil no lo hace. Eso me fastidia muchísimo.

Dicho esto, creo que el escritorio primero está bien siempre y cuando no escatime más tarde en las funciones móviles como lo hacen la mayoría de las empresas.

Además, muchos marcos de diseño hacen que esto sea bastante simple. Utilicé material design lite para hacer una aplicación de escritorio bastante compleja, y realmente solo tuve que cambiar un par de cosas cuando la revisé para una versión optimizada para dispositivos móviles: la mayor parte del trabajo ya estaba hecho.