Desde un punto de vista puramente de diseño, comenzar primero con la versión móvil 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 permite, más tendrá que pensar en lo que es importante en su diseño, qué información realmente necesita mostrar. Además, también se obligará 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 cosas adicionales como elementos de diseño y agrandar las cosas a medida que gana espacio. Como lo señaló @Django, nunca debe omitir características del diseño.

Para su sitio, un ejemplo podría ser el menú. Decidió dejar 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.

Primero móvil es la mejor práctica : 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 "primero el móvil" 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 desarrollo primero móvil sí lo hará .

Veamos ambos.

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 una computadora de escritorio primero y luego esforzarse por poner todas las características que se le ocurrieron en una pantalla de 320 px de ancho y mantener una buena experiencia de usuario, comience primero con el dispositivo móvil...

Si la experiencia de usuario está abarrotada o dañada por todas sus funciones en el móvil, entonces se supone que debe hacer que se pregunte si el usuario realmente las necesita todas. ¿Puedes deshacerte de algunos de ellos y 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 lo ayuda a reducir sus funciones a lo que realmente necesita , y luego puede ampliarlo a una hermosa experiencia de escritorio.

Móvil primero en desarrollo

Con el desarrollo móvil primero , 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 de dispositivos móviles es la siguiente: tiene dos imágenes para un sitio web, una grande para escritorio y otra más pequeña para dispositivos móviles. Si primero codifica el escritorio, 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 el large.jpgantes de que el CSS lo apague. Esto es muy malo.

Móvil 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 del "móvil primero"

La idea de "móvil primero" con respecto al diseño receptivo proviene de una época en la que los navegadores para dispositivos móviles eran mucho menos capaces que los 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 crear un diseño de escritorio elegante y luego pegar estilos usando consultas de medios para una ventana de visualización estrecha se 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 se han puesto al día con sus contrapartes 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 o todos los dispositivos deben encontrarse fuera de las consultas de medios, mientras que los estilos que solo son relevantes para una ventana de visualización específica deben estar detrás de una consulta de medios.

Compare un enfoque de "primero el escritorio":

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

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

A un enfoque de "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. Estilos de muestra copiados descaradamente de los 7 hábitos de consultas de medios altamente efectivos de Brad Frost .

Hay algunas raras excepciones en las que "el 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 ventanas gráficas más amplias querrán los estilos predeterminados para las tablas, pero una ventana gráfica estrecha querrá anular todo eso para que el contenido se pueda apilar verticalmente.

No rompa sus 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 al 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?

Yo soy de la opinión de que no importa. Se deben hacer diseños para todas las ventanas relevantes para el diseño (¡esto puede implicar tan solo 2 o tanto como 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 descubren que es más fácil comenzar con un diseño móvil.

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

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 sobre 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 pensar dos veces en su estrategia.

También puede considerar diseñar su sitio web con capacidad de respuesta usando Bootstrap (también hay muchas otras opciones disponibles) y también puede optimizar sus imágenes para un sitio compatible con dispositivos móviles, lo que también reducirá el tiempo de carga.

Para mí, la principal razón para utilizar primero los dispositivos móviles es evitar una situación en la que su sitio móvil no haga todo lo que hace la versión de escritorio. Hay un montón de sitios web en los que 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 saca de quicio.

Dicho esto, creo que el escritorio primero está bien, siempre y cuando no se 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 primera aplicación de escritorio bastante compleja, y realmente solo tuve que cambiar un par de cosas cuando la revisé para una versión compatible con dispositivos móviles: la mayor parte del trabajo ya estaba hecho.