Introducción al Diseño Responsive

Los tiempos cambian y también como interactuamos con la tecnología y cómo accedemos la información, sobretodo desde que Steve Jobs presentó al mundo su pequeño ordenador personal disfrazado de teléfono (El Iphone). Fuimos dejando de hacer todo en nuestros ordenadores y empezó la era del Diseño responsive y adaptación a diferentes pantallas.

Hoy tenemos todo en nuestras manos.

Desde el primer Iphone y otros smartphones y dispositivos de otras empresas, con el avance de la tecnología, también surgirá la necesidad de adaptar la información a todo una gama de distintos formatos de pantalla y resoluciones.

Hoy es posible con técnicas de programación, frameworks y maquetación, hacer que la información de su página web se adapte al aparato que el usuario posee.

Diseñar una página responsive no es una tarea sencilla, no es simplemente reducir todo que se ve, en realidad es al revés, por ejemplo en un movil, al ser la pantalla más pequeña y la navegación se hace con el toque de los dedos, los elementos deben ser MÁS GRANDES que en su versión desktop. y por supuesto deben tener una distribución distinta pensando en la que mejor se adapte al dispositivo y a la usabilidad de quién lo utilice.

Tomamos como ejemplo un email marketing.

En la versión desktop limitamos el ancho a 600 px y podemos utilizar un color de fondo creando un marco.

Pero en movile no se ve el color de fondo (marco),ya que el contenido del email ocupa todo, es decir,  los 320 px de ancho.

plantillas email responsive 34k

Plantillas email Responsivo 34k

 

Fíjate que los elementos en la versión movil son los mismos, pero están dispuestos de manera que la lectura sea vertical, para mejorar la lectura y la navegación con los dedos con un movimiento natural hasta abajo.

En este  ejemplo  solo estamos viendo la distribución de los elementos pero también debemos considerar el tamaño de imágenes, tipografía, formularios, botones etc..

Cuando hablamos de un diseño responsive de una página web la creación es mas compleja, pues debemos tener en cuenta los tamaños de pantallas para movil, tabletas, ordenadores y también los televisores inteligentes.Aunque siempre es difícil hacer que una página esté perfecta en TODOS los dispositivos ( Difícil, no imposible)

Para facilitarte el trabajo tenemos como base los tamaños más comunes.

dispositivos-tamanos-de-pantalla

Tamaños de pantalla.

Es imprescindible que una página sea responsiva?…….. SÍiiiiiii!

Ya que si no lo haces, le estarás poniendo difícil el acceso a muchas personas, ya que estarás obviando que los usuarios querrán acceder a tu web desde diferentes dispositivos, y ellos necesitan que tu información se vea de forma correcta.

Por supuesto un proyecto responsive requiere un mayor tiempo de diseño, desarrollo, testing etc… En 34 mil ideas, podemos ayudarte y guiarte a realizar un buen diseño responsive de tu pagina web, estamos a tu entera disposición.

 

Leave a Reply

Responsable »Antonio Hernández Avila
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Dinahosting(proveedor de hosting de 34 Mil Ideas) dentro de la UE. Ver política de privacidad de Dinahosting. (https://dinahosting.com/legal/aviso-legal).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.