Notas sobre Design Responsivo

¡La plataforma ion puede ser usada para crear y lanzar páginas responsivas geniales para los dispositivos de escritorio, móviles y tabletas!

Introducción

¡La plataforma ion interactiva proporciona algunas de las características de diseño responsivo más sofisticadas de la actualidad! Sin embargo, para aprovechar la flexibilidad y los diferenciales aportados por la herramienta, lo primero que tienes que hacer es aprender los fundamentos del diseño responsivo. 

Estos fundamentos no son específicos de la plataforma ion, pero son principios generales del diseño web responsivo. Por lo tanto, antes de crear tus primeras páginas ion responsivas, recomendamos que estudies cómo funciona el diseño responsivo. A continuación, verás un compilado de nuestros recursos de terceros favoritos:

  • En mayo de 2010, Ethan Marcotte publicó el primer artículo sobre diseño responsivo. ¡Empieza tu proceso de aprendizaje leyendo este artículo!
  • De acuerdo con Wikipedia, el diseño web responsivo (RWD) es un enfoque de diseño web dedicado a crear experiencias para proporcionar una óptima experiencia de visualización en una amplia gama de dispositivos desde teléfonos móviles hasta monitores de computadoras de escritorio. Es decir, promueve una fácil lectura y navegación requiriendo un mínimo de cambios de tamaño, giro y desplazamiento. 

  • Tu plataforma ion utiliza una cuadrícula de arranque para el diseño de la página. Esta es una estructura de cuadrícula común utilizada por muchos sitios web responsivos. 

Pautas para maquetas de diseño responsivo

Esperamos que diseñar experiencias en la plataforma ion sea tan flexible que ya no necesites hacer maquetas de mágina fuera de la plataforma. Por eso, recomendamos que adoptes en un primer momento, un enfoque de creación que permita a la página cobrar vida dentro de la plataforma ion. 

Sin embargo, si tu proceso requiere que empieces con maquetas -normalmente, hechas en Photoshop- antes de publicar en la plataforma ion, es muy importante que leas nuestra publicación de soporte sobre la cuadrícula de arranque que incluye PSD para dicho elemento. Para los PSD que te ayudarán a empezar con la cuadrícula de arranque, haz clic aquí.

Otras cosas a tener en cuenta

  • IE8 y las versiones anteriores de Internet Explorer no admiten el diseño responsivo.
  • Para los visitantes que ven una página responsiva en IE8 o anterior, las páginas ion serán mostradas en una ventana gráfica mediana.

Principios introductorios del diseño

  • Tus imágenes pueden cambiar de tamaño dependiendo del tamaño de la pantalla que está siendo utilizada. Usualmente, las imágenes más grandes conservan su calidad cuando se las altera achicando el tamaño. Sin embargo, las imágenes más chicas suelen pixelarse cuando son ampliadas. Considerando esto, es recomendable que utilices imágenes más grandes para garantizar un contenido con la mejor calidad posible.
  • Cuando efectúes ajustes en el contenido de tu página, define sus cambios en porcentaje o en em en lugar de píxeles. Esto posibilitará que los cambios se realicen teniendo en cuenta el ancho de tu página/ columna en lugar de realizar ajustes en unidades de medidas fijas. Como consecuencia, podrás mantener la flexibilidad del diseño receptivo al mismo tiempo que podrás realizar ajustes que sean consistentes en diferentes tamaños de pantallas.
  • Recomendamos que utilices em para el tamaño de la fuente, el relleno y los márgenes. Sin embargo, debes utilizar porcentajes para definir los anchos.
  • Los diferentes navegadores mostrarán tus ajustes de formas diferentes. Teniendo en mente este aspecto, si realizas ajustes en sus páginas, te recomendamos que pruebes el navegador detenidamente, así puedes garantizar que tu página sea visualizada bien en diferentes navegadores y dispositivos.
  • Si eres un desarrollador, es indicado que no crees clases con anchos fijos, una vez que esto tendrá un impacto negativo en la responsividad de tu página.
  • En un primer momento, diseñar las páginas para dispositivos móviles suele ser una excelente manera de encontrar lo que es más importante en tu experiencia. Asimismo, suele ser más fácil expandirse hacia afuera desde un espacio pequeño en lugar de tratar de condensar una página web grande en un espacio móvil más pequeño. Para obtener más información sobre la filosofía “mobile first”, recomendamos que leas “Mobile First” de Jeffrey Zeldman.