Primer diseño web móvil

Dos grandes categorías de estrategias se han utilizado durante años para apoyar el diseño web para dispositivos móviles: Degradación agraciada

y mejora progresiva. Gran parte de la web es actualmente casi inservible en los dispositivos móviles, ya que fue diseñado para navegadores de escritorio y no se adaptan bien a las pantallas pequeñas.

Los usuarios de Internet móvil se ven obligados a ampliar, desplazar, pellizcar, entrecerrar los ojos, y hacer que sus dedos lo más pequeño posible para utilizar la mayoría de los sitios web diseñado hace más de un par de años.

Estrategia de diseño agraciada degradación web para dispositivos móviles

La idea detrás de la degradación agraciada es diseñar su sitio web principalmente para los usuarios de escritorio, sino también el diseño de una manera tal que las características del sitio de escritorio que no funciona o encaja en dispositivos móviles seguirá siendo utilizable - si no es bonita o como funcional - en los dispositivos móviles.

La degradación agraciada fue una buena filosofía de diseño en los días antes de los teléfonos inteligentes con navegadores con todas las funciones existía. Sin embargo, la degradación agraciada tiene grandes problemas. Lo más importante, degradación elegante obliga al usuario a descargar todo su sitio web, sólo para ser mostrado una versión degradada de la misma. En los dispositivos móviles, que a menudo han de ancho de banda limitado, esto no es una buena cosa.

Estrategia de diseño progresivo mejoramiento web para dispositivos móviles

Como resultado de las limitaciones de degradación agraciada, una nueva estrategia denominada mejora progresiva se ha vuelto popular. Mejora progresiva comienza con el sitio web muy más básico y agrega en las características en función de lo que es compatible con el navegador del usuario.

Mejora progresiva permite a sitios web para ser utilizable incluso cuando se utiliza un teléfono móvil muy básico. El navegador móvil no necesita descargar un montón de CSS y código javascript (por ejemplo) que no sabe qué hacer con él.

Una forma de visualizar la consolidación progresiva es como un sistema que agrega capas en un sitio web, dependiendo del tamaño del navegador o las características del navegador soporta.

He aquí un ejemplo sencillo de cómo dos enlaces de hojas de estilo se pueden utilizar para mejorar una página web para móviles para los navegadores más grandes:

El primer enlace incluye style.css para cualquier pantalla o dispositivo de mano. En este caso, style.css contiene estilos que están optimizados para un dispositivo móvil.

El segundo enlace es para una hoja de estilo llamado enhanced.css. Si nos fijamos en la medios de comunicación atribuir a este enlace, te darás cuenta de que tiene un min-width condición. los enhanced.css archivo sólo se incluirá si el dispositivo es mayor que 800px. Dentro enhanced.css, el diseñador web puede anular las propiedades de la style.css hoja de estilos para hacer la escala hasta navegador para anchos navegador más grandes.

Primer diseño móvil resuelve el problema de tamaño del navegador

Mobile primero es una filosofía de diseño que utiliza las ideas de mejora progresiva para construir sitios web para móviles primero y luego mejorarlos para el escritorio. Lo bueno de primer diseño móvil es que al generar el sitio móvil primero, en lugar de a la inversa, se obtiene un sitio de escritorio funcional de forma gratuita!

Piense en todos los sitios web que has visto que no encajan en los navegadores móviles. Ahora, imagine visitar un sitio web móvil con un ordenador de sobremesa. Un sitio web que está optimizado para una pantalla pequeña siempre funciona en un navegador de escritorio - incluso si terminan no llenar toda la ventana del navegador.