40 plantillas HTML/CSS gratuitas y de alta calidad.

Esta es una lista de 40 plantillas HTML/CSS de alta calidad y gratuitas. Muy útiles para usarlas como base para nuevos proyectos, inspirarse con nuevas ideas o aprender observando como están hechas. Algunas son HTML5, el estándar de la web del futuro.

La mayoría también incorporan archivos .psd con capas para modificar los gráficos, aunque es un formato de Photoshop deberían poderse abrir con Gimp.

Airlines

Descarga

Art of Business

Descarga

Big City

Descarga

(más…)

3 herramientas online para optimizar tu sitio web.

Analiza tu sitio web

Una lista de potentes herramientas online que nos permiten analizar múltiples aspectos de un sitio web, lo que nos puede servir para localizar fallos que no conocemos y encontrar soluciones:

Optimización SEO

Web SEO Analytics nos permite tener de forma rápida una visión global del éxito de nuestro sitio web. Nos ofrece desde datos sobre nuestro hosting y dominio, hasta la repercusión que tenemos dentro de las principales redes sociales. Por supuesto también nos hace un resumen de como estamos indexados dentro de los principales buscados y los directorios más importantes, así como las palabras que tienen mayor relevancia de nuestra web y los enlaces que recibimos desde paginas externas. Muy útil y completo.

webseoanalytics.com

Análisis de rendimiento

Un sitio web excesivamente lento puede hacer que perdamos muchas visitas y aunque ya tengamos uno rápido siempre hay margen para mejorar. La mayor virtud de GTmetrix es que combina las 2 mejores herramientas para analizar el rendimiento de una página web (Google Page Speed y Yahoo! YSlow), lo que nos da 2 puntuaciones diferentes y una cantidad de datos enorme sobre como acelerar la velocidad de carga. Trata desde temas tan básicos como la compresión de imágenes o el no incrustar CSS y Javascript dentro de los archivos HTML. Hasta otros más avanzados como optimizar la configuración de nuestro servidor o mejorar la forma en que los navegadores hacen cache de nuestros archivos. Muy practico, pues nos evita instalar varias extensiones en nuestro navegador para analizar el rendimiento.

gtmetrix.com

Comprobar la legibilidad del texto

A veces por cuestiones de diseño acabamos usando texto y fondos de diferentes colores, que no siempre serán fáciles de leer para todas las personas. Gracias a esta herramienta detectaremos fácilmente áreas de texto que cansarían demasiado a nuestros visitantes o supondrían un problema para gente con problemas de visión. Muy importante, pues recordemos que el contenido es lo más importante.

checkmycolours.com

¿Conoces otra herramienta que merezca estar en esta lista? (más…)

Internet Explorer y la gente rubia.

Internet explorer

Esta es una anécdota surgida en una charla con un cliente sobre la renovación de su sitio web. Se trataba de una web obsoleta realizada hace años con Frontpage y dejando de lado su anticuada estética, además se descuadraba totalmente en navegadores que no fueran Internet Explorer.

El cliente estaba empeñado en actualizar solo su parte gráfica dejando su estructura, hecha a base de tablas html. Yo le insistía en que lo más recomendable era hacer un diseño desde cero para que fuera totalmente compatible con los estándares actuales y todos los navegadores. Pero él no estaba convencido de aumentar el presupuesto, pues en su opinión, todos los internautas usan Internet Explorer para navegar. Por lo que el tema se alargó y acabe poniéndole el siguiente ejemplo:

-Imagínate que tienes una empresa que necesita una alta seguridad y quieres que todos lo clientes antes de entrar se identifiquen. Por lo que yo te ofrezco una solución tecnológica para hacer el proceso mucho más cómodo a tus clientes, poner un sensor biométrico que identificara a los clientes habituales por su apariencia y les dejara entrar directamente. ¿Que te parecería?

-Pues muy bien, me ayudaría a ofrecer un mejor servicio.

-Bien, yo instalo el sistema y lo probamos. Funciona correctamente con la mayoría de las personas pero detectamos que falla con la gente rubia. Por alguna razón el sensor tiene problemas para distinguir el pelo de color claro y esas personas tras varios intentos, necesitan finalmente sacar su documentación e identificarse manualmente. ¿Te parecería bien usar ese sistema?

-Claro que no, afectaría a muchos clientes y acabaríamos teniendo quejas.

-Bien, un sitio web es similar a ese sistema de identificación, pues también te permite ofrecerles información y servicios de forma más rápida y cómoda a tus clientes. ¿correcto?

-Sí.

-Y si te digo que en España la gente con el pelo claro supone menos del 20% de la población. Mientras que los internautas que usan navegadores diferentes de Internet Explorer se acercan al 40%.

El cliente se quedo pensando unos segundos, tras lo cual me dijo que desarrollara la web desde cero.

Un ejemplo de que muchas empresas acaban con sitios web incompatibles por  no entender realmente el mercado al que intentan adaptarse. Pero, mediante ejemplos como el citado, podemos conseguir que vean la importancia real de causarles problemas al 40% de sus clientes. (más…)

Redirige los navegadores móviles a otra versión de tu web.

Detect Mobile Browser

Cada vez los teléfonos móviles tienen más importancia en el diseño web, si hace unos años casi nadie usaba Internet desde el móvil, hoy día es un sector con un enorme crecimiento gracias a modelos como el iPhone o los nuevos Android. Eso nos plantea un problema, pues es difícil crear un sitio web que sea valido tanto para resoluciones de ordenador, como para las pequeñas pantallas de los dispositivos móviles. Y si creamos 2 versiones alternativas nos surgirá otra duda, ¿cómo filtramos a los usuarios según el dispositivo desde el que accedan?

Una respuesta a ese problema nos la da el proyecto Detect Mobile Browser que facilita código libre en diferentes lenguajes de programación (Apache .htaccess, ASP, ColdFusion, JSP, Javascript, PHP, Python y Rails) para redirigir a los usuarios de navegadores móviles a una versión especial de nuestro sitio web, que previamente hayamos adaptado.

El código es simple y claro, por lo que no nos supondrá demasiado esfuerzo integrarlo en nuestros proyectos. Además, usa una lista de navegadores bastante completa y actualizada.

También nos ofrece otra alternativa, crear direcciones basadas en su propio dominio que  filtraran a los visitantes según su navegador. Yo no le encuentro demasiada utilidad, quien querría compartir una dirección como esta:

http://detectmobilebrowser.com/www.dglibre.com|www.dglibre.com/mv

No solo resulta excesivamente largo, sino que afectaría gravemente a nuestro SEO. (más…)

¿Qué resolución real tienen la mayoría de internautas?

Cuando un diseñador web empieza un nuevo proyecto las primeras preguntas que debe hacerse son:

¿Un diseño fluido o estático? y de ser estático, ¿qué resolución usaran la mayoría de los visitantes en el sitio web?

Preguntas no siempre fáciles de responder pues aunque tengamos una idea aproximada de las resoluciones más usadas, no tenemos sobre la mesa estadísticas fiables.

Actualmente no cabe duda de quien tiene más datos sobre los internautas, Google. La cantidad de información que maneja es incluso preocupante pero en este caso nos resultara muy interesante. Partamos de la base de que es casi imposible que, durante un mes, un internauta no visite el buscador de Google o alguna web con Analytics, se puede decir que tienen todos los datos reales y además actualizados. Por eso la nueva herramienta resulta extremadamente útil:

Google Browser Size (más…)