¿Por qué alguien usaría botones de estilo puro de CSS sobre una técnica de hoja de mapa de bits/SpriteSheet?

Question

Tenemos un debate continuo en mi trabajo sobre la mejor manera de implementar botones en nuestros sitios web. Algunos directores de arte piden los botones en CSS puro, prefiero hacer Spritesheets en Photoshop. Mi argumento: el kerning, los efectos de texto como drop-shadow y aliasing se ven mejor saliendo de Photoshop. Su argumento: pierdes puntos de SEO, los motores de traducción no pueden cambiar los botones.

Estoy seguro de que hay argumentos para ambas partes: ¿me falta algo obvio para cualquiera de estos argumentos?

Answer 1

Bueno, para empezar, los botones CSS puros ciertamente cargarán más rápido, ya que son solo unos pocos líneas de código. Muchas cosas no se pueden hacer en CSS/JS, esas tendrán que ser imágenes y consumirán mucho ancho de banda. Pero donde puedes ahorrar ancho de banda, deberías. Esto solo es un argumento decisivo si la velocidad es una prioridad para su proyecto.

.

Acerca de los efectos que se ven mejor en Photoshop ... No necesariamente estoy de acuerdo aquí. Realmente no creo que las implementaciones del navegador se vean mal de ninguna manera, por lo que primero tendrías que superarlas.

.

Además, dibujar una imagen de botón probablemente le cueste más tiempo que escribir algunas líneas de código. Lo mismo aplica para cambiar el botón. La capacidad de mantenimiento está en el lado CSS;)

.

No creo que se aplique el argumento de traducción. Si un "motor de localización" puede manejar diferentes clases/textos de estilo/estilo CSS para diferentes idiomas, también debería ser capaz de manejar diferentes imágenes/sprites para diferentes idiomas.

.

Acerca de SEO: Si tiene un texto alternativo para un botón o imagen (en caso de que no se pueda cargar, comportamiento estándar de la OMI), esto debería aplicarse tanto a los motores de búsqueda como a cualquier cadena. Aunque no estoy 100% seguro aquí.

Answer 2

También puede haber un problema de rendimiento. Dicho sin rodeos, imágenes más/más grandes = más descargas. Si tiene muchos elementos gráficos, esto eventualmente ralentizará el sitio. En su conexión de banda ancha/fibra, esto podría no ser un problema tan grande, pero será un problema en conexiones más lentas, especialmente si el almacenamiento en caché está deshabilitado por alguna razón.

También llevará más tiempo al desarrollador de frontend implementar una solución de spritemap que una CSS pura.

No me malinterpreten, sin embargo. Los Spritemaps son geniales, ya que son mucho mejores en cuanto al rendimiento que las imágenes múltiples, pero CSS es simplemente más rápido de descargar, más rápido de desarrollar, más flexible y mejor para la estructura.

Al final, depende del proyecto. Si se trata de rendimiento, velocidad de desarrollo y dinero por dinero, entonces es CSS todo el camino. Sin embargo, si el cliente exige que el sitio se vea perfecto en píxeles en su navegador Stone Age, entonces será mejor que utilice un spritemap.

Answer 3

Otro posible argumento para usar CSS puro en lugar de imágenes es velocidad. Dependiendo de la cantidad de botones que tenga, podría tomar una cantidad considerable de tiempo más tiempo cargar las imágenes en lugar de CSS/texto sin formato.

Hacer las cosas más rápido siempre es una gran cosa en el desarrollo de software.

Answer 4

Cuando utiliza gráficos para mostrar texto en botones, puede usar CSS text-indent: -100000; con texto normal; los motores de búsqueda lo verán, pero el usuario no lo hará.

<div class="button">Button text</div> 
<style> 
    .button { 
     text-indent: -100000; 
     background: url('path/to/image/with/button/text.jpg') no-repeat center center transparent; 
    } 
</style> 

Sprites son buenos y la fantasía, pero hay una diferencia real (por ejemplo) y la imagen 50kB 3kB de código, que hace lo mismo en. Si su sitio se visita cientos por día, no verá esta diferencia, pero cuando podría ser miles de millones ...

Answer 5

Además de cargar más rápido (menos solicitudes), los botones CSS son más fáciles de mantener. Necesita un botón más largo, cambiar el color del texto, el estilo desactivado, otro conjunto de colores. Esta es una gran diferencia con el tiempo.

Una desventaja de los botones css es que, por ejemplo, text-shadow no es compatible con algunas versiones de IE; sus botones no se verán exactamente iguales en todos los navegadores, pero aún así se bloqueará si lo codifica correctamente.

Answer 6

Su punto es válido, pero no es el kerning y la tipografía de Photoshop, MS Word y varias plataformas DTP siempre mejor que una solución basada en navegador? Considere cuán poco navegadores utilizan el tipo completamente justificado, es una porquería. Con este mismo argumento, ¿se abandonarán todas las soluciones basadas en CSS porque las herramientas no web pueden hacer un mejor trabajo? La respuesta es NO o todos seguiríamos usando Flash porque les da a los usuarios una "mejor experiencia".

Debe tener en cuenta la gravedad de la experiencia del usuario frente a la facilidad de desarrollo y los estándares abiertos. Creo que vale la pena el esfuerzo de separar la capa de contenido de la capa de diseño tanto como sea posible, y eso significa dejar atrás imágenes de esquinas curvas, botones y muchas otras cosas que ahora se pueden representar con CSS3. Para hacer eso, a veces tenemos que intercambiar un poco de control y perfección para avanzar con la tecnología disponible.

Answer 7

1- velocidad, cargas css mucho más rápido que las imágenes

2- ancho de banda, si usted tiene 20 botones Trough todo su sitio web y 50000 usuarios únicos cada día, lo que realmente hace que un impacto.

3- SEO boost, los buscadores prefieren CSS a las imágenes, y por supuesto, sobre todo el texto.

ahora, con imágenes que puede hacer cosas css cant (al menos por ahora).

Todo depende de lo que quiere lograr, el tipo de sitio web que desea hacer. La audiencia en la que te enfocas

Mira a Stackoverflow, tiene pequeñas imágenes. El resto es puro CSS.

Answer 8

Otro punto; Photoshop no puede hacer cleartype (use subpíxeles), ya que depende de las especificaciones de visualización del usuario. Así que el texto del navegador se ve mucho más limpio & más nítido.

Prefiero botones totalmente basados ​​en CSS, simples, con efectos de luz. Si realmente necesitan una apariencia más pesada con más efectos, entonces la forma es hacer un botón utilizando fondos de mapa de bits y texto HTML, que preferiblemente se puede cambiar de tamaño con CSS para cubrir tamaños de texto variable.

Los botones completamente bitmapped realmente se ven feos especialmente en tamaños de texto más pequeños, es un dolor de cabeza para mantener, duplicar, modificaciones masivas (especialmente si no tienes el PSD original), toma mucho más ancho de banda y tiempo de carga, no puede ser tipeado usando código, etc.