¿Qué es el Diseño Responsive?

5 Cosas que debes saber del Diseño Responsive y cómo implementarlo de la manera mas fácil y profesional 

1. ¿Qué es el Diseño Responsive?

Es una técnica que se aplica para que el sitio web se adapte a cualquier tipo de pantalla, es decir, que sea fluido. Queremos resaltar esto, porque ya no vamos hacer una web con medidas exactas para cada resolución de pantalla del dispositivo.

Lo que antes se hacía, era  duplicar el contenido para desktop y otra para móviles, usualmente se usaban un subdominio para móviles (m) por ejemplo: m.miweb.com

Ahora, usamos CSS3 y sus amigos los Media Querys con la filosofía de layouts fluidos.

Antes de empezar, ten en cuenta:

  1. Los diseños para los sitios web, deben estar enfocados a ser fluidos y para todo público.
  2. Ya no usamos valores absolutos, es decir, píxeles exactos.
  3. Piensa que el tamaño de cada elemento en la web, siempre va a variar según el espacio que dispongas de pantalla.

2. Definición de Conceptos

  • Layouts fluidos o diseño fluido: Con layouts fluidos nos referimos a todos los bloques, capas, imágenes, es decir, todo el contenido, se adapte al tamaño del navegador en tu pantalla y se vea correctamente usando cualquier dispositivo.
  • Viewport: este lo utilizamos para que nuestra web tome las dimensiones del tamaño del navegador, esto bloquea el zoom con los navegadores. Esto facilita que la web se adapte sí ingresamos a nuestra web desde un dispositivo móvil. 
  • Media Query: es la forma de hacer consultas de la resolución de pantalla, desde la hoja de estilos. Esto es útil, porque dependiendo de la resolución, podemos ocultar, mostrar y/o ajustar con el fin de mejorar la experiencia del usuario.
  • Responsive Design: Es como llamamos el unir las tres herramientas anteriores para lograr una experiencia agradable en nuestra web, sin importar el dispositivo en la que se visualice.

3. Aprendamos  hacer diseño responsive

Vamos a usar herramientas que nos van a facilitar la maquetación de nuestra web.  No hay necesidad de escribir todo el código CSS, ya la rueda se invento, ¿porque hay volverla a hacer?.

Estas herramientas disponibles se conocen como Frameworks (Librerías); en internet existen muchas que nos permiten hacer responsive, algunas muy comunes son:

4. ¿Cuál es el mejor?

Daré mi opinión, de estas tres librerías, sin embargo, en internet encuentras más: 

  • UiKit:

    Este lo he usado para hacer proyectos menores, sin embargo, si lo comparo con otros frameworks, es muy básico. Trae pocas herramientas o librerías para implementar en tu sitio web, por ejemplo, una para hacer los slider de fotos. Las sintaxis de los css son muy largas y complicadas, no es fácil entenderlas y tampoco te da mucha facilidad diagramar tu sitio web.
    En conclusión: No es el más ideal para un proyecto, pero sí seria bueno conocerlo, porque algunos templates de empresas famosas en el desarrollo de wordpress, lo usan.

  • Bootstrap:

    Me gusta, es fácil de aprender y usar su sintaxis, te da muchas herramientas y librerías para implementar a tu sitio web, es uno de los más usados y conocidos en el medio, por tal razón, hay mucha documentación.
    Si quieres usar este framework, pero deseas otros colores y estilos, puedes buscar en internet “Flat UI KIT based Bootstrap”. Son librerías de formas  y colores que puedes implementar en tu portal, de esta forma lo personalizas mejor.
    En conclusión: Te recomendamos aprender este framework, es muy fácil y sencillo de implementar. Puede ser una buena opción para tus proyectos.

  • Foundation: 

    Según la web de ellos dice que es el mejor Framework CSS -Frontend que existe. Realmente, me gusta mucho, es muy fácil de instalar, me permite crear paginas sencillas y responsive en cuestión de minutos. Quiero poner un slider, un tab, entre otros, solo instalo la librería JS y listo. Me da muchas opciones y herramientas. La documentación en la web es fácil de entender y de aplicar.  

    Aunque debo de resaltar, que en diseño si se queda corto, pero puedes apoyarte con una Flat UI.
     
    En conclusión: Si es la primera vez que usas CSS, puedes aprender este es muy fácil de usar y tiene muchas herramientas. 

5. ¿Cuál debo usar Foundation o Bootstrap?

Me imagino que has leído muchos foros que hablan de uno y que hablan de otro.

Depende de lo que quieras hacer. 

  • Si, porque si vas hacer un proyecto donde tu solo te quieres enfocar al desarrollo y no sabes diseñar o te preocupa poco, usa Bootstrap. Este framework tiene un estilo sencillo y bonito, es fácil de implementar, eso si, todos tus proyectos van a quedar igual en cuanto a diseño.
  • Si quieres pulirte en diseño y que sea responsive, usa Foundation. Este Framework es muy completo en la parte Front-End, esta hecho para que sea funcional, darte muchas herramientas y permite que puedas adaptarlo al diseño de tu proyecto, es decir, al finalizar el proyecto tendrás un gran desarrollo backend y un gran desarrollo frontend, bonito, responsive, potente y diferente.

En conclusión:

Ya decides cual quieres usar dependiendo de las necesidades de tu proyecto y el tiempo que tengas. Si te aconsejo que aprendieras a manejar Bootstrap y Foundation. Si aprendes Foundation aprendes Bootstrap, por eso,el siguiente curso te voy a enseñar como trabajar con Foundation, aquí esta.

Hasta la próxima.

No olvides seguirme en twitter @juksoto

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