Como lo recomendamos en la Lista de verificación de portabilidad, lo mejor es evitar los estilos en línea en tus páginas en consideración a los usuarios que leen tus artículos desde dispositivos móviles. Esta es una explicación más detallada de por qué los estilos en línea causan problemas de portabilidad.
¿Qué son exactamente los estilos en línea?[]
Los estilos en línea son los bits de códigos CSS que se colocan directamente en el contenido de la página (o plantilla). Puedes localizarlos buscando style="..." dentro del texto de la página.
Los estilos en línea contrastan con las hojas de estilo (que están fuera del texto, y no son en línea). Puedes encontrar y editar las hojas de estilos de tu comunidad en MediaWiki:Wikia.css y otras páginas en el espacio MediaWiki. Puedes mejorar inmensamente la portabilidad de tu wiki si te alejas de los estilos en línea y compilas todos tus comandos de diseño en una hoja de estilo.
Ten en cuenta que aún necesitas saber qué es exactamente lo que hace tu código, porque incluso el uso de una hoja de estilo no garantiza automáticamente que todo su contenido sea portátil.
¿Qué hacen?[]
Los estilos cambian el aspecto del contenido de la página. Afectan la presentación visual de su información. Por ejemplo, pueden indicarle a una imagen que se muestre en un determinado tamaño y posición, pueden poner un borde al rededor de un elemento de su página o cambiar el color del texto.
Algunos de los comandos de diseño no toman en cuenta que tu página será vista no solo en el escritorio sino también en dispositivos móviles de varios tamaños y orientaciones de pantalla. Debido a estas restricciones, esa gran distribución y apariencia que diseñaste para tu contenido con tu código de estilos podría no funcionar muy bien, sobre todo porque la pantalla de un celular es significativamente más pequeña y estrecha que la pantalla de tu laptop.
Por esto, celulares y otros dispositivos móviles ignoran la información de estilo y muestran el contenido simplificado y sin estilos. Si el dispositivo no puede distinguir el el contenido de los códigos de estilo, porque están mezclados en la misma página, pueden producirse problemas de portabilidad.
Las páginas menos complejas también pueden sufrir esto. Tablas simples pueden verse mal sin sus estilos personalizados. Es difícil cómo ciertos estilos influirán a tu contenido en dispositivos móviles: Podría verse bien en algunos dispositivos y romper completamente la página en otros. Por eso es mejor ir a lo seguro y no incluir estilos en el contenido de tu página.
Cuánto más complejo es el código, más probable es que surjan problemas[]
Los estilos con CSS pueden hacer que el contenido se vea absolutamente increíble en tu página. Las comunidades lo usan para personalizar sus artículos de millones de formas diferentes y creativas. Debido a que la mayoría de los códigos (incluyendo estilos) se escriben en el escritorio, muchas veces se ignoran las necesidades de los usuarios de dispositivos móviles. Las páginas antiguas, creadas antes de que todos empezaran a usar dispositivos móviles, ignoran completamente la necesidad de la portabilidad.
Cuando usas CSS, por favor:
- Piensa en el rendimiento: El estilo puede afectar el rendimiento y hacer que tu página sea más lenta de cargar. Un teléfono pequeño en la mano tardará más tiempo en cargar una página compleja que el monstruo de cuatro núcleos que puedes tener en tu casa.
- Ten en cuenta que algunas pantallas son muy pequeñas y altas en lugar de anchas.
- Intenta contener cada elemento (Infobox, Navbox, etc.) en una plantilla, y dar estilos a través de una clase de CSS.
- No sientas que debes reinventar la rueda. Recuerda que algunos elementos, como las Infoboxes portátiles, ya tienen selectores y clases de CSS. Otros elementos, como las Navboxes, pueden usar esas clases para imitar los estilos de tus infoboxes portátiles, para asegurar un diseño consistente.
- El peor pecado, desde el punto de vista de una wiki, es el uso de estilos en línea o tablas para diseñar páginas completas. Eso es como reorganizar todos los muebles en la casa de un ciego (sin que lo sepa) y reemplazarlos con trampas mortales[1]. En vez de hacer esto, considera usar elementos de bloque (<div>) con una clase.
tl; dr: Mantén tu código lo más simple posible. Cuanto más simple, es más difícil que se rompa.
La apariencia no lo es todo[]
Muchos usuarios sólo piensan en cómo se verá la página cuando diseñan sus plantillas y el contenido, pero en hacer su código elegante, legible y eficiente. Ignoran el hecho de que otros usuarios podrían necesitar trabajar y entender ese código.
Referencias[]
- ↑ Estilos en línea y por qué son considerados dañinos para la accesibilidad: http://web.archive.org/web/20160511135410/http://www.nomensa.com/blog/2011/inline-styles-and-why-they-are-considered-harmful-accessibility (inglés)