Se encuentra usted aquí

15
Nov
2013
Author:
Raul

 

Mucho se esta hablando de las "responsives webs" y puede que muchos ni siquiera sepais que significa hacer una web responsiva, pues bien, el "efecto" responsive es nada mas y nada menos que la adaptacion de la web a distintos dispositivos, sea móvil, tableta o pantalla de ordenador.

 

Posiblemente os habéis dado cuenta, que cuando entráis en ciertas webs, usan un tema para cuando lo visualiazamos con una pantalla estándar y otro parecido para cuando lo hacemos desde el móvil o tableta. Esto puede ser por dos motivos: que tienen dos diseños, uno para ordenador, es decir mas de 800 px de anchura y otro para unos 480px para los dispositivos mobles, ó que el mismo tema lo han echo responsive, lo que significaría que dicho tema lo han adaptado en función del periférico. Yo personalmente opto mas por la segunda opción porque a la larga te evitas multitud de dolores de cabeza.

Y bueno, os preguntaréis como se hace una web responsive? pues esa es una muy buena pregunta que hoy voy a tratar de explicaros o por lo menos guiaros en este interesante mundo.

 

Lo primero que tenemos que hacer es diseñar nuestra web, como si solamente fuese a verse en una pantalla normal de ordenador, permitirme añadir, que para poder realizar temas responsives, es recomendable trabajar con div's en el esqueleto de la web, para los que no entiendan a lo que me refiero lo resumiré diciendo, prohibido usar tablas!!!. Sinceramente hace muchos años que deje de usar tablas en mis diseños así que mi experiencia con web responsives con tablas es un poco nula... de echo tengo mis dudas de si se puede o no hacer, sinceramente. Si aun no os ha quedado claro os dejo un ejemplo de código abajo, si lo entendiste pasa al siguiente apartado.

SI:

<div id="body-content">
 <div id="sidebar-first"> contenido del sidebar izquierdo</div>
 <div id="content-content"> Contenido de la web </div>
 <div id="sidebar-second"> contenido del sidebar derecho</div>
 </div>
 
NO:
 
<table id="body-content">
  <tbody>
    <tr>
      <td>Contenido del sidebar izquierdo</td>
      <td>Contenido de la web</td>
      <td>Contenido del sidebar derecho</td>
    </tr>
  </tbody>

 

</table>

Bien, Una vez entendido ese proceso, y antes de liarnos con las css, pasaremos a lo que yo considero que lo primero que debemos añadir en el html.tlp.php y entender el porque. 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=1">

Tanto si lo sabes como si no, el explorador que utilizas escala automáticamente el html para que puedas ver en la pantalla toda la web, haciendo que, en ocasiones, se vea demasiado pequeño, pues bien para evitar esto pondremos ese tag y asi le diremos al explorador, que el ancho del contenido sera el 100% (width=device-width), que escala inicial tiene el sitio (initial-scale=1) y hasta cuanto queremos que lo escale en el case de que deba hacerlo (maximun-scale=2). La ultima opción es para definir si queremos que el usuario  escale el sitio a su gusto (user-scalable=1). Yo os recominedo copiar y pegar literalmente esa línea. Podéis probar los efectos con y sin esa línea de código para entender el efecto.

 

Una vez realizado y entendido el paso anterior, pasamos a la siguiente pregunta. Vale ahora la web se me ve bien, pero que hago con el menú? Bueno pues a esa pregunta hay dos posibles respuestas:

  1. Crear un menú oculto con javascript 
  2. Crear un menú oculto o no con CSS

Realmente aquí el gusto lo pone el cliente y/o el diseñador, yo, personalmente, me decanto por hacerlo oculto y con css, por la sencilla razón de que es mas rápido y relativamente mas sencillo, es evidente que la complejidad la pone el cliente y aunque ambas opciones son totalmente buenas, yo recomendaría mas el javascript en el caso de que quisieramos realizar un tema muy concreto y SOLO para dispositivos mobles. Pero ya os digo eso depende de vosotros.

 

En el caso de que eligais javascript aquí os dejo un par de enlaces a scripts que son realmente espectaculares a la hora de hacer estos menus laterales.

 

De lo contrario si queréis hacerlo con CSS3 os dejo un par de enlaces abajo, Tened encuenta que algunos requieren un nivel de CSS por lo menos avanzado.

 

Bueno, Ya tenemos la web ajustada y el menú oculto. Y ahora que hacemos con nuestra web para optimizar la visualización del contenido? Bueno esta pregunta es bastante amplia, porque es evidente que depende de como hayáis programado vuestro CSS para la web inicialmente. Así que os responderé en términos muy generales.

 

Lo que debemos de realizar ahora es, para que os hagais una idea, re-estilizar vuestra web pero esta vez adaptándola para un dispositivo móvil. Es decir como si "solo" se fuera a ver para un dispositivo de unos 320-400 px

Pregunta: -Tengo que volver a estilizar todos los tags de la web? 

Respuesta: - definitivamente NO!, solamente lo que sea necesario para que se visualize correctamente.

Pregunta: - Donde pongo el código? al final del fichero o creo uno nuevo?

Respuesta: - Lo ideal seria crear un archivo nuevo llamado responsive.css o algo que haga referencia a que es el css para mobles. Si no es excesivo cogido ponlo al final, PERO, en ambas opciones NO has de ponerlo tal cual, tienes que usar las CSS media queries.

 

Que son las CSS media queries?

Para saber que son las media queries os recomiendo leer esto: definición

Ese enlace es uno de tantos tutoriales acerca de que son y para que sirven las media queries os recomiendo un pequeño vistazo antes de continuar. 

Una vez leído y entendido, nos dirigiremos a nuestro archivo .css y añadiremos el siguiente código:

@media (max-width: 500px) {

 //tu código responsive para mobles aquí

}

Ese código lo que hace es básicamente decir que a toda pantalla  inferior a 500px (Iphone,Galaxy....) se le apliquen los siguientes estilos. Es decir, aquí pondremos nuestro código exclusivo para mobles, evidentemente podríamos general algo solo para tabletas con algo asi:

@media (min-width: 500px) and (max-width: 700px) {

 //tu código responsive para tabletas aquí

}

Esto es tan potente que incluso podríamos definir si el dispositivo esta en horizontal o vertical añadiendo un "and (orientation: landscape)" pasa saber si esta en horizontal. Es obvio que si no esta en horizontal, pues estara en vertical, parece una tontería pero me gustaría saber cuantos ni se dieron cuenta...

 

Y todo esto para que sirve?

Pues bien, esto sirve para que ahora defináis los divs, span y todo aquello que necesiteis modificar para que quede todo en su sitio, normalmente, hay que modificar el width, el display, el float.... pero eso queda ya en vuestra mano, ejemplo:

css no responsive:

.container-body{

   width: 800px;

}

css responsive dentro del @media:

@media (max-width: 500px) {

  .container-body{

     width: 100%;

   }

}

En este caso le decimos al explorador, eres una pantalla mas pequeña de 500px? sí, pues entonces el cuerpo sera todo el ancho de la pantalla. De este modo "tan sencillo" podemos re-estructurar toda la web pudiendo así cambiar por ejemplo los displays, los width y todo aquello que necesites para que tu web se vea bien en una pantalla móvil. Como posdeis ver e imaginar, aquí no modificaremos, por ejemplo, los colores, los tamaños de las letras y ese tipo de cosas. Que se podría hacer en el caso que fuera necesario.

Bueno, hasta aquí este tutorial de como hacer un tema responsive, espero que os haya gustado y os haya ayudado en vuestro proyecto, si tenéis alguna duda, alguna corrección o algo que creáis que falta, no dudéis en comentar y lo actualizare!

Un saludo!

 

 

 

 


2 Comentarios

Imagen de Jesus SEQUEIROS

|
14 Sep 2014

El uso de temas móviles, es algo que hoy en día todo diseñador web debe considerar en forma prioritaria, para drupal el módulo mobile_tools, creo cumple lo básico, en la siguiente dirección hay un artículo relacionado con la creación de una versión movil para drupal 6:
http://jsequeiros.com/como-crear-una-version-para-celulares-de-un-sitio-...

Imagen de Raul

Raul
|
15 Sep 2014

Gracias por compartir el articulo con nosotros!! Aunque en mi experiencia personal nunca he usado ese modulo... siempre he creado mis propios temas responsives haciendo que en el mismo codigo html ya lo hago responsive cargando las librerias js necesarias para ese proposito! pero igual para usuarios menos expertos este modulo les puede ser de gran ayuda!

Por cierto te gustaria publicar tus propios articulos aqui?? estoy preparando la segunda fase y estoy buscando editores, si te gustaria enviame un mail y te comento por privado.

Un saludo!!


Añadir nuevo comentario