Cristalab |
- Responsive Design: Diseño receptivo y adaptivo en la Web
- Freddie sobrevive un año más
- El MundoReal(tm)
Responsive Design: Diseño receptivo y adaptivo en la Web Posted: 17 Apr 2012 06:11 AM PDT 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 fluidoEste 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 columnaQuizá 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 estructuraEste 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 cambiosEsto 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 canvasEstoy 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... |
Posted: 26 Mar 2012 03:27 AM PDT Para nadie es un secreto que ese pobre hombre, al que llamamos Freddie, recibe constantes amenazas de muerte, y es víctima de atentados. Contra todos los pronósticos ha logrado sobrevivir un año más.... Imagen Old Freddie por drarock. Así se verá Freddie a los 30 años, si es que logra sobrevivir. Sí, ya lo sé, muy conservado para la edad y la cabeza detuvo su crecimiento . Mega dibujo de NadimBueno...acá honramos y felicitamos a Freddier con motivo de la celebración de su onomástico ¡Feliz Jubileo Freddier! Videos EMOtivosEste año, Tifis reunió a varios de los amigos de Freddie para hacer videos: Pablo Rigazzi, el mango: OMG Ponies Leónidas Loves Freddie Tifis Black en Freddie, Freddie Stephanie Falla: Deja ya esa estúpida dieta Cevy: Un saludo para Freddie en su cumpleaños Angry FreddieFreddie, tu cumpleaños representa para mí un reto personal, siempre trato de superarme con tus pasteles. Este año te hice uno con motivo de Angry Birds, creo que supera al Mario Trololo. Espero que te guste, condensa todo el amor que sentimos por ti . Este año tampoco creo que tengan ganas de comer el pastel de Freddie. Cada vez es más difícil pensar tus pasteles u.u. Freddie Paper ToyAdemás del pastel, quería obsequiarte alguna cosa física, pero como aún no inventan una máquina de teletransportación y tú no tienes casa donde enviarte algo, decidí hacerte un lindo paper toy (esto es lo más cercano a un regalo teletransportado). Espero que lo armes y lo tengas alguna repisa de tu casa...cuando tengas donde vivir. Espero que obtengas todo lo que mereces, que sigas creciendo (aunque no físicamente porque lo único que te crece es la cabeza y la panza), que el túnel carpiano se agudice y tu sufrimiento se prolongue muchos años más. Pero por encima de todo, lo que más deseo para ti es que nunca, NUNCA te falte internet. Freddie, eres grande...claro, no físicamente, pero sí en espíritu y determinación. Feliz cumpleaños. ¡¡¡¡Por el Imperio!!!!. ¡¡¡Todos, armemos el paper toy y tomémonos una foto creativa con él para celebrar el cumple de Freddie!!!. Publica tu foto en este post y en twitter con el hastag: #HBFreddier Nota: Si detectan algún error en el paper toy me dicen. |
Posted: 15 Apr 2006 05:00 PM PDT |
You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
No hay comentarios:
Publicar un comentario