Esta infografía sobre las landing page, la podéis encontrar en Formstack, que a parte de ofrecer formularios de contacto para nuestras páginas web, de vez en cuando sacan este tipo de recursos tan útiles.

Básicamente, y para quien no entienda bien el inglés:

• Destacan la importancia de tener un título bien visible, atrayente (que invite a ehcar un vistazo al resto de la landing page) y consistente con el anuncio desde donde viene el usuario.
• Tener una grámita y redacción impecables apra maximizar la confianza en el producto o servicio que se oferta.
• En relación con lo anterior, reforzar los indicadores de confianza al máximo. Por ejemplo, añadiendo textimonios (reales por favor), garantías al comprar, menciones en medios, certificados de seguridad…
• Usar una potente llamada a la acción. Eligiendo con cuidado las expresiones usadas (gratis, ahora, nuevo… el uso de unos u otros puede suponer variaciones sustanciales en las conversiones). Nos sugieren que colores naranjas o amarillos son adecuados para este tipo de elementos. Aquí viene muy bien echar un nuevo vistazo a la infografía del color.
• Si hay navegación, que esté en un lugar bien visible de la página y sea clara.
• Usar videos o imágenes que refuercen el mensaje y la confianza del usuario. Videos de testimonios, del creador del producto, imágenes del producto, etc.
• Crucial: todo el contenido importante por encima del pliegue (la zona de la página visible sin necesidad de hacer scroll). Sobre todo, especial atención a las llamadas a la acción, ¡siempre por encima del pliegue!
• Por último, testear testear testear…

Este reset, a parte de lo que hacen los reset más tradicionales, como el famoso de Eric Meyer (en el cual se basa), incluye etiquetas de HTML5 para asegurarnos de maximizar el soporte de este lenguaje en diferentes navegadores.

Con el reset le quitamos margins y paddins a cosas que no deben tenerlo, quitamos estilos de fuente, tamaños por defecto, y en particular, lo que me parece muy útil de este reset CSS es darle a ciertas etiquetas HTML5 estructura de bloque (display: block), porque de hecho, deben tenerla, pero hay navegadores antiguos que no las reconocen y por tanto, necesitan de estas reglas para funcionar correctamente:
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}


Sin este tipo de recursos resulta complicado maquetar en HTML5, y casi imposible hacer que los diferentes navegadores rendericen correctamente nuestros diseños.

Por otro lado, ya han salido algunas librerías javascript interesantes para lograr el renderizado correcto de HTML5, como modernizr. Modernizr añade clases CSS a los elementos HTML5 para que puedas definir estilos específicos en función del navegador.

Y para aquellos que os preguntéis porqué molestarse en maquetar en HTML5, aquí os dejo un enlace a una web con ejemplos de lo que se puede hacer en HTML5.

Enlace: reset CSS para HTML5.

Estos botones utilizan muy inteligentemente nuevas propiedades de CSS3, como los bordes redondeados (border-radius), color en hsl, texto sombreado (text-shadow).

Sinceramente, estoy deseando que los desarrolladores y diseñadores web podamos empezar a usar sin miedo estas nuevas propiedades de CSS3.

Si te interesa ver un poco sobre el tema, puedes trastear con este generador de código CSS3, y echar un vistazo a CSS3 please!,  imprescinbibles.

Y si quieres ver algunas otras cosas interesantes hechas con CSS, mira estos artículos: fondos con gradientes con CSS3 y Animar texto con CSS3.

Sin duda, que llegue CSS3 ya, por favor

Si te interesa el tema del color aplicado al diseño web, pásate a leer estos artículos: simbolismo de los colores y su uso en el diseño web, empleo del color en el diseño de páginas web, selección de la paleta de colores para un diseño web. Y en general el manual de diseño web que tenemos en LaWebera.es

Dado este botón:

<input type=”submit” value=”Buscar” class=”button” />

Usamos un CSS parecido a este para que se muestre la imagen como botón y se esconda el texto “buscar”, que aparecería por defecto como texto del botón (por encima incluso de la imagen) si no hacemos nada:

input.button {
        width:64px;
        height:23px;
        border: none;
        background: transparent url(../images/bsearch.gif) no-repeat center;
        overflow: hidden;
        text-indent: -9999%;
        }

Pues bien, cualquier navegador decente nos devuelve una renderización correcta del código anterior, obteniendo un resultado parecido a este:

Pero para variar,el dichosos Internet Explorer (tanto ie6 como ie7) hace de las suyas y a pesar de las propiedades establecidas, sigue mostrando el texto del botón por encima de la imagen de fondo que hemos establecido como botón.

Para solucionar este error, suelo aplicar una solución que me ha ido genial siempre que la he aplicado, además de ser sencilla y no interferir con el correcto renderizado de Internet Explorer ni del resto de navegadores (no es un hack). Lo que hago es aplicar estas líneas de código al estilo CSS del botón:

font-size: 0;
display:block;
line-height: 0;

Lo que hacemos es darle un tamaño cero al texto del botón, lo cual funciona perfecto en ie7, pero en ie6 sigue viéndose una línea blanca en lugar del texto, así que le añadimos las otras dos declaraciones para arreglar el bug también en ie6.

Como resultado tenemos el CSS siguiente, que arregla tanto en ie6 como en ie7 el problema con text-indent en los inputs y botones de nuestros formularios:

input.button {
        width:64px;
        height:23px;
        border: none;
        background: transparent url(../images/bsearch.gif) no-repeat center;
        overflow: hidden;
        text-indent: -9999%;
        font-size: 0;
        display:block;
        line-height: 0;
        }

Puedes ver el ejemplo en marcha aquí: ejemplo de tabs.

Esta página es de Soh Tanaka, un diseñador de Los Angeles al que sigo muy de cerca porque me encanta su trabajo y la calidad con la que lo hace. Es un maestro del CSS.

URL del tutorial en LaWebera.es: Crear tabs o pestañas con jQuery y CSS.

URL (en inglés): Simple Tabs with CSS & jQuery

Es un video de 10 minutos a cámara rápida en donde básicamente se ve como pasar de psd a html, a modo resumido.

Como digo, es a cámara rápida, por lo que no sirve para aprender a maquetar webs. Pero sí para que la gente ajena a este campo se haga una pequeña idea del trabajo que lleva maquetar páginas web.

Si quieres aprender paso a paso a maquetar, te recomiendo que sigas los videotutoriales para pasar de psd a html, ya comentados en este blog.

Aquí el video de Speed CSS:

httpv://www.youtube.com/watch?v=byvkWmF64Nc

La Web del Autor: koronas.es

Como ya sabréis la mayoría, el gigante Google dejará muy pronto de dar soporte a ie6 para algunas de sus servicios, concretamente desde el 1 de marzo se dejará de dar soporte a IE6 en Google Docs y en Google Site, lo que significa que ciertas funciones de estos sitios funcionarán mal, o directamente no funcionarán, cuando un usuario acceda mediante la versión 6 de Internet Explorer.

El propio MicroSoft, por fin, después de 8 años de tortura con ie6, ha reconocido la necesidad de actualizar a versiones más recientes de este navegador.

Para los diseñadores web, lidiar con Internet Explorer 6 a la hora de hace una página web nos supone muchas horas de trabajo que bien podrían emplearse en otras cosas más útiles, sin nombrar el uso de hacks css, comentarios condicionales y demás truquitos para intentar que una web se vea correctamente en todos los navegadores, incluido el odiado ie6.

Desde hace tiempo cuando lo veo necesario, vengo usando en mis diseños un script que hace que versiones anteriores a ie7, se comporten e interpreten y muestren las páginas web como lo hacen las versiones modernas del explorer. Es muy útil para conseguir que la página se vea correctamente en todos los navegadores. Aquí el código, y también en Google Code:

IE7.js

Actualiza MSIE5.5-6 para ser compatible con MSIE7.

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"></script>
<![endif]-->

IE8.js

Actualiza MSIE5.5-7 para ser compatible con MSIE8.

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"></script>
<![endif]-->

No necesitas añadir IE7.js si usas IE8.js

Multiple IE

Así mismo, para testear que todo se ve correctamente en las diferentes veriones de Internet Explorer, tenemos este programa, multiple IE, que como su nombre indica, peromite correr diferentes versiones del navegador en el mismo ordenador. De todas maneras, esto es algo que yo compruebo al final, cuando diseño una web no me preocupe de que se vaya viendo bien en Internet Explorer, desarrollo en Firefox, cuando está terminado me preocupo de arreglar las cosas que se muestra diferentes en ie.

Para esto mismo también es muy útil browsershot.

Pásate a otro navegador

Mi recomendación es esa, directamente instálate Firefox, Safari o Chrome y prueba a usarlos un tiempo. Te encantarán y no volverás a acordarte de esa chatarra llamada Internet Explorer 6. O sino, al menos actualiza, ie6 tiene graves fallos de seguridad y no pocos, que pueden comprometer seriamente tu seguridad en internet, así como tu información personal, financiera, etc. ¿Quieres arriesgarte a eso?.

Imagen vista en emezeta.

Leyendo Smashing Magazine me topé con este diseño, y francamente, me ha dejado asombrada.

Pocos diseñadores web están al alcance de crear diseños como este, sobre todo por la parte artística, o cuando menos pocos se atreven. No he visto cosas parecidas muchas veces, y siempre es de agradecer que a alguien se le ocurran este tipo de ideas y se exploten.

La parte gráfica es impecable para mi gusto, no puede llamar más la atención al visitante. Creo que en ese sentido logran muy bien los objetivos de la página puesto que es básicamente un portafolio de una empresa de diseño, y que mejor que impresionar al cliente con el diseño de tu propia web, es el mejor escaparate.

Por otro lado, la navegación resulta fácil, se han encargado de delimitar bien cada zona de la web con esa estructura de árbol tan original. Las diferentes ramas separan los post, las secciones…

Personalmente me gusta mucho el efecto de la rueda giratoria que hay en cabecera. Ya que te pones a hacer un diseño espectacular que menos que añadirle algo de flash… desde luego, tienen un excelente diseñador gráfico en su plantilla.

Como contra, tal vez la imagen de cabecera inutiliza un poco el resto de la página al ser tan grande y obligar a hacer scroll si quieres leer de que va el asunto. Yo habría aprovechado un poco más el diseño de lo que está, integrando más los botones que se ofrecen al principio de página. Por ejemplo para el botón de twitter habría usado la caseta que hay colgando en el sidebar.

Por otro lado, me da la sensación de que lanzan toda la artillería en el banner de cabecera con esa gran imagen y una vez llegas a los post, se vuelve un blog bastante corriente, que por un lado está muy bien para la usabilidad, pero por otro da la sensación de que falte algo.

Un dato, no dejéis de ver el pie de página, que no tiene nada que envidiar a la cabecera. Aunque como decía no hubiera estado de más añadirle alguna utilidad a tan fantástica gráfica. Otro ejemplo, hacer funcional ese buzón de correo que hay en la imagen del footer para ofrecer un medio de contacto.

¿qué opinas tú de este diseño web?

Recientemente he encontrado este videotutorial que te enseña paso a paso como convertir un archivo PSD de Photoshop a HTML+CSS.

Es una guía completísima, y el hecho de que te la expliquen en video ayuda mucho, para mí es el mejor howto (cómo hacer) que existe.

En este caso concreto, te enseña a separar por capas el diseño, a construir el CSS y el HTML, y hasta a añadirle los “arreglos” para que se vea igual en Internet Explorer que en el resto de navegadores. Eso sí, tiene un gran inconveniente, como muchos de los mejores recursos sobre diseño web, está en inglés.

También hay algunos tutoriales en español, aunque mucho más escasos, como este breve tutorial de PSD a HTML que es bastante sencillo de leer. El resultado no será un código perfecto, pero si te estás iniciando es una gran ayuda.

Videotutorial PSD en HTML en español

Uno muy muy bueno en español es este de cristalab, que recomiendo sin duda, ya aunque solo sea porque está en español. Pero a parte de eso es completísimo también y de gran calidad. Os dejo los enlaces a los videos:

1. Convertir PSD en HTML, parte 1
2. Convertir PSD en HTML, parte 2
3. Convertir PSD en HTML, parte 3
4. Convertir PSD en HTML, parte 4
5. Convertir PSD en HTML, parte 5
6. Convertir PSD en HTML, parte 6

Ahora bien, si no tienes tiempo y/o ganas de aprender como se hace, para variar tienes algunos recursos disponibles en Internet, eso sí, seguramente tendrás que gastarte algo de dinero para obtener un código decente:

• Quiero CSS: les entregas tu diseño en PSD y ellos te lo maquetan, como dije, pagando.
• PSD a HTML: una empresa que ofrece servicios similares a la anterior, te maquetan la página web a partir de un archivo PSD de Photoshop.
• PSD to HTML: es la página web por excelencia para contratar este tipo de servicios. Está en inglés, pero ofrece unos precios muy competitivos y sus diseños son de grandísima calidad, con muchas opciones para elegir y un cómodo formulario de compra.
• PSD to WordPress: lo mismo, una empresa de maquetación web, en este caso especializada en la plataforma WordPress, también en inglés.

¡A maquetar!