Diseño web responsive explicado con gifs

Tweet about this on TwitterShare on Facebook0Share on Google+1Share on LinkedIn0

El artículo original es de Froont, y voy a comentar algunos de estos principios básicos de diseño responsive porque me parecen interesantes, y más ahora que se acerca la actualización del algoritmo de Google.

Mobile-first or desktop-first?

Una cuestión que conviene estudiar a la hora de desarrollar un diseño responsive. Crear diseños mobile-first se está convirtiendo en una tendencia, y puede que sea la opción más beneficiosa en muchos casos, pero siempre resulta conveniente plantearse los pros y contras de ambas opciones.

pc o movil primero

 

Unidades relativas VS unidades estáticas

No es lo mismo establecer el ancho de pantalla en unidades relativas (porcentajes) que en unidades estáticas (píxeles), como bien explica la imagen:

unidades estaticas y relativas

 

El Flow

Cuanto más pequeñas son las pantallas, más espacio tiende a ocupar el contenido superior de la pantalla, desplazando el resto hacia abajo. Este efecto se conoce como flow, y obviamente hay que tenerlo en cuenta a la hora de diseñar un nuevo site.

el flow de diseno

 

Establece un ancno máximo y mínimo de pantalla

En un móvil lo ideal es que el contenido ocupe el mayor área posible de pantalla, pero no ocurre lo mismo cuando estamos visualizando la página desde un ordenador de sobremesa o desde una TV. Establecer un máximo y un mínimo para el ancho de pantalla podría ayudarte.

ancho maximo y minimo de pantalla

 

Agrupa los objetos

Es más fácil y cómo envolver varios elementos en un contenedor que fijarles posiciones que dependan de otros objetos. Vaya, que es más cómodo llevarte 20 naranjas en una bolsa que llevártelas amontonadas unas encima de otras en los brazos.

objetos agrupados

 

Crea puntos de ruptura cuando sea necesario (breakpoints)

Que te permitan, por ejemplo, pasar de dos o tres columnas en un ordenador a una sola columna en un dispositivo móvil (como se puede apreciar en la imagen izquierda):

puntos de corte

 

Bitmap images VS Vectors

Si tus iconos no tienen muchos detalles, utiliza vectores (svg). En caso contrario, normalemnte conviene utilizar ficheros jpg,png o gif. Cada método tiene algunas ventajas e inconvenientes, y es importante que estén optimizadas (comprimidas sin pérdida de calidad). Y por supuesto, es conveniente utilizar imágenes responsive que adapten su tamaño cuando sea necesario, como estos gifs animados que estamos viendo.

mapas de bits vs vectores

 

Fuentes del sistema VS Webfonts

Esto es diseño, pero no tiene mucho que ver con que sea responsive. Los sistemas operativos y navegadores desde los cuales se visualizan las páginas son muy variados, y hay muy pocas fuentes que sean soportadas por todos. Las Webfonts ofrecen una gama muchísimo más amplia de fuentes, pero tienen el pequeño problema de que ralentizan un poco la carga de nuestra web. Hasta que no se hayan cargado los archivos de las Webfonts, los textos no serán visibles en pantalla.

fuentes sistema vs webfonts

¡Y eso es todo! El artículo original de Froont lo tenéis aquí.

Tweet about this on TwitterShare on Facebook0Share on Google+1Share on LinkedIn0

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *