Cómo crear un sitio web con Responsive Design

            Aqui me encontre un buen tutorial para ponernos al tanto de las nuevas tendencias.

Ya hemos hablado mucho sobre lo que significa crear un sitio con Web Resposive Design, cómo se implementa, lo que se debe hacer y lo que no, pero hasta ahora no hemos hecho un ejemplo práctico sobre la forma de manejar nuestros elementos HTML para poder adecuar nuestro sitio a cualquier resolución y por tanto a cualquier dispositivo móvil o de escritorio.

Entonces, en este tutorial vamos a ver cómo crear un sitio web con Responsive Design, desde 0 e iremos viendo cómo sólo tenemos que pensar en la estructura una sola vez para que después de eso toquemos partes clave del CSS para que de un momento a otro todo esté adaptado a la resolución de la pantalla.

Demo del tutorial

Dificultad: fácil

HTML

<div id="container">

                 <div id="menu">

                          <ul>

                                   <li><a href="">Opcion 1</a></li>

                                   <li><a href="">Opcion 2</a></li>

                                   <li><a href="">Opcion 3</a></li>

                                   <li><a href="">Opcion 4</a></li>

                                   <li><a href="">Opcion 5</a></li>

                                   <li><a href="">Opcion 6</a></li>

                          </ul>

                 </div>

                  <div id="cabecera">

                          <img src="cabecera.jpg" width="100%">

                  </div>

                  <div id="contenido">

                          <div class="post">

                                  <div class="post-imagen">

                                           <img src="img1.jpg" width="100%">

                                  </div>

                                  <div class="post-texto">

                                           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                           consequat.

                                  </div>

                          </div>  

                          <div class="post">

                                  <div class="post-imagen">

                                           <img src="img2.jpg" width="100%">

                                  </div>

                                  <div class="post-texto">

                                           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                           consequat.

                                  </div>

                          </div>  

                          <div class="post">

                                  <div class="post-imagen">

                                           <img src="img3.jpg" width="100%">

                                  </div>

                                  <div class="post-texto">

                                           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                           consequat.

                                  </div>

                          </div>  

                          <div class="post">

                                  <div class="post-imagen">

                                           <img src="img4.jpg" width="100%">

                                  </div>

                                  <div class="post-texto">

                                           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                           consequat.

                                  </div>

                          </div>  

                          <div class="post">

                                  <div class="post-imagen">

                                           <img src="img5.jpg" width="100%">

                                  </div>

                                  <div class="post-texto">

                                           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                           consequat.

                                  </div>

                          </div>  

                          <div class="post">

                                  <div class="post-imagen">

                                           <img src="img6.jpg" width="100%">

                                  </div>

                                  <div class="post-texto">

                                           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                           consequat.

                                  </div>

                          </div>  

                  </div>

         </div>

Nuestro HTML es bastante sencillo, tenemos un menú, una imagen principal y varios posts con imágenes y texto. Lo más importante aquí es ver que cada sección tiene su propio contenedor, y que las imágenes tienen un ancho de 100% para que se escalen de forma automática y no tengamos que hacer nada en esa parte.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

En la parte del head añadimos el meta para que se impida hacer zoom al sitio y se ajuste.

CSS

body{

         background: #333333;

         color: white;

}

#container{

         background: white;

         margin: 0 auto;

         width: 1024px;

}

#menu{

         background: black;

}

#menu ul{

         margin: 0;

         padding: 0;

}

#menu ul li{

         display: inline-block;

         margin: 0;

         padding: 10px;

}

#menu a{

         color: white;

}

#contenido{

         color: black;

         text-align: center;

}

.post{

         display: inline-block;

         margin: 30px 10px;

         width: 300px;

}

.post-texto{

         text-align: left;

}       

No se puede hacer un sitio web con responsive design sin antes tener el diseño plantilla, por así decirlo. El diseño plantilla es siempre el de escritorio ya que a partir de ese diseño se elabora el diseño para los demás dispositivos ya que la idea del responsive design es acomodar o quitar partes para que encaje con el diseño.

Para iPad y tabletas modo landscape

@media only screen and (min-width: 768px) and (max-width: 1024px){

         #container{

                 width: 100% !important;

         }

         .post{

                 margin: 30px 10px;

                 width: 30% !important;

         }

}

Para tabletas vamos a poner todo el sitio al 100% para que el fondo apenas alcance a verse, y ya que nuestro sitio es de 1024px sólo necesitamos hacer eso, y ajustar el margen de los posts para que sigan apareciendo 3 en línea.

Para iPad y tabletas modo portrait

@media only screen and (min-width: 480px) and (max-width: 763px){

         #container{

                 width: 100% !important;

         }

         .post{

                 margin: 10px !important;

                 width: 90% !important;

         }

         .post-imagen{

                 display: inline-block;

                 vertical-align: top;

                 width: 49%;

         }

         .post-texto{

                 display: inline-block;

                 padding: 0  0 0 10px;

                 width: 49%;

                 -webkit-box-sizing: border-box;

                 -moz-box-sizing: border-box;

                 -o-box-sizing: border-box;

                 box-sizing: border-box;

         }

         #menu ul li{

                 padding: 10px 10% !important;

         }

}

Cuando la tableta este en modo retrato o de pie necesitamos además del ancho del sitio y el margen de los posts necesitamos acomodar la imagen y texto de los posts para que queden en línea y no uno bajo de otro. También alineamos de forma diferente los links para que no se vean con saltos innecesarios.

Para iPhone y smartphones en modo landscape y portrait

@media only screen and (min-width: 320px) and (max-width: 479px){

         #container{

                 width: 100% !important;

         }

         .post{

                 border-bottom: solid 1px #ccc;

                 margin: 10px !important;

                 width: 90% !important;

         }

         .post-imagen{

                 display: none !important;

         }

         #menu ul li{

                 padding: 15px 5% !important;

         }

}

Como casi el ancho de estas resoluciones sólo se diferencia por 100px aplicamos el mismo estilo para ambos modos de pantalla.En esta ocasión le quitamos la imagen para que se pueda ver mejor el texto y acomodamos los links para que se alineen correctamente.

Conclusiones

Si fe fijan sólo tenemos que ajustar algunos elementos del sitio para poder hacer que el responsive design cobre vida. Obviamente entre más compleja es la estructura más complicado será controlar todos los elementos, por eso es que si se planea hacer un sitio web que se adapte a diferentes resoluciones siempre es bueno plantear y diseñar con esa idea, de que se pueda escalar y modificar de una forma muy fácil.