Hacer una presentación de una nueva web siempre es interesante porque consigues puntos de vista distintos al tuyo.
Por ejemplo el otro día con el estreno de menuda dieta me cambio el concepto de responsive.
Yo estaba satisfecho con haber elegido una plantilla responsive y conseguir que el resto del desarrollo también lo fuese.
Pero no había reparado en que los menús se mostraban desplegados en los dispositivos móviles, así:
Para llegar al contenido tenemos que pasar la página, y como son dos menús consecutivos desplegados puede llevar un par de intentos.
O también puede pasar que el usuario pulse en una de las opciones del menú y le lleve a otro lado de la página, esto puede crear confusión.
En la misma presentación surgió la solución ¿Por qué no mostrar los menús contraídos en dispositivos móviles?
El contenido es el rey
Con este simple cambio se muestra antes el contenido de la página, empezamos a interaccionar antes con nuestras visitas, reduciendo la posibilidad de que se marchen de nuestra página.
Este es el resultado:
Como puedes ver en la imagen, ahora enseguida se ve algo de texto, en concreto un mensaje de bienvenida y una explicación sobre la web.
Mucho mejor ¿no?
El cambio es muy sencillo, ha sido suficiente con añadir algo de CSS en el lugar correcto:
@media only screen and (max-width: 940px) {
.nav-primary {
display: none;
}
.nav-secondary {
display: none;
}
...
Encontrar el sitio correcto no ha sido tan sencillo 😉
TinyMCE Advanced y tablas responsive
Si utilizas el plugin TinyMCE Advanced:
A la hora crear tablas en vuestras entradas o páginas te puede pasar lo siguiente:
Las tablas tienen un ancho fijo, y no se adaptan a dispositivos móviles.
Todo el trabajo invertido en crear estas tablas con información importante ha sido para nada.
Pero una vez mas con un poco de CSS se puede solucionar el problema:
.entry-content table {
width: 100% !important;
}
De esta forma las tablas se adaptarán mucho mejor:
Es verdad que para dispositivos con pantallas muy pequeñas ( <= 320px ) el problema no se soluciona, al menos en vertical, pero se adapta perfectamente para el resto de dispositivos móviles.
Conclusiones
Para conseguir una web responsive es necesario tener en cuenta también la usabilidad.
Que tengas un gran día.
0 comentarios