Guia para crear tu sitio web ajustable a diferentes resoluciones de pantalla

Un nuevo tutorial llego y es un poco más allá del diseño, quisimos orientarnos a la programación o desarrollo, y más especificamente al “Responsive Web Design”.

Responsive-WordPress-theme Se que muchos de ustedes son lectores recurrentes al blog y saben que es el “Responsive Web Design”, incluso han leído alguno de los artículos que hemos escrito para ustedes donde les hemos explicado que es esta tendencia y como se ha ido llevando en México.

Creo que toda la referencia que les hemos dado ya es suficiente para que tengan el contexto y entiendan porque es un buen paso para cualquier sitio web al tomar seriamente el diseño web flexible o Responsive Web Design.

Es por eso que hoy vamos a dar el primer paso de una serie de artículos para crear tu primer portafolio de trabajo en con un diseño y programación web totalmente flexible.

Primeros pasos

Comenzar un nuevo diseño no es algo complicado, lo esencial es tener bien ubicados ciertos elementos, definirlos y comenzar a trabajar sobre ellos.

Uno de los elementos necesarios es definir al ancho total del diseño de tu pagina web. Uno de los principios del Responsive Web Design es poder acoplarse a las diferentes resoluciones de pantalla y estas las primordialmente las tomamos del ancho de pantalla. Con los monitores actuales y las resoluciones cada vez mayos seria de suponerse que no debería importarnos en gran medida esto, pero, un hecho es que hoy los nuevos monitores no son los que captan el mayor trafico a los sitios web. Los dispositivos móviles son los que han ganado la batalla y claramente estamos notando como es que, cada vez es mas común que los sitios web, implementen características para hacer sus sitios mas amigables con los móviles, nosotros al igual que muchos otros, creemos que no es necesario hacer tantas modificaciones para ajustar cada sitio a una resolución de pantalla diferente, creemos que basta con un solo esfuerzo, que tal vez al principio sea mayor, pero al cabo del tiempo será la mejor opción.

La resolución de pantalla

Responsive Hoy en día tenemos estándares web de los cuales muchos se rigen por tecnologías ya viejas, una de ellas es la resolución de pantalla. Hoy los sitios de internet, en su mayoría tiene un común denominador, todos están escalados o pensados para leerse perfectamente en pantallas de un mínimo de 1024 pixeles de ancho. Nosotros también recomendamos también contemplar esta resolución, pero siendo un poco mas visionarios. La resolución de la pantalla es de 1024 y justo por eso sabemos que nuestro diseño debe ser menor a ese tamaño, porque? Simple, aun hay elementos que interfieren y que podrían traer problemas, por ejemplo, la barra de scroll. Te recomendamos crear tus diseños en medidas entre 980 y 950 pixeles de ancho.

Resoluciones secundarias de pantalla

Como lo platicábamos un poco mas arriba, hay otras resoluciones que deben ser tomadas en cuenta por crear un diseño web flexible, estas medidas son esencialmente de móviles, ya sea tabletas o smartphones.

Para esto, vamos a tomar de ejemplo algunas otras resoluciones, que serán de 700 pixeles, 480 pixeles y 320 pixeles. La decisión de tomar estas medidas, es que muchos dispositivos cuentan con resoluciones similares, por lo cual, estaríamos abarcando una gran cantidad de dispositivos ya en el mercado.

El CSS y HTML

Un elemento que debes contemplar para recrear los ejemplos que aquí te daremos es tu habilidad en HTML y mucho mas en CSS. Las versiones que desees tener conocimiento es en la 4.1 de HTML y 2 en el caso de CSS, aunque si ya eres un Rockstar en CSS 3 y HTML 5, no importa, entenderás mas rápido y mejor.

El comienzo

Ya tienes las bases y el porque de casa una, en el siguiente articulo, comenzaremos a ver el comienzo de tu pagina web flexible. Lo ideal es que vayas practicando y que tu mismo pongas a prueba tus habilidades o las vayas perfeccionando.

Manos a la obra

Crear un sitio desde cero para muchos puede ser algo intimidante, pero es de lo más fácil del mundo. Para hacerlo, como te lo comentamos en el artículo anterior, necesitamos que sepas un poco de HTML y CSS, con esto como mínimo podremos crear un buen producto.

Validación

Para comenzar con este sitio necesitamos enfocar ciertos puntos importantes que harán funcional todo el concepto. Comenzaremos por definir los elementos del código de cabecera. Como sabes en HTML5 ya no es necesario que agreguemos la validación del documento. Para los que tienen un poco de más experiencia, recordaran que tiempo atrás (antes de la maquinación con HTML5) debíamos agregar antes de las etiquetas <HTML> una validación como está:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> 

Pero ahora con el nuevo estándar, si no queremos agregar esta validación no pasa absolutamente nada, el sitio trabaja perfectamente, pero si aún quieres seguir con la estructura, lo único que debes agregar es:

 <!DOCTYPE html> 

Comenzando con el maquetado

El maquetado realmente es muy simple, recuerdan que las veces que comenzamos un código comenzamos con algo así:

 <html>

Bueno aquí es lo mismo, no necesitamos agregar nada más para comenzar. Un buen consejo es que cada vez que creemos una etiqueta es cerrarla inmediatamente, por lo cual si yo fuera ustedes al momento de escribir <html> agregaría el cierre de la etiqueta </html>

Ahora si vamos con los puntos especiales.

En HTML y HTML5 hay secciones importantes que dan estructura al sitio web, estas secciones también se dividen por etiquetas, que son:

 <head>

Dentro de esta sección vamos a agregar los valores que le darán a la página estilos, descripciones, nombres, entre otras cosas.

 <body> 

En el body tenemos todo el contenido de la página en cuestión, mismo que se rige por lo que dictan los elementos que están dentro del head.

Si tomamos hasta ahora lo que tenemos, nuestra estructura de código sería similar a esto:

<!DOCTYPE html>
 <html>
  <head></head>
   <body></body>
  </html>

El siguiente paso va dentro del head, como les comente un poco antes, los datos que estén dentro de la etiqueta body se regirán por lo que diga el head, desde aquí podremos agregar desde el titulo, las palabras clave, los estílos y para nosotros un punto muy importante, el modo en el que se desplegara la pantalla dependiendo el tamaño.

Acto seguido vamos a agregar estos elementos, los cuales serian algo así:

<title>Mi sitio web</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

El title, no tiene ninguna dificultad, es simplemente el titulo con el cual se desplegara la página, en cambio el <meta> si es importante para nosotros, lo que hace este último es darle un reset a los estílos definidos por el dispositivo en el cual despleguemos el sitio.

Lo siguiente es agregar el link para la hoja de estilo; como saben muchos agregar hojas de estilo externas al código es común ya que aligera la carga de la página. Nuestro código será algo así:

<link href="style.css" rel="stylesheet" type="text/css">

Dentro de estas hojas de estilo viene nuestro segundo punto importante, y es que vamos a agregar una segunda hoja de estilo. ¿Porque? Como lo vimos en el artículo anterior, para hacer que funcione un diseño flexible, se introdujo algo llamado media queries.

Media Queries

Los media queries básicamente son partes de código que permiten diferentes estilos a un mismo elemento.

Este es uno de los puntos claves con el cual vamos a hacer funcionar nuestro diseño. Aunque podríamos agregarlo a la misma hoja de estilo en la cual vamos a usar para darle diseño al sitio, me gusta agregarla de forma independiente para tener un mejor control de ella.

El codigo para agregarla seria:

<link href="media-queries.css" rel="stylesheet" type="text/css">

El contenido

Ya hablamos que el contenido está en la parte del body y es ahora donde vamos comenzar a utilizarlo. Decidi que la mejor forma de mostrarles como funciona esto es combinar un poco de HTML5, HTML4, CSS y CSS3, aunque parezcan muchos lenguajes, la idea es tomar lo esencial de cada uno para hacernos la vida más amena y obtener los resultados deseados en poco tiempo.

Lo principal es saber como vamos a estructurar nuestro diseño, yo decidí crearlo de la siguiente manera:

Header y Barra Navegacion
Titulo
Contenido
Footer

Como ven en la imagen es de forma muy sencilla la forma en que se mostrara el sitio, no pretendo llenarlo de elementos innecesarios que no vayamos a utilizar esta ocasión, solo lo fundamental.

Header

Para agregar nuestro header este será nuestro código:

<header>
 <div id="nav">
  <div id="title"><a href="#" border="0"><img src="img/title.png"></a></div>
   <div id="logos">
    <ul id="horizontal">
     <li><a href="#" border="0"><img src="img/dribbble.png"></a></li>
     <li><a href="#" border="0"><img src="img/behance.png"></a></li>
     <li><a href="#" border="0"><img src="img/twitter.png"></a></li>
     <li><a href="#" border="0"><img src="img/pinterest.png"></a></li>
    </ul>
   </div>
  </div>
 </header>

Aquí vemos que existen básicamente 5 imagenes y que estas están divididas por 3 divs, que son “nav”, “title” y “logos”. Aunque pude haberlo hecho de una forma más fácil, crear diferente divs para el heder me permite tener mejor control al momento de jugar con los mismos elementos en cada resolución de pantalla.

El titulo

Para hacerlo me voy a basar en otro tag de HTML5 el <hgroup> el cual también constará de 2 divs dentro del grupo, que son “subnav” y “box”, y el código sería como el siguiente:

<hgroup>
  <div class="subnav">
    <div class="box">
      <h2>Hola bienvenido a mi sitio web</h2>
    </div>
  </div>
</hgroup>

El contenido

El contenido por el cual opte esta ocasión fue básicamente una serie de imagenes que mostraran mis trabajos recientes, esta serie de imagenes o thumbnails deberá de tener la capacidad de autoajustarse dependiendo del tamaño de pantalla desde la cual lo veamos. La mejor opción fue agregar un nuevo hgroup con distintos divs para cada imagen, y el código seria como el siguiente:

<hgroup>
 <div id="content">
  <div class="portfolio">
   <div class="thumbnail mask"><a class="thumb" href="#"><img src="img/xuntoz.jpg"></a></div>
    </div>
   </div>
</hgroup>

En el div de la imagen podremos agrega la cantidad que deseemos de imagenes, realmente no hay un limite. Lo siguiente es agregar el footer

El footer

Para este vamos a seguir los mismos pagos que los contenidos anteriores, etiquetas de diferenciación en HTML5 y algunos divs para poder controlar el estilo.

El código del footer sería como el siguiente:

<footer>
 <hgroup>
  <div class="left_footer">
   <p>Sitios en los que participo y que te podrían interesar</p><br />
  <ul class="footer_list">

<li class="footer"><a class="menu" href="#">Ok Hosting</a></li>
<li class="footer"><a class="menu" href="#">Ok Honsting Blog</a></li>
<li class="footer"><a class="menu" href="#">Dominios</a></li>
<li class="footer"><a class="menu" href="#">Hosting</a></li>
</ul>
</div>
<div class="rigth_footer">
<ul class="footer_right">
<li class="footer_2"><a class="menu" href="#">Home</a></li>
<li class="footer_2"><a class="menu" href="#">Bio</a></li>
<li class="footer_2"><a class="menu" href="#">Contact</a></li>
</ul>
</div>
</hgroup>
</footer>

Basicamente ya tenemos hecho nuestro sitio web, tenemos las imagenes recortadas, los títulos y hemos agregado un poco de color a cada sección, pero aún no hemos hecho que nuestro diseño sea flexible, y esto es lo que haremos a continuación.

Recuerdan que les comente que habría una hoja de estilo definida solamente para los media queries, pues aquí es donde vamos a comenzar a utilizarla.

Comenzaremos por definir la cantidad de pantallas para las que vamos a estilizar nuestros diseños, cada pantalla es similar a un querie diferente; yo me enfocare a explicar 2 para notar la diferencia, aunque en el archivo descargable, tendremos mas estilos definidos.

El estilo que vamos a utilizar es el que esta entre 980 y 700 pixeles.

Como recordaran decidi hacer hojas de estilo diferentes para el diseño principal y otra con los media queries de cada tamaño de la pantalla esto con la intención de tener un mejor control de ambos diseños, aunque si ustedes lo desean, puede mantener solo una hoja de estilos y en la misma colocar los media queries.

El estilo principal

Si ven la imagen a continuación, notaran como es que decidí estructurar el sitio, algo muy esencial, un header, una pleca de bienvenida, el contenido y el footer. Cada uno de estos tiene una medida que le asigne conforme lo creo coherente, por ejemplo la plega negra tiene un height de 40 pixeles, la segunda pleca tiene un height de 60 pixeles y ambas tienen un width de 100% para ajustarse completamente al ancho de la pantalla. Cada uno de ustedes puede asignarle valores diferentes a sus barras y con esto, jugar un poco más con su propio diseño.

En el caso del cuerpo de la pagina no tengo una medida estándar, por lo cual tuve que agregar una altura automática a la caja de contenido; y en cuanto al footer solo le agregue una altura de 120 pixeles.

Como lo he repetido, no quiero entrar en detalles de CSS porque estoy seguro que ustedes pueden ver y entender las características de los elementos sin problema.

Para agregar un media querie es necesario que dejemos sentadas las bases de lo que deseamos que este realice al notar que la resolución de pantalla está entre los parámetros que le hemos designado; para hacer que esto ocurra debemos agregar un media screen al estilo, algo que quedará similar a esto:

@media screen and (max-width: 980px) {
#tuselementos
}

Con esto nosotros le estamos diciendo que si la pantalla tiene hasta un máximo de 980 pixeles y sobre escriba los elementos que vamos a agregar. Dentro del media querie deben de ir los estilos que manejamos en la hoja principal, por ejemplo el header. En la parte anterior les comente que el heder tenia una altura de 40 pixeles en resoluciones mayores a 980 pixeles, pero ¿Que pasa si hay pantallas que tienen una resolución menor? bueno, comenzamos a agregar los estilos que se sobre escribirán y esto se hace de una forma muy fácil; solo debemos de agregar los elementos como en la hoja de estilo principal y darle parámetros distintos, mismos que se deben de ajustar directamente a la resolución de pantalla que en ese momento estamos trabajando, el ejemplo lo haremos con el header.

En el estilo principal teníamos el header con los siguientes parámetros:

Altura: 40 pixeles
Ancho: 100%
Background: #232323

Dentro del medie querie que es inferior a 980 pixeles nosotros podemos agregar los datos que creamos convenientes, por ejemplo yo puedo decirlo que cuando la pantalla sea menor a 980 pixeles, la altura deberá ser de 60 pixeles, el ancho tiene que quedar de 100% y el color de fondo debe cambiar a un gris (#dddddd), pero también podemos agregar parámetros nuevos, por ejemplo que esta misma área tenga un padding a la izquierda y derecha de 5% y que el texto lo deberá alinear a la derecha, esto debería quedar en código de la siguiente manera:

header {
width: 100%; height: 40px; background: #dddddd; padding: 0 5%; text-align: right;
}

Si lo comparamos con el anterior podemos notar la dieferencia:

header {
 width: 100%; height: 40px; background: #232323;
}

Pero si lo hacemos en un preview del diseño es cuando veremos como es que funciona al desplegarse en el browser. Si te das cuenta, el diseño web flexible o responsive web design es un tipo de diseño y programación ajustable que también es flexible al momento de programar en el. Como sabemos que esta fue una guía rápida, te dejamos los documentos para que los descargues y puedas seguir aprendiendo a tu propio paso. Como siempre si tienes dudas o comentarios, hazlo saber.

  • Rompe Lomo

    Hola! Como es con los newsletters para celulares, porque pj. para una web, landing, etc. podes detectar desde el dispositivo que se navega, pero los newsletter es uno solo el que viaja, entonces como es la forma correcta de armar un news para que se vea ok en todos los dispositivos, si lo armo de 320 px de ancho se ve muy finito en pc, y bien en celu, pero se armar así ó hay alguna técnica para que se vean bien.

  • claudio

    Lamentablemente intente seguir el articulo, pero no logre entenderlo. Seria Ideal si pusieras un link para ver un ejemplo teniendo ademas la posibilidad de descargar los archivos de ese ejemplo para poder ver el codigo. Creo que de esa forma junto a la explicacion que das en el articulo seria de mas facil comprension. Espero que puedas poner un ejemplo y la descarga de los archivos. Gracias

  • Hilda Casas

    Hola, estoy tratando de entenderlo, Gracias, sólo que donde puedo descargar los archivos editables que comentas?

  • Tano León

    Hola. Estoy empezando a adaptar mi web pensando en un diseño flexible. Me ha gustado mucho el tutorial, pero ¿dónde puedo descargar los documentos de los que hablas? Gracias

  • Kta

    Quisiera saber si alguien sabe de los descargables? o por ser un artículo viejito ya los quitaron??