¡Atención a todos los administradores!
Una funcionalidad ya conocida para las comunidades originalmente de Gamepedia, pero toda una novedad para las comunidades de Fandom. Nos emociona poder compartir que ahora todos los administradores pueden personalizar el CSS para móviles en sus wikis a través de MediaWiki:FandomMobile.css (sí, en mayúscula, FandomMobile.css), una continuación de nuestros esfuerzos para mejorar la experiencia en móviles que comenzó con el lanzamiento de los temas para móviles en 2022. Ahora tienes la opción de personalizar la apariencia más allá, incluyendo plantillas, tablas, portadas, y otras características de manera que funcionen bien en móviles y mejoren la experiencia general de los lectores. Ten en cuenta que esta característica solo es accesible por administradores, por lo que si no eres un administrador, sigue manteniéndote informado sobre actualizaciones que mejoren tu experiencia al editar en el futuro cercano.
CSS para móviles[]
Según los comentarios de la comunidad, la falta de temas para móviles era un punto negativo muy fuerte para los usuarios en los últimos años. Una exhaustiva investigación y encuestas confirmaron que esto se encontraba entre lo más prioritario de lo que buscaban los usuarios. El año pasado pudimos presentar los temas para móviles a las comunidades, dando a los administradores la habilidad de aplicar su tema de escritorio en la apariencia móvil a través del diseñador de temas, pero sabíamos que muchos administradores querrían llevar esto un paso más allá para mejorar el contenido de sus wikis. El CSS para móviles era un paso natural en esa dirección, y formalmente completa las características presentadas a través del plan de acciones para creadores del Community Connect 2022.
Mientras que las comunidades originalmente de Gamepedia ya tenían CSS para móviles que podía ser editado por sus Responsables Wiki, queríamos asegurarnos de que todo estuviera en orden para el lanzamiento global de la funcionalidad. Para ello, varias comunidades de múltiples verticales e idiomas nos ayudaron a probarlo, permitiéndonos trabajar en los últimos detalles y asegurarnos de que no hubiera problemas de rendimiento o SEO. Las pruebas demostraron que se trataba de un rotundo éxito, con los administradores de los wikis mostrando soluciones creativas y casos de uso que superaron nuestras expectativas.
El punto de entrada al CSS personalizado en el panel de administración actualmente solo lleva a la página para la versión de escritorio. Somos conscientes de que esto ignora a la opción para móviles, y estaremos corrigiéndolo en las próximas semanas.
Política de personalización[]
Recomendamos a los administradores que revisen la política de personalización para guiarse sobre lo que puede ser editado usando CSS para móviles. Ten en cuenta que es obligatorio seguir esta política, y el equipo de Fandom recomendará cambios si algo va en contra de estas normas. Puedes alterar la portada para móviles usando CSS siempre y cuando no afecte al posicionamiento de la publicidad.
- Diseñador de temas. El diseñador de temas debería de ser el punto de entrada para cada diseño, ya que sus efectos pueden ser previsualizados inmediatamente en escritorio y móviles, mientras que el código adicional debería de ser un complemento para hacer correcciones o mejoras.
- Ten en cuenta las necesidades de escritorio y móvil. Editar el CSS está disponible para la apariencia de escritorio y móvil (mientras que el JavaScript solo está disponible para escritorio). Sin embargo, solo porque algo funcione en la versión de escritorio no significa que funcionará en móviles, o que incluso esté permitido. Si no has añadido CSS a la apariencia móvil de tu wiki todavía, considera comenzar desde cero el CSS para móviles en lugar de copiar todo lo que ya tenías en la versión de escritorio. Solo ve copiando y pegando poco a poco conforme lo necesites.
- Ten en cuenta el rendimiento. Es importante recordar que el CSS y JS consumen poder computacional y tiempo de renderizado, sobretodo cuando estás cargando una imagen. Esto puede afectar negativamente a la velocidad con la que tus usuarios pueden acceder a tu contenido, y consumir más datos móviles para ellos.
- Espacio de contenido de artículos. En móviles, el área de contenido se comprime debido a las limitaciones del tamaño de la pantalla. Solo puedes modificar el texto e imágenes que son parte del artículo y son colocados por editores. Esto quiere decir que los elementos nativos de contenido, como los módulos de recomendación de contenido, deben de ser respetados como parte de los elementos de la interfaz básica.
- Fondo y tema. En móviles, puedes ajustar el posicionamiento de la imagen de fondo, pero no puedes sobreescribirla o modificar el tema más allá de lo que está disponible a través del diseñador de temas.
Ejemplos[]
A continuación verás algunos ejemplos que varias comunidades han hecho en su wiki. Esperamos que estos ejemplos te inspiren a personalizar tu wiki. Recuerda que no tienes que hacer cambios drásticos, y estos ejemplos buscan mostrar cómo los cambios sutiles también pueden tener un gran impacto.
- Wiki Freddy Fazbear's Pizza: Además de cambiar el fondo de la infobox, han ajustado el espacio entre el cuadro y los bordes de la pantalla. Además, centra los campos de información para que sea más fácil identificar las líneas, y añade una sombra a su alrededor. Y, por supuesto, las pestañas para las imágenes también lucen diferente.
- Smash Legends Wiki: Otro ejemplo de infobox que juega más con combinar diferentes tonos para el fondo y corrige el espacio que hay entre los espacios para que luzca más compacto y amigable para móviles.
- Yu-Gi-Oh! Wiki en Español: La comunidad de Yu-Gi-Oh! desde hace años ha tenido un estilo simple que se adapta bien a móviles aunque no hubiera CSS disponible antes. Pero ahora, pueden mejorar la apariencia y corregir algunos detalles para organizar mejor el contenido. En este ejemplo, ayuda a separar mejor los elementos, y creo que el texto centrado lo hace lucir mejor.
- Wiki YouTube Pedia: Algo que varias comunidades han ido directo a mejorar primero es su portada en móviles, siendo este uno de mis ejemplos favoritos por cómo hace un muy buen uso de un cuadro deslizable para la sección de "Descubre". Su portada también hace un mínimo de personalizaciones y se concentra en corregir el espacio y usar los fondos para dividir las secciones, manteniéndolo simple pero luciendo muy bien.
- Wiki Genshin Impact:
No habrán pensado que no iba a incluir uno de mis ejemplos.Una experiencia personal, pero antes la mejor manera de hacer que algo luciera medianamente bien en móviles era convirtiéndolo en una lista y sobreescribiéndolo completamente en la versión de escritorio. Y aunque este ejemplo sigue siendo una lista, ahora tiene más libertades para posicionar mejor los elementos, la imagen y dividir las secciones sin mostrar las viñetas. Y lo más importante: todo mejora cuando puedes agregar un poco más de color (para nada una opinión personal y subjetiva).
Comentarios[]
Agradecemos a las comunidades que nos ayudaron con las pruebas para asegurarnos de que el CSS para móviles no afectara negativamente a los tiempos de carga o al posicionamiento de Google. Apreciamos enormemente su ayuda y no habríamos podido hacer esto sin su invaluable retroalimentación.
Recuerda compartir tus comentarios con nuestro equipo de Responsables Wiki. También puedes unírtenos en Discord y discutir problemas, ideas o tan solo mostrarnos lo que has logrado.
¿Quieres saber más sobre en qué estamos trabajando para nuestros editores y administradores? Únete a la transmisión en vivo del Community Connect 2023 el 24 y 25 de abril.
¿Te gustaría mejorar cómo luce tu wiki en móviles pero no sabes cómo usar el CSS? Nuestro equipo de diseños y portadas también recibe solicitudes para la apariencia móvil. Si cumples con los requisitos, ¡solo déjales una solicitud!