Mozilla wants to hear from developers like you. http://www.surveygizmo.com/s3/2737536/440b74c45e94?a=mdn

Introducción al Diseño Responsivo

Introducción al diseño responsivo

Con el incremento del uso de móviles por parte de lo usuarios para ver sitios web y aplicaciones, los diseñadores y desarrolladores necesitan estar seguros de que sus creaciones se ven y funcionan igual de bien en dispositivos móviles que en ordenadores de escritorio tradicionales.

Una respuesta a esto es el diseño responsivo, que es un estilo de hacer  sitios web “escribelo una vez, utilizalo en todas partes”. En lugar de construir diferentes sitios web enfocados a diferentes dispositivos, construyes un sitio que ajusta su disposicion y elementos de acuerdo a como sean visualizados.

Puedes usar el poder del CSS para asegurarte que el mismo contenido  puede ser accesible a traves de dispositivos con diferente hardware, desde dispositivos móviles hasta pantallas panorámicas de alta resolución.

Algunas de las estrategias de diseño responsivo incluyen:

  • Disposición líquida o fluida: Definiendo el ancho de todos los contenedores en términos de porcentajes del "viewport" del navegador, de manera que puedan expandirse y contraerse al cambiar el tamaño de la ventana del navegador.
  • Media queries: Invocando diferentes hojas de estilos basadas en las capacidades de la pantalla que se utilice, tales como el tamaño, resolución, relación de aspecto y porfundidad de color.
  • Imágenes fluidas: Configurando las imágenes para que ocupen el máximo del ancho de la pantalla.

Patrones de navegación responsivos

Los siguientes patrones de navegación responsiva presentan varias maneras de manejar la naveagación en dispositivos grandes y pqeueños. Los menús de navegación superior e izquierdo son comunes en pantallas grandes, pero a menudo no son la manera óptima de mostrar el contenido en pantallas pequeñas por el tamaño realmente pequeño de las patallas. Por tanto, es necesario considerar la presentación del contenido y la facilidad de navegación para todos los tamaños de pantalla.

Nota: El HTML/CSS para los patrones correspondientes estará disponible pronto.

Patrón 1: Menú superior conmutado

En este patrón, como el ancho de la pantalla es reducido, los elementos de la navegación superiro se reajustan hasta que no hay espacio suficiente. En este punto, algunos elementos se desplazan de la navegación superior al menú desplegable. En la pantalla más pequeña,todos los elementos de navegación están situados en el menú del conmutador, y el usuario tiene que pulsar para desplegar el menú.

Podrías valorar la prioriodad de los elementos, para asegurarte de que los elementos más importantes aparecen siempre en el menú superior.

Pros:

  • un botón en la cabecera maximiza el espacio para el contenido en una pantalla pequeña
  • los elementos importantes permanecen visibles en muchos tamaños de pantalla y tu decides la prioridad de los elementos
  • la legibilidad de los elemento de navegación se mantiene  con el espacio adecuado, ocultando automáticamente los elementos que no encajan

Contras:

  • los elementos de navegación pueden ser menos detectables porque algunos elementos están ocultos en el menú desplegable o conmutable
  • los usuarios pueden no percibir que el botón contiene un menú, en los tamaños de pantalla más pequeños
  • Se necesita un paso más para acceder a los elementos de navegación ocultos

Patrón 2: Menú con botón expandible

Similar al primer patrón, los elementos superiores de navegación se reajustan para anchos menores uhasta que no hay suficiente espacio. En ese punto, algunos elementos se desplazan de la navegación superior a un menú desplegable. Puedes establecer la prioridad de los elementos para asegurarte de que los más importantes aparecen siempre en el nivel superior de navegación.

En las pantallas más pequeñas, varios elementos permanecen en la parte inferior de la pantalla, y el resto de los elementos están escondidos. El usuario puede abrir el menu desplegandolo y seleccionar de entre el resto de elementos del menú. Tu puedes seleccionar los elemento que permancen en la parte inferior.

Pros:

  • el menú expandible es facil de encontrar
  • los elementos importantes siempre están visibles y puedes decidir la prioridad de los elementos
  • se mantiene la legibiliad de la navegación con un espacio adecuado, ocultando automáticamente los elementos que no encajan

Contras:

  • Se necesita un paso más para acceder a los elementos de navegación ocultos
  • los elementos de navegación pueden ser menos detectables porque algunos elementos están ocultos
  • en las pantallas más pequeñas hay menos espacio para el contenido

Patrón 3: Menú escondido a la izquierda

La navegación principal está siempre a la izquierda, salvo en la pantallas más pequeñas, donde el menú de navegación está oculto en un botón por defecto. En las pantallas maś pequeñas, cuando el usuario pulsa el botón, el menú de navegación se desliza hasta ser visible y muestra los elementos de navefación.

Pros:

  • potencialmente se muestran más elementos en la navegación izquierda comparada con la superior
  • la mayoría de elementos están siempre visibles  excepto en las pantallas de tamaño más pequeño
  • un botón ela cabecera maximiza el espacio para el contenido en pantallas pequeñas

Contras:

  • los elementos de navegación pueden ser menos detectables porque algunos elementos están ocultos en el menú desplegable o conmutable
  • los usuarios pueden no percibir que el botón contiene un menú, en los tamaños de pantalla más pequeños
  • Se necesita un paso más para acceder a los elementos de navegación ocultos

Etiquetas y colaboradores del documento

 Colaboradores en esta página: voylinux, mauropm, maedca
 Última actualización por: voylinux,