Diseño Responsive, Primeros Pasos

Aprende a crear la estructura de contenido para tus proyectos responsive.
Parte 2 de 3

Diseño Responsive: Primeros Pasos

Parte 2 de 3

En esta segunda parte de este tutorial, vamos aprender cómo crear las estructura de tu sitio web, es decir, cómo organizar los tags Div, Section, entre otros… para que sean adaptables en todos los tipos de resoluciones.

Para empezar, debes tener en cuenta lo siguiente:

1. Media Queries

Estas son los tamaños, en promedio,  de las resoluciones de pantalla de cada dispositivo, es decir, hasta que tamaño se considera un smartphone (small), una tablet (medium) y un desktop (large).

Te dejo aquí las medidas:

Pantalla Nombre Rangos
Smartphone Small 0px – max  640px
Tablet Medium min 641px – max 1024px
Desktop Large min 1025px – max 1440px
Desktop X xLarge min 1441px – max 1920px
Desktop XX xxLarge min 1921px

Nota: Estas medidas son por defecto de este Framework, si usas otro, habrá quizás una leve variación en los tamaños, por ejemplo, en Foundation, las tablets (medium) termina en 1024px, en otros puede ser que termine en 950px. 

2. Creando la Rejilla (Grid)

Para crear la rejilla (grid), debemos hacer contenedor que sera la fila (clase row), luego agregamos la cantidad de columnas que deseemos (clase columns) especificando cómo se visualizaría en todos los dispositivos.

El tamaño de cada columna los especificamos escribiendo el numero después de cada clase, de esta forma: small-#, medium-#, large-#. Todos estos números deben sumar máximo 12.

Recuerda: Foundation permite un máximo de 12 columnas por fila. En cada columna, no olvides poner la clase columns o column.

Miremos ejemplos.

Ejemplo 1

Crear una fila con dos columnas de igual tamaáo.

HTML

 Resultado 

Texto Columna 1
Texto Columna 2

En este caso, en esta fila hemos creado 2 columnas de igual tamaño, cada una ocupando 6 de espacio, para un total de 12.

Ejemplo 2

Ahora deseamos crear una fila con 4 columnas de igual tamaño.

HTML

 Resultado

Texto Columna 1
Texto Columna 2
Texto Columna 3
Texto Columna 4

Para hacer 4 columnas iguales,  la clase de las divs, ya no es large-6 sino large-3. En total, tenemos 4 columnas que ocupa cada una 3 de espacio dando como resultado 12.

Ejemplo 3

Creemos una fila con diferentes tamaños de las columnas. 

HTML

Resultado 

Texto Columna 1
Texto Columna 2
Texto Columna 3

Tenemos 3 columnas pero esta vez de diferentes tamaños. La primera ocupa 3 de espacio, la segunda el 2 y la ultima el 7, para un total de 12.

Ademas de la clase large-#, también podemos usar xlarge-# o xxlarge-# para pantallas con resoluciones más alta. Sin embargo, sino creemos que sea necesario especificar sus tamaños, con solo declarar el tamaño para large, las otras la toman por defecto.

3. Estructura Dispositivos Móviles

Para dispositivos móviles, usamos la misma sintaxis, sin embargo, usaremos las clases small-# (Smartphone) y medium-# (Tablets.)

Miremos ejemplos:

Ejemplo 1

Crear 3 columnas diferentes para smartphone.

HTML

 Resultado

Texto Columna 1
Texto Columna 2
Texto Columna 3

Ejemplo 2

Crear 2 columnas diferentes para tablets.

HTML

 Resultado

Texto Columna 1
Texto Columna 2

Cómo podemos ver, es la misma sintaxis para todos los dispositivos.

4. Combinando Dispositivos

Después de entender cómo organizar las rejillas, vamos a combinar todo este código. 

Ejemplo:

Realizar una rejilla con estas especificaciones:
En celulares solo sea 1 columna, en tablets 2 columnas y en Desktop 4 columnas. 

HTML

Resultado:

Texto Columna 1
Texto Columna 2
Texto Columna 3
Texto Columna 4
 

Cuando se vea la web desde

  • Un desktop (large), se visualiza 4 columnas.
  • En una tablet (medium), se visualizará 2 columnas y se adapta a 2 filas.
  • En un smartphone (small), se vera en 1 sola columna y se adapta a 4 filas.

 Esta es la forma como puedes combinar las clases de small, medium y large.

5. Visibilidad

En nuestros proyectos, puede haber contenido que desees ocultar en ciertos dispositivos, por ejemplo, si alguien entra desde un desktop pueda ver cierta información, pero  la ocultas si entra desde un smartphone. Para ello, usamos las clases hide y show

Hide: Ocultar

HTML

Resultado

Se oculta solo para small. Se oculta para medium, large, xlarge, or xxlarge. Se oculta solamente para medium. Se oculta para large, xlarge, or xxlarge. Se oculta para large. Se oculta para xlarge y xxlarge. Se ocultasolo para xlarge. Se oculta para xxlarge y resoluciones superiores.

Show:Mostrar

HTML

 Resultado 

Se muestra solo para small. Se muestra para medium, large, xlarge, or xxlarge. Se muestra solamente para medium. Se muestra para large, xlarge, or xxlarge. Se muestra para large. Se muestra para xlarge y xxlarge. Se muestra solo para xlarge. Se muestra para xxlarge y resoluciones superiores.

Resumen

La teoría es la misma para todos para todos los frameworks responsive css (Bootstrap, UiKit y Foundation), difiere en los nombres de las clases y librerias, sin embargo, si entiendes bien el sistema de rejillas y su funcionamiento, podrás manejar cualquiera.

El sistema de rejilla es la base de todo el responsive, te animo que leas la documentación para que conozcas otras clases que puedes aplicar, por ejemplo, la columnas queden centradas, los textos alineados, entre otros, realmente con este framework se pueden hacer cosas geniales, todo depende de tu curiosidad y creatividad.

Si tienes dudas, algo que desees que te explique mejor, déjame un comentario.

No olvides seguirme en twitter @juksoto y compartir este artículo.

Etiquetas:, , , ,

"Trackback" Enlace desde tu web.

Deja tu comentario

¿Necesitas asesoría en algún proyecto o trabajo?

Muestrános tu trabajo

¿Quieres aportar tus conocimientos a la comunidad?

¡Haz parte de Cubemedia!
Ayudamos a demás profesionales

¿Te ha servido algun artículo?
Ayudános a que llegue a más personas.
Compartir en