Webmaster. Serlo o parecerlo.

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.

<div id="wrapper">
<h3>Aquí todo el cuerpo de la web </h3>
<div id="header">
<h1><a href="http://www.jesusaf.com">Jesus AF WED</a><br />
web responsive - Ejemplo 1</h1>
</div>
<div id="menu">
<ul>
<li><a href="#" title="Link 1"> link 1</a></li>
<li><a href="#" title="Link 2"> link 2</a></li>
<li><a href="#" title="Link 3"> link 3</a></li>
<li><a href="#" title="Link 4"> link 4</a></li>
</ul>
</div>
<h3>Aquí ira el contenido de las tres colimnas </h3>
<hr />
<div id="col-conten">
<h3>Aquí la colomna de contenido </h3>
<hr />
<h4>Columna princpal de contenidos</h4>
<p>Aquí es donde se encontraría el contenido de la columna principal</p>
</div>
<div id="columns">
<h3>Aquí el resto de las columnas </h3>
<hr />
<div class="colum1">
<h4>Columna 1</h4>
<p>este sería al contenido de la columna de la derecha</p> </div>
<div class="colum2">
<h4>Columna 2</h4>
<p>este sería el contenido de la columna izquierda</p>
</div>
</div>
</div>

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

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: center;
	}
#wrapper{
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: auto;
	text-align: left;
	}
#header h1 {
	font-family: Verdana, Geneva, sans-serif;
}
#menu {
	width: 100%;
	height: 25px;
	padding-top: 5px;
}
#menu ul{
	list-style-type: none;
	width: 100%;
	margin-top: 1px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: -38px;
	}
#menu li {
	padding: 0px;
	float:left;
	margin: 1px
	}
#menu a{
	background-color:#ccc;
	padding: 5px;
	}
#menu a:hover{  
	background-color:#eee;
	padding: 5px;
	}
#col-conten {
	width: 59%;
	max-width: 600px;
	border: 1px dashed #ccc;
	float: left;
	margin-bottom: 5px;
}
#columns {
	float: right;
	width: 39%;
	border: 1px dashed #ccc;
	padding-bottom: 3px;
}
.colum1 {
	float:left;
	width: 49%;
	border: 1px dotted #CCC;
	}
.colum2 {
	float: right;
	width: 49%;	
	border: 1px dotted #CCC;
}

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

@media screen and (max-width: 769px) { … }

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

@media screen and (max-width: 769px) {

#col-conten {
	width: 100%;
	max-width: 100%;
	border: 1px dashed #ccc;
}
#columns {
	width: 100%;
	border: 1px dashed #ccc;
	padding-bottom: 3px;
}
.colum1 {
	float:left;
	width: 49%;
	border: 1px dotted #CCC;
	}
.colum2 {
	float: right;
	width: 49%;	
	border: 1px dotted #CCC;
}
}

 

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

@media screen and (max-width: 481px) {

#menu li {
	float:left;
	width: 96%;
	padding: 0px;
	}
#menu a{
	float:left;
	background-color:#ccc;
	width: 100%;
	padding: 5px;
	}
#menu a:hover{  
	background-color:#eee;
	width: 100%;
	padding: 5px;
	}
.colum1 {
	width: 100%;
	border: 1px dotted #CCC;
	}
.colum2 {
	width: 100%;	
	border: 1px dotted #CCC;
}
}

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.

 

 

16 Comentarios
  1. Erick 7 años

    Muy bien explicado. Gracias por la información. Saludos.

    • Autor
      Jesus AF 7 años

      Muchas gracias Erick, encantado de que te haya gustado, y si la información te sirve más encantado aun 😉
      Gracias por tu comentario.
      Un saludo

  2. Andreas Schou 7 años

    Excelente artículo, Jesús! Parece que no es para tanto. Voy a ver si saco tiempo para probarlo.

    • Autor
      Jesus AF 7 años

      Mil gracias Andreas.
      Un placer y si te pones a ello, cuando quieras me cuentas 😉

  3. Xavi 7 años

    Muy buen artículo. Estoy haciendo una web-cv y es la información que me hacía falta para desarrollar mi idea inicial. Mil gracias!

    • Autor
      Jesus AF 7 años

      Gracias a ti Xavi y me alegro de que te sea útil.
      Un saludo y para lo que necesites 😉

  4. Alejandro ocaña 6 años

    mil gracias…. muy claro y útil… saludos desde México.

  5. Sisco 6 años

    Hola gracias por tus indicaciones en el blog.
    Me gustaría hacer responsive la página inicial de mi web.
    Tiene tres columnas.(1/6; 4/6, 1/6), pero me gustaría (en el movil) que la columna central se visualizara en primer lugar y la primera y tercera se visualizaran juntas.

    Me puedes ayudar?
    Gracias

  6. Sisco 6 años

    Hola, creo que te he hecho ya la pregunta pero no la veo en la lista.
    Quiero convertir mi página principal en varios divs responsive.
    div izquierda de 1/6 de pantalla, div central de 4/6 y div derecha de 1/6
    Para ver en el movil primero el div central y después los otros dos divs como debo hacerlo.
    Gracias por tu ayuda y tus comentarios en el blog.

    • Autor
      Jesus AF 6 años

      Hola Sisco.
      Pon los div en el orden que quieres que aparezcan en el el dispositivo, tal y como lo palntas, primero el ecntral, luego el izquierdo y despues el derecho.
      < div class="centro" > < / div>
      < div class="izquierdo" >< / div>
      < div class="derecho" >< / div>

      Dales “float” al los dos de los laterales, left y right, y cuando no quieras que estén bajo el central, utiliza float: none; en los dos. De esta manera se pondrán en el orden que has colocado los contenedores div.
      Personalmente te recomiendo que no dejes ninguno junto al otro para la versión movil, mejor todos de arriba a bajo.

      Gracias por tu comentario y espero haberte ayudado.
      Un saludo.

  7. Samuel 6 años

    Gracias por compartir toda esta información, para mi será de gran utilidad. Lo explicaste tan claro que se ve facil, pero en anteriores ocasiones se me hizo complicado.

    • Autor
      Jesus AF 6 años

      Gracias a ti, Samuel, así da gusto.
      Es fácil, pero también reconozco que trabajoso.
      ánimo y a por todas.

  8. Gerard AD 6 años

    Me has solucionado la vida! Tenía problemas con los media queries para adaptar dos div dentro de uno para que se adapte en un samrtphone y por fin lo he aconseguido!

    Grande!

    • Autor
      Jesus AF 6 años

      Me alegro si te ha servido, en el fondo no es tan difícil. Eso sí, puede ser trabajoso 😉
      Gracias por tu comentario Gerard.

  9. Oscar 5 años

    Gracias por abordar el tema de una forma tan clara. Lo que expones se entiende perfectamente.

    Supongo que ya sabrás pero el enlace del tercer ejemplo lleva al segundo.

    Saludos.

  10. Nayemi 5 años

    Estaba buscando un tutorial que me explicara cómo transformar una plantilla existente pero obsoleta en responsive, y llegué acá, donde esta todo muy bien explicado para comenzar de cero. De hecho, la columna de contenido la puse a flotar a la derecha y las columnas 1 y 2 a la izquierda. Agregué un footer antes de cerrar el body, pero lo coloca debajo de las columnas 1 y 2, pero igual al comprimir la pantalla, queda debajo de todo, perfectamente responsive. Gracias

Contesta

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

*

©2013 - 2021 Jesús AF - WEB

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Í - ACEPTAR

Aviso de cookies

Inicia Sesión con tu Usuario y Contraseña

o    

¿Olvidó sus datos?

Create Account