Llevo unos días creando el nuevo diseño de mi sitio. El actual es de 2011. Por aquel entonces ya circulaban por internet las maravillas del responsive web design pero aún no lo había incorporado a mi trabajo. Aunque hice algunos ajustes para que el sitio se adaptara a diferentes pantallas el resultado no era, no es, todo lo fino que me gustaría. Este es uno de los principales motivos del nuevo diseño, he partido desde un enfoque mobile first para conseguir una experiencia óptima cuando se navega por el sitio desde un móvil o iPad.En este artículo me gustaría compartir un par de propiedades de CSS que me han venido muy bien para mantener la gráfica de la web en las pantallas más pequeñas.La apariencia de los botonesCuando comprobé la apariencia del nuevo diseño en el móvil me llevé la primera sorpresa con los botones de los formularios. No mostraban la apariencia que había definido en mi CSS y que tan bien se veían en el navegador del ordenador. La propiedad appearance tenía la solución.La propiedad appearance sirve para mostrar un elemento con la apariencia nativa del sistema operativo del usuario. A priori puede parecer algo demasiado concreto y específico y puedes pensar que rara vez necesitarás aplicar la apariencia del sistema operativo del usuario a tu diseño. Y creo que tienes razón. De hecho traigo esta propiedad aquí no para dar apariencia nativa sino para eliminarla. El navegador nativo de iOS pasará de tus preciosos estilos de botones (los input[type=submit]) a menos que le indiques que no quieres usar la apariencia nativa con:-webkit-appearance: none;Una vez que definí esta propiedad en las clases adecuadas mi web se veía como había previsto en un principio.El estilo al tocar los enlacesOtro punto de conflicto entre el móvil y el ordenador era el estilo de los eventos de los enlaces. En el navegador del móvil aparecía un recuadro de color cuando «tocaba» un enlace. No es que estuviera mal pero no era lo que pretendía.Aquí tuve que echar mano de la propiedad tap-highlight-color, con el prefijo del fabricante -webkit-, y asignarle el valor de transparent. Este asunto fue fácil y directo.Un poquito de JavaScriptAparte de estas propiedades, quería gestionar el comportamiento del menú responsive sin usar librerías (aparte de JQuery) o plugins de terceros. Me apetecía escribir mis propias funciones. Realmente ha sido una chorradita pero me ha gustado estudiar cómo evaluar si el navegador reconoce los eventos táctiles (clickEventType = ((document.ontouchstart !== null) ? 'mousedown' : 'touchstart');) y mejorar algo mis habilidades de JavaScript (encapsulado.Sigo con el nuevo diseño, ya tengo casi terminada la maqueta de la vista de post y de la portada. Creo que tengo material suficiente para pasar a crear el tema (uso WordPress como CMS). Cuando lance la nueva versión de esta web escribiré más sobre los detalles y conceptos, ahora simplemente quería compartir estas anotaciones que ya tengo guardadas en mi chuletario.