Archivo | Diseño
Estaba tirando ideas para una lista de "best practices" de diseño y desarrollo web; y después de un rato me puse a pensar en que también es muy importante tener en cuenta las cosas que nunca deberían hacerse (¿worst practices?) en estos casos.
Muchos de los ejemplos típicos que se me ocurrían ya están casi extinguidos (como los frames); pero, aunque a veces nos parezca increíble, hay sitios que se empeñan en utilizar algunos recursos que pueden resultar desde molestos hasta insoportables para los visitantes.
Estas son algunas de las cosas que personalmente encuentro molestas y consideraría worst practices en internet:
- Enlaces que se abren en otra ventana/pestaña (
target="_blank")
Yo tengo mi forma de navegar y quiero poder elegir cómo abro los enlaces, no que me lo impongan (de todas formas, en Firefox lo soluciono con TargetKiller). Además, para los usuarios novatos puede resultar confuso: al hacer click en un enlace se encuentran el destino en otra ventana (muchas veces sin darse cuenta) y puede resultarles difícil volver a dónde estaban.
- Sitios enteramente en Flash
Suelen ser más pesados de lo necesario, más complicados de navegar y se pierden todas las opciones del navegador (copiar, imprimir, volver atrás, ver el URL de una sección concreta para enlazarla o guardarla en favoritos…). Tampoco son indexables por buscadores ni pueden ser vistos por lectores de pantalla. En algún caso puede quedar genial que el sitio de nuestra empresa tenga espectaculares animaciones y menús voladores, pero incluso en ese caso es probable que nadie tenga ganas de verlos más de una vez. El Flash es muy útil para ciertas cosas, pero no hace falta abusar.
- Pop-ups
¿Hace falta que explique lo que tienen de malo? Molestan. Molestan más cuando se abren constantemente. Molesta cuando se abren varios a la vez. Nos quitan el foco, nos distraen, nos hacen perder tiempo…
También es molesto cuando se usan para mostrar información importante y el navegador los bloquea sin que nos enteremos.
- Las ventanas que cambian de tamaño automáticamente
Irritante. Sobre todo cuando uno navega con tabs y todo el browser cambia de tamaño. Más molesto en los sitios en los que, aunque volvamos a maximizar o redimensionar la ventana a nuestro gusto, cada vez que cambiemos de sección todo vuelva a redimensionarse.
- Audio o video que se reproduce automáticamente (
autoplay)
Si tengo ganas y/o tiempo de escuchar una canción o video en tu sitio, ya lo activaré yo mismo. Es insoportable cuando empieza a sonar algo, sobre todo si no sabemos de dónde viene. A veces estamos escuchando nuestra propia música y algo así sólo molesta. A veces estamos en silencio (y/o tenemos que mantener el silencio) y molesta mucho más. Además no todos tenemos conexiones rápidas, y el activar un audio/video automáticamente consume ancho de banda innecesario.
Lo peor: Sitios donde hay audio/video en autoplay que se repite en todas las páginas (por ejemplo, cuando está fijo en el footer o sidebar)… Si no me interesa, no me va a interesar cada vez que cambio de sección o cada día que entro nuevamente; y si me interesa, tampoco necesito verlo/oírlo infinitas veces.
- Las páginas que se recargan automáticamente cada cierto tiempo
Pasa en varios sitios, pero sobre todo lo encuentro en los periódicos online. Suelo navegar con varios tabs a la vez, y la mayoría de las veces abro un sitio, leo un poco y cambio a otra pestaña para seguir leyendo después. También puede que suene el teléfono, que me distraiga hablando por IM, que vaya al baño, que venga el cartero, e infinitas opciones más… El caso es que, cuando la página se recarga, al volver a ella perdemos la posición en la que estábamos en la ventana o directamente lo que estábamos leyendo fue archivado y desapareció de la pantalla.
Lo peor: Cuando la página se recarga mientras estamos leyendo. ¡Déjenme leer como quiero!
¿Qué opinan de estos puntos? ¿Qué otras cosas agregarían a la lista?
En esta era de las aplicaciones online, Adobe ha decidido crear una versión web de uno de sus programas más populares, el Adobe Photoshop.
Según comentan en ZDNet, este movimiento sería el inicio de una estrategia para crear servicios online mantenidos con publicidad que complementen a sus productos existentes y aumenten el alcance de la empresa en el mercado.
Por supuesto, parte de la idea es lograr ser los primeros (y convertirse en estándares) en las distintas áreas abarcadas por los programas de Adobe, ante una enorme competencia de las grandes empresas como Google, Yahoo y Microsoft que no paran de lanzar nuevas aplicaciones online; pero siempre remarcando que estos servicios son versiones simplificadas de sus productos.
Después de la compra de Macromedia por parte de Adobe surgieron varias especulaciones, que mencionamos en varias ocasiones, sobre cuáles serían los programas de ambas empresas que se mantendrían y cuáles se descartarían.
Una de mis primeras apuestas fue por la muerte de Freehand, dado que Illustrator es un producto bastante importante y no tiene sentido mantener a ambos. Esto casi fue confirmado cuando Adobe editó una guía para migrar de Freehand a Illustrator.
Finalmente la empresa anunció hoy que la muerte de Freehand es un hecho. Pero el software de Macromedia gana en otro frente, porque también se ha anunciado la discontinuidad del editor web de Adobe, GoLive, en favor del más práctico y reconocido Dreamweaver (que tras el anuncio de Microsoft de dejar de lado Frontpage, baila sobre dos tumbas).
Aunque la desaparición de Freehand y GoLive no sea inmediata, ya que según algunas fuentes Adobe planea continuar, al menos por un tiempo, ofreciendo soporte y algunas actualizaciones de ambas aplicaciones; está claro que quedarán totalmente fuera de foco y desaparecerán completamente tarde o temprano.
Las tipografías en internet siempre han sido uno de los límites más grandes al diseñar cualquier tipo de sitio. Al estar siempre del lado del visitante, los desarrolladores tienen que conformarse con utilizar las más comunes, no pudiendo experimentar demasiado con esa parte del diseño.
Una de las soluciones más utilizadas siempre es la de reemplazar textos por imágenes; pero esto sólo es útil con partes bien definidas que se mantienen siempre iguales. El problema principal consiste en lograr utilizar una tipografía especial en sitios donde el contenido puede cambiar, siendo el mejor ejemplo el de los titulares de un post, noticia o cualquier tipo de entrada.
Desde hace tiempo han ido surgiendo diversas alternativas para solucionar este problema, con mayor o menor efectividad. Una de las más populares es sIFR, que nos permite subir a nuestro servidor un documento en formato Flash con cualquier tipografía "embebida" en él; y luego mediante Javascript puede identificar distintas áreas del contenido en las que reemplazará áreas de texto por un documento de flash generado dinámicamente a partir del original, en el que se mostrará el texto correspondiente con la tipografía que hayamos elegido.
Mark Wubben ha decidido reescribir el código de sIFR, creando la versión 3, y mejorando algunas funciones existentes y agregando otras nuevas.
Aunque sIFR 3 se encuentra en "alpha", puede verse un demo o descargarse una versión de prueba desde el sitio del autor.
XHTML es un estándar (al igual que el HTML) propuesto por el Consorcio W3C basado en el estándar XML, y se pretende conseguir que todos los documentos web sean compatibles en cualquier navegador, no solamente en ordenadores, sino también en cualquier otro dispositivo. Según el propio organismo, es una "reformulación del estándar HTML 4", con el que es compatible al 100%.
La pregunta es: ¿Ayuda realmente en algo utilizar XHTML en lugar de HTML?. La respuesta, rotunda, es sí. Hace unos dias Enrique nos hacía partícipes de su éxito en google merced a un buen marcado XHTML, con una búsqueda, además, que produce casi dos millones de resultados.
Utilizando XHTML+CSS conseguirás, no solo facilitar el trabajo a los robots de búsqueda, clarificando y simplificando el código de tu web, sino también aumentar la densidad de palabras clave dentro de los contenidos, disminuyendo la longitud de muchas etiquetas y el peso de tus páginas, lo cual Google agradecerá. También estarás consiguiendo que tu web se vea en cualquier dispositivo (PDA, teléfono móvil…), acercándola a un público aún mayor.
Esta semana por la blogosfera se está enlazando un muy buen manual de XHTML, y también puedes pasar por la sección de XHTML de Tacs si quieres saber algo más de éste lenguaje.
NOTA: debido a las migraciones de servidor que Indiesign está sufriendo, es posible que Tacs no sea accesible de momento. Esperamos solucionar ésto muy pronto. Gracias por la comprensión Tacs ya está funcionando a la perfección.
La revista Nature publica una noticia en la que, tomando datos de diferentes estudios, afirma que cuando una persona visita un sitio web puede decidir si este sitio le gusta o no en menos de un segundo; y que además esta primera opinión tiene un impacto duradero en la opinión general del sitio.
Todos sabemos lo importante que es la primera impresión para atraer un visitante, pero es impresionante la velocidad con la que ésta se produce… De estos datos podemos deducir que para lograr un diseño exitoso hay que conseguir destacar correctamente las partes más importantes; no hay que sobrecargar mucho el sitio de contenido; pero sobre todo tratar de que nuestras páginas carguen rápido….
Hace un par de semanas comentaba algunas de las novedades de la nueva versión de CSS, CSS3; que además agregará nuevas funciones a los selectores.
En general, la mayoría de estas funciones ya pueden aplicarse en los navegadores web modernos (o sea, no funcionan en Internet Explorer); y nos permiten aplicar estilos de una forma mucho más compleja, utilizando distintas "fórmulas". Por ejemplo, podemos utilizar selectores en cualquier elemento como :first-of-type para aplicar cierto estilo sólo al primer elemento en su tipo, o :empty, que hace lo mismo con cualquier elemento que no contenga ningun sub-elemento.
Pero eso es sólo una muestra de la enorme cantidad de posibilidades. Roger Johansson explica con gran detalle todas las propiedades avanzadas de los selectores de CSS3: CSS 3 selectors explained.
Una de las cosas que más confusión crea en la gente que ha comenzado a diseñar recientemente con CSS es el uso de tablas para "maquetar" un sitio web. Hubo una época donde las tablas eran lo máximo (y prácticamente la única forma) para organizar un sitio en distintas áreas. Pero en realidad, su uso está pensado para otra cosa: datos tabulados.
Con la extensión del diseño con estándares, mucha gente ha comenzado a criticar la maquetación con tablas, a favor de el uso de distintas áreas que luego se posicionan utilizando una hoja de estilos. Este uso favorece además la actualización y el rediseño de los contenidos. Pero muchos diseñadores actuales han llegado a evitar usar tablas totalmente, como si estuviese mal hacerlo.
El hecho es que las tablas siguen siendo algo perfectamente válido en todos los estándares de HTML; simplemente hay que entender en que casos es recomendable usarlas y en que casos no.
Roger, de 456 Berea Street, escribió hace ya un tiempo un excelente artículo que explica claramente cuál es el uso semánticamente correcto de una tabla, todos los tags que pueden componerla, los beneficios de crear tablas accesibles y unos cuantos ejemplos de cómo usarlas: Bring on the tables.
Otro de los debates más comunes ultimamente en el área del diseño web es sobre cuáles son las tipografías y tamaños de letra más legibles en la pantalla de un monitor.
Teniendo en cuenta las limitaciones actuales (que esperemos que se solucionen con la nueva versión de CSS), Juan Carlos, de Úsalo hace un muy buen artículo que explica un poco el tema y reúne la opinión de diversos especialistas: Elegir los tipos de letra.
Philipp, de Google Blogoscoped, hace una nueva lista de cosas que deberían desaparecer de internet durante el año 2006, con un toque de humor:
- "Nuestro artículo es muy largo, dividámoslo en muchas páginas"
- "Tenemos contenido artístico, así que creemos una navegación artística"
- "Ignoremos al resto del mundo"
- "Hagamos spam en todo (comentarios de blogs, cuentas de e-mail, estadísticas de referidos, grupos de discusión, etc.)"
- "Tratemos a la internet móvil como una entidad independiente"
- "Hagamos una página tradicional para nuestra empresa"
- "Preocupémonos por el bajo ancho de banda"
- "Leamos el URL en la televisión"
- "Digámosle a todo el mundo que Firefox es el mejor navegador"
- "Pongamos una tipografía más chica que se ve mejor"
El artículo completo en 10 Web Trends That Should Die in 2006.
Macropsia es un weblog sobre internet, enfocado en las novedades, aplicaciones, tendencias, diseño y demás; parte de la red de sitios de