Ayuda:Mejores prácticas en CSS

¿Pensando en personalizar el diseño de tú comunidad? Cuando estás creando tu estrategia con CSS, debes tomar decisiones que sean ampliamente atractivas y que sean bien recibidas por la mayoría de editores y lectores. Aquí hay algunas buenas prácticas que te ayudarán.

Antes de comenzar, por favor lee nuestro artículo Política de Personalización.

Instrucciones

Comienza con el diseñador de temas

Empieza con el antes de empezar con el CSS.

Empieza con el diseñador de temas antes de empezar con el CSS.

La forma más sencilla de personalizar tu comunidad es utilizando el diseñador de temas de Fandom. Te da capacidades rápidas y fáciles de personalización, tales como permitirte cambiar el logotipo, favicon y fondo de su wiki. Todo lo que pueda ser cambiado con el diseñador de temas debe ser cambiado con él. Así que empieza ahí antes de moverte al CSS.

Colores

Evita el bajo contraste, colores espeluznantes o chocantes, especialmente en el área de contenido. Quieres que las personas sean capaces de leer fácilmente los artículos para que se mantengan en la comunidad por más tiempo. Puedes usar otras páginas como WCAG Contrast Checker para revisar si estás usando un buen contraste.

Comienza con el antes de escribir cualquier CSS.

Comienza con el diseñador de temas antes de escribir cualquier CSS.

Recuerda:

  • La vista de todo el mundo no funciona de la misma forma que la tuya; un número significativo de personas que tienen problemas con la visión degradada y daltonismo.
  • Diferentes pantallas de dispositivos también se comportan de manera diferente; los colores que ves en tu propio dispositivo podrían no funcionar tan bien en otro.
  • Trate de asegurar un buen contraste entre el texto y el fondo.
  • Las imágenes de fondo son geniales, pero no si no puedes leer el texto en la parte superior de ellos. No te emociones con la herramienta de transparencia del diseñador de temas si tienes un fondo muy recargado. También añade un fondo de color apropiado.
  • Evita el uso de fondos muy recargados.
  • Trata de no hacer el texto demasiado pequeño, especialmente el área de texto principal.

Fuentes

  • Las fuentes personalizadas son bienvenidas, pero menos muchas veces es más. Evita tensar la vista. Revisa bien donde se tiene permitido cambiar la fuente: Política de personalización. Lo mejor es no cambiar la fuente de las páginas de contenido, porque necesitan ser leídas con facilidad.
  • Puedes encontrar muchas fuentes que permiten su uso comercial. Te recomendamos revisar Google Fonts. Si necesitas ayuda, por favor sigue esta guía: Importar de Google Fonts.

Mantén el diseño simple

El CSS ofrece una gran variedad de posibles efectos para hacer que el sitio resalte. Pero no debes sobrepasarte. La meta del CSS es hacer la comunidad ampliamente atractiva, y tu nuevo cursor brillante puede que aleje a potenciales editores.

  • Usa elementos decorativos únicamente donde sea necesario.
  • Evita los diseños "brillantes" en las páginas. Puedes añadir algunos efectos de desplazamiento, como por ejemplo hacer que los íconos sobresalgan, pero ten en cuenta que la mayoría de wikis son únicamente informativas. El wiki, claramente, debería representar el tema sobre el que estás escribiendo y ser visualmente atractiva, pero tampoco hacerlo de manera que pueda distraer o alejar al lector.

Diseño Receptivo

Fandom tiene anchos fluidos. Esto significa que el ancho cambiará dependiendo del tamaño de la ventana del navegador. Asegúrate que tu diseño funcione completamente variando el tamaño de tu navegador durante el proceso de prueba. Si es posible, prueba tú diseño en una tableta también.

Escriba un código legible

Escribe código que sea fácil de leer y entender. Ya que definitivamente tú CSS será leído por otras personas en algún momento.

  • anota con comentarios como /* Este código hace a, b y c */
  • Dale a tus clases personalizadas y IDs nombres entendibles. Si lo haces acerca de una caja, considera nombrarlo .box y no .fhal523
  • agrega espaciados y sangría al gusto de tú comunidad, pero escoje un formato y apégate a él.
  • organiza el código de manera lógica, mantén todo código que afecte la misma sección de la comunidad junto.

Rendimiento

Aunque el CSS normalmente no causa problemas notables de rendimiento en la mayoría de wikis, hay casos donde puede impactar negativamente al tiempo que tardan las páginas en cargar. La caché de tu navegador está ahí para ayudar, pero es importante tener en cuenta la experiencia que tendrán los usuarios la primera vez que visiten tu wiki o después de vaciar la caché de su navegador, sobretodo cuando algunos de ellos podrían estar en conexiones más lentas.

Si estás importando varias fuentes desde Google Fonts, procura usar un único @import en lugar de añadir cada fuente individualmente. Los usuarios aún así tendrán que descargar cada archivo de tipografía uno por uno (no te preocupes, esto es hecho automáticamente por el navegador), pero al menos recibirán la lista completa de fuentes en lugar de tener que solicitar la ubicación de cada fuente una a la vez. Una importación de varias fuentes desde Google Fonts luce de la siguiente manera: 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Open+Sans&display=swap');


Observa que en este caso estamos se están importando dos fuentes: Noto Sans JP y Open Sans. Si quisieras incluir también Qahiri, solo tendrías que añadir &family=Qahiri a la misma importación: 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Open+Sans&family=Qahiri&display=swap');


Por otro lado, al importar CSS de otras páginas MediaWiki en tu wiki o desde Fandom Developers Wiki, puedes incluir tantos como necesites usando un único @import de manera similar a como hicimos para Google Fonts. En lugar de: 

@import "/load.php?mode=articles&articles=u:dev:MediaWiki:CSS3Tooltip.css&only=styles";
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:DropdownMenu.css&only=styles";
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:ExpandingInfoboxes.css&only=styles";
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:Highlight.css&only=styles";


Deberías de usar: 

@import url("/load.php?mode=articles&articles=u:dev:MediaWiki:CSS3Tooltip.css|u:dev:MediaWiki:DropdownMenu.css|u:dev:MediaWiki:ExpandingInfoboxes.css|u:dev:MediaWiki:Highlight.css&only=styles");


De esta manera, todo tu CSS importado será enviado a los usuarios en una única petición, lo cual brindará una mejora notable de rendimiento comparado con haber usado varias importaciones individuales.

Enlaces útiles

Ayuda y comentarios