Los dispositivos móviles cada día que pasa tienen más relevancia. Muchas son las recomendaciones que se dicen, algunas más interesantes que otras. Hay quien dice que primero se deben hacer 2 versiones, una para escritorio y otra para móvil, y después adaptarlas a través de Media Queries. Otros, directamente son más partidiarios de metodologías Scrum o XP y predican el diseño simple pero eficaz.
Magnific Popup es un plugin de jQuery lightbox responsive y de libre uso que está enfocado a obtener la mejor mejor experiencia de usuario y rendimiento en cualquier dispositivo, al menos eso dicen. Las características más interesantes de este plugin se comentan a continuación:
Responsive Test es una herramienta que sirve para probar en varios dispotivos cualquier página. Sólo tenéis que poner la URL deseada y darle al botón de mostrar. Además cuenta con algunas plantillas Responsive para testar y descargar como por ejemplo Flex APP, Responsive HTML5/CSS3, Responsiva entre otras.
Hoy os voy a exponer un menú desplegable experimental multinivel. La idea principal es ahorrar espacio para menús que tienen una gran cantidad de contenido y subniveles. Cada sub-nivel se muestra en su propio contexto, por lo que el nivel del elemento padre desaparece, aunque pulsando la opción de back ( o atrás) vuelve a aparecer. Esto se hace con animaciones sutiles que se definen en clases de animación separadas y de forma fluida, de manera que se puede utilizar fácilmente en cualquier dispositivo y resolución.
Cuando desarrollamos un proyecto web en Responsive Web Design, uno de los retos al que nos enfrentamos es el dilema de las imágenes escalables. Existen formas sencillas para escalar una imagen (por ejemplo, determinando el tamaño de la misma relativo a su contenedor). Sin embargo estás soluciones no son a menudo lo más óptimo. A finales del año pasado la W3C publicaba el primer borrador para el uso imágenes en Responsive Design, pero como puede pasar mucho tiempo hasta que veamos resultados debemos mirar otras opciones.
Las nuevas versiones de los navegadores traen un hermoso regalo referente al CSS3. Hoy os voy a comentar la función calc, la cual, nos permite de forma sencilla gestionar el ancho y alto de los elementos cuando, estos, tienen padding o margin. Según la especificación W3C la función, básicamente, lo que permite es sustituir el valor fijo de cualquier dimensión que se aplica a una propiedad por una expresión de un cálculo matemático sencilla como sumas, restas, multipliaciones y / o divisiones. De esta manera, a través de esta función podemos escribir cosas como:
Como os prometí, hoy haremos otro vistazo rápido a algunas técnicas para el diseño de formatos de tablas Responsive. Unas más utilizadas como el método unseen o olumna oculta y otras menos como el Flip Scroll o desplazamiento volteado pero, seguro, interesantes. Esta técnica, descrita por primera vez por Stuart Curry implica simplemente ir ocultando columnas de menor importancia en función de la resolución del dispositivo.
Una de los problemas más frecuentes que nos encontramos cuando nos metemos en el mundo del Diseño Responsive es el diseño de tablas. Esta tarea podemos hacerla tan complicada como se quiera pero, por ello, hoy vamos a hablar únicamente de este tema. Como se trata de aprender la metodología Responsive pondremos 2 ejemplos sin demasiadas complicaciones aunque, sin duda, muy útiles y didácticos. Uno con DIV's y otro con TABLE.
Hoy empezamos un nuevo tutorial en el que intentaremos aprender lo que tan de moda esta, el Responsive Design. Muchos ya habréis oido hablar del concepto y otros, incluso, ya lo habréis usado. Empezaremos definiendo qué es Responsive Design. Responsive Web Design (RWD) es un enfoque de diseño web, destinado a la elaboración de sites, que intenta conseguir una visualización y experiencia óptima en cualquier dispositivo, desde los monitores de ordenador de escritorio hasta dispositivos móviles. Se centra en mejorar la navegación, facilitar la lectura ajustando el contenido al dispositivo e intenta evitar los desplazamientos.
CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.
Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.
Consentimiento para cookies y datos
Este sitio web utiliza cookies para permitir la navegación entre páginas, procesar información de dispositivos finales, cargar imágenes desde CDNs externos (como pixabay) y extraer datos personales recopilados por Google Analytics (como objetivo analilzar el tráfico o la IP origen, entre otros).
Ten en cuenta que, al rechazar las cookies, se eliminará todo rastro dejado y se abandonará la página de manera inmediata.