Blog

12 de enero de 2015

Aspectos del Diseño Responsivo

Actualmente se habla del diseño responsivo como requisito fundamental para hacer frente a la portabilidad que está llenando los rincones del planeta en cuanto a diseño web. Aunque cabe mencionar que solo saber el nombre de este concepto de diseño no nos indica mucho.

Es por ello compartimos con ustedes a groso modo, en que consiste y cómo se aplica hoy en día a los diseños web de última tendencia.

Diseño Básico VS Responsivo

Cuando se aplica diseño responsivo frente al “adaptable” se generan grandes diferencias, por ejemplo al tener una página abierta y cambiar su tamaño, el responsivo lo hará en tiempo real, mientras que en el tradicional, el navegador cargará una versión nueva, más pequeña o grande.

 

 

 

 

 

 

Utilizar unidades relativas es una de las bases del diseño responsivo, pues si usamos unidades estáticas, siempre tendremos el mismo tamaño.

 

 

 

 

 

 

Las pantallas de los portátiles en general son verticales, por lo que el contenido responsivo puede fluir hacia abajo.

 

 

 

 

 

 

Los puntos de ruptura también son importantes, ya que pueden definir los elementos que cambian en puntos definidos, por ejemplo 1 columna en móviles y tres en escritorios.

 

 

 

 

 

 

Anidar los elementos hará que se muevan como uno solo cuando cambie el tamaño, manteniendo el diseño.

 

 

 

 

 

 

Se debe definir un ancho máximo, esto considerando a las pantallas pequeñas y grandes, de lo contrario, terminaremos con un contenido demasiado disperso.

 

 

 

Prácticamente no debería haber diferencia si la base del proyecto es el móvil o escritorio, pero si es el primero, debemos tomar las decisiones correctas a medida que avanzamos, antes de definir un compromiso concreto.

 

 

 

 

 

 

Si bien usar fuentes web, da una apariencia más “bonita”, el usar fuentes de sistema, dará rapidez al sitio, ya que estas no tiene que ser descargadas.

Siempre es mejor usar una imagen vectorial antes que un bitmap, ya que al agrandar o disminuir el tamaño, la primera, no perderá calidad ni se despixelará.

 

Fuente: Omicromo