En este artículo mi objetivo es mostrar las mejoras de diseño en la homepage para la versión móvil de mi página web. Voy a enseñar como lo he hecho y porqué. Comencemos.
Contenido
Adaptar el contenido a la pantalla del móvil
Ajustar el contenido de una pantalla de escritorio a la versión diminuta de un móvil es un desafío. Por suerte, mi web principal es bastante más sencilla de gestionar que la de un periódico, por ejemplo.
Los problemas de diseño más claros que tenía mi página web en versión móvil eran los siguientes:
Espacios reducidos entre elementos, falta de identidad de la tipografía del texto principal, y fuentes demasiado grandes. Empecemos con la tipografía
Cambiar la tipografía de un elemento, y sus espacios.
El principal problema que tenía con mi web es que en la versión móvil la caja de texto se desplazaba debajo de la fotografía, y los márgenes, espacios, y tipografía, resultaban muy ajustados y sin identidad.
El cambio de la tipografía lo realicé por medio de css, y aplicando un estilo de fuente de Google Fonts.
Lo primero que hice fue buscar la tipografia que mejor representaba lo que quería transmitir en el archivo de Google. Como utilizo el framework de génesis y génesis extender, instalé esa tipografía:
Una vez instalada, tenía que conseguir aplicarla únicamente a un elemento concreto de la web, así que tuve que asignar una clase especial a ese elemento para poder gestionar por css el cambio de la tipografía. Esto puede parecer muy dificil, pero es muy sencillo. Se trata de etiquetar ese «texto» para después utilizar esa etiqueta y decirle a la web que realice unos cambios sólo a lo que tiene esa etiqueta.
En el propio editor de wordpress existe un desplegable que se llama «Avanzado», ahí puedes asignar una clase css al elemento que has seleccionado. Yo le puse la que ves ahí, y acto seguido añadí el código en el personalizador. Puedes verlo a continuación:
Y ya está. He cambiado la tipografía por la que más me conviene y sólo para el elemento que tiene la etiqueta que yo he creado.
Cambiar el tamaño de la fuente
El tamaño de la fuente ha sido otro de los problemas que quería solucionar. Podrás pensar que es algo sin mucha importancia, y sin apenas complicación, pero lo cierto es que tiene su truco.
Lo que yo necesitaba era tener un tamaño de fuente para la resolución de pantalla del móvil, y otro para la del ordenador. No quería cambiar este valor para todos los dispositivos y para todas las pantallas, sólo quería que en cierta ubicación y página, el tamaño fuese de una forma y no de otra.
Para hacer esto coloqué en el selector de css la página en la que quería aplicar los cambios, y después añadí el tamaño de la fuente que quería tener exclusivamente en la versión móvil.
Para poder seleccionar únicamente esa página primero tenía que encontrar la etiqueta que la representa. Para hacerlo sólo hay que abrir el inspector de Chrome y buscar la numeración.
Con esta información escribí el código que aplicaría sólo en esa página, en el elemento que quería cambiar y sólo en resolución móvil, el diferente tamaño en la fuente. Puedes verlo a continuación:
Además del tamaño de la fuente también puedes ver que añadí dos cosas más, te explico a continuación lo que es.
Elementos que respiren mejor
Como puedes ver en la imagen que muestro debajo de este párrafo, la caja donde está ubicado el texto queda demasiado encorsetada entre los elementos que la rodean.
La manera de cambiar esto es igual que la de cambiar el texto. Se trata de aplicar un cambio que sólo surta efecto en la ubicación, el elemento, y la resolución de pantalla que interesa.
Para resolverlo añadí el código margin-top y margin-bottom en el mismo fragmento de código que viste antes. El resultado es bastante mejor, salta a la vista.
Eliminar elementos sólo de una página.
Aunque ya hemos visto como aplicar los cambios en ubicaciones muy específicas, también podemos necesitar eliminar elementos en estas ubicaciones. En mi caso quería eliminar un elemento de una página de compra.
Para conseguirlo he creado el siguiente código:
En este código le he dicho a mi web que en la pagina con id 4296 oculte el elemento clasificado con la etiqueta «label».
Como conclusión a este artículo quiero que comprendas que una plantilla no siempre deja todo bien. Existen pequeños defectos o cosas que se deben mejorar para que la experiencia de usuario sea lo más placentera posible. Con un poco de código css y algunos trucos hemos personalizado una homepage al detalle.