El diseño de plantillas "Responsive" adaptadas a cualquier tipo de pantallas se ha convertido en una tendencia. La tecnología móvil y el tráfico que viene desde estos dispositivos ha evolucionado enormemente desde 2010 hasta 2013. Ahora las personas prefieren leer los contenidos desde su smartfone en comparación con el uso del ordenador tradicional. Las conexiones por internet móvil de acceso rápido y el WiFi es otra de las razones para utilizar los teléfonos inteligentes desde cualquier lugar sin tener que utilizar el ordenador personal.
Cada vez son más los clientes que están interesados en diseños flexibles en comparación con los diseños de ancho fijo tradicionales. Son también más las personas que demandan esta nueva característica y por eso debemos adaptarnos a las nuevas tecnologías. En este artículo vamos a ver como habilitar el diseño del blog para que el contenido se distribuya y se ajuste automáticamente al tamaño de pantalla. Como este blog trata sobre Blogger vamos a ver como añadir un diseño "responsive" desde esta plataforma.¿Qué es un diseño "Responsive"?
En términos simples una página web responsive es un diseño flexible que se ajusta a su anchura y estilos según el tamaño de la pantalla del dispositivo. Este diseño tendrá un aspecto diferente en una pantalla de sobremesa y muy diferente en un teléfono inteligente o tableta (con dos tipos de dimensiones: vertical y horizontal ). No importa que dispositivo se utiliza. En un diseño adaptativo este se ajusta perfectamente para darle una interfaz de usuario limpia. Un ejemplo lo puedes ver aquí.
Para los usuarios de Blogger:
Si tienes activado la versión móvil para tus blogs de Blogger entonces verás el diseño adaptado para un teléfono inteligente. Encontrarás un aspecto completamente diferente en comparación con un ordenador. Por defecto todos los blogs de Blogger están optimizados para móviles, pero esos estilos son demasiado simples y no representan el blog en su forma verdadera, por lo tanto vamos a aprender a crear diseños personalizados diseñados para blogger nosotros mismos.
1. Incluye la etiqueta Meta Viewport justo debajo de la etiqueta <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Aquí en width=device-width detectará el tamaño de la pantalla.
2. Utiliza las Media Queries de CSS3
El uso de media Queries en CSS3 se utiliza para cambiar el tamaño de pantalla y aplicar la hoja de estilo correspondiente a esa pantalla. Por ejemplo, mira estas dos Media Queries, una para teléfonos inteligentes y otra para dispositivos como tablets.
@media screen and (max-width : 480px) {
/* If screen size less than 480px Load these styles */
/* Realizado para smartfones */
}
/* If screen size less than 480px Load these styles */
/* Realizado para smartfones */
}
@media screen and (max-width : 768px) {
/* If screen size less than 768px Load these styles */
/* Realizado para tablets */
}
/* If screen size less than 768px Load these styles */
/* Realizado para tablets */
}
Estos son algunos consejos básicos para el diseño web adaptativo de nuestros blogs.
Recuerda estos consejos:
Modifica el número de píxeles (px) para definir tamaños de fuente, relleno, márgenes, etc.
Utiliza porcentajes en lugar de valores numéricos para definir el ancho de las columnas.
Si eres usuario de Wordpress puedes encontrar 20 plantillas con un diseño "responsive" en este enlace.
Artículo enviado por: Pedro Mendez. Conocimiento en desarrollo y diseño de sitios web, marketing online y medios sociales.
Comentarios
Publicar un comentario