Passa al contingut principal

Responsive Design: Diseño receptivo y adaptivo en la Web

Responsive Design: Diseño receptivo y adaptivo en la Web: El Responsive design, diseño receptivo y adaptivo o como quieran traducirlo es una tendencia totalmente nueva dentro del diseño Web, la cual consiste en reacomodar los elementos que componen el website según el tamaño de dispositivo que la reproduzca.

¿Por qué debo implementarlo en diseño web?


Porque responsive design tiene que ser pensado desde el concepto de diseño de nuestro website. Este diseño debe tener un concepto de fluido entre los elementos que la componen para así lograr el perfecto flujo al momento de codificarlo. Sí, si sólo diseñas webs, lo mismo debes implementar el concepto en tus diseños.

¿Entonces no puedo hacer responsive design a mi website actual?


Dependiendo de tu website puede que sea más o menos doloroso. En el peor de los casos estás usando un cms con una plantilla pre-hecha que muy probablemente tenga el código muy desordenado y lo único que te ganes sean dolores de cabeza modificando el flujo del mismo.

No obstante te invito a que des el siguiente paso y hagas un diseño a la medida, es decir que desde ya, pienses qué es lo que va a tener tu website y en base a eso planear su implementación para tener el flujo correcto y te sientas un héroe por haberlo logrado (yo soy un héroe).

¿Y cómo es un diseño responsive?


Entra ahora mismo a tu website favorito y redimensiona el navegador. Si aparece un scroll horizontal que impide que veas parte del contenido de la web, esta no cuenta con responsive design..

Ahora entra a mejorando.la y redimensiona el navegador y mira como todo el contenido se reacomoda.


Esto es responsive design y se logra con un conjunto de técnicas de css3 y en especial las mediaqueries de las cuales hablaremos en siguientes tutoriales. Esto no sólo es agregarle algo más a tu web para que sea más fancy, es una necesidad hoy en día ya que la navegación movil es cada vez más grande y con múltiples resoluciones, por lo cual debemos tener un diseño que se adapte a todo.

Si buscas inspiración para tu propio responsive design entonces puedes visitar mediaqueri.es donde encontrarás numerosos responsive designs.

La idea dentro de responsive design es que cuando pienses en tu diseño tengas una idea clara de los bloques que lo conformarán, luego sea super sencillo trabajar en una maquetación eficaz que mantenga en flujo correcto de la estructura, así que debes hacerle ajustes ligeros a los bloques del diseño dependiendo del target.

¿Y ahora debo hacer cuatro diseños?


Tener los diseños listos antes de su implementación ayuda mucho a tener la mente clara al momento de codificarlo. Pero míralo bien, no son cuatro diseños, es solo uno (tener cuatro diseños sería una muy mala idea) lo que realmente se hace en los “diseños” adicionales es solo reacomodar el contenido que ya mostraba el “diseño” principal, esto es un correcto responsive design.

Yo sé que te has dado cuenta...
Para este punto espero ya hayas echado un vistazo a mediaqueri.es

¿Te has fijado que el flujo de los elementos es similar?


Por supuesto, porque llevan la filosofía responsive design desplazando los elementos para una mejor visualización.

Es muy similar, pero no igual

Yo no sabía cómo categorizar estas diferencias y en realidad era consciente que se aplicaban diferentes estrategias para acomodar los elementos pero simplemente no les daba un nombre.

Desde que digo que las webs que hago están con html5 la gente me mira más bonito.

Entonces cuando digo que mi website tiene responsive design soy una persona más cool pero yendo un paso más adelante y basadome es este artículo lukew.com y estando muy de acuerdo con él es que ahora yo puedo categorizar los patrones dentro del responsive desgin:

Mostly Fluid – más o menos fluido


Este quizá es el más popular dentro del responsive design ya que que un muy protagonista primer bloque seguido de otros 2 con menos relevancia y este al momento de tener un dispositivo se adapta siguiendo el flujo que hay en este.

¿Dónde he visto algo parecido? ah! mejorando.la



Column Drop – caída de columna


Quizá su cms favorito lleve un aspecto de flujo muy similar a este. Bienvenido, este es el responsive design que buscas.

Este tipo de diseño se adapta hasta el punto en el que no se pueden manejar las tres columnas en una sola fila, entonces la columna (con el contenido más random) pasa a la parte inferior y luego el flujo se sigue desarrollando hasta llegar a una sola columna.



Layout shifter – movimiento de estructura


Este probablemente sea la forma de decirle innovación al responsive design ya que ahora sí cambia ligeramente el diseño, pero no por esto está mal, por el contrario, esta estructura está orientanda a dar una experiencia diferente en dispositivos de pantallas más reducidas para invitar al usuario a la navegación en el website.

Dénse cuenta que es muy usada para reacomodar menus y header.



Tyny tweaks – pequeños cambios


Esto es magia pura para los microsites que sólo brindan información referencial del producto e invitan a una acción rápida, por tanto la navegación es casi nula y el responsive desgin sólo adapta los contenidos a la pantalla sin casi hacerle cambios.



Off canvas – fuera del canvas


Estoy seguro es el más popular en las webapps que no siempre tienen un diseño wow sino más bien guardan muchas información y múltiples opciones por lo que tienen que recurrir a esta clase de responsive design.

Consiste en sólo tener un bloque de información general que no distraiga mucho (como el timeline de facebook en su aplicacion móvil) y guardan las demás opciones o menús en botones que suelen tener íconos para distinguirlos. Es indispensable que sean interfaces muy usables.



Quiero terminar el artículo invitándote a que sigas un mini curso de responsive design que estaré impartiendo por medio de tutoriales en cristalab.com y en video por mi canal de youtube así que si estás interesado en conocer cómo enfrentar estas 5 técnicas de responsive design suscríbete a youtube.com/leonidasesteban

te dejo un video por si no quieres leer todo lo que esta arriba...






Enviar comentario

Comentaris

Entrades populars d'aquest blog

10 alternativas a Cuevana para ver películas online

10 alternativas a Cuevana para ver películas online : Durante este último tiempo, en Cuevana se sucedieron varios “problemas” por los cuales hubo que ajustar algunas cosas antes de tiempo (como el rediseño del sitio), que dejaron a algunos usuarios ciertos problemas para acceder a las películas o series del portal. Pero realmente esto es algo que no incumbe a los usuarios y, como sabemos, existen muchas otras alternativas a Cuevana dando vueltas por Internet, que intentaremos presentar aquí mismo. Los sitios que repasaremos funcionan del mismo modo que Cuevana, mediante la instalación de un plugin que permite visualizar los videos de Megaupload o WUShare, entre otros servicios, en una calidad de imágen realmente excelente. Tal como sucede con el más popular servicio, todos ellos tienen publicidad que en algunos casos resulta insoportable, pero como dice Federico en DotPod “a caballo regalado no se le miran los dientes”. Alternativas a Cuevana 1. Moviezet Posiblemente el mejor clon d...

Learn Composition from the Photography of Henri Cartier-Bresson

“Do you see it?” This question is a photographic mantra. Myron Barnstone , my mentor, repeats this question every day with the hopes that we do “see it.” This obvious question reminds me that even though I have seen Cartier-Bresson’s prints and read his books, there are major parts of his work which remain hidden from public view. Beneath the surface of perfectly timed snap shots is a design sensibility that is rarely challenged by contemporary photographers. Henri Cartier-Bresson. © Martine Franck Words To Know 1:1.5 Ratio: The 35mm negative measures 36mm x 24mm. Mathematically it can be reduced to a 3:2 ratio. Reduced even further it will be referred to as the 1:1.5 Ratio or the 1.5 Rectangle. Eyes: The frame of an image is created by two vertical lines and two horizontal lines. The intersection of these lines is called an eye. The four corners of a negative can be called the “eyes.” This is extremely important because the diagonals connecting these lines will form the breakdown ...

Más de 50 de las mejores herramientas online para profesores

No es una exageración afirmar que hay ciento de aplicaciones educativas por ahí por la red, para todos los gustos y de todos los colores, por lo que es difícil tratar de recogerlas todas en un listado. Sin embargo, algunas destacan más que otras por su innovación y por su capacidad para conseguir adeptos, y esas son las que protagonizan la presente recopilación. Son 50 interesantes herramientas online basadas en las recopilaciones de EduArea , las muchas ya tratadas en Wwwhat’s new y las destacadas por la experiencia. 1. Dropbox : Un disco duro virtual con varios GB gratuitos y al que se accede desde casi cualquier dispositivo. Sin embargo, es muchísimo más que eso, de hecho ya comentamos 20 razones . 2. Google Drive : La evolución de Google Docs que suma a sus múltiples herramientas de creación de documentos, un considerable espacio virtual gratuito. 3. CloudMagic : Una extensión y una app multidispositivo para buscar información simultáneamente en Gmail, Twitter, Facebook, Evernote ...