la evolución en el diseño web


Es un momento interesante para el diseño y desarrollo web. Las tecnologías que soportan la web, como son HTML, CSS, Javascript, entre otros, están cambiando y creciendo diariamente. Esto no es nuevo, pero el rápido cambio que se está produciendo para hacer la web más compatible con móviles, está alterando el panorama para bien.

La forma en la que se estructura y publica el contenido de una web y el rendimiento de la misma en dispositivos móviles son también aspectos que toman más importancia en este nuevo panorama.

Cada vez más gente consume contenido web en móviles, sólo es necesario observar estaciones de tren, aeropuertos o cafeterías, para ver a personas embebidas en las pequeñas pantallas de sus dispositivos. Si la observación es más pausada, veremos aún a muchas personas haciendo “pinching and zooming”, esto es, acercando el contenido con sus dos dedos, debido a que hay multitud de sitios web no adaptados, que brindan una pésima experiencia de navegación, en estas circunstancias.

En ocasiones, el usuario sólo necesita información de contacto básica de la empresa que ofrece lo que necesita, otras veces, sólo hace una primera aproximación al contenido del sitio web, para más tarde, finalizar la acción (de compra, solicitud de información o de contacto) desde un equipo portátil o sobremesa.

Es por esto, que he recopilado algunos puntos a tener en cuenta, para el desarrollo de sitios web optimizados para móviles:

Centrarse en el contenido.

El contenido es la razón por la que se diseña un sitio web, por lo tanto debe de aparecer de la forma más estructurada y lógica posible, haciendo que sea posible encontrar lo que se busca en no más de tres clics. Sin olvidar aspectos que no son visibles a primera vista como la optimización de los textos para SEO, títulos cortos y descriptivos, o una escritura sencilla y resumida.

Comenzar el desarrollo desde una perspectiva móvil.

Esta última tendencia, cada día toma más relevancia, ya que es mejor comenzar a plasmar la estructura de la web para dispositivos móviles y luego ir expandiendo funcionalidades y mostrando contenido más detallado, a medida que el tamaño de la pantalla aumenta.

Optimizar la compatibilidad.

Es recomendable utilizar sólo las funciones Javascript necesarias, para asegurar la máxima compatibilidad entre dispositivos móviles. En su lugar, y siempre que sea posible, es mejor utilizar CSS. De igual forma, es una buena práctica no ocultar contenido con funciones “hover mouse”, es decir, animaciones que sólo aparezcan cuando se tiene el ratón sobre algún elemento en concreto, por una sencilla razón: Los dispositivos móviles son táctiles, no tienen puntero de ratón.

Puntos de ruptura.

No es buena idea utilizar puntos de ruptura CSS sólo para determinados dispositivos (como ipad o iphones). El espectro de resoluciones de pantallas móviles es mucho más amplio, por eso es recomendable que el diseño web se adapte lo mejor posible a cada resolución móvil.

Pantallas de alta densidad de píxeles

También conocidas como pantallas retina, están presentes en todos los smartphones recientes. Optimizar las imágenes para dichas resoluciones es algo a tener muy en cuenta, utilizando técnicas de detección de densidad de píxeles, para servir las fotografías mejor adaptadas en cada caso.

Si te gusta, comparte esta página: la evolución en el diseño web

facebooktwitterlinkedingoogle+