por Omar Benyakhlef | capas, CSS, Diseño Web, responsive, Taller Web, Trucos CSS, Usabilidad
Existen varias maneras de alinear capas sin que se produzca salto de línea. Para mi esta es la más sencilla, y además es responsive, por lo que no tendrás ningún problema independientemente de la resolución de pantalla que esté usando el usuario de tu sitio.
Este es el único código que tienes que usar en tu CSS en el contenedor que va a alojar las distintas capas, como verás es bien sencillo:
.box {display: flex; align-items: stretch; flex-wrap: wrap;}
Con esto ya estaría, pero vamos a darle un poco de estilo a las capas que van dentro, para que no quede feo:
.uno, .dos, .tres, .cuatro, .cinco, .seis {padding:50px; color: #fff; width: 150px; font-family: ‘Bebas Neue’, cursive; font-size:30px}
.uno {background-color: #fdd129}
.dos {background-color: #c91818}
.tres {background-color: #2d4f62}
.cuatro {background-color: #498356}
.cinco {background-color: #f18f39}
.seis {background-color: #000}
Simplemente hemos dado a cada capa un color y a todas unas características de ancho, tipo de fuente y padding.
En el HTML, colocamos la capa principal y contenedor (box) y dentro las capas que van a ir alineadas.
<div class=»box»>
<div class=»uno»>Uno</div>
<div class=»dos»>Dos</div>
<div class=»tres»>Tres
<br>tiene
<br>texto
<br>extra
</div>
<div class=»cuatro»>Cuatro</div>
<div class=»cinco»>Cinco</div>
<div class=»seis»>Seis</div>
</div>
Y ya está !!!
Ahora entra en el siguiente enlace para verlo funcionando y prueba a hacer más grande y pequeña la ventana del navegador, para comprobar cómo se va adaptando automáticamente a cualquier resolución de pantalla, colocando las que no entran en la siguiente línea.
VER EJEMPLO FUNCIONANDO
por Omar Benyakhlef | Diseño de páginas web, Diseño para móviles, Diseño Web, Mobile, SEO, Usabilidad
Cuando creamos un sitio web, es fundamental recordar que tendrá que verse en todo tipo de dispositivos, con un amplio abanico de distintas resoluciones. Llevar a cabo un buen diseño y maquetación que se adapte a todos estos dispositivos, es muy importante, no sólo por ofrecer una buena experiencia de navegación al usuario, también desde el punto de vista del SEO y la penalización que conlleva no ofrecer un buen responsive.
Por lo tanto es muy importante verificar cómo se ve nuestro site y cómo se comporta en esos distintos dispositivos.
What is my screen resolution
Hoy os dejo What is my screen resolution. Se trata de una intuitiva herramienta excelente para probar cómo se verá su sitio en diferentes dispositivos. Escribes la URL y eliges entre escritorio, móvil, tableta y televisión e incluso la orientación. Verás que al pulsar sobre desktop, mobile, tablet o televisión, te saldrán unas resoluciones por defecto, pero si luego quieres probar una resolución en concreto, puedes introducirla y comprobar la visibilidad del site. Muy interesante y además GRATIS !!!
COMPROBAR RESOLUCIONES
por Omar Benyakhlef | CSS, Diseño de páginas web, Diseño para móviles, Diseño Web, Trucos CSS, Usabilidad
¿Por qué seguir haciendo aburridos formularios cuando podemos usar impresionantes efectos CSS?. A veces tendemos a lo fácil, y no hay nada más aburrido en una web que rellenar un formulario, añade estos efectos y verás que aumentarán los usuarios que lo utilizan.
Es exagerada la cantidad de aburridos formularios que además piden campos totalmente innecesarios que encontramos en internet. Tu máxima como diseñador ha de ser pedir los datos justos, y si es posible, hacerlo dinámico, divertido incluso, usando iconos, efectos, o estos fantásticos efectos CSS que puedes descargar gratis en tympanus.
Además de vistosos son muy útiles, por ejemplo a la hora de ahorrar espacio, nada mejor que meter el texto dentro del input y que al pinchar sobre él salga y se coloque en un lugar que no moleste, son muchos los efectos que vais a encontrar, espero que os sean útiles.
Ver y Descargar Efectos Input con CSS
por Omar Benyakhlef | accesibilidad, Taller Web, Trucos CSS, Usabilidad
En numerosas ocasiones, nuestros diseños requieren más tiempo de carga, bien por tener que usar grandes imágenes o por funcionalidades requeridas por el proyecto.
Nada más incómodo para un usuario que presentarse delante de su pantalla y esperar ante una página vacía, esperando que cargue el contenido. Esta espera repercute notablemente en la usabilidad, el usuario no sabe si está esperando a que cargue el contenido que quiere ver, o si simplemente la página no funciona. Esto es algo que todos conocemos, lo recomendado es hacer un preload de la página para que luego todo el contenido fluya sin problema.
He llegado a ver incluso preloads que necesitaban un preload para visionarlo, lo cual es totalmente absurdo. Hoy os dejo varios preloads realizados con CSS, el peso es ínfimo y las animaciones son verdaderamente espectaculares y sobre todo fluidas, muy fluidas y con un loop infinito sin ningún corte.
See the Pen Preload CSS by Omar Benyakhlef Domnguez (@gloobs) on CodePen.light
DESCARGAR PRELOADS
por Omar Benyakhlef | CSS, Diseño Web, jQuery, Usabilidad
A la hora de diseñar un formulario, siempre tenemos que tener en cuenta que se trata de la parte más tediosa para un usuario, por eso mismo tenemos que facilitarte al máximo la tarea. Desde no pedir campos que no sean necesarios a intentar simplificar al máximo lo que pedimos, es decir, si le pido código postal ya me evito población y provincia porque lo puedo sacar internamente con ese código. Además de esto hay numerosos aspectos que veremos en mayor profundidad en otro post. Hoy vamos a ver cómo colocar los literales de los imput para que la experiencia sea más cómoda para el usuario y en particular un jQuery que además nos va a dar como resultado un formulario que además de usable va a sorprender a nuestros usuarios.
Tenemos varias opciones a la hora de colocar el nombre de cada imput.
NOMBRE EN LA MISMA FILA
Podemos colocar el nombre delante de cada imput, a mi no me gusta esa solución, ya que cada nombre va a tener una longitud y eso va a provocar un desorden visual que repercutirá notablemente en la usabilidad del formulario. Además y más importante, el desplazamiento horizontal que tiene que hacer el usuario con la vista es mucho mayor que en los demás casos, dificultando mucho la usabilidad.
NOMBRE SOBRE EL IMPUT
La segunda opción y más generalizada, es colocar los nombres encima de la caja, nos permite hacer un diseño amigable y cumple perfectamente los estándares de usabilidad. Todo queda en un mismo bloque, nombre e imput.
NOMBRE DENTRO DEL IMPUT
La tercera opción es colocar los nombres dentro del imput, colocándolo como» value». Ahorras espacio vertical, es más elegante, pero tiene un problema, y es que una vez que pinchas dentro del imput el nombre desaparece, por lo que si no has estado atento, no sabes qué te está pidiendo el formulario. Existe la solución, mediante código, de hacer que vuelva a aparecer el nombre cuando pinchamos fuera de la caja. En este caso, es fundamental que el color del texto sea muy suave para que no parezca que está rellenado el imput.
CSS + JQUERY
Esta opción que os traigo hoy es una mezcla entre la segunda y la tercera. Visualmente no puede ser más limpio y además hace «algo» que sorprenderá al usuario y le hará ser más receptivo en la aburrida tarea que es siempre rellenar un formulario.
Esta opción te muestra dentro de la caja su nombre, al pinchar sobre la caja para rellenar el dato, el nombre «salta» y se coloca encima de la caja, de modo que siempre será visible en el formulario. Particularmente me parece muy original, divertido y usable 100%
Aquí os dejo esta opción funcionando y con la posibilidad de que podáis coger todo el código y usarlo en vuestro sitio.
Pincha dentro de cada imput para ver la animación.
See the Pen jqmLOw by Omar Benyakhlef Domnguez (@gloobs) on CodePen.dark
por Omar Benyakhlef | Diseño Web, UI, Usabilidad, UX
El menú hamburguesa es un botón que suele estar en la parte superior de la web, que muestra o esconde el menú en pantalla.
Lo que en un principio nace para la versión mobile, por la falta de espacio, se ha convertido en un recurso habitual también en los diseños desktop.
Tiene muchos detractores que alegan que ocultar accesos de contenidos perjudica la usabilidad, porque obliga al usuario a hacer un clic más, e incluso que es sólo un capricho de los diseñadores.
Personalmente, no puedo estar más en desacuerdo, os explico por qué.
Hace años quizás podría ser arriesgado, hoy en día cualquier usuario lo tiene perfectamente identificado, todos sabemos que ahí accionamos el menú.
En cuanto al hacer un clic más, creo que hay demasiado «gurú» que se ha aprendido un guión y ha dejado de lado el sentido común. La usabilidad efectivamente se ve favorecida cuantos menos clics necesites para acceder a un contenido, pero creo que tenemos que ver todo en conjunto y no pararnos en pequeños detalles.
En mis diseños siempre tengo en cuenta que el usuario haga los menos clics posibles para llegar al contenido que está buscando, pero tenemos que tener también en cuenta, que esta máxima de la usabilidad viene de cuando para pasar de una vista a otra tenías que cargar una nueva página, con una conexión lenta un solo clic podía suponer varios segundos de espera. Hoy podemos utilizar CSS por ejemplo para mostrar y ocultar ese menú, accediendo de forma instantánea a ese contenido. Así pues, no tengas miedo de lo que dice el «gurú», nadie se marchará de tu web por pulsar en la hamburguesa 😉
En cuanto a que el diseñador busca más la estética que la usabilidad, le pese a quien le pese, el diseño es fundamental sobre todo en la primera impresión, no hay nada más agobiante que una web con una barra repleta de enlaces, iconos de redes, banners,… Los espacios limpios también juegan un papel importantísimo en la usabilidad, una cabecera repleta de enlaces, produce más estrés que el tener que hacer un clic más para llegar a un contenido.
Al tener más espacio para mostrar los enlaces del menú, podemos distribuirlos de un modo que sean más legibles y más grandes que en un menú tradicional, ¿acaso el tamaño de letra no influye en la usabilidad?. Podemos meter textos grandes, acompañados de iconos, …. mil posibilidades que en una barra no es posible. Por supuesto que agradezco encontrarme un menú hamburguesa, incluso porque me apetece ver qué ha pensado el diseñador para sorprenderme.
Una vez acabado este alegato en favor de la hamburguesa, pasamos a animarlo, cosa que seguro que también leeréis por ahí que no es usable…
Aquí podéis ver varias muestras de animación. Simplemente copiad los códigos que necesitéis, es gratis 😉
See the Pen SVG Hamburger Menu Icon Animation Collection by Matthew Main (@matthewmain) on CodePen.dark
Pulsa en los menús para ver la animación.
Si no podéis verlo bien, seguid este enlace.
