• Usa tablas: olvídate de usar divs porque dan más quebraderos de cabeza que otra cosa.
• Usa estilos inline: imprescindible hacerlo así porque la mayoría de clientes de correo eliminan los estilo por clases.
• Usa el atributo ALT en todas las imágenes: es muy habitual que el cliente de correo por defecto no enseñe las imágenes y entonces es recomendable enseñar el texto del ALT.
• No definas width y height para las imágenes: si se definen tamaños para las imágenes pero luego estas no se muestran, el resultado puede no ser bueno.
• Que el email esté dentro de una tabla con width del 100%: los clientes de correo solo tienen en cuenta el código dentro de la etiqueta body y no el código de la etiqueta body en sí misma. A tener en cuenta si por ejemplo se requiere un color de fondo.
• Ancho máximo de 600px: debido a que hay mucha gente que no abre el email y se queda con la preview.

Uso recomendado de tablas en los emails

• Da estilo a los enlaces: para machacar el estilo que tenga definido el cliente por defecto para todos los enlaces.
• Intenta no meter tablas dentro de otras tablas: para evitar problemas, mejor una tabla detrás de otra que una dentro de la otra.
• No uses imágenes de fondo: el texto encima de imágenes de fondo se ven mal en varios clientes.
• Los bordes no funcionan: como alternativa, se puede usar columnas de 1px.
• Bug con las imágenes en Hotmail: el cliente de Microsoft añade un extraño padding a todas, que se soluciona con un display:block.
• Codifica todos los caracteres: usar HTML entities en lugar de los caracteres especiales, asegura que el texto se verá bien en todos los clientes.
• No incluyas Javascript: si lo haces, lo más problable es que el email no pase el filtro de peligrosidad del cliente de correo.
• Ofrece al usuario una salida: un enlace para darse de baja del envío resulta imprencindible, hoy en día creo que por ley en España.
• Ofrece al usuario una alternativa: ofrecer un link hacia una visualización vía web del email resulta recomendable.
• Usa un GIF transparente: algunos navegadores no asimilan bien columnas sin contenido, por lo que si necesitas alguna, puedes usar una imagen transparente del tamaño que haga falta.

Antes de hacer envío hay que testearlo bien, por lo que resulta imprescindible tener cuentas en los principales servicios de correo como Hotmail, Yahoo y Gmail, así como varios navegadores disponibles, las versiones 6, 7 y 8 de Internet Explorer, Firefox, Safari y Google Chrome al menos.

Fuente: 20 Email Design Best Practices and Resources for Beginners

Recomendaciones de Joost de Valk desde MarketingFact.nl:

• Trata de mantener las URL. Usa redirecciones 301 para las URL que cambian y asegurate que redirigen correctamente a la nueva localización del contenido.
• No hagas demasiados cambios demasiado rápido. Si haces un rediseño, demasiados cambios pueden provocar la perdida de posicionamiento para muchas keywords.
• No cambies la información del registro del dominio, ya que esto puede dar a entender a los buscadores que la web cambia de propietario y en consecuencia afectar a los rankings. (Nota: Matt Cutts comenta que esto no es así en el video que puedes encontrar al final de este artículo.)

Recomendaciones de Jennifer Osborne desde SearchEnginePeople:

• Haz el cambio por fases: empieza por pequeñas secciones de la web, evalua las consecuencias y después continua con el resto.
• Ten en cuenta la estructura de linking interno cuando hagas un rediseño. Que las páginas más importantes lo sigan siendo dentro de la estructura.
• Haz un seguimiento exhaustivo de los errores 404 después de la migración. Estos pueden indicar links rotos, tanto internos como externos, que esten apuntando a contenido movido o borrado.

Recomendaciones desde Denver SEO:

• Espera ver una bajada en posicionamiento a pesar de las medidas que hayas tomado. Tardar de 25 a 30 días en recuperar los rankings es lo normal.

Recomendaciones de Google:

• Añade tu site a Google Webmaster Tools.
• Actualiza tu sitemap XML para reflejar los cambios de la web a nivel de URL.
• Sigue con atención los problemas de redirecciones 301 y los errores 404 reportados por el Google Webmaster Tools.

Recomendaciones de varios blogs y webs:

• Crear una página de error 404 personalizada para reducir el impacto de los posibles links rotos.
• Si la actualización de la web es suficientemente significativa, publica una nota de prensa.
• Usa PPC para compensar temporalmente la perdida de posicionamiento.
• Actualiza el robots.txt si es necesario por los cambios en el contenido.

Para complementar, añadiría varias recomendaciones personales:

• Trata de mantener la optimización SEO on-site. Que las etiquetas h1 y h2, títulos, densidad de palabras clave, estructura del linking interno y demás elementos no se vean afectados por el cambio.
• Vigila el peso y tiempo de carga de la web. Hay que hacer las optimizaciones necesarias para que al bot de Google no le cueste más que antes crawlear las diferentes páginas.
• No hagas grandes cambios SEO justo despues del rediseño. Por si acaso deja un tiempo para que los buscadores asimilen lo nuevo, sin añadir más distracciones.

Más información:
Consejos desde el Google Webmaster Central Blog: Best practices when moving your site
Sobre cambios en el registro del dominio: Will domain registration changes ding me in Google?
Redirecciones 301 para el cambio de dominio: Cambiar de dominio sin perder posicionamiento

Guia de referencia HTML y XHTML: disponen para descargar en PDF o consultar en HTML 17 de este tipo de guías, que abarcan practicamente todo el HTML y XHTML, muy util para la maquetación.

Guía referencia HTML y XHTML

Guia de referencia mod_rewrite: En formato PDF o imagen PNG, de gran ayuda cuando nos toca trabajar en la creación de URLs semánticas.

Guía referencia mod_rewrite

Guía de referencia htaccess: página con lo más relevante entorno al htaccess.

Guía referencia htaccess

Guía de referencia Wordpress: en PDF, interesante cuando toca meter mano al blog de Wordpress.

Guía referencia Wordpress

Fuente: Artículo de Ann Smarty en Search Engine Journal.

1. Testearla a conciencia con Internet Explorer y bajo Windows, con diferencia el navegador y el entorno más usado por la gente. Conviene instalarse Multiple IE, que permite ejecutar varias versiones de Internet Explorer desde el mismo ordenador en modo stand alone.

2. Probarla con los principales navegadores alternativos soportados por tu sistema operativo. En el caso de Windows, conviene instalarse Firefox en sus versiones 2 y 3, Opera, Safari y Chrome, que estando Google detras seguramente vaya cobrando más importancia con el tiempo.

3. Usar el servicio Browsershots, en su versión principal o la beta 0.3. Con esta aplicación podras comprobar como se ve tu web en multitud de navegadores y sus diferentes versiones, bajo Windows, Linux y MAC OS.

Browsershots

4. Probar la página en sistemas operativos distintos al de desarrollo. Si tienes oportunidad, testearla en algun ordenador con Linux y un MAC. Como alternativa, usar un sistema de virtualización como VMWare para tener disponibles entornos de prueba con Windows, Linux y MAC OS.

Desafortunadamente, son varios los navegadores que no siguen los estandares web, sobretodo IE, y por ello la tarea de maquetación puede resultar bastante pesada en algunos casos. Se supone que las nuevas versiones, como el IE8, estaran mas cerca de cumplir con esos estandares y de poder pasar con buena nota el duro test ACID en su versión 3, lo que ahorraría quebraderos de cabeza a los maquetadores.

En el caso de ser una página web orientada al entorno móvil, para las pruebas conviene usar emuladores de cada plataforma como Nokia Mobile Toolkit, dotMobi o WinWap. En el navegador Opera, al hacer shift+F11 en su versión normal se renderiza la página como en Opera Mini, su versión para móviles.

1. Firebug:
Imprescindible en la maquetación, permite ver y modificar los elementos HTML y estilos CSS directamente en la página. Imprescindible tambien para el debugging de aplicaciones AJAX, pudiendo ver al momento las peticiones y respuestas entre el servidor y el cliente. Además, tambien existen plugins para esta extensión como Yslow, para testeo de rendimiento y tiempo de descarga de los elementos de la página, Jiffy, para testeo de velocidad en ejecución de Javascript o FireCookie, para el manejo de las cookies.

Firebug

2. Web developer:
Muy completa, aunque pierde importancia si ya se usa FireBug. Permite deshabilitar cookies, css y javascript, rellenar formularios, ver los atributos de los elementos HTML en pantalla, validar HTML y CSS, ver información agrupada de los distintos elementos…

3. Live HTTP headers:
Para porder ver las cabeceras HTTP en tiempo real.

4. ColorZilla
Captura de colores en la página y paleta con los valores HTML de cada color.

5. IETAB
Permite cargar una página usando el motor de Internet Explorer dentro del propio Firefox.

6. HTML Validator
Validación W3C a distintos niveles de código HTML. Indica los errores de la pagina actual y desde la vista de código fuente del navegador, marca exactamente donde esta el error además de mostrar la descripción del mismo.

HTML Validator

7. Regular expressions tester
Testeo de expresiones regulares desde una ventana aparte.

8. Selenium IDE:
Entorno de desarrollo para la herramienta de testeo funcional de aplicaciones web Selenium.

Más información y descarga de cada extensión siguiendo el link de cada nombre. A veces conviene pasarse por la página web del propio autor para obtener la última versión disponible.