Diseno web y responsive

Últimamente os he hablado mucho sobre el diseño web responsivo o adaptable, recomendando Bootstrap para que mediante ese framework podáis crear una bonita página web actual. Pero a parte de aconsejaros a utilizar ese marco para el diseño web que queráis montar, no está de más el explicar qué es necesario más allá de la programación: la organización y características de vuestro diseño web responsivo. Aquí tenéis una claves para que reviséis vuestros diseños

Como no la madre de esta ciencia ¿funciona en todas las resoluciones posibles?. Parece una pregunta tonta, pero muchas veces, cuando empiezas a programar un diseño web adaptable, hay ciertos elementos que no se visualizan correctamente en todos los dispositivos: algún div se queda raro en cierta resolución para un tipo de móvil… no pienses para las grandes marcas, piensa que se tiene que ver bien, sea cual sea la procedencia de dicho dispositivo.

¿La letra se puede leer correctamente en ese dispositivo? Vaya pregunta, pero para nada desacertada. Aquel usuario que tenga que forzar la vista intentando leer el contenido, o en aquellos casos que un título te ocupe la extensión de un párrafo, vas a tener una salida automática de tu web. Puedes cambiar los tamaños y diseños de fuentes para cada resolución: no te cortes y hazlo si es necesario.

Otra cosa a tener en cuenta en el diseño web responsivo, y como bien nos indica la última versión de boostrap, es que estamos montando diseños para dispositivos móviles, diseños sobre aparatos que van con tarifas de datos, y que son caras… si alguno se me ha perdido me estoy refiriendo a que intentéis tener un peso de página bastante reducido a lo máximo que podáis. Aunque estamos cada vez pasando a tecnologías más rápidas, los tiempos de carga cuanto más rápidos sean, más gente dejará de abandonar vuestra web antes de tenerla cargada. Intenta subir imágenes de peso reducido e intenta minificar los tamaños de los javascript y/o css, así como el del propio html.

Otra cosa que también tienes que tener en cuenta son las transiciones e animaciones en los dispositivos móviles. La principal diferencia entre un dispositivo táctil y un PC de sobremesa es que con uno usas un ratón y con el otro no. Vaya observación, ¿eh? Pues te quiero llevar al terreno de las animaciones onMouseHover, o que se disparan cuando pasas el ratón por encima, que obviamente en un tablet o un móvil no van a funcionar, porqué no existe movimiento por el navegador, todo lo que se procesa es siempre por clicks. Saber que puedes hacer y que no dentro de un diseño web responsivo es realmente útil a la hora de crear tu código.

Y a parte de eso, muchas ganas y muchas tazas de café

Comments

One Comment In This Topic

Your email address will not be published. Required fields are marked *