Como hacer un diseño Responsive

¿Cómo hacer un diseño Responsive?

¿Qué es un diseño responsive?

Primero que nada debemos entender que en diseño web se le llama diseño resposive a el diseño que se adapta a la pantalla del dispositivo, es decir que si un sitio es responsive podremos visualizarlo desde cualquier computadora, tableta o teléfono celular, sin vernos en la necesidad de tener que ajustar  el zoom para poder visualizar el contenido ya que el contenido se adaptara justo a la resolución de pantalla que estemos usando.

¿Cómo hacer un diseño responsive?

Probablemente hayas escuchado alguna vez hablar sobre bootstrap, este es un framework utilizan mucho algunos diseñadores para hacer sitios responsives mas en lo personal lo veo mas como para salir de un apuro, ya que al final hay mucho código que no se utiliza y esto hace que el sitio se haga un poco mas lento ya que hay mucho codigo que no estarias usando

¿Cómo puedo crear un sitio responsive?

1- Primero que nada intenta trabajar los anchos con porcentajes y asi lograras que el diseño de tu sitio a pantallas un poco mas pequeñas o mas grandes que la pantalla en la que estas realizando tu diseño.

2- Tras haber empezado a trabajar con pixeles notaras que las cosas se adaptan sin hacer nada mas, aunque no se adaptara ya a todos los disposivos asi que pasaremos a la siguiente fase que será trabajar con Media Query, estos son trozos de códigos que se ejecutan solo si se cumplen y es por eso que nos sirve para hacer un diseño responsivo.

Ejemplo:
Crearemos un contenedor el cual haremos responsive, el contenedor poseera un ancho del 60% de las pantallas mayores a 700px, en las pantallas menores a los 700px se mostrara en un 70% y en las pantallas menores o iguales a 300px se mostrara al 95%.

Empecemos:
Primero crearemos el maquetado de la siguiente manera:

<div class="Element">Aca van otros elementos con tamaño en %</div>

Justo en este momento solo tenemos el maquetado, ahora necesitamos darles los estilos correspondientes a nuestro maquetado, como anteriormente les decia lo haremos dando porcentajes.

//CSS

.Element{
width:70%;
min-height: 200px;
margin-right: auto;
margin-left: auto;
background:green;
}

Con esto el diseño sera responsive y se adaptara a la pantalla a un 70% pero recordemos que si vemos el sitio en un telefono no nos gustara, nos parecera mal porque no vamos a querer ver solo el texto el un 70% de la pantalla asi que ahora haremos que en las pantallas con una resolucion menor o igual a los 300px se mostrara en un 95%, y esto lo haremos con un media query, entonces haremos lo siguiente.

.Element{
width:70%;
min-height: 200px;
background:lavender;
}
@media (max-width:500px)
{
.Element{
width:95%;
}
}

Como podran ver solo hemos modificado el ancho pues es lo que nos intereza ahora les mostrare unas capturas de pantalla como se mostraria el sitio en un dispositivo al 70% y en otro al 90%.
Así luce en un escritorio



Y asi mas o menos en un movil y veran que es responsive.