Google Panda
Sabemos que tanto para un nuevo diseño web, como para actualizar uno ya existente, hay que dirigir todas nuestras acciones al posicionamiento en buscadores, SEO.
Esto diferencia un buen diseño web de otro y sobre todo, es una misión que depende, al menos en origen, del diseñador. Los conocimientos SEO son hoy en día imprescindibles para un diseñador. (más…)
Etiquetas HTML5 que favorecen el SEO
En este blog de diseño web hemos hablado ya de la importancia que tiene el flujo del Html sobre el posicionamiento de la web, así como la importancia que da Google a la velocidad de carga de una página para mejorar su posicionamiento.
El HTML5 facilita la clasificación de los motores de búsqueda así como la descripción de tu sitio a los usuarios. Además permite realizar una navegación mucho más rápida a través de tu web. Vamos a ver cómo…
jQuery Mobile
El diseño web específico para móviles es una realidad a la que no podemos dar la espalda.
El usuario de smartphone, no tiene el mismo tiempo, ni el mismo ancho de banda, ni el mismo tamaño de pantalla que puede tener cuando consulta esa misma web cómodamente sentado frente a su ordenador.
Es cierto que teléfonos como el iPhone, o los Android con sus navegadores y zooms, nos permiten ver perfectamente una web convencional, pero la experiencia es mucho más agradable cuando visionamos una web adaptada para estos terminales.
En numerosas ocasiones, al hacer zoom sin querer pulsas un botón o enlace y provocas la acción contraria a la deseada, en definitiva, si puedes, haz una versión mobile para tu web.
Una vez tomada la decisión, se nos plantea qué tecnología usar, podemos hacer un simple HTML adaptado o utilizar el jQuery Mobile, que es lo que nos ocupa al menos en este post y creo que en un futuro bastante largo…
Google y la velocidad de carga de una web
Hemos hablado en numerosas ocasiones de la importancia de la velocidad de carga en un diseño web. Una página web pesada perjudica la usabilidad, requiere un mayor coste (ancho de banda) y se traduce en la mayor de las ocasiones, en un abandono del usuario.
Hace unos días Matt Cutts (SEO de Google) reproducía en su blog un post el que comunicaba la incorporación de una nueva variable al algoritmo de Google, la velocidad de carga.
Este nuevo valor no variará mucho las posiciones en los resultados de búsqueda, ya que se estima que sólo afectará a un 1% de las consultas, pero aún así, es un factor que desde hace ya mucho tiempo, tanto diseñadores como programadores web, venimos teniendo muy en cuenta.
El tiempo de carga de nuestras web, depende fundamentalmente de las imágenes, CSS, javascript y flash. Deberemos pues optimizar al máximo cada uno de estos componentes.
Para optimizar el CSS, existen varios «trucos», desde reducir al mínimo la cantidad de espacios en blanco que aparecen en el archivo, a colocar una CSS distinta para cada tipo de páginas similares que forman nuestra web. También podemos hacer lo mismo con los archivos js, ya que en numerosas ocasiones además cargamos js que no van a ser utilizados en nuestra página.
Últimamente se ven imágenes enormes en sitios web, además de estar de moda, vienen fomentadas por las mayores velocidades de conexión que tenemos hoy en día, pero esto no es motivo para dejar de optimizarlas al máximo a la hora de guardarlas para web.
En todo caso, si queremos analizar nuestra web, Google y Firefox ponen a nuestra disposición un complemento para hacer un exhaustivo control de carga de cada uno de los elementos que componen nuestra web, imágenes, CSS, scripts, …
Si queréis otro complemento más vistoso e igual de fiable, también podéis usar el navegador Google Chrome, y abrir la consola javascript, en la que podréis ver también todos los tiempo de carga componente a componente (pestaña Elements).
Además de estos dos complementos, tenemos también la posibilidad de ver online la velocidad de carga de nuestras páginas, aunque de un modo más genérico.
Diseño Web. Página en Construcción.
Un año más de mi blog de diseño web !!, Feliz Año a todos.
El otro día un amigo me comentaba que si veía bien o mal el colocar una página de «en construcción» en su web, hasta poder subir al menos unos contenidos decentes.
En este post, vamos a ver si es conveniente que google indexe una página del tipo «en construcción«.
Rotar texto Html con CSS
Hoy vamos a ver otro «truco de diseño web con CSS«. Vamos a girar un texto, algo que hasta ahora no quedaba más remedio que hacerlo con una imagen. Además contamos con la ventaja de que se ve en Explorer !!, como veremos más adelante para Explorer hay que hacer algún «retoque», pero se consigue girar, que es lo importante.
Ese «truco», nos permite abrir aún más el diseño de nuestros sites, utilizando además texto en Html, lo cual significa menor peso y ayuda al posicionamiento SEO.
A continuación vamos a ver el código necesario y lo fácil que es usarlo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
<style>
body { font-family: Arial, Helvetica, sans-serif; }
.fecha {
background-color:#c02f55;
position:absolute;
padding:45px 5px 0px;
margin:0px;
}
.fecha .mes {
text-transform: uppercase;
font-size:25px;
}
.fecha .dia {
font-size:45px;
line-height:45px;
position:absolute; left:5px; top:0px;
}
.fecha .year {
display:block;
position:absolute; right:-5px; top:15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
color: #fff;
}
</style>
</head>
<body>
<div class="fecha">
<span class="dia">31</span>
<span class="mes">July</span>
<span class="year">2009</span>
</div></body>
</html>
Keywords con Google AdWords
En este blog de diseño web ya vimos una lista de sitios útiles para poder buscar las palabras más adecuadas para nuestro SEO. Seguramente la mayoría ya conozca Google AdWords para buscar palabras clave o keywords, pero pienso que puede ser útil para quien está empezando.
Usabilidad de una página web
¿Qué entendemos por un diseño web usable?.
La usabilidad es un valor empírico, ya que sus resultados son obtenidos a través de unos test realizados a una muestra de usuarios. Estos valores obtenidos no son ni buenos ni malos, sino que dependen del propósito que nos hayamos marcado o de con qué lo estemos comparando. Se trata pues de evaluar si el diseño web es válido para el propósito para el que ha sido construido.
¿Es usable tu diseño web?, para contestar a esta pregunta hay que evaluar varios factores, por separado y en conjunto, ya que todos y cada uno de ellos han de tenerse en cuenta si verdaderamente queremos que nuestra página web sea usable. Para evaluar la usabilidad de una web, deberemos de verificar la accesibilidad, la identidad, navegabilidad y contenido.
(más…)
HTML 5
Desde hace tiempo el diseño web ha tenido que ir sufriendo las diferentes lecturas de los navegadores respecto al lenguaje de etiquetas de hipertexto que se utiliza para crear y poder visualizar los contenidos de las páginas web.
El Explorer empezó llevándose mal con el Netscape y ahora lo hace con todos los demás, particularmente hace mucho tiempo que tomé la determinación de prescindir de él, sin embargo sigo comprobando que cada uno de mis diseños se vea igual en él, porque sigue siendo una gran mayoría la que lo usa (aunque no creo que los motivos sean por haberlo elegido frente a otros).
Así que maqueto para firefox, porque así me aseguro que también funcionará para los demás navegadores importantes (safari, chrome, ópera…), y luego hackeo para explorer cuando es necesario.
Con el desarrollo del nuevo HTML 5, se está tratando al parecer, de conseguir minimizar todas estas incompatibilidades. Todavía se trata de una versión beta, aunque portales de la relevancia de youtube, ya han desarrollado su versión en este lenguaje.
No intentéis acceder a este enlace con explorer, como siempre será el último en subirse al carro…
La nueva versión HTML 5, trata de añadir semántica y usabilidad implícitas en sus etiquetas, para así de este modo eliminar ambigüedad e incluso facilitar más si cabe la labor a los buscadores.
A la hora de maquetar una web, lo que hacemos hoy en día es dividir las zonas de contenido con divs, estas etiquetas son siempre la misma y las diferenciamos a través de la CSS.
HTML 5 crea nuevas etiquetas para diferenciar los «divs» más usados en el desarrollo de una página web, veamos algunas de las más importantes: (más…)
Utilidades y ayudas para el diseñador web
Son numerosas las aplicaciones y sitios webs para ayudas al diseño web. Podemos conseguir todo tipo de pinceles, fuentes, fondos, iconos,… Pero el diseño web no es sólo photoshop o flash. Un buen diseñador web tiene que saber usabilidad, usar bien las CSS, conocer las últimas aplicaciones tipo Ajax (jQuery, Mootools,…), saber qué diseño es el más apropiado para lanzar un buen ataque SEO, en definitiva, un buen diseño web debe de tener en cuenta todos estos factores.
Cada proyecto es distinto al anterior y nos obliga a estar al día tanto de las tendencias como de la tecnología a aplicar.
Este blog está lleno de utilidades para diseño web, aquí os dejo enlaces que os serán de mucha utilidad:
¿Cómo ven los buscadores nuestras webs?
En este blog de diseño web, podréis encontrar numerosas utilidades para posicionar mejor vuestra web. Hoy traemos una herramienta muy útil, se trata de una web que nos analiza cómo ven los buscadores nuestras páginas.
Como ya sabemos, cada buscador tiene su propio robot, el cual, cada x tiempo lee nuestra página para incorporar o modificar datos a su base de datos.
La primera visión que nos muestra esta herramienta, es el texto que lee el buscador al entrar en nuestra página. Tenemos además un «modo avanzado» que nos permite además seleccionar distintos robots, las dos últimas versiones del Googlebot (Google), Msnbot (Msn), Yahoo Slurp (Yahoo), Ask Jeeves/Teoma (Ask),… incluso el robot de Windows Mobile.
SEO-browser nos indica además entre otras cosas la densidad de palabra, el tiempo de carga, los tipos de enlaces (externos, internos o no-fallow).
Se trata pues de una herramienta muy útil para conocer las carencias de nuestro código o reforzar en mayor medida aquellos aspectos que queremos destacar.
Un ejemplo son los keywords. Podemos ver cómo el robot detecta las 15 primeras palabras y coloca en rojo las restantes.
SlideMenu con Mootools
Mootools es una de las librerías que más soluciones nos aportan en el diseño web. Su ligereza hacen que podamos hacer las webs más usables y vistosas.
En un post anterior, vimos cómo hacer un SlideMenu con CSS, esta vez el mismo ejemplo pero con Mootools, más fluido y con la posibilidad de añadirle más efectos. Podemos hacerlo tanto horizontal como vertical, activarlo con un clic o con un mouseover, modificar el ancho de expansión de las imágenes activas, dar efecto rebote a las aperturas, …
Pesa sólo 7,83 kb y necesitaremos la librería Mootools v1.2
Tendencias web 2009
El diseño no deja de evolucionar, cada vez vemos cosas más asombrosas, diseños que enriquecen los contenidos y que nos ayudan cada vez más a hacer más usables las webs.
Eso pasó por ejemplo con los nuevos diseños de pies de web, en los que hemos pasado de tener una zona «inhóspita» a ser un lugar con un alto contenido visual en el que el usuario se fija y navega. Esta es una solución que sin duda seguiremos viendo este año.
También hemos podido ver como cada vez son más los diseñadores que utilizan grandes imágenes de fondo. Las conexiones son cada vez más rápidas y esto hace posible poder usar fondos reales en lugar de colores. El uso de png también ha favorecido mucho lograr buenos diseños. Los navegadores actuales los leen sin problema y existen soluciones para solventar los problemas de transparencia que aparecen en los antiguos.
La tipografía grande también seguirá dejando atrás a los pequeños titulares. Las resoluciones de pantalla ahora permiten usar mayores espacios de trabajo en los que las fuentes grandes brillan con luz propia. Inlcuso he comenzado a ver cada vez más, webs que usan sIFR para meter todo tipo de fuentes, con lo que los resultados son geniales. De todos modos habría que estudiar detenidamente el tiempo de carga que supone esto.
Seguimos viendo en todos los diseños las esquinas redondeadas, con o sin sombra, creo que este tipo de cajas seguirán acompañándonos este año, así como las cabeceras que ocupan el 100% de la pantalla (tipo wordpress).
Por supuesto que las redes sociales están influenciando mucho en los diseños, la posibilidad de añadir o de que el usuario añada tus contenidos a estas redes, hace que se le de mucha importancia al espacio que ocupan las entradas a flickr, Twitter,… Desarrollando diseños cada vez más grandes y vistosos.
Las dos columnas tipo blog se imponen. Una principal más ancha con el contenido principal y otra más estrecha a la derecha con un contenido secundario. Aunque he de decir que empiezo a ver sitios con múltiples columnas como es el caso de http://labs.mozilla.com (en este caso el diseñador ha querido dar igual importancia a las 4 noticias, y la mejor manera era meter 4 columnas verticales de iguales dimensiones)
Hace años el diseño de páginas web era al revés. Las webs estaban diseñadas en dos columnas la izquierda más estrecha a menudo con el menú de navegación y luego a su lado la principal más ancha. Cuando se empezó a dar importancia al SEO, se vio que esa distribución nos perjudicaba seriamente, ya que el navegador leía primero todo el contenido de la primera columna, lo que provocaba que los textos y titulares importantes quedaban relegados detrás de cientos de líneas de código.
Así como las fuentes han aumentado de tamaño, lo mismo ocurre con las ilustraciones. Son más grandes, muy coloridas y consiguen llamar mucho la atención del usuario. Los grandes fondos ilustrados conviven con los fondos grunge, collage, blocs de notas, acuarelas,… Estos diseños aunque pudiera parecer lo contrario, han devuelto la importancia del espacio en blanco al diseño web. Todo ahora tiene más «aire», por fin nos hemos dado cuenta de la importancia que tienen los espacios en los diseños para crear un camino a la fácil lectura.
Pero sin duda alguna las herramientas que van a condicionar los nuevos diseños son las bibliotecas de Ajax, JQuery, Mootools,…
Las posibilidades son enormes, ya que simulan todo tipo de efecto y no recargan las páginas. Proporcionan muchas facilidades a la hora de navegar por la página, diseño, velocidad y usabilidad, ¿que más se puede pedir?
Y para acabar, mi profecía…
De todos es sabido la gran influencia que ha ejercido la web de apple en los diseños web. En esta ocasión mi apuesta viene dada por la navegación y gráficos de las webs creadas para móviles iphone, estoy convencido que empezaremos a ver similitudes en muchas páginas dentro de nada, el tiempo lo dirá….
Espero vuestros comentarios y sugerencias.
Demostraciones de lo que se puede llegar a hacer con JQuery
Esta es una lista de algunos sitios en los que podemos ver hasta qué punto podemos diseñar una magnífica navegación con JQuery. Además de hacer todo más intuitivo y atractivo, el tiempo de carga es infinitamente inferior a otros sistemas al no tener que recargar la página o llamar a otra. JQuery consigue darnos una navegación tan fluida, que en numerosas ocasiones no sabrás si navegas por flash o html.
Estoy convencido que estas librerías ya son presente del diseño y que cada vez veremos más sitios programados con esta tecnología. Hoy en día cualquier web de primer orden ya incorpora Ajax en sus formularios, porque además de ser más rápida la navegación conseguimos ayudas geniales para el usuario.
A continuación una serie de webs que seguro que os van a sorprender:
JQuery, varias páginas en una
Hace tiempo ya escribí un post acerca de esta característica de Ajax, la de enseñar y esconder código, dado que cada vez estoy viendo más esta práctica, he decidido reciclarlo.
Ajax ha revolucionado el diseño web. Con librerías como jQuery podemos conseguir infinidad de efectos en una página web. Entre ellos está el de cargar contenido sin necesidad de recargar la página, el ejemplo lo tenéis en la web www.sourcebits.com, esta web muestra varias páginas dentro de una úncica.
Se trata de esconder y enseñar contenido, y para hacerlo, se sirve de efectos de desplazamiento o fundidos. En esta web podemos ver como se pliegan los contenidos que queremos abandonar, para luego desplegar los nuevos que hemos solicitado. Visualmente todo esto es genial pero como todo tiene sus pros y sus contras.
A favor: la carga de contenidos es muy rápida, la fluidez de navegación puede llegar a ser muy buena y el impacto visual es enorme, ante la novedad, el usuario recordará tu web como algo muy innovador.
Nos da la opción de generar nuevas url’s dentro de la actual del tipo «#loquesea», eso significa que nos quitamos de un plumazo los problemas SEO que pudiese originar.
Sinceramente no veo ningún problema en utilizar esta librería, creo que es futuro y como diseñadores deberíamos empezar a implantarlo en nuestros futuros proyectos.
Para saber más sobre cómo funciona y descargarse la librería, visita este post «contenidos con jQuery«
Michael Kutsche
He encontrado esta web y he quedado totalmente sorprendido por el trabajo de Michael Kutsche, me parece buenísimo, original y que cubre una amplio abanico de temáticas.
Especialista en 3D y ha diseñado para SEGA, Sony, BMW, …. Pero como una imagen vale más que mil palabras os recomiendo que os deis un paseo por su portfolio.
Google Sitelinks
Seguramente habréis observado que al realizar un búsqueda en Google, existen resultados que bajo la página principal del sitio muestran un listado «categorías o subcarpetas» del sitio.
Hace tiempo tuve un problema con un cliente, al que le habían indexado un enlace que no le interesaba, y hoy un compañero me ha vuelto a preguntar por este tipo de resultado, así que he decidido hacer este post para todos aquellos que tengáis interés en modificar o intentar obtener Google-Sitelinks
Diseña tu firma graffitera online
El movimiento graffitero nació en NY en los años 60’s. Desde entonces hasta ahora, podemos ver cómo este movimiento «artístico» urbano ha tomado calles, transportes públicos y en definitiva, todo tipo de propiedad privada.
Existen verdaderas obras de arte, dignas de ser expuestas en cualquier museo, pero por desgracia, la gran mayoría de firmas que vemos por la calle, son nefastos intentos de expresión artística, que lo único que consiguen es ensuciar el ya por si «sucio paisaje urbano». A estos últimos, les recomiendo que practiquen su «técnica» con esta aplicación online, seguro que les vendrá muy bien…
¿Qué mira un usuario cuando hace una consulta en el buscador?
Ya en un post anterior, vimos ¿en qué se fija el usuario, cuando visita nuestra web?. En este caso, el estudio de «eye tracking» elaborado por eyetools, nos desvela los usos y costumbres del usuario de google ante el resultado de una búsqueda, con el llamado «Triángulo de Oro«. Vamos a ver estos resultados y vamos a ampliarlos con otro estudio realizado por enquiro, con los resultados para Yahoo y Msn.
Utilidades SEO
A menudo nos hemos visto buscando entre las páginas de resultados para ver en qué posición nos encontrabamos, pues bien, existe una utilidad para firefox (para quien si no…) llamada «Rank Checker«, que nos permite introducir una url y una o más keywords y controlar mediante un click la posición que ocupamos en Google, Yahoo o Live. Es muy rápida y además de decirnos la posición, también nos indica con qué página de nuestra web o blog, estamos consiguiendo esa posición.
Además nos da la opción de exportar los resultados en formato .CSV
Me parece una utilidad muy interesante y útil, por lo que os recomiendo que os la descargueis. Además como todo en firefox, es GRATIS 😉
¿Y si además quiero saber el page rank, las referencias, los links que me apuntan….? Pues entonces, otra vez más, recurriremos al fantástico firefox y su plugin «SeoQuake«. Con esta extensión de firefox puedes en todo momento saber todos los datos SEO de la página que estás visitando, y no sólo eso, cuando haces una búsqueda en google, te da todos los datos decada uno de los resultados.
