Diseño de paginas web para moviles

Bootstrap responsive

Lo hemos organizado en dos secciones: diseño para dispositivos móviles y compatibilidad entre navegadores. Consulta también la guía de Jason Grlicky para desarrolladores web sobre compatibilidad con dispositivos móviles.Diseño para dispositivos móvilesLos dispositivos móviles tienen unas características de hardware bastante diferentes a las de los ordenadores de sobremesa o portátiles. Sus pantallas suelen ser más pequeñas, obviamente, pero también suelen cambiar automáticamente la orientación de la pantalla entre los modos vertical y horizontal cuando el usuario gira el dispositivo. Suelen tener pantallas táctiles para que el usuario introduzca sus datos. APIs como la geolocalización o la orientación no son compatibles con los ordenadores de sobremesa o son mucho menos útiles, y estas APIs ofrecen a los usuarios de móviles nuevas formas de interactuar con su sitio.Trabajar con pantallas pequeñasResponsive Web Design es un término para un conjunto de técnicas que permite a su sitio web adaptar su diseño a medida que cambia su entorno de visualización, es decir, el tamaño y la orientación de la pantalla. Incluye técnicas como:

La metaetiqueta viewport indica al navegador que muestre su sitio a la escala adecuada para el dispositivo del usuario.Trabajar con pantallas táctilesPara utilizar una pantalla táctil tendrá que trabajar con eventos DOM Touch. No podrás utilizar la pseudoclase CSS :hover y tendrás que diseñar los elementos en los que se puede hacer clic, como los botones, de forma que se respete el hecho de que los dedos son más gordos que los punteros del ratón. Consulta este artículo sobre diseño para pantallas táctiles.

Css responsive

El diseño web responsive (RWD) o diseño adaptable es un enfoque del diseño web cuyo objetivo es que las páginas web se muestren correctamente en una gran variedad de dispositivos y tamaños de ventana o pantalla, desde el mínimo al máximo, para garantizar la usabilidad y la satisfacción[1][2].

Un diseño responsivo adapta el diseño de la página web al entorno de visualización[1] utilizando técnicas como rejillas basadas en proporciones fluidas,[3][4] imágenes flexibles,[5][6] y CSS3 media queries,[7][8][9] una extensión de la regla @media,[10] de las siguientes maneras:

Aunque muchos editores han implementado diseños responsivos, uno de los retos para la adopción de RWD era que algunos banners publicitarios y vídeos no eran fluidos[27]. Sin embargo, la publicidad de búsqueda y la publicidad gráfica (banners) llegaron a admitir la segmentación por plataformas de dispositivos específicos y diferentes formatos de tamaño de anuncio para ordenadores de sobremesa, smartphones y dispositivos móviles básicos. Se han utilizado diferentes URL de páginas de aterrizaje para diferentes plataformas[28] o Ajax para mostrar diferentes variantes de anuncios en una página[29][21][30] Las tablas CSS permitían diseños híbridos fijos y fluidos[31].

Ejemplos de diseño web

Shutterfly es un servicio en línea que permite a los usuarios crear álbumes de fotos, tarjetas personalizadas, artículos de papelería y otros productos similares. Como cada vez son más las personas que hacen fotos y acceden a ellas a través de sus teléfonos inteligentes, Shutterfly reconoció la necesidad de crear una gran experiencia móvil para sus clientes.

Shutterfly logra dos objetivos clave en su sitio web para móviles. En primer lugar, los usuarios encuentran fácilmente información sobre sus ofertas. En segundo lugar, esta información se complementa con bellas imágenes.

Desplácese hacia abajo y verá botones grandes que facilitan a los usuarios la selección rápida del tipo de producto que les interesa. Una vez que los usuarios hacen clic en una de esas opciones, son recibidos con grandes fotos que muestran lo que Shutterfly es capaz de hacer para facilitar la navegación.

Estas capturas de pantalla están tomadas de su sitio web para móviles, pero si estás familiarizado con la aplicación, te darás cuenta de que son exactamente iguales. No sólo la apariencia es idéntica, sino que el sitio web para móviles tiene la velocidad y la funcionalidad de la aplicación.

HTML responsivo

Para asegurarse de que su sitio web tiene un impacto positivo, asegúrese de tener en cuenta la funcionalidad móvil a la hora de idear diseños de escritorio para el mismo. Reconocer la información más importante y qué elementos se pueden eliminar para aligerar la experiencia cuando se navega en el móvil.

Lyft hace un gran uso de la tipografía de gran tamaño para hacer su mensaje en negrita y fácil de leer para aquellos en dispositivos más pequeños. El colorido, las imágenes deliberadas y los iconos ayudan a conducir naturalmente al usuario a la siguiente sección de la página.

Su menú móvil dirige fácilmente a los usuarios a obtener más información sobre las iniciativas de la empresa, lo que lleva a páginas llenas de bellas imágenes, coloridos botones y colores de fondo que encajan adecuadamente con la marca.

En todo el sitio móvil, Walt Disney utiliza sistemáticamente un diseño de tarjeta (que incluye una imagen, un encabezamiento y un párrafo de texto) en todo lo que lleva a un artículo. Esto ofrece a los usuarios un fragmento del contenido que leerían si hicieran clic.

Cuando se navega a páginas que detallan el propósito de la plataforma para tipos de negocio específicos, se verá que Slack tuvo cuidado en asegurarse de que las imágenes de su software seguían siendo muy legibles. Esto ayuda a los usuarios a leer el texto del software para que tengan una experiencia realista y entiendan lo que la herramienta es capaz de hacer.