Llega un momento en la vida de toda, o casi toda, página web en la que uno ha de tomar decisiones derivadas del consumo de ésta por parte de terceras personas. Los visitantes, vamos.

Variables tales como los ya mencionados visitantes, el peso de las imágenes que colguemos o las características del servidor contratado afectan de manera directa al consumo de ancho de banda (bandwidth para los amigos) y ello puede originar dolores de cabeza a más de uno. Pero, como en todo, siempre hay “parches” o buenas prácticas que se pueden llevar a cabo a fin de exprimir al máximo nuestros recursos disponibles antes de tener que rascarse el bolsillo y contratar mejoras de servidor, por decir la opción más común (y diría que única).

Aquí os van 5 consejillos que yo he ido poniendo en práctica y me han venido muy, pero que muy bien.

Yslow

Lo sé, lo sé. Yslow por sí sólo no hace nada. Pero antes de “atacar” debemos saber a qué nos enfrentamos. Y es por ello que instalarse una extensión para Firefox tan útil como ésta, es algo casi imprescindible.

Yslow realiza una serie de pruebas a fin de informarnos sobre velocidad de carga, número de peticiones de archivos,… información MUY valiosa de cara a ver dónde realmente tenemos el problema. Podéis ampliar información y descargarlo justo aquí.

Para los que no deseéis instalaros nada, podéis probar Pingdom Tools [en] que realiza un test similar sin necesidad de instalar nada.

Optimizar las imágenes

Parece algo muy tópico pero si por ejemplo usáis Photoshop, hay una gran diferencia entre salvar imágenes en formato jpg desde “Salvar como” y “Salvar para web”. Haced la prueba si no lo sabiáis. Dejad en la medida de lo posible siempre el formato png para transparencias (o el .gif cuando son transparencias “básicas”). Y buscad un equilibrio entre peso y calidad de imagen. Darle una calidad máxima a la imagen en muchas ocasiones no se ve realmente necesario. En esta web por ejemplo suelo guardar los jpg con calidad que oscila entre el 50% y el 80% dependiendo del caso. Bajar la calidad de una imagen entre un 20% y un 30% puede suponer que su peso se reduzca a la mitad.

No creáis que es algo tan trivial lo de la optimización de imágenes :D Aquí os dejo otro link para ampliar información: Yahoo Developers Image Optimization [en].

Usar CSS Sprites

La técnica de los sprites es algo bastante antiguo. Se trata de aglutinar en una única imagen “madre”, muchas imágenes “hijas”. Poneros en el caso de que tenéis definido en vuestros CSS 5 tipos de fondos de imagen para listas. Cada vez que aparezcan en la web, al servidor se harán 5 peticiones. Una petición por imagen. Imaginad ahora que tenéis 100.000 visitas al día. O 1.000.000.

Si en vez de definir 5 imágenes, definiéramos sólo una que las contuviera y posicionáramos las coordenadas de cada una de las “hijas” dentro de la imagen “madre” en nuestra hoja CSS, las peticiones se reducirían a tan sólo una. No os asustéis, si os suena a chino siempre podéis ampliar información.

CSS Sprites [en] o Website Performance Sprite Generator [en] son dos buenos ejemplos de utilidades online que os servirán para crearos vuestros sprites.

Repartir la carga

En algunas ocasiones me he visto en el caso de ofreceros la descarga de algún archivo. Ya sean PSD, bases de concursos… lo más sencillo es abrir el FTP y ale, cargarlos en alguna carpeta que tengamos para tal fin. Craso error.

Actualmente hay infinidad de servicios que nos permiten alojar gratuitamente nuestras imágenes o archivos. Yo me decanto por Box.net [en] para alojar archivos variados y Flickr para imágenes que quiera enseñaros a alta resolución.

Evidentemente no todo son pros. El alojar contenido en servidores externos supone que dependerás del estado en que se encuentren. Si un día resulta que el sitio donde alojaste tus archivos cae o peor aún, cierra… c’est fini. También puede darse el caso de una saturación de sus servidores y a la hora de intentar acceder a tus archivos, la espera se haga eterna. Por todo esto es interesante confiar en servicios extendidos o con una base sólida en el panorama. Yo con Box por ejemplo llevo un par de añitos feliz y contento. Y a Flickr no parece que se le vaya a acabar la mecha en una buena temporada.

PHP Speedy

PHP Speedy es un script que te permite comprimir todos tus archivos js y tus css para así disminuir el número de peticiones y, consecuentemente, el tiempo de carga de la web. También tiene otras cosillas bastante interesantes.

Ha tenido gran acogida en la red, es bastante sencillo de poner en práctica aunque no está exento de problemas en algunas configuraciones. Es cuestión de probarlo y emitir veredicto. PHP Speedy [en] + instalación de plugin para Wordpress.

Y hasta aquí! Yahoo, Exceptional Performance [en] es un sitio bastante interesante en el que poder leer más información sobre este tema.

Mas de 80 packs de iconos totalmente gratis, elegidos desde devianART, especialmente útiles para tus necesidades de diseño o decoración de tu computadora. Parte 1 Y Parte 2.

Las chuletas son un bien preciado. Lo mismo da que sean de Photoshop, jQuery o de postres con chocolate.

La última que me he guardado es del tema SEO. Está bastante completita y para los no iniciados en este tema, aclara bastantes puntos referentes al tema de la optimización para buscadores. Aunque no dirá nada nuevo (ni la considero necesaria) si ya has metido un poco la zarpa en ello.

:: Chuleta para SEO [en] ::

Extensa lista con mas de 300 menús de navegación, desde el buen y clásico HTML hasta jQuery y MooTools, ideal para desarrollares Web.

Porque no se puede decir otra cosa de un encuentro de este tipo, donde se puede escuchar a diseñadores, creativos, responsables de agencias… Si la cita del año pasado fue un ejemplo de como la gente de Domestika consiguió organizar un congreso en el que cerca de 900 personas pudimos disfrutar del trabajo de las mejores agencias y creativos del momento, la de este año promete seguir el mismo camino. Durante dos días, hoy viernes y mañana sábado podremos saber que piensan y como trabajan gente de este calibre:

Viernes 12:
Alberto Corazón, Albert Folch Studio, Adobe, Rufus Deuchler, AKQA, Zinkia, Farfar, Spin, Lamosca

Sábado 13:
Apple, Helio Vega, mesa redonda sobre Motion graphics en España (Cocoe, Tavo Ponce, Iikii, TBWA), Domestika, Jung von Matt, Waskman, Brand New School, Joshua Davis, Carlos Ulloa.

La verdad es que hay muchos tipos de temáticas y de congresos en estos días, pero pocos tan divertidos como éste. Un encuentro para disfrutar ;)

Toda la información en la web de MadinSpain

Nada menos que desarrollada por Group94, una de nuestras agencias favoritas. Si el año pasado MadinSpain nos gustó a rabiar, este año promete ser de nuevo la cita obligada con lo mejor del diseño a nivel internacional. Estaremos muy pendientes de las preparativos del equipo de Domestika, responsable del sarao.

De momento un pantallazo de su nueva web, que incluye el juego “Mad from Waiting”: a matar asteorides ;)

| View | Upload your own

Tan importante como el contenido de calidad, que es aquel que al final te motiva para que permanezcas fiel a una web, es la persuasión. Conseguir que los usuarios sean clientes. Lograr que no te abandonen, haciendo que se vuelve un usuario activo, que converse y se convierta para la causa. Para llegar a ello tenemos que conocer primeros los problemas que existen, y a eso se dedica esta presentación de Persuabilidad, que explica claro y con ejemplos como no equivocarse, y persuadir al público cuando entra en tu web.

Olvidamos muchas veces que la primera impresión es la que cuenta. Y en el mundo interactivo de Internet, eso se refiere a la página de inicio, y a cómo debe ser ésta. Llamemóslo quedar hipnotizados, pero cuanta mayor facilidad se dé, con mayor probabilidad lograremos que los primeros usuarios hagan la labor de prescriptor necesaria para propagar el boca a boca. Escuchar algo como “la página de inicio tarda mucho en cargar o es horrorosa”, no es algo que persuada al usuario a investigar más. Así de claro.

(more…)

(more…)

(more…)

Flash, una herramienta muy útil para la difusión de audio y vídeo, se usa por regla general para construir absurdos sitios de diseño, inaccesibles, poco usables y que devoran ancho de banda con pesadas intros que no sirven más que para halagar el ego de quienes los construyen.

Ripoll siempre haciendo amigos, se estrena en su columna en El País. (Vía Domestika)

Ya he recibido unos cuantos correos en los que me preguntáis cómo se hace lo de la sección “destacados” de la zona lateral de la web. Generalmente me limito a responder que tan sólo se trata de la SmoothGallery [en] modificada por los amiguetes de GamesAjare y retoqueteada para ponerla a mi gusto.

Parece que la cosa ahora es mucho más fácil porque ha salido un plugin para Wordpress que hace exactamente lo mismo pero desde el panel de admin del CMS.

Presenta unos cuantos errorcillos por lo que veo en los comentarios y alguna que otra limitación pero viendo la expectación que ha causado, estoy seguro que lo irán mejorando poco a poco.

:: Featured Content Gallery plugin [en] ::

Mini pack de enlaces (enfocados sobre todo a tema web) que se me acumulaban:

Desde Xyberneticos me traigo Effect Generator [en] para hacer animaciones sencillotas realizadas en Flash sin necesidad del susodicho.

Desde Sentidoweb una interesante (y de valor “cuasincalculable”) tabla de propiedades CSS en gestores de e-mail [en]

Vía Vecindad Gráfica, nos vamos al site de Kemie para descubrir como integrar sIFR usando jQuery en nuestras webs. Ole!

Carlos ha preparado una plantilla para presentar nuestros diseños webs. Se trata de un psd por capas en el que encontraremos la interfaz de explorer y firefox tanto en su versión windows como linuxera (ubuntu). Scrolls, botón de feed,… todo!

Por cierto, que Google comienza a indexar contenido Flash. Bastante limitado de momento pero el camino se hace andando.
Aprovecho para comentar que me molesta (y mucho) la postura de la gente que habla por hablar cuando el tema es Flash. Que si no se puede hacer tal cosa, que si esto, que si lo otro… Antes de hablar, hay que informarse un poquito mejor. Yo de Flash, cero patatero, pero no voy diciendo por ahí que es el horror.

Mi no al target=”_blank” sigue vigente. Había encontrado lo que comenté en su día: dar la opción al usuario de abrir los links en ventanas nuevas o no. La gente de Smashing lo recuerda y también ofrece la opción: Should links open in new windows? [en]

Y para cerrar una recomendación de un “recién nacido”: Mina Lab, sitio experimental de diseño de interacción. Un sitio que guardar en favoritos. Gracias, alquimistas.