Post Actualizado en julio 25, 2013
Guía para crear un sitio web ajustable a diferentes resoluciones de pantalla parte 2
El diseño web flexible o responsive web design sigue tomando importancia en nuestro entorno, es interesante ver como cada vez más y más sitios orientan sus esfuerzos en aplicar esta tendencia en sus páginas. Por nuestra parte, sabemos y estamos al tanto de que muchos creativos desean aprender de forma rápida y eficiente la tendencia, […]
El diseño web flexible o responsive web design sigue tomando importancia en nuestro entorno, es interesante ver como cada vez más y más sitios orientan sus esfuerzos en aplicar esta tendencia en sus páginas. Por nuestra parte, sabemos y estamos al tanto de que muchos creativos desean aprender de forma rápida y eficiente la tendencia, es por eso que estamos trabajando a marchas duras para plasmar nuestros conocimientos y hacer que sirvan a sus necesidades.
Esta es la segunda parte de una pequeña "Guía para crear un sitio web ajustable a diferentes resoluciones de pantalla", aquí ya abordaremos un poco más rápido una serie de conceptos que en la primera parte explicamos y que si no has visto, es recomendable que la analices (link)
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.