Desde el punto de vista del diseño web siempre me ha parecido fundamental controlar y medir que navegadores de internet utilizan los usuarios en los sitios web en los que trabajo y que resoluciones de pantalla, además de otros indicadores igualmente importantes.

La evolución de uso de los navegadores de internet en tan solo un año ha sido lo bastante significativa como para tenerla en cuenta a nivel de diseño web.

Es un dato muy importante sobre todo por asegurarnos de que el CSS va a funcionar igual en todos los navegadores empleados y también asegurarnos de que el sitio web se va a visualizar igual en cualquier navegador, sin hacer cosas raras si vemos la web en Firefox, Opera, Chrome o en Internet Explorer.

Estudiando recientemente la evolución del uso de navegadores de internet por parte de los usuarios en varios perfiles de Google Analytics que mido, en los que hay sitios web de temátcias muy diferentes, se aprecian cambios muy importantes en el uso de navegadores web por parte de los usuarios. Como muestra, esta comparación tipo (una media entre 5 sitios web de temáticas distintas) entre el uso de navegadores en el primer trimestre de 2009 y en el primer trimestre de 2010:

Comparativa de uso de navegadores de internet entre el primer trimestre de 2009 y el primer trimestre de 2010.

Podemos observar cosas bastante interesantes:

1. Internet Explorer pierde una cuota de uso de casi el 8,5%, y los grandes beneficiados son Chrome y Safari, y no Firefox, como se podría intuir en un principio.
2. Firefox se consolida como el segundo navegador en uso, pero no incrementa sus usuarios de forma relevante. Se mantiene con un nada despreciable 21%.
3. El crecimiento de Chrome y Safari es muy llamativo y significativo, como lo es igualmente el estancamiento de Opera. Con porcentajes entre el 3% y el 6% de la navegación total de un sitio web ya no podemos considerar a Chrome o Safari navegadores secundarios o de freaks o de gente que no es cliente potencial. Con ese volumen, ya no podemos.

Este tipo de información pone de manifiesto la importancia de realizar diseños web que sean 100% visualizables y funcionales (por ejemplo, que el introducir un user y password funcione en todos los navegadores) en la mayor parte de los navegadores, porque si no os arriesgais a perder visitas si la web no está preparada para todos los navegadores.

Puede afirmarse que si una empresa no tiene su web optimizada para ser visualizada y operativa en Firefox, por ejemplo, puede estar perdiendo un tráfico entre el 15 y el 20% del total, simplemente porque su home no se ve bien o porque no funciona correctamente (formularios, logins, etc.). Como es lógico, aquí hay un problema grande y más aún si mueves tu negocio a través de internet. Lo recomendable es concebir la web para que funcione correctamente en todos los navegadores de internet.

Y ya para finalizar, si queremos detenernos en las versiones específicas de navegadores es muy llamativa la evolución media de uso de Internet Explorer entre el primer trimestre de 2009 y el de 2010:

Estadistica media de uso de las diferentes versiones de Internet Explorer entre el primer trimestre de 2009 y el de 2010.

Como puede verse la evolución de uso de las diferentes versiones de Internet Explorer hace que hoy en día nos veamos obligados a seguir pensando en el dichoso IE6, con todos los problemas de CSS que conlleva, ya que el reparto de versiones de Internet Explorer aún le da cuotas de uso muy altas, cercanas al 20% de la navegación de internet llevada a cabo con IE, lo que supone más o menos y según los datos que hemos ido viendo aquí el 13,7% del total de la navegación de un sitio web, por lo que de momento nos guste o no debemos seguir acordándonos de Internet Explorer 6.

Las tendencias de uso cambian bastante de un año para otro y es muy importante controlar este tipo de información, ya que si una nueva tecnología relacionada con internet, como pueden ser los navegadores, irrumpe con fuerza y no somos capaces de verlo corremos un riesgo grande de perder tráfico de clientes potenciales o de darles un servicio nefasto en lo referente a nuestro sitio web. Debemos probar nuestros diseños con todas las variantes principales de navegadores para garantziar el sevicio a las personas que van a navegar por ellas.

La página de resultados de google.es (o SERP) que me he encontrado es muy muy parecida a la SERP de Bing

Pagina de resultados nueva de Google.es para la búsqueda "alquilar coche" - Clic sobre la imagen para verla grande.

Por comparar y entrender el porque llama la atencion tanto este cambio, aquí podeis ver una página de resultados del buscador Bing:

Pagina de resultados del buscador Bing para la búsqueda "rent a car" - Clic sobre la imagen para verla grande.

Como puede verse a simple vista, la disposición de los elementos de la nueva página de resultados de Google es muy similar a la de Bing, sobre todo en lo referente al menú vertical de la parte izquierda, algo nuevo en google y que fue una apuesta de Bing. ¿Es este el futuro de la página de resultados de Google?

Como el tema me ha llamado mucho la atención, he abierto otro navegador distinto (Firefox) con una sesión nueva y he entrado en google.es a ver que me encontraba, y ahí no, me ha salido la página de resultados a la que estaba acostumbrado, habiendo hecho la misma búsqueda, “alquilar coche”:

Página de resultados "clásica" de google para la búsqueda "alquilar coche" - Clic para ver la imagen grande

Al subir varios grados mi mosqueo he abierto otro navegador más (IE8), con otra sesión nueva y he vuelto a entrar en google.es y tampoco me ha salido la página de resultados nueva, sino la última a la que estaba acostumbrado, así que deduzco que en Google están probando esta nueva interfaz de la página de resultados de forma aleatoria y que supone un cambio a nivel de usabilidad y de diseño bastante grande respecto a la página de resultados a la que estábamos acostumbrados. Además he visto que otras personas se han percatado de este cambio, como es el caso del Señor Muñoz, que habla de lo mismo en este post: la nueva interfaz gráfica de Google

Los principales cambios que pueden apreciarse en la nueva página de resultados de google.es son:

Hay un menú a la izquierda de los resultados para que podamos acceder desde allí a la misma búsqueda en Maps, en Vídeos, filtrar la búsqueda por fechas o similares. Además esas opciones están representadas por iconos gráficos, lo que les da una relevancia visual importante, haciendo que el usuario repare mucho antes en ellos que en los snippets tradicionales.

Aunque se nos dice el número aproximado de resultados para la búsqueda que hemos hecho, el tamaño de la fuente es menor y el color es un gris apagado que hace que sea menos visible al ojo. Además, se ha suprimido el número de resultados que estamos viendo en la página, mientras en la página de resultados “clásica” vemos que estamos viendo los resultados del 1 al 10, en la nueva, esta información no se indica.
La localización geográfica cobra un protagonismo importante, ya que directamente bajo la caja de búsqueda aparece un icono indicándonos donde estamos ubicados, o donde cree Google que estamos, ya que en estos ejemplos dice que estoy en Barcelona, cuando estoy en Zaragoza. Esta geolocalización ya está presente en la página de resultados “clásica” pero no de una forma tan aparente.
La caja de búsqueda tiene mayor tamaño y el texto aparece en negrita. El botón “Buscar” también ha cambiado. Además, el tamaño de la fuente en la búsqueda se ha incrementado un pixel y hay otros cambios en el grafismo: el logo de Google es menos plano y juega con sutiles degradados, etc.

Eso sí, en lo referente al posicionamiento, nada parece cambiar, los resultados y su orden son los mismos en ambas interfaces de búsqueda, pero lo que sí puede cambiar con esta ¿mejora? es la clicabilidad de los resultados, tanto orgánicos como de pago, ya que a simple vista, los resultados orgánicos parecen tener menos protagonismo que los de pago o el menú de navegación a la izquierda, lo que puede redundar en menos clics en los resultados SEO y más clics para los de pago o las opciones de navegación de la búsqueda.

Al tratarse de una prueba más o menos aleatoria hay que deducir que Google está probando esta nueva página de resultados, tan “inspirada” en Bing. Si la implanta o no el tiempo nos lo dirá, pero lo que puede suceder con esta nueva página de resultados, aunque es una incógnita, puede pasar por:

1. Descenso en los clics de los resultados orgánicos, dado que éstos, con la inclusión del menú a la izquierda, resultan menos visibles al usuario.
2. Al implantar tanto la geolocalización y opciones de búsqueda avanzada desde la primera página de resultados (filtrar por fechas, etc) se incrementara la diferencia de uso de los buscadores, abriendo una brecha muy grande entre los usuarios avanzados y los usuarios de perfil bajo. El usuario avanzado aprenderá a customizar su búsqueda al máximo, pero el usuario novato se quedara como estaba y además verá sus búsquedas muy sesgadas por la geolocalización, la busqueda personalizada, etc.
3. Una importancia mayor de los resultados de negocios locales, con mapas, dado que ahora todavía tienen mayor visibilidad ya que quedan como elemento más relevante de la búsqueda, más que antes incluso, ya que al añadir más iconos y opciones se presentan como la opción más fácil en la que hacer clic.

Por supuesto todo esto son conjeturas y especulaciones, pero no creo que Google hiciera una prueba de este tipo si no tuviera en mente cambiar su manera de presentar los resultados, ¿o no?

El día del vendedor de comercio electrónico en la V Feria de Tiendas Virtuales, en Walqa, pintaba muy bien, con ponentes de mucho nivel y prestigio a nivel nacional.

En la web de la V Feria de Tiendas Virtuales puede consultarse mucha informacion sobre el evento.

Como elegí esos tres eventos me perdí a Fernando Maciá y a Javier Gosende, y aunque me hubiera encantado, la verdad es que como ya le he visto 4 o 5 veces, y siempre con un enorme nivel, preferí ir a ver a ponentes que aún no había visto en eventos de este tipo.

Con 8 horitas de traca por delante me presenté en Walqa a eso de las 9:15, y tengo que decir que como no había indicaciones de hacia donde ir tuve que entrar hasta en dos edificios y preguntar donde eran los talleres varias veces hasta que supieron orientarme. De hecho llegaron a decirme que no había nada ese día y que me había equivocado, pero bueno, dejemoslo como anécdota.

Taller “Optimización y consejos para tiendas virtuales de éxito”, con Jordi Oller.

Esperaba mucho de este taller, lo primero por su título, muy goloso, con palabras clave para el negocio en internet como pueden ser optimización y éxito, y también por el ponente, Jordi Oller.

Lo primero que hizo Jordi al llegar a una sala con todas las plazas cubiertas fue hacer que nos presentaramos, indicando de que sector veníamos y diciendo la URL de nuestro comercio electrónico, para luego poder hacer algún ejercicio práctico. La verdad es que al presentarnos quedo claro que había niveles muy dispares, desde gente con mucho recorrido en el comercio electrónico, como los chavalotes de Andotel o la gente de Aceros de Hispania, y luego también bastante gente que no tenía comercio electrónico y que solo iba a escuchar y aprender, lo que está muy bien porque da a entender que el comercio electrónico cada vez interesa más y se ve como una solución importante, pero tiene su lado negativo, que es que este tipo de talleres se resienten al tener perfiles con niveles tan distintos, lo que supone no poder hablar de cuestiones muy avanzadas o tener que hablar de cuestiones muy básicas forzosamente.

Lo que Jordi Oller hizo en su taller fue hacer un repaso muy exhaustivo a las cuestiones principales que deben tenerse en cuenta a la hora de mantener una tienda virtual, indicando un buen número de consejos para cada cosa: diseño, seguridad, marketing, usabilidad, etc. Lo bueno de este tipo de taller es que te permite ver si cumples con todo o te falta mucho, o poco. Lo resumió todo en una presentación muy completa llamada “Optimización de tiendas virtuales” que recomiendo leer a cualquier interesado en el tema del comercio electrónico, tenga o no una tienda online, ya que reume una serie de conceptos básicos y pueden verse así de un plumazo.

Principalmente Jordi insitió mucho en los siguientes temas:

• En internet solo disponemos de dos sentidos: la vista y el oido, por lo que el diseño de la tienda virtual, tanto desde el punto de vista gráfico como desde la usabilidad, es fundamental.
• Recalcó en numerosas ocasiones la importancia del botón de compra, lo atractivo que debe ser y como debemos jugar con él.
• Insistió mucho en la importancia de disponer los contenidos en forma de L, y aunque en su presentación incluyó una L en su posición normal, supongo que se referiría a la disposición en forma de L invertida o “triángulo de oro”, que es la zona con más visibilidad de un sitio web y se compone del triángulo que hace nuestra vista de izquierda a derecha y de arriba a abajo, formando esa figura geométrica.
• Debemos ser visibles e incluirnos en directorios específicos de comercio electrónico, como redtienda.es o tendalia.com
• Aparte de la importancia de la seguridad, citó unas cuantas aplicaciones interesantes para hacer chat de soporte online, como son PHPLive, Kayako, Live Support y Crafty Syntax.

Invertimos mucho de las 4 horas en diferentes dudas del público, lo cual está muy bien, pero eché en falta que en tanto tiempo no hiciéramos ningún caso práctico con las webs que cada asistente habíamos aportado al principio. Del mismo modo, hubo preguntas, como la que hice yo mismo sobre la integración de las pasarelas de pago en el diseño de un sitio web o el orden de petición de los datos de un formulario de compra, en las que Jordi no entro en profundidad, y fue una pena, dada su experiencia en el tema.

En resumen, fue un buen taller básico sobre aspectos a tener en cuenta para el matenimiento estándar de un comercio electrónico y el día a día, aunque por ejemplo no se habló de herramientas fundamentales para el comercio electrónico, como Analytics u Optimizer, por citar solo dos.

Seminario “e-commerce en las redes sociales”, con Jordi Oller.

Por la tarde repetí con Jordi Oller, porque el título y tema del seminario me parecían muy interesantes, centrándose en un tema como el hacer comercio electrónico apoyándose en las redes sociales.

Jordi abordó el tema centrándose en cinco apartados muy concretos de integración del comercio electrónico con las redes sociales, pero eso sí, hablando siempre de Facebook y mencionando aplicaciones y posibilidades de Facebook. Los cinco ejes del taller fueron:

1. Crear una página de Facebook de tu comercio electrónico. Explico como hacerlo y las posibilidades de viralidad que ello supone, además de poder acceder a estadísticas sobre los visitantes de nuestra página, lo que nos permite tener un perfil preciso de las personas interesadas en nuestros productos.
2. Marketing en Facebook utilizando los anuncios de la red social, que nos permiten segmentar nuestra publicidad de manera muy optimizada para enfocarla solo al público potencial de nuestros productos o servicios.
3. Integración de Fan Box, el widget de Facebook, en nuestros comercios electrónicos, lo que nos permite socializar nuestras tiendas e ir incrementando nuestro número de fans.
4. Integración de Facebook Connect
5. Creación de aplicaciones para Facebook.

Al igual que en su taller de la mañana, un buen resumen para iniciarse en las cuestiones relativas a Facebook y a promocionar nuestras tiendas online en la red social, aunque hubiera estado bien algo más de chicha, como por ejemplo conocer experiencias reales de comercios electrónicos con fuerte presencia en Facebook o poder analizar alguna campaña con buenos CTRs en la red social. Aquí podeis consultar su presentación, “Tiendas virtuales en las redes sociales”

Seminario “Como mejorar la usabilidad de mi tienda virtual”, de Daniel Torres Burriel

Supongo que como la mayoría de personas que nos dedicamos a esto de internet desde un punto de vista que incluye diseño, usabilidad, etc conozco de sobras a Torres Burriel y su trabajo, siempre relacionado con la usabilidad de los sitios web, fundamental a nivel de negocio.

Para mi su seminario fue lo mejor de esta V Feria de Tiendas Virtuales, por el tono 100% práctico (viendo un caso concreto, el del rediseño del sitio web de la asociación de empresas de turismo deportivo de Aragón) y por su aportación basada en sus experiencias en el trato con clientes y en el trabajo de proyectos específicos.

Torres Burriel hizo hincapie repetidas veces en la importancia de que el concepto de lo que queremos hacer en un sitio web esté totalmente claro y perfectamente definido anets de su realización, lo que implica un trabajo previo de conceptualización bastante duro, pero muy necesario para que el resultado final sea un reflejo fiel de la idea inicial y además suponga la mejor manera de conseguir los objetivos planteados.

En su seminario  “Cómo mejorar la usabilidad de mi tienda online“, Torres Burriel explico como mejorar la usabilidad de nuestras tiendas online a través del trabajo en tres áreas:

1. Mejoras desde la conceptualización. Aclarar todos los conceptos previos del proyecto (funcionalidad, objetivos, alcance, quien es quien en el proyecto, etc.), analizar los riesgos y elaborar un plan de trabajo, y finalmente plasmar todo ello en forma de wireframes o bocetos del sitio web, previos al diseño final y que constituyen su “guión”.
2. Mejoras a partir del test de usuarios. El test de usuarios es una prueba de usabilidad que se basa en la observación y análisis de como un grupo de usuarios reales utiliza un sitio web (definición de Yusef Hassan), y partiendo de ello podemos realizar un análisis exhaustivo y de gran valor que permita mejorar el sitio web notablemente (identificar puntos no claros para el usuario como rótulos, botones, etc., mejorar funcionalidades que el usuario echa en falta, etc.). El test de usuarios debe hacerse cuanto antes mejor, incluso sobre el boceto, y puede hacerse de forma profesional o incluso con personas de nuestro entorno, dejando claro que queremos que hagan los usuarios y que les vamos a pedir. Esta parte fue muy muy intersante, ya que Torres Burriel incluso detalló como hacer una matriz de resultados de un test de usabilidad o como hacer un test paso a paso.
3. Mejoras a partir del diseño visual. En palabras de Torres Burriel, “ponga un diseñador en su vida” (no puedo estar más de acuerdo con esta frase, aunque desde luego no sirve cualquier diseñador). Lo que hizo en este apartado fue mostrarnos como el diseño visual, basado en el trabajo de conceptualización previo, puede hacer que un sitio web represente la idea del producto fielmente y se convierta en un vendedor inmejorable, poniendo como ejemplo, entre otros, a floresfrescas.com o gingerbreadusa.com

Desde luego, el mejor y más útil seminario al que asistí, así que os reomiendo leer su presentación, y lo que es más importante, asimialrla con calma e incorporala a nuestro trabajo de una manera personalizada según las necesidades de cada uno.

Para rematar el día, pude terminar charlando un buen rato con Torres Burriel, Fernando Maciá o Cristobal López, muy buena compañía en muy buen ambiente. Solo espero que haya más ediciones y que los ponentes más fuertes, como Maciá, Gosende o Torres Burriel, repitan año tras año, porque eso es indicativo del interés en el comercio electrónico y de que se van haciendo las cosas bien.

Hasta el año que viene!!!

Un test multivariante nos permite comprobar el rendimiento de varias alternativas de un elemento en un diseño web. Para mejorar la conversión es una muy buena herramienta.

Dicho esto, en el caso práctico y real del que voy a hablar aquí, tenemos una web de comercio electrónico, y queríamos comprobar, tras leer un artículo, si la posibilidad de que un usuario haga clic sobre el botón de compra de un producto varia en función del color de éste. Es decir, si tengo un botón de “Iniciar compra” de un producto, ¿el color de este botón influye en la decisión del usuario de hacer clic en él, y por tanto comprar?.

En este test multivariante se utilizaron 3 colores diferentes para el botón de compra, con el objetivo de ver cual ofrecía mayor ratio de conversión.

Por supuesto, yo tengo claro que sí, que influye y mucho, y hay montones de estudios, posts y artículos hablando de ello, porque los colores tienen una asociación inconsciente con el comportamiento del usuario. Pero con creerlo o intuirlo no vale, así que decidí hacer un test multivariante para determinar si el color del botón de “Iniciar compra” influía en el CTR, el índice de clics, en ese botón de compra de los usuarios, en qué medida y qué margen de mejora teníamos en la web.

La prueba se planteó entre tres colores del botón de acción principal. Los colores elegidos fueron el azul, color original, el naranja y el rojo. Anteriormente hicimos otra prueba con más colores en la variación de los que eliminamos aquellos que funcionaron peor que el original: como el color verde, por ejemplo. Así que este segundo test la intención era clara: determinar cual de los tres colores elegidos ofrecía un mayor ratio de clic en el botón objeto del test, un dato muy importante teniendo en cuenta que hablamos del botón que corresponde con la acción de iniciar una compra.

Hacer un test multivariante para determinar el botón más adecuado para una acción que supone una conversión o acción de compra tiene un gran valor comercial.

Desde el principio la idea era probar esas alternativas durante un mes completo, para poder tener un volumen de clics y datos importantes y que permitieran que los cambios en el CTR del botón no se debieran a circunstancias puntuales de un día concreto.

¿Qué cuales fueron los resultados del test multivariante? Aquí los teneis:

Gráfico de la evolución del test multivariante en el que se testearon 3 colroes diferentes para el mismo botón a ver cual ofrecia mejor CTR.

Lógicamente, lo importante aquí es lo que los datos de la prueba nos dicen, no nuestra opinión personal o las sensaciones subjetivas que pudiéramos tener respecto a un color u otro. Y lo que vemos aquí es que ambas versiones alternativas del botón funcionan mejor que la original y ofrecen un mejor CTR y, por tanto, incrementan las probabilidades de compra del producto, ya que cuanta más gente inicie el proceso de compra, más gente lo terminara, siempre y cuando el proceso de compra esté bien pensado y concebido, pero esa es otra historia.

Como puede verse en el gráfico, el botón anaranjado (representado en la gráfica por la línea naranja) nos da una mejora de más del 30% (un 5,38% de conversión frente a un 4,10% del modelo original) en el indice de CTR en el botón. La versión del botón en color rojo se ha quedado en una mejora del CTR de un 27%.

Finalmente, la decisión gracias a los datos de este test multivariante es sencilla: implantaremos el color naranja en el botón de “Iniciar compra”.

Lo malo es que la profesión de diseñador web alberga a muchos perfiles, algunos muy profesionales y conscientes de lo que supone el diseño de web y otros que simplemente se apuntan al carro porque saben manejar Dreamweaver un poco por encima y consideran que con eso ya son diseñadores web.

Aquí tenemos un diseño web reciente, de 2008 o 2009, aunque no lo parezca, ¿os atreveis a llamar profesional del diseño web a su autor?

La principal característica del diseño web y la que lo diferencia de otros tipos de diseño, es que requiere un buen conocimiento de conceptos como navegadores, usabilidad, arquitectura de la información, resoluciones, código HTML y demás zarandajas técnicas y no técnicas directamente relacionadas con el medio en el que trabaja el diseñador web: internet. En resumen, puedes ser un gran diseñador gráfico, pero eso no te convierte en un buen diseñador web, y la fórmula también se aplica a la inversa.

Después de conocer a muchos y trabajar yo mismo como diseñador web unos cuantos años, participar en procesos de selección e incluso hacerlos, os incluyo unas listas de mínimos que SI y que NO debe cumplir un diseñador web para poder considerarlo como tal. La lista podría ampliarse mucho en ambos sentidos, pero se trata de ver lo básico que debe tener y no tener un diseñador web.

Lo que SÍ debe saber o tener un diseñador web que sabe diseñar webs:

1. En su portafolio deben aparecer varias direcciones web diseñadas por él mismo. Si un diseñador web no tiene URLs en su portafolio solo hay dos posibilidades: no sabe hacer webs o las que ha hecho le averguenzan y no las pone en su curriculum. En cualquier caso nada bueno.
2. Debe conocer y utilizar CSS. Hoy en día, por muchísimos factores, el uso de CSS es imprescindible en el diseño web. Si un diseñador web no utiliza CSS generalmente es porque no se ha molestado en aprender y estar actualizado o porque sigue diseñando webs basadas en el uso de flash o en tablas y recorte de imágenes.
3. Sabrá trabajar con código HTML. El diseño web, guste o no, no se limita solo al diseño gráfico, sino que también hay que controlar y utilizar algo de código HTML y ser más o menos hábil con editores de HTML. Un buen diseñador web sabrá lo que es una etiqueta <h1> o una etiqueta <head> o una etiqueta <alt>, simplemente porque son hoy en día etiquetas indispensables en cualquier diseño web.
4. La disposición de los elementos en los sitios web que haya diseñado será como mínimo, de sentido común. La información será fácilmente accesible, la navegación será clara, etc. Independientemente del grafismo o de los colores empleados, la web será comprensible por el público al que vaya dirigida.
5. Un buen diseñador web hará un diseño pensado para cualquier navegador actual y resolución y tendrá en cuenta una serie de mínimos en cuanto a estructura web, como por ejemplo, no abusar de JavaScript o no colocar Flash sin cargador, etc. Con la situación actual, por ejemplo, es impensable que un diseño no funcione como mínimo en Internet Explorer 6, 7 y 8, Firefox y Chrome. Si por ejemplo un diseñador web te dice que no sabe porque versión vamos de Internet Explorer o que que es eso de Chrome, él mismo se pone en su sitio.

Por ejemplo, aquí tenemos un buen par de ejemplos de diseños web muy bien concebidos, aunque muy diferentes entre sí:

El diseño web de Product Planner: claro, sencillo, limpio y muy profesional. Directamente a los valores del producto.

La web de SMS Parking también se centra en las virtudes del servicio, pero se orienta a su público objetivo a través de un grafismo que busca complicidad.

¿Y como saber cuando un diseñador web NO es un buen diseñador web?. Lo que te da pistas de que NO es un buen diseñador web:

1. Su opinión sobre el diseño de la web es la más importante y no admite ningún tipo de crítica o corrección por obvia que parezca. Su opinión es importante, pero no es la más importante. Un buen diseñador web debe entender que el diseño debe obedecer a un objetivo concreto y que está dentro de una estrategia. Un diseño debe servir a un propósito, y no ser un vehículo de placer del propio diseñador.
2. Si no domina la teoría del color o del sentido común. Si un diseñador combina verde y rojo y/o utiliza 7 fuentes en un diseño que además no son de las más comunes. Los diseñadores que utilizan 40 colores en un diseño no son, en general, muy recomendables.
3. Si utiliza marcos, popups, keywords en el color del fondo de la web o similares. Si aún usa ese tipo de técnicas es que no se actualiza o peor aún, le da igual.
4. Todos sus diseños son exactamente iguales, con pequeños cambios. Eso significa que ha aprendido a hacer una web y la explota hasta la saciedad.
5. El peso de la web, la optimización de imágenes o el donde colocar el menú de navegación le da absolutamente igual o lo hace sin ningún tipo de lógica o siguiendo su instinto. Cualquiera de estas cosas es mala cosa, amigos.

No voy a poner ningún ejemplo de web horrorosa porque hay montones por todos lados, y hay montones de webs que recopilan webs mal hechas como la famosa QWeb.

A ver, es cierto que se puede hacer un buen diseñador web de alguien que tiene interés en aprender y conceptos de base, bien por sus estudios, bien por su experiencia profesional, y también es verdad que el que alguien, por ejemplo, no sepa como colocar la información no le convierte en un mal diseñador, pero creo que en general estos 5 SIes y estos 5 NOes reflejan muy bien lo que debe ser un perfil de diseñador web profesional hoy en día.

Google Analytics puede ayudarte con el diseño web en lo referente a los navegadores empleados por los usuarios.

A nivel de diseño web uno de los valores más importantes que nos ofrece Google Analytics es la posibilidad de ver los navegadores web que utilizan los usuarios que usan nuestro sitio web. En los ejemplos voy a utilizar los datos de un sitio web de comercio electrónico orientado fundamentalmente a España pero con usuarios y clientes en algunos paises como Venezuela, Chile o Uruguay. Si por ejemplo, analizo la información del mes de septiembre de 2009 veo la lista de los navegadores más utilizados y los porcentajes de tráfico correspondientes a cada uno (en Google Analytics se ve esta información en Usuarios/Navegadores). Esta información lógicamente me es muy util porque me dice que navegadores usan los usuarios de mi sitio web. En este caso los navegadores que se usan son estos:

Google Analytics nos muestra el porcentaje de visitas de nuestro sitio web que corresponde a cada navegador.

Como podemos ver haciendo una rápida suma los usuarios que emplean Internet Explorer y Firefox suponen el 94,5% de las visitas al sitio web, con lo que ya tenemos una primera conclusión, por muy obvia que sea: nuestro sitio web debe funcionar perfectamente y estar correctamente diseñado para ser usado con Internet Explorer y Firefox como mínimo. Si verdaderamente queremos tener a casi todo el mundo en cuenta no podemos olvidar el 5% de las visitas que han empleado Chrome y Safari, de forma que si queremos tener un diseño web que cubra casi el 100% de las posibilidades debe estar correctamente diseñado para Internet Explorer, Firefox, Chrome y Safari.

La visualización de un diseño puede variar mucho de un navegador a otro si no lo contemplamos desde el principio. Gracias a Google Analytics podemos saber en cuantos navegadores como mínimo debe funcionar perfectamente el diseño de nuestro sitio web.

Lo más interesante es profundizar, sobre todo en el caso de Internet Explorer, ya que un mismo diseño no se comporta igual en Internet Explorer 6 o en Internet Explorer 8. Si en el mismo informe hacemos clic sobre “Internet Explorer” veremos las versiones de este navegador que nuestros usuarios emplean:

Las diferentes versiones de Internet Explorer que utilizan los usuarios para ir a nuestro sitio web

Esta información, de cara al diseño web es muy importante porque sé que mi diseño debe funcionar perfectamente en varios navegadores y en concreto en varias versiones del mismo navegador, y ya conocemos todos los problemas que fundamentalmente da el CSS con estos temas. En este caso concreto, es muy llamativo que, en nuestro ejemplo, todavía el 26,38% de las visitas hechas con Internet Explorer, que suponen un 20,12% de todas las visitas al sitio web, utilizan Internet Explorer 6, lo que nos obliga, nos guste o no, a hacer nuestros diseños pensando en que deben verse y funcionar a la perfección en Internet Explorer 6, lo que en gran medida condicionara nuestro diseño, sobre todo en cuanto a CSS y uso de JavaScript o AJAX.

En resumen, si somos unos buenos diseñadores web, y atenor de lo que veamos en la analítica web de los sitios que conozcamos o que nos toque rediseñar, debemos considerar que un diseño web será bueno si funciona corerctamente en Internet Explorer 6, 7 y 8, Firefox, Chrome y Safari, y eso como mínimo profesionalmente exigible, porque con el uso cada vez mayor de los dispoditivos moviles para navegar aún se podría hilar más fino.

Y sobre todo, aunque penseis en todos estos navegadores a la hora de diseñar nunca olvideis probar los diseños sobre estos navegadores, a ser posible con diferentes combinaciones de sistema operativo. ¿Alguien dijo que diseñar para web era fácil?

1. Antes de diseñar nada de nada, reúnete con el cliente si es posible. Es fundamental saber de primera mano que es lo que el cliente quiere, y si no lo tiene claro, ayúdale. La pregunta clave es ¿para qué quieres una web?. La web no va a ser igual si el objetivo es vender productos, vender servicios, hacer branding o dar información. Pero lo más importante es saber lo que quiere el cliente con exactitud. A veces no es posible reunirse con el cliente, pero en ese caso es necesario disponer de un briefing (¿qué es un briefing?) o de unas indicaciones vía email o como sea pero sobre todo claras y concisas. Cuantos más intermediarios haya, más dificil te va a ser hacer un diseño web acertado. Me permito un apunte: muchas veces hay clientes que directamente no saben lo que quieren, así que si después de hacerle 2 o 3 propuestas no lo ve claro o sigue sin saber lo que quiere, no trabajes para él hasta que lo tenga claro, porque si no ni el cliente ni tú vais a tener una relación fácil.
2. Haz una maqueta de la web que vas a hacer en papel, en plan dibujo esquemático. Esto parece una chorrada, pero te servirá, y mucho, para aclarar ideas y hacer un planteamiento de como vas a hacer la web.
3. Crea una maqueta gráfica de la web en Photoshop o similares. Simplemente diseña todos los elementos, tal y como se verían en un navegador. Es una maqueta del resultado final, que no funciona pero que es al 100% un reflejo del aspecto gráfico que tendrá la web. Esta maqueta puede ser tu principal arma… a favor o en contra.
4. Con tu maqueta gráfica, reúnete con el cliente para conocer sus impresiones y su opinión. Se supone que has trabajado con material que el cliente te ha facilitado y siguiendo sus indicaciones, por lo que lo que hayas diseñado debería estar próximo a su idea de como quiere su web, aunque también depende de tu habilidad como diseñador web. El principal trabajo es plasmar la idea del cliente en la maqueta. Imprime la maqueta y coméntala con el cliente.
5. Fundamental: si crees que el cliente está equivocado en sus planteamientos o que no son los más adecuados para su web, házselo saber, pero siempre de una manera objetiva y muy argumentada. No puedes decirle a un cliente que su idea de como hacer una web es erronea porque sí, pero si que puedes explicarle porque le conviene hacerla de otra manera, aportando datos, ejemplos y estrategias web que le pueden beneficiar. No pretendas convencerle con un “porque si”, pero si le das argumentos y explicas tus razones, además deun mero diseñador te habrás involucrado mucho más en el trabajo y el cliente lo agradecerá.
6. Ten en cuenta los navegadores que se utilizan y las resoluciones más comunes, y adapta tu diseño a ello. Hoy en día, por ejemplo, no tiene sentido diseñar para una resolución de 800×600 o sin haber probado el sitio web como mínimo en Internet Explorer 6, 7 y 8 además de Firefox, como mínimo.
7. Hoy en día, debes tener en cuenta el posicionamiento web al plantear un diseño, ya que es muy típica la pregunta tipo “Y cuando la web esté lista, ¿cuanto tiempo tardará en estar en Google?, ¿de eso te encargas tú, no?”. Todo el mundo quiere estar en Google, y para estar en el buscador con garantías, el sitio web que diseñemos debe cumplir unos mínimos, algo que Google se encarga de explicarnos en su guía SEO para principiantes. Otra cosa es que ignoremos el tema de los buscadores porque estamos haciendo un sitio web enteramente en flash porque así nos lo han pedido. Pero si quieres un sitio web apto para buscadores y con posibilidades de aparecer en ellos, olvídate de frames o marcos, flash indiscriminado y uso excesivo de imágenes.
8. Prepárate para ser receptivo a las críticas. El diseño es algo muy subjetivo y todo el mundo tiene una opinión sobre el sitio web que estés diseñando. Esto es así, y hay que aceptarlo. Un alto porcentaje de los clientes llevan un diseñador web en su interior. Siempre hay que escuchar las opiniones, siempre. Pero si realmente estás convencido de que lo que te proponen es una majadería, defiende tu postura con argumentos que hagan entender al cliente que estás haciendo un trabajo para él, pero para que triunfe y sea un éxito. Un ejemplo sencillo, las combinaciones de colores. Es clásico que un cliente nos pida algo que hemos hecho en un color, en otro que se da de patadas. La mejor manera de que entienda que eso no va a funcionar es enseñarle sitios web muy populares que respetan una líneas claras en cuanto a colores. Aunque a veces, toca tragar.
9. Plantea tu diseño pensando en lo que el cliente quiere, no en lo que quieres tú. A veces, a la hora de plantear un diseño web, los diseñadores pensamos en lucirnos con el último javascript que hemos visto o utilizar tal disposición de elementos o en trabajar mucho las imágenes de la web. Antes de hacer todas estas cosas piensa si es lo que verdaderamente quiere tu cliente. Tú tienes tu estilo, OK, pero debes adaptarlo a lo que el cliente quiere, y no debe ser el cliente el que se adapte a tu estilo. Para eso tenemos nuestros proyectos personales, para gustarnos a nosotros mismos, pero aquí hablamos de trabajo.
10. Si es posible, enseña tu diseño a un grupo pequeño pero variado de personas. Esta práctica no gusta a muchos diseñadores, pero es una forma de probar un diseño simulando un entorno más o menos real. Varias personas, de diferente perfil, van a ver tu web y van a opinar sobre ella. Escucha sus opiniones. Algunas no tendrán sentido, objetivamente, pero seguro que alguien, generlamente quien menos pienses, te dará alguna pauta o apunte interesante que podrás aplicar y enriquecerá el diseño. Y si desde luego consigues que un grupo variado de personas esté satisfecho con un diseño web es que has conseguido el sueño de cualquier diseñador: que tu diseño guste a todos.

Ahora que he puesto estos 10 consejos para hacer un buen diseño web la verdad es que se me ocurren unos cuantos más, como la importancia del contenido, o del tamaño de las fuentes o el uso de CSS, etc… pero bueno, creo por el momento es más que suficiente, por lo menos para empezar. ¿Estais de acuerdo con estos 10 consejos para hacer un buen diseño web?

En mi caso, estaba bastante cansado de este tipo de problema, siempre teniendo que “apañar” el código CSS para que funcionara bien en cualquier navegador. Quería una solución a este problema…

Y un buen día, mi amigo y colega Miguel Monreal me habló de Yahoo! YUI Grids CSS, y yo me dije ¿y esto qué es y para qué sirve?

YUI (Yahoo! User Interface Library) es un conjunto de utilidades y aplicaciones en JavaScript, así como recursos CSS que Yahoo! ofrece desde su web de desarrollo de forma totalmente gratuita. Son utilidades concebidas para hacer entornos web amables, bien pensados, muy fáciles de configurar y robustos… y este conjunto incluye una solución muy muy buena, de verdad, para los problemas de CSS como los que he comentado antes: Grids CSS, un sistema de CSS que permite crear webs maquetadas de prácticamente cualquier manera que os podais imaginar, y con una ventaja extra: es un sistema que ya lleva los típicos problemas resueltos desde el principio y 100% compatible entre navegadores. Lo único que teneis que hacer es descargaros los archivos que están a vuestra disposición en la web de Yahoo! User Interface Library y utilizarlos en vuestros proyectos web. Para que os hagais una idea, con Grids CSS de YUI vienen varios archivos y hay unas 100 plantillas de layouts web en un archivo que no llega a los 2 Kb.

Os pongo un ejemplo muy sencillo y real: estás dándole vueltas a la cabeza sobre como hacer un diseño web que consta de una cabecera, un contenido y un pie, y por ejemplo quieres que en la parte del contenido, 2/3 (o el 66% del espacio) lo ocupe un contenido y el resto otro, y que además todo esté centrado, estoe s algo bastante común, ¿o no?. Bueno, pues en lugar de hacer tu propio CSS y luego comprobarlo y corregirlo en todos los navegadores para asegurarte que funciona bien puedes utilizar ESTO, que es un modelo de Grids CSS ya hecho y con todos esos problemas resueltos. Tan solo tienes que fijarte en como está hecho y luego sustituir el contenido por el tuyo.

Por si necesitais más ejemplos, podeis ver como funciona por ejemplo en estas webs:

WedTool – Podeis ver en su código fuente y en sus CSS que está hecha con este sistema y por eso mismo nos ahorramos un montón de problemas ocn los CSS.

Gedesel – Otro ejemplo de una web hecha utilizando Grids CSS de YUI.

iMasterD.com – Una web de cursos online montada también con este sistema.

Si os poneis a buscar por ahí hay cientos de webs hechas así y si estais perdidos sobre como empezar con Grids CSS solo teneis que mirar su código fuente y sus CSS para ir entendiendo como hacerlo, aunque lo mejor es la web oficial de Yahoo! sobre YUI, la Yahoo! User Interface Library e ir directamente al apartado de Grids CSS.

Hay que invertir algo de tiempo en entender bien como funciona, pero luego la verdad es que es muy sencillo de manejar y sobre todo te resuelve todos los problemas derivados de la interpretación en diferentes navegadores. Espero que os sirva, porque es un sistema sencillo y muy muy potente y que te ahorra un montón de quebraderos de cabeza.

El principio, ¿cómo hago un background o fondo para mi web?. Pues lo primero es que depende de lo que quieras hacer… si quieres hacer un background que se va a repetir indefinidamente en la página, lo mejor es recurrir a creadores de backgrounds o fondos como los que pueden hacerse con bgMaker. Esta web te ofrece de forma sencilla y gratuita una herramienta para crear diseños de fondos sencillos, como por ejemplo lineas sobre fondos de color, etc… Simplemente eliges un color y pulsas “Fill”, con lo que el cuadrado (cuyo tamaño puedes cambiar) se rellena de ese color, y luego seleccionas otros colores y haces tu diseño sobre el área rellenada, dibujando lo que te apetezca. Es fundamental que al dibujar el diseño lo hagamos de forma que el fondo quede continuo, que al repetirse no haya cortes… Una vez hecho un diseño, lo guardamos con “Save” en la misma web y lo utilizaremos como fondo, pero daros cuenta de que los diseños hechos de este tipo solo sirven para repetirse indefinidamente a lo largo de la página. Lo más importante es hacer un diseño de fondo pequeño, para que no pese, y que esté bien hecho para que la continuidad de las formas quede bien si se repite de forma infinita. Voy a hacer unos ejemplos…

Que quede claro que esto son solo unos ejemplos, ya que podemos diseñar los fondos como queramos o bien diseñar fondos mucho más grandes en tamaño y elementos. Yo simplemente os habló de esta opción por ser muy agradecida visualmente ya demás tener muy poco peso, lo que hace que la navegabilidad no se vea afectada y el rendimiento de la web sea bueno.

Ahora viene la segunda cuestión, ¿como utilizar backgrouns o fondos de página con CSS en mis diseños web?. Para explicarlo voy a utilizar los tres archivos png que he creado y que podeis ver más arriba. Para mostraros el resultado voy a emplear el mismo ejemplo de web que utilicé en el post Hacer un diseño web centrado con CSS, ¿cómo se hace? e iremos viendo como varía su diseño según el fondo que le pongamos.

En primer lugar, tenmos nuestra hoja de estilos: layout01.css, en la que tenemos la etiqueta body, que se aplica a todas las páginas del sitio web salvo que le indiquemos otra cosa. En este caso, actualmente tenemos esta etiqueta body en nuestra hoja css:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-color: #003366;
}

Con esta etiqueta lo que tenemos es nuestras páginas con un color de fondo azul oscuro y punto, nada más. Si quisieramos, podriamos cambiar ese color de fondo simplemente cambiando el color hexadecimal, y así por ejemplo si queremos un fondo blanco pues pondriamos esto:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-color: #ffffff;
}

Pero a lo que vamos, para insertar un fondo de imagen, yo os aconsejo conservar también el fondo de color solido, más que nada porque si hay un fallo en la ruta de la imagen o algún problema, os cargue un colora decuado con el diseño. Para que se inserte el fondo layout01.png pondremos en la etiqueta body:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/layout01.png);
background-color: #ffffff;
}

MUY IMPORTANTE: Aseguraros de que la ruta de la imagen que insertais tras “url” es la correcta, ya que si no no cargará. Si lo habeis hecho bien, el resultado debería ser el de la imagen de la derecha (click para verla más grande), en el que la página tiene como fondo la imagen de layout01.png que hemos visto antes repetida por toda la página, y gracias a su diseño queda como una imagen continua.

Al insertar el fondo vía CSS este aparecerá en todas las páginas que utilicen la hoja CSS que contiene esa orden. Lo más importante de hacerlo con este sistema es que si tenemos varios fondos en el mismo directorio, tan solo tenemos que cambiar el archivo de imagen que queremos que nos sirva de fondo en cada página y automáticamente ese cambio aparecerá reflejado en todas las páginas. Por ejemplo, si queremos que el background que se vea sea el layout02.png, haremos el siguiente cambio en la etiqueta body de nuestra hoja css:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/layout02.png);
background-color: #ffffff;
}

Y el resultado sería este (pulsa sobre la imagen para verla más grande):

Y si hicieramos la misma operación pero colocando el fondo número 3 con un código tal que este:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/layout03.png);
background-color: #ffffff;
}

El resultado sería este (pulsa sobre la imagen para verla más grande):

Espero que todo esto os haya servido de utilidad y os introduzca en el tema de los fondos o backgrounds de página, que da mucho más juego. A ver si posteo más adelante otra vez sobre este tema, que se pueden hacer cosas muy muy chulas probando cositas.

Rock & Ride!!!

Para empezar, ¿que entendemos por un diseño centrado?, pues aquel diseño web que permanece centrado verticalmente en el navegador que utilicemos (en cualquier navegador: Firefox, IE, Opera… como el ejemplo de la imagen de la izquierda) sea cual sea la resolución de nuestra pantalla. Así de sencillo y de dificil a la vez. Si nosotros no indicamos al diseño web via CSS que esté centrado, por defecto, el diseño se centrara a la izquierda y en la esquina superior, en el mismo orden en el que escribimos, por ejemplo. Así que una vez que esto es claro y meridiano, que diría alguno, pasemos a explicar como se hace.

En primer lugar creamos el documento HTML de nuestro proyecto, la página principal, y la llamamos como queramos, por ejemplo, layout01.html. Lo siguiente que debemos hacer es vincular ese archivo html a una hoja de estilos css que llamaremos, por ejemplo, layout01.css.

Antes de continuar insisto siempre en que es fundamental que visualicemos el resultado que pretendemos conseguir antes de ponernos a hacerlo. Un recurso muy antiguo y muy util es dibujar como queremos que sea nuestra web, ya que en el mismo dibujo podemos hacer anotaciones. Creedme amigos, es muy pero que muy util aunque sea más viejo esto de dibujar que hacer pis en el campo.

Con la idea clara, hagamos la estructura. En este caso yo voy a hacer un diseño con una cabecera y un cuerpo central, así de sencillo. Luego ya cada uno puede ir agregando cosas. En primer lugar voy a crear un estilo tipo ID (los que llevan #, no como los class, que llevan un .) de DIV que englobe todo el ancho de la página. Es bueno tener metodología en esto y utilizar siempre el mismo tipo de estructuras. Yo lo voy a llamar “wrapper” y es así:

#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}

Este ID de CSS dice que el ancho es del 100% de la página, que el texto esta centrado y que el margen superior es de 10px. Al margen podria ponerle otros valores o no ponerle ninguno. Ahora, en mi documento html inserto este DIV de la siguiente manera:

<div id=”wrapper”>
</div>

Lógicamente si publico la página en un navegador no veré nada todavía, porque lo que hemos creado, este “wrapper” es el envoltorio que va a contener al resto de la estructura para que aparezca centrada. Lo siguiente es crear el ID del DIV que va a tener todo el contenido dentro. Este DIV estará dentro del “wrapper” y por eso estará siempre centrado. Llamo a este DIV “container”, y es así:

#container {
width: 750px;
margin-left:auto;
margin-right:auto;
}

Simplemente le he indicado el ancho total que va a tener el sitio web (750 px en este caso) y también le he indicado que los márgenes izquierdo y derecho tengan una medida “auto”. Esto hace que el DIV container se mantenga siempre centrado dentro del “wrapper”, tal y como indica el estilo del “wrapper” al utilizar un text-align: center. Ahora inserto este DIV dentro del “wrapper” tal que así:

<div id=”wrapper”>
<div id=”container”>
</div>
</div>

Sigo sin ver nada si lo publico en un navegador, y es normal, porque no hay ningún contenido sino simplemente una estructura para albergar el contenido, que es justo lo que hemos hecho. A partir de ahora, lo que nos aseguramos es que el DIV “container” esté centrado de forma absoluta. Voy a hacer dos estilos ID más, uno que llamare “header” y que definira la cabecera y otro que llamare “content” que definira el contenido principal, y quedaran así:

#header {
width: 100%;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
}
#content {
width: 100%;
background-color:#FFFFFF;
height: 400px;
}

Que quede claro que lo mismo que yo les doy estos valores de tamaño y de background, luego cada uno tiene que jugar en función de lo que quiera obtener. Una vez definidos estos IDs los incluyo en mi documento html dentro del DIV “container”:

<div id=”wrapper”>
<div id=”container”>
<div id=”header”>Colocar aquí el contenido para id “header”</div>
<div id=”content”>Colocar aquí el contenido para id “content”</div>
</div>
</div>

Y tachán, ya está (pulsa la miniatura de la derecha para ver como queda el resultado en Internet Explorer). Para que se vea el contraste ya que no voy a poner nada de contenido, en la CSS pongo en el estilo body que haya un background-color: #000000; para que se vea el fondo negro y los DIVs que he insertado en blanco. Resumiendo, lo que he hecho ha sido indicar via CSS a una serie de DIVs que deben tener el contenido centrado de forma absoluta. La hoja CSS layout01.css ha quedado así hecha:

body {
background-color: #003366;
}
#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}
#container {
width: 750px;
margin-left:auto;
margin-right:auto;
}
#header {
width: 100%;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
}
#content {
width: 100%;
background-color:#FFFFFF;
height: 400px;
}

Y el archivo HTML para conseguir este increible y fascinante resultado que os cambiará la vida es así:

<head>
<title>ricardotayar.wordpress.com</title>
<link href=”layout01.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”container”>
<div id=”header”>Colocar aquí el contenido para id “header”</div>
<div id=”content”>Colocar aquí el contenido para id “content”</div>
</div>
</div>
</body>
</html>

Ala mozos, ahora a practicar cada uno en su casa estas cosicas, que poco a poco se pueden conseguir resultados muy interesantes. Ahora, ya sabeis como centrar un diseño web utilizando CSS, así que lo siguiente es experimentar y ampliar esta minilección por cuenta propia e ir dándole contenido al contenedor web principal… suerte!!!