Diseño web responsive. Como hacer tu web responsive

Todos sabemos ya la importancia de que nuestra web, o la de nuestro cliente, esté adaptada a cualquier tipo de dispositivo, que sea un diseño web responsive, y si no, deberíamos saberlo. Pero no hablaremos de eso, sino que es lo que necesitamos para adaptarla.

diseno-web-responsive

Esto no pretende ser un tutorial de diseño web responsive, sino una simple guía para que veáis lo más importante y su efectividad.

Lo cierto es que si tenemos un poco de conocimiento de hojas de estilos CSS no es complicado. ¡Ojo! Que no sea complicado no quiere decir que el diseño web responsive no sea laborioso, no nos confundamos. Pero con dedicación y cumpliendo una serie de pautas se puede conseguir sin problemas.

No necesitamos que nuestro theme o plantilla para la web o blog estén creados en HTML 5, aun que hay buenos motivos como la mejora de indexación y posicionamiento. Tampoco es necesario crearlo desde cero, si ya tenemos uno con nuestros colores corporativos, imágenes, fondos, etc., se puede adaptar el existente

Las pautas para transformar nuestro theme en responsive, son las mismas que para crear uno desde cero.

La estructura en HTML, para el diseño web resposive, que he creado es una estructura básica: Un contenedor principal donde irá todo el grueso de la web, cabecera, menú, una columna con los contenidos importantes en la izquierda y dos columnas secundarias o de navegación en la derecha, no he usado HTML5 de esta forma veis que tampoco es necesario para esto.

Vamos con el HTML, os dejo lo básico, para que veáis la estructura.

En primer lugar, aun que no es obligatorio, usaremos anchos en porcentajes, así que el apartado donde van todos los contenidos le daremos un 100% de ancho, y para que no sea excesivo, le daremos ancho máximo, por ejemplo 1000px. En plantillas ya creadas este lugar suele denominarse Wrapper, main o content, depende del diseñador o de la plataforma.

Ahora, ajustaremos la columna principal del contenido (col-content) el contenedor de las columnas laterales (columns) y las columnas laterales (colum1 y colum2). A la columna principal le daremos un ancho del 59% con un máximo de 600px, al contenedor de las columnas laterales un 39% y 49% a cada una con y flotabilidad para que queden a la misma altura. No son justos para que deje un poco de margen entre ellas.

CSS

No podemos decir que es del todo un diseño web responsive, pero ya se va adaptando a los tamaños de pantalla. Por el momento las columnas laterales no cambian de posición y al contraerse llega un punto en que se des configura el diseño.
Os dejo el primer ejemplo, para ver los resultados solo hay que des maximizar la ventana del navegador de izquierda a derecha para que veáis el efecto.

Ver ejemplo en funcionamiento.

En el segundo ejemplo, hemos variado un poco, al contraer la ventana del navegador con una anchura por debajo de los 769px, las barras o columnas laterales de la derecha pasan a estar bajo la del contenido principal, para ello, hemos añadido este parámetro

con el que indicamos la acción cunado la anchura de nuestra web no supera los 769px también, simplemente quitado la flotabilidad de la columna principal (col-content) y la de la que encierra las columnas laterales (columns). También cambiaremos los parámetros de anchura con un ancho del 100% en los dos casos. Sin embargo, no quitaremos las flotabilidad de las columnas 1 y 2, lo que hace que estas sigan una junto a otra y no una bajo la otra.

Ahora ya se acerca un poco más al diseño web responsive que hemos visto en otras páginas web.

CSS

 

Ver 2º ejemplo en funcionamiento

En este último, el comportamiento responsive será a partir de los 481px, esta anchura ya pensada para las pantallas de los móviles. Aquí cambiaran tanto el comportamiento de las columnas laterales, que ya aparecerán la una bajo la otra al tener una resolución inferior a la ya dicha y el menú principal. Para ello cambiaremos los parámetros de la lista del menu y los enlaces dando un ancho del 96% a los elementos de la lista, haremos que floten a la izquierda los enlaces y quitaremos la flotabilidad de las columnas 1 y 2.

Ahora si que podemos decir que tenemos un diseño web responsive.

CSS

Ver 3er ejemplo en funcionamiento.

Como he dicho al principio, no es necesario que los anchos sean en porcentajes, aun que creo que es el mejor sistema, podéis poner anchos fijos, que cambien con cada máximo de ancho del soporte, pero para eso hay que usar unas cuantas definiciones de ancho máximo y sería muy tediso y engorroso, a parte que en según que ocasiones no quedaría demasiado bien.

También podéis cambiar colores e imágenes de fondo, e incluso que haya zonas que desaparezcan, como es el caso de este blog.
A partir de aquí, todos los parámetros que queráis cambiar para mejorar vuestro diseño responsive ya los dejo en vuestras manos y vuestra pericia.

Nota: en los ejemplos, los estilos CSS están en los mismos archivos HTML, os lo comento por si alguno quiere ver el código completo de los ejemplos.

 

 

Deja un comentario

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

Uso de cookies

Este sitio web utiliza cookies, tanto propias como de terceros (Google Analytics), para recopilar información estadística sobre su navegación generada a partir de las pautas de esta. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

- SÁQUEME DE AQUÍ - CERRAR