Fundamentos Web - Diseño Responsivo
En un plano general podemos definir el Diseño Responsivo como la manera que conjugamos distintas tecnologías en la construcción un sitio para que este sea lo suficientemente flexible para funcionar bien a través de una amplia gama de dispositivos.
El diseño responsivo en la web se construye en parte a través de HTML5 y CSS3 las cuales son nuevas especificaciones lanzadas por la W3C (World Wide Web Consortium) y son parte de un conjunto de tecnologías que se denomina "open web platform.", Ademas de trabajar con Javascript o de librerías desarrolladas mediante este lenguaje de programación.
El diseño responsivo en la web se construye en parte a través de HTML5 y CSS3 las cuales son nuevas especificaciones lanzadas por la W3C (World Wide Web Consortium) y son parte de un conjunto de tecnologías que se denomina "open web platform.", Ademas de trabajar con Javascript o de librerías desarrolladas mediante este lenguaje de programación.
¿Diseñar primero para dispositivos móviles o primero para escritorios?
(Mobile First vs. Desktop First)
(Mobile First vs. Desktop First)
Esta es una discusión que nos podría llevar una entrada por separado totalmente, ya que la mayoría de los programadores nacemos con una manera de desarrollar y de pensar en las soluciones a los problemas con los que nos enfrentamos, y esa misma manera de pensar es la que nos lleva a esta discusión, algunos podrán decir que es mejor empezar desarrollando una pagina web para las computadoras de escritorio y de ahí, ir quitando funcionalidades, opciones o vistas hasta llegar a la vista móvil (Graceful Degradation1, Degradación Elegante), y otros todo lo contrarío empezar desde la vista móvil y de ahí ir generando vistas mucho mas amplias y con mayores funcionalidades (Progressive Enhancement2, Mejora Continua), ejemplo de ello Google Docs, si no me crees revisa la pagina en 2 dispositivos con resoluciones totalmente distintas.
Pero esto no responde la pregunta que metodología es mejor, veamos ¿que pasa si desarrollamos primero para los móviles? Al centrarse en el móvil primero, podemos construir una mejor experiencia para nuestros usuarios, ya que tenemos que dar prioridad a las características y el contenido que realmente son importantes para los usuarios. Y nos permite centrarnos en las capacidades del navegador, por ejemplo, geolocalización y eventos táctiles. Y así una vez que terminamos nuestra versión móvil, entonces podemos proceder a ampliar el área de visualización y progresivamente mejorar el sitio, con funcionalidades y comportamientos adicionales.
En caso contrario si empezamos por una versión para escritorio, podríamos llegar a un punto en que las tecnologías están tan relacionadas una con otra, que nos puede ser difícil decidir que comportamientos o apartados quitar de nuestra web para una vista mas limitada o compacta.
En conclusión personal cuando nuestro sitio no requiere el uso estricto de un equipo de escritorio (algo difícil que suceda hoy en día), pensemos en desarrollar primero para los móviles, ya que nos permitirá centrarnos en las funcionalidad y contenido real o principal de nuestro sitio.
Pero esto no responde la pregunta que metodología es mejor, veamos ¿que pasa si desarrollamos primero para los móviles? Al centrarse en el móvil primero, podemos construir una mejor experiencia para nuestros usuarios, ya que tenemos que dar prioridad a las características y el contenido que realmente son importantes para los usuarios. Y nos permite centrarnos en las capacidades del navegador, por ejemplo, geolocalización y eventos táctiles. Y así una vez que terminamos nuestra versión móvil, entonces podemos proceder a ampliar el área de visualización y progresivamente mejorar el sitio, con funcionalidades y comportamientos adicionales.
En caso contrario si empezamos por una versión para escritorio, podríamos llegar a un punto en que las tecnologías están tan relacionadas una con otra, que nos puede ser difícil decidir que comportamientos o apartados quitar de nuestra web para una vista mas limitada o compacta.
En conclusión personal cuando nuestro sitio no requiere el uso estricto de un equipo de escritorio (algo difícil que suceda hoy en día), pensemos en desarrollar primero para los móviles, ya que nos permitirá centrarnos en las funcionalidad y contenido real o principal de nuestro sitio.
¿Un Diseño para todos los dispositivos?
Es de suponer que existen una gran cantidad de maneras, colores y sabores de estructurar nuestro sitio web los cuales pueden adaptarse perfectamente bien ya sea a una vista móvil, a una tablet, una PC y por que no también a un televisor de alta definición. Y cuando se trata de la disposición del contenido dentro de la página, hay varios tipos de diseños de la que se pueden elegir. Los tres tipos más populares de los diseños son:
Diseño de ancho (fixed width layout).
Diseño elástico (elastic layout).
Diseño fluido (fluid layout).
"El Diseño Fluido es de particular importancia en el diseño responsivo en el que se aplica ya que se piensa en todos los dispositivos de todas las formas y tamaños que verán nuestro sitio, ya que permiten a los sitios web hacer uso de cualquier espacio disponible."
A este diseño también se le conoce como Diseño Liquido, ya que el ancho del sitio web se ajusta al ancho del dispositivo donde se encuentra y el ancho del contenido se define mediante el uso de porcentajes, mediante el uso de porcentajes podemos ocupar cada espacio disponible dentro la pantalla para establecer todo el contenido que el usuario requiere y nos evita la molestia de estar calculando pixeles en la distribución del contenido para cada tipo de dispositivo que acceda a nuestro sitio web.
Los principios clave que debe tratar de seguir cuando desarrollamos mediante un Diseño Fluido son los siguientes:
Un framework que te permite desarrollar bajo este tipo de diseño es Bootstrap, el cual te permite establecer tu contenido mediante el uso de rejillas y se basa en el desarrollo de sitios web responsivos, y del desarrollo mobile first., Este framework utiliza HTML5, CSS3 y JS mediante JQuery, para poder realizar su trabajo.
Al decidir sobre qué tipo de diseño que desee utilizar, es importante tener en cuenta la experiencia del usuario. Para un sitio con Diseño Responsivo, su opción de diseño tiene que trabajar bien a través de un número significativo de dispositivos. Es importante elegir un tipo de diseño que nos permita ofrecer la mejor experiencia para el mayor número de usuarios.
Con el crecimiento de Diseño Responsivo, en la actualidad existe un aumento en el tiempo necesario para desarrollar un sitio web; la razón es que hay muchas más variables a tener en cuenta durante el desarrollo de un sitio web. Cada vez es más importante encontrar formas de optimizar nuestro modo de trabajar, el cual nos permita ahorrar tiempo en algunas áreas del desarrollo. Cuando comienzas a construir un sitio web, necesitas asegurarte de que se pueda visualizar en la mayoría de los dispositivos de la mejor manera posible. La manera en la cual tu puedes hacer esto es adaptando el contenido en cada uno de los dispositivos en los cuales sera visto. Es por eso que te presento las siguientes consideraciones, que debes tomar en cuenta a la hora de realizar un sitio responsivo:
El Tamaño De La Vista Con la amplia variedad de dispositivos con los cuales un usuario puede acceder a Internet es necesario tener en cuenta la experiencia del usuario a través de una amplia gama de diferentes tamaños de ventana gráfica.
Características De Los Dispositivos No por que dos dispositivos tengan el mismo tamaño de vista van a tener las mismas capacidades, siempre que trates de orientar un sitio a cierto tipo de funcionalidades, intenta no dejar con una mala experiencia a los usuarios que no posean dichas funcionalidades en sus dispositivos.
Métodos De Entrada Del Usuario La forma en la que el usuario interactúa con el contenido web puede tener un gran efecto sobre su experiencia en el mismo, existe un amplia gama de métodos de entrada en los cuales debes pensar en la hora de desarrollar, por ejemplo el teclado, ratón y pantalla táctil. Es importante recordar la hora de construir un sitio web que existe la posibilidad de que se desarrollen nuevos métodos de entrada, y en el caso de que un nuevo método de entrada se convierte en popular, tu sitio tendrá que adoptarlo si quiere seguir teniendo una aceptación dentro de los visitantes.
El Diseño Responsivo es una técnica que puede ser increíblemente poderosa, pero como con todo lo nuevo en el desarrollo de sitios web, hay un montón de incógnitas de cómo se va a ver afectada la experiencia del usuario. Es por esto que es muy importante medir adecuadamente qué tan bien nuestro sitio cumple con los objetivos establecidos y cuales de ellos pueden ser mejorados.
Los principios clave que debe tratar de seguir cuando desarrollamos mediante un Diseño Fluido son los siguientes:
- No debes de utilizar alturas fijas.
- No se requiere el uso de la barra de desplazamiento horizontal.
- Piensa en cómo tus imágenes se ven en diferentes tamaños.
- Piensa en como se puede envolver tu contenido.
- Piensa en espaciado para los distintos tipos de dispositivos.
Un framework que te permite desarrollar bajo este tipo de diseño es Bootstrap, el cual te permite establecer tu contenido mediante el uso de rejillas y se basa en el desarrollo de sitios web responsivos, y del desarrollo mobile first., Este framework utiliza HTML5, CSS3 y JS mediante JQuery, para poder realizar su trabajo.
Al decidir sobre qué tipo de diseño que desee utilizar, es importante tener en cuenta la experiencia del usuario. Para un sitio con Diseño Responsivo, su opción de diseño tiene que trabajar bien a través de un número significativo de dispositivos. Es importante elegir un tipo de diseño que nos permita ofrecer la mejor experiencia para el mayor número de usuarios.
Con el crecimiento de Diseño Responsivo, en la actualidad existe un aumento en el tiempo necesario para desarrollar un sitio web; la razón es que hay muchas más variables a tener en cuenta durante el desarrollo de un sitio web. Cada vez es más importante encontrar formas de optimizar nuestro modo de trabajar, el cual nos permita ahorrar tiempo en algunas áreas del desarrollo. Cuando comienzas a construir un sitio web, necesitas asegurarte de que se pueda visualizar en la mayoría de los dispositivos de la mejor manera posible. La manera en la cual tu puedes hacer esto es adaptando el contenido en cada uno de los dispositivos en los cuales sera visto. Es por eso que te presento las siguientes consideraciones, que debes tomar en cuenta a la hora de realizar un sitio responsivo:
El Tamaño De La Vista Con la amplia variedad de dispositivos con los cuales un usuario puede acceder a Internet es necesario tener en cuenta la experiencia del usuario a través de una amplia gama de diferentes tamaños de ventana gráfica.
Características De Los Dispositivos No por que dos dispositivos tengan el mismo tamaño de vista van a tener las mismas capacidades, siempre que trates de orientar un sitio a cierto tipo de funcionalidades, intenta no dejar con una mala experiencia a los usuarios que no posean dichas funcionalidades en sus dispositivos.
Métodos De Entrada Del Usuario La forma en la que el usuario interactúa con el contenido web puede tener un gran efecto sobre su experiencia en el mismo, existe un amplia gama de métodos de entrada en los cuales debes pensar en la hora de desarrollar, por ejemplo el teclado, ratón y pantalla táctil. Es importante recordar la hora de construir un sitio web que existe la posibilidad de que se desarrollen nuevos métodos de entrada, y en el caso de que un nuevo método de entrada se convierte en popular, tu sitio tendrá que adoptarlo si quiere seguir teniendo una aceptación dentro de los visitantes.
El Diseño Responsivo es una técnica que puede ser increíblemente poderosa, pero como con todo lo nuevo en el desarrollo de sitios web, hay un montón de incógnitas de cómo se va a ver afectada la experiencia del usuario. Es por esto que es muy importante medir adecuadamente qué tan bien nuestro sitio cumple con los objetivos establecidos y cuales de ellos pueden ser mejorados.
Algunas cosas que debemos de tener en mente cuando construimos un sitio web son:
Breakpoint en el diseño responsivo es el ancho de la pagina en el cual nuestro diseño cambia basado en la declaración de la Media Query. Los tamaños mas comunes para el uso de breakpoints son:
Breakpoint en el diseño responsivo es el ancho de la pagina en el cual nuestro diseño cambia basado en la declaración de la Media Query. Los tamaños mas comunes para el uso de breakpoints son:
- Dispositivos extra pequeños, por ejemplo teléfonos (< 768 px).
- Dispositivos pequeños, por ejemplo tablets (≥ 768 px y < 992 px).
- Dispositivos medianos, por ejemplo minilaptos (≥ 992 px y < 1200 px).
- Dispositivos grandes, por ejemplo computadoras de escritorio o portátiles (≥1200 px).
Otro elemento importante del cual se debe de conocer es el Estado, el cual es la versión del sitio que se esta ejecutando.
Como puedes suponer las Media Queries son la base del diseño responsivo ya que es la manera en la que podemos medir la anchura de nuestro y así cambiar de estilos (CSS) permitiendo dar un mejor resultado al usuario que visita nuestro sitio. Antes de continuar es preciso recordar que antes de que existirán las Media Queries dentro de la especificación de CSS3, en su versión anterior (CSS 2.1), ya existían los Media Types, los cuales permitían agregar hojas de estilo o estilos si el sitio era visualizado en el dispositivo que correspondía con dicho Media Type, los tipos de Media Type en CSS3 son:
- all: el estilo se aplica a todos los dispositivos.
- braile: Destinado a dispositivos de retroalimentación táctil.
- embossed: Dirigido a las impresoras braile.
- handheld: Para dispositivos de mano pequeños.
- print: Para impresoras o para la vista en modo de impresión.
- projection: Previsto para presentaciones proyectadas.
- screen: Destinado principalmente para las pantallas de ordenador.
- speech: Destinado a los sintetizadores de voz, antiguamente se conocía como 'aural'.
- tty: Dirigido a teletipos y terminales.
- tv: Dispositivos de tipo Televisión.
Media Queries
Fueron agregadas en CSS3 con la intención de dar a los desarrolladores mayor control sobre sus sitios web en la manera en la que se visualiza en diferentes navegadores y dispositivos. La idea es que en lugar de tener que construir múltiples versiones de cada página para diferentes dispositivos, ahora solo tenemos que crear distintos CSS basándonos en los atributos y características del dispositivo.
"Las Media Queries dan un nivel de lógica a las hojas de estilo que indican si deben o no ser aplicadas en base a las características de dispositivo."
Algunas de las Media Queries más comunes dentro del diseño responsivo son:
width | min-width | max-width
Permite conocer el ancho del navegador, se puede utilizar esta consulta para que coincida con una amplia variedad de diferentes anchos de dispositivos. Así como preguntar si el navegador tiene un mínimo o un máximo aceptable para la hoja de estilos.
device-width | min-device-width | max-device-width
Es similar a la consulta anterior solo que esta consulta se relaciona con el ancho de la pantalla del dispositivo. El problema es que si el usuario cambia el tamaño del navegador en un ordenador de escritorio, el sitio no se adaptará, ya que el tamaño del dispositivo sigue siendo el mismo.
aspect-ratio | min-aspect-ratio | max-aspect-ratio
Esta consulta se refiere a la relación de aspecto de un dispositivo es la relación entre la longitud del lado más largo del dispositivo contra la longitud del lado más corto del dispositivo.
device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
Esta consulta se orienta al dispositivo. Esta distinción entre las dos consultas es importante en los dispositivos donde se puede cambiar el tamaño de la ventana del navegador, como la relación de aspecto es tan fluido como el tamaño de la ventana, mientras que el valor para el dispositivo de relación de aspecto no va a cambiar.
color | min-color | max-color
Permite probar las capacidades de color del dispositivo basado en el número de bits por los componentes de color del mismo.
resolution | min-resolution | max-resolution
Permite probar en contra de la densidad de píxeles del dispositivo. La consulta de resolución acepta tres tipos de valores: ppp (puntos por pulgada), CSS DPCM (puntos por centímetro CSS), y DPPX (puntos por píxel). DPPX está directamente relacionada con la densidad de píxeles de la pantalla.
orientation
Permite probar si el dispositivo es horizontal o vertical y aplicar el CSS adecuadamente.
Veamos un ejemplo de la sintaxis que pueden tener:
 |
| Sintaxis de ejemplo de una Media Query. |
La Media Query mostrada arriba ejecuta la hoja de estilo "estilo.css" dentro de nuestro sitio para todos los dispositivos que tengan una resolución entre 768 px y 1023 px.
Los operadores lógicos dentro de las Media Queries permiten encadenar diferentes consultas para permitirnos ser mas exactos con el resultado deseado, para el dispositivo donde queremos mostrar nuestro sitio.
Comentarios