Con esta entrada empiezo dos cosas en este blog, la primera es obviamente dar continuidad, y la segunda es compartir mi experiencia en diseño web.

responsive_web_design

Como introducción me gustaría dar a conocer los mandamientos que seguiré:

  • Diseño responsivo, adaptativo y flexible
  • Únicamente usar Javascript, CSS3, y HTML5
  • Tener en cuenta el rendimiento de la página en computadores de baja potencia o móviles de gama baja
  • Diseños Limpios u lo más minimalista posible
  • Enfocado a WordPress pero portable a otras plataformas
  • Apoyo y uso de software y frameworks libres

Ahora que tienen en cuenta la forma en la que trabajo y que es lo que compartiré empiezo con la diversión.

Cuando hacemos un diseño responsivo y tenemos un menú principal en el “Header”, que dirigirá a los visitantes a las secciones más importantes del sitio web, y si estos acceden desde un dispositivo móvil, tendrían que desplazarse bastante para poder acceder a aquellos links que se encuentren a la derecha de nuestro sitio, o en su defecto este se deforma dando una terrible imagen al visitante.

Para evitar eso tenemos dos soluciones. La primera es recurrir a algún servicio automatizado que nos cree un layout que sea visible únicamente en los dispositivos móviles; estas usan el sistema de identificación de User Agent, el cual, no siempre funciona, ya que no suelen listar más que los tres dispositivos más populares con sus navegadores por defecto; y si nuestro visitante usa otro (por ejemplo Ubrowser), este no lo reconocerá y la página será mostrada como si fuese visto en un computador; otro problema de estos sistemas automatizados es que no suelen funcionar para tablets, y si esta es pequeña, o la estamos sosteniendo horizontalmente tampoco se activa el layout para móviles.

La otra opción y es la que a continuación escribo, es desarrollar un sistema dinámico que se adapte a la resolución de cada pantalla.

Para esto, como primicia y ante toda otra tentación, tenemos que pensar el esqueleto y nuestras herramientas a esto. Esto quiere decir que limitaremos el uso de iframes, objetos insertados con ancho fijo y menús flash.

Mi recomendación es empezar usando el principio del sistema de red o mejor conocido por su nombre en ingles, “Grid System”. De este profundizaré y daré ejemplos en otra ocasión.

Una ves que tengamos en nuestra hoja de estilos este sistema empezamos por crear las definiciones de estilo para nuestro div exterior e interior:

.outer_wrap {
    margin: 0 auto;
    width: 960px;
    background: #222;
}
.inner_wrap {
}

Y lo agregamos a nuestra hoja “header”, o al inicio del html de esta manera:

<!DOCTYPE html>
<html>
<div class="header">
<h1>Header</h1>
</div>
<body>
<div class="outer_wrap">
<div class="inner_wrap">
<div class="content">
...

No nos tenemos que olvidar de enlazar nuestra hoja de estilos al archivo que estemos manejando:

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

En nuestra hoja de estilos y por consiguiente nuestro html final tiene que usar porcentaje de ancho para el div “content”, que será el que “contendrá” todo el texto, imágenes, etc; de nuestro sitio web. Todos los otros divs que vayamos a crear dentro del “content” deberán usar porcentajes.

Ahora creamos otro archivo, “mediaqueries.css” y en este le damos las especificaciones de las resoluciones que vayamos a manejar:

@media screen and (min-width: 1551px) and (max-width: 1950px) {
.outer_wrap {
    margin: 0 auto;
    width: 1500px;
}
}
@media screen and (min-width: 1225px) and (max-width: 1550px) {
.outer_wrap {
    margin: 0 auto;
    width: 1200px;
}
}
@media screen and (min-width: 1025px) and (max-width: 1224px) {
.outer_wrap {
    margin: 0 auto;
    width: 960px;
}
@media screen and (min-width: 569px) and (max-width: 1024px) {
body {
    padding: 0px;
}
.outer_wrap {
    margin: 0 auto;
    width: 100%;
}
.content {
    padding: 10px;
    margin: 0px auto;
}
}
@media only screen and (min-width : 240px) and (max-width : 568px) {
body {
    padding: 0px;
}
.outer_wrap {
    margin: 0 auto;
    width: 100%;
}
.content {
    padding: 20px;
    margin: 0px auto;
}

Es muy importante cerrar estos div en el “Footer”

<body>
<div class="outer_wrap">
<div class="inner_wrap">
<div class="content">

 

Y con esto termino la primera parte de como desarrollar un sitio web adaptable a todos los dispositivos, tengan en cuenta que esto solo muestra los conceptos más básicos a tener en cuenta y si simplemente copian y pegan no tendrán un sitio funcional, ya que estos ejemplos están hechos para que cada quien los adapte a su propia forma de trabajo

Y sin más que decir me despido y suscríbanse para recibir la siguiente parte de esta guía. Hasta pronto

Anuncios