La diferencia entre ser un buen diseñador web y un gran diseñador web es la habilidad de saber cómo tomar atajos y ahorrar tiempo sin comprometer la calidad del diseño web. Jason Arber de Pixelsurgeon ha publicado 20 consejos y trucos que debes utilizar para llevar tus diseños al nivel de los profesionales importantes.
- Planeación: aunque parece algo obvio, suele ser algo que no se lleva a cabo.
- Hazlo a mano: Existen aplicaciones muy buenas que te crean el código HTML sin tener que escribirlo uno mismo, pero hacerlo tú mismo es algo que te va a dar mayor control sobre el diseño. Con un editor normal que te coloree el código debe ser más que suficiente.
- Enlazar o importar las hojas de estilo: hay dos formas de aplicar un CSS y no todos los navegadores reconocen las dos formas, por ello se puede usar ambas para que navegadores modernos y antiguos carguen el CSS.
<link rel="stylesheet" href="simple.css" type="text/css" media="screen"> <style type="text/css" media="screen /"> @import url(simple.css); </style> - Ten cuidado con los fondos con colores degradados: el uso de imágenes como fondo de pantalla es algo sobre lo que se puede y debe tener mucho control, se puede hacer un degradado vertical de ancho 1px y luego repetirlo solo en el eje x, y que el color de fondo sea el color en que finaliza el gradiente. Yo añadiría que cuidado con los degradados, ahora están muy de moda, pero tampoco se debe abusar de ellos.
- Comentarios: imprescindibles para cualquier tipo de desarrollo, ya sea para una aplicación en .NET, C o para una página web. Otra cosa es que lo hagamos siempre.
- Utiliza scripts sencillos en PHP: no es necesario ser un experto en PHP, pero si tu servidor lo admite, úsalo, sobre todo para incluir trozos de HTML que sean muy utilizados, como por ejemplo el código que crea el menú.
- Específica el tamaño de las fuentes con em: a los diseñadores les suele gustar usar px porque se ajusta exactamente al tamaño que quieren, pero el problema es que, por ejemplo, Internet Explorer no redimensiona las fuentes definidas con px con el consiguiente problema de accesibilidad para los lectores con discapacidad.
- Hack en Internet Explorer del modelo de caja: Tal vez no lo sepas, pero Internet Explorer tiene un bug con el tamaño de una capa cuando se usa width y margin, padding o border. Esto se soluciona usando el guión bajo delante del estilo (_margin), que IE reconocerá como el propio estilo, mientras que los otros navegadores lo ignorarán. No recomiendo seguir haciendo esto, porque con la nueva versión de Internet Explorer podría tener problemas ya que se ajusta más a los estándares (eso espero).
- Margen en los formularios: los form aunque no se vean tienen márgenes, cuando crees uno, no olvides quitarles el margen superior e inferior.
<form style="margin-top: 0; margin-bottom: 0;"> - Prueba, prueba y prueba: No lo debes dejar pasar por alto, sobre todo para intentar conseguir que funcione en casi todos los navegadores.
- Formato de las imágenes: Utiliza GIF para imágenes con colores planos y JPEG para imágenes tipo fotografía, aunque deberías usar PNG en ambos casos, ya que funciona tanto para colores planos como para tipo fotografia, el problema es que Internet Explorer no admite el canal alpha, hay que esperar a Internet Explorer 7 para que lo podamos utilizar.
- Atributos alt y title: para que la descripción de las imágenes o enlaces aparezcan correctamente en los dispositivos móviles y en los navegadores modo texto.
<img src="logo.gif" alt="logo" title="logotipo" /> - Orden de las pseudoclases: Para los efectos rollover del texto, es importante que las pseudoclases tengan el órden correcto, de los contrario no funcionarán en todos los navegadores. El órden correcto es el siguiente:
a:link { color: blue; } a:visited { color: purple; } a:hover { color: purple; } a:active { color: red; } - Utiliza lenguaje semántico: separa el contenido de la apariencia, si eliminamos la css de una página se debería ver correctamente.
- Utiliza favicons: son iconos de 16 pixeles por 16 pixeles que aparecen en los favoritos o en las pestañas del navegador, algo sencillo que representa a nuestra web.
- Usa máyusculas mediante CSS: cuando quieras escribir un texto completamente en mayúsculas usa text-transform en vez de escribirlo tú directamente en mayúsculas.
h1 { text-transform: uppercase; } - Pon el texto alrededor de las imagenes: es más estético que si abajo y arriba de la imagen.
<img src="image.jpg" align="left"> - Utiliza la codificación UTF-8: no todo el mundo tiene tu idioma o tu juego de caracteres, El UTF-8 es un tipo de codificación de caracteres para Unicode que nos permite escribir nuestras páginas web y no preocuparnos por si se va a ver correctamente o van a aparecer caracteres extraños.
- Estilos para impresora: crea estilos específicos para impresoras:
<link rel="stylesheet" type"text/css" href="print.css" media="print" />o
<style type="text/css" media="print"> @import url(print.css); </style> - Aprende de los demás: dale una vuelta por algunas galerías CSSMania o CSSVault.
Vía | .net Magazine