Archivos de la categoría ‘Desarrollo Web y Móvil’

Volvemos con información sobre como hacer una versión móvil de nuestra web. Ya lo traté con anterioridad en 3 Herramientas gratuitas para crear sitios web para móviles pero obviamente con el tiempo tenemos más ofertas y mejores productos para convertir de manera sencilla nuestro sitio web para móviles.

Hoy os presento una de las nuevas herramientas que el todopoderoso Google ha creado para tal fin aprovechando la tecnología de dudamobile:

Powered by 

(Acceso  a herramienta original: my.dudamobile.com)

Por supuesto, esta herramienta gratuita, tiene sus pros y sus contras:

  • A favor: que es sencilla, gratuita, herramientas SEO, traking ID con Google Analytics y permite configurar nuestra web móvil con multitud de servicios orientados a dispositivos móviles.
  • Lo malo: que redirigimos tráfico fuera de nuestro domino a cambio de ofrecer a nuestros usuarios/visitantes una versión móvil. Anteriormente tenía una limitación a 10 páginas por sitio web, pero creo que ya no existe tal restricción tras la asociación con Google.

Personalmente, para las webs que tienen mucho tráfico a través de móvil y no tienen mucho tiempo para hacer la adaptación, es una gran alternativa.

¿Cómo hacer la versión móvil de mi web?

Esta aplicación tiene un interface muy sencillo que debemos seguir paso a paso hasta conseguir en el último de los pasos el cód. Script ha incluir en el HEAD de nuestra página index. Este código redirige al usuario en el caso de que nos visite desde un dispositivo móvil.

Aquí tenéis los pasos:

1. Incluimos nuestra URL

2. Seleccionamos una plantilla para nuestra versión móvil

3. Editar el sitio

4. Editar los Settings (SEO y Google Analytics)

En la parte superior izquierda encontramos este acceso, para mi de los más importantes, con el cual configuramos el SEO de nuestra versión móvil y el seguimiento de la misma desde nuestra cuenta de Google Analytics.

5. Guardar sitio

6. Publicar sitio

En esta parte es dónde la aplicación nos ofrece el código javascript a insertar en el HEAD de nuestra web. Os recomiendo habilitar el dominio m.tudominio.es que ofrece esta fantástica herramienta.

Y listo! Sencillo verdad?

 

La multitud de dispositivos móviles y el aumento del acceso desde los mismos a Internet han hecho que los desarrolladores web se planteen en ofrecer un contenido ajustado a cada usuario según su dispositivo con el que realiza su visita ya sea Android, iPhone, iPad…

Esto es una ventaja (y más trabajo, sí) pero atentos, esta demostrado que al ofrecer a cada usuario un trato personalizado ganamos “algo” por lo que mataría cualquier marketiniano: la fidelización del usuario. Simplemente, con que el usuario sepa que la página que está visitando esta pensada para él, para su dispositivo, genera cierto grado de satisfacción y esto repercute en la fidelización del mismo.

Como comentaba el uso de dispositivos móviles esta en auge destacando tablets y iPad. Estos últimos, los usuarios de iPad, suelen ser muy interesantes porque normalmente disfrutan de un nivel adquisitivo superior a la media, cosa que puede repercutir de forma positiva($$$) en nuestro negocio. Por lo que no es ninguna tontería darles “un trato especial” con un desarrollo web ajustado a su caro y bonito iPad para que compren fácilmente nuestro producto y se sientan cómodos en su experiencia de compra desde su dispositivo.

Pero, cómo hacemos esto? Pues lo bueno es que es muy fácil.

Con este sencillo código puedes redireccionar al usuario a un contenido específico diferenciando por dispositivo móvil:

Código Javascript para detectar visitas desde Android, iPad o iPhone:
/* Android user */
if (navigator.userAgent.indexOf('Android') != -1) {
window.location.href="http://www.tusitio.es/Android/";
}
/* iPhone user */
if (navigator.userAgent.indexOf('iPhone') != -1) {
window.location.href="http://www.tusitio.es/iPhone/";
}
/* iPad user */
if (navigator.userAgent.indexOf('iPad') != -1) {
window.location.href="http://www.tusitio.es/iPad/";
}

[tweetmeme source=”kike_puelles” only_single=false]

Andaba buscando como empezar a toquetear de manera sencilla el mundo de las aplicaciones para móvil. Había probado algunas aplicaciones que transformaban tu web, el código… que parecen funcionar pero depende de tu necesidad claro.

Y así, descubrí App Inventor, un proyecto de Google Labs, por supuesto para Android. Muy sencillo de usar, intuitivo si has manejado ya la consolas como J2ME para desarrollar aplicaciones móviles o al menos intentarlo (Yo con un ‘Hola mundo’ y un par de opciones para navegar me dí por satisfecho). Pero mirarme ahora, geolocalizarme con el componente LocationSensor.

Creo que las posibilidades son inmensas y yo que no soy ducho en artes móviles (todavía, dame tiempo…) casi tengo un Foursquare, salvando las distancias claro.

Os dejo el enlace  para todos aquellos que quieren empezar a desarrollar sus propias aplicaciones en Android y disfrutar en su Smartphone de su ingenio. Tienes que instalarte la App, por supuesto compatible para Win, Mac y Linuxy con una interfaz gráfica puedes ir creando tu aplicación.

Más información: App Inventor.

Además, quien sabe cual será el próximo App indispensable para nuestros móviles, lo mismo eres tu. Te animo a probar App Inventor y que nos contemos nuestra evolución.

Cada vez es más habitual, el uso de los Smartphones en Redes Sociales, consultar correo, búsqueda de contenido… Internet en general. Muchos desarrolladores están empezando a migrar sus desarrollos web a un formato móvil más usable y por eso este post. Existen algunas herramientas gratuitas que nos pueden ayudar en este proceso y quizás no conozcas. Son una buena opción para empezar a meternos en este mundillo del desarrollo web para móviles.

3 Herramientas Gratuitas para hacer sitios web para móviles:

Mobify

Mobify es un servicio basado en web que puedes utilizar para convertir tu blog a un sitio móvil. A partir de la versión gratuita de Mobify, ya tienes la capacidad de optimizar y diseñar tu sitio a miles de teléfonos móviles. También puedes elegir un dominio personalizado para tu sitio móvil e instalar un plugin en tu blog que redirige automáticamente los visitantes a la versión móvil cuando utilicen sus teléfonos para llegar a tu sitio. Al cambiar a un plan de pago (de $ 249/mes) también tendrás el apoyo de un analytics avanzado para la versión móvil, además de una marca personalizada. Sin la integración de publicidad, ni modelos hechos.

http://mobify.me/

WireNode

WireNode es un creador libre para sitios móviles que te permite convertir tu blog en un sitio móvil. Puedes crear sitios móviles optimizados para la mayoría de los teléfonos en el mercado, analizar las estadísticas de tu blog, optimización SEO de tu sitio móvil, reproductores e integración de la redirección automática, sin gastar un centavo. Si también deseas tener un dominio personalizado para tu sitio móvil, la eliminación de anuncios de terceros en tus páginas y obtener 20 créditos de SMS, debes migrar al plan pro de precios, disponible por € 15/mes. Sin la integración de anuncios o plantillas hechas.

http://www.wirenode.com/

Mippin Mobilizer

Mippin Mobilizer es un servicio gratuito que te permite movilizar a tu blog o página web. Para iniciar la construcción de tu sitio, debes enviar la URL de tu blog o feed RSS, así que puedes utilizar una de las plantillas disponibles en el estilo móvil. También puedes ajustar el diseño de tu teléfono móvil y optar por integrar un servicio de anuncios de terceros, como AdMob para monetizar tus páginas móviles. No hay ofertas de dominio personalizado, ni análisis para la redirección de móvil automática.

http://mippin.com/web/maker/mobilize.jsp

El acceso a Internet a través del móvil ha aumentado considerablemente en los últimos años hasta el punto que los desarrolladores y diseñadores web ya no podemos permitirnos el lujo de ignorarlo. El desarrollo de webs para móviles es más complejo que el desarrollo de una simple página web, incrementándose cada día con la aparición de nuevos dispositivos y distintos navegadores. Desde el principio debemos plantearnos un desarrollo multiplataforma. Además, regresan problemas como: el ancho de banda, la resolución de pantalla… Yo ya ni me acordaba!

Navegadores moviles

Una manera de facilitar nuestro trabajo es diferenciar el CSS web del CSS para las visitas que accedan a nuestra página a través de móvil.

No es difícil, de hecho podemos hacerlo de varias maneras, cada uno que elija la que más le convenga:

Del lado del servidor

Esto implica la detección del User Agent visitante mediante un código de servidor (como PHP) en nuestras páginas. Como consecuencia, o bien sirve una hoja de estilos apropiados o redirige al usuario a un subdominio móvil del tipo m.facebook.com donde se garantiza la compatibilidad con el dispositivo móvil.

El único problema es mantener actualizada la lista de UA, ya que cada día aparecen nuevos perfiles.

Del lado del cliente

Una manera sencilla de detectar el dispositivo es por la resolución. Si acceden con una resolución inferior a 480px de ancho podemos deducir que se trata de un dispositivo móvil y redirigir consecuentemente o cargar el CSS para móviles.  Por ejemplo:

<span onmouseover="_tipon(this)"onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left;"><link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/></span><link rel="stylesheet" href="mobile.css" media="only pantalla y (max-device width:480px)"/></span>

Acceso directo del usuario

Tan fácil como poner una opción en nuestra web que vincule directamente a las páginas desarrolladas para móviles bajo petición del propio usuario (‘Visita nuestro site con tu móvil’). De esta manera le das al usuario la opción de elegir el modo de visualización que prefiere.

Algunas de los puntos básicos a la hora de diseñar una web para móviles

  • El diseño, debido al reducido tamaño de las pantallas, es más que recomendable que se estructure en única columna.
  • Evitar la carga de imagenes innecesarias, podemos utilizar la propiedad de display(block/none) para diferenciar entre contenido web y movil en nuestro CSS según el caso.
  • Aumentar el tamaño de fuente para movil y facilitar la legibilidad de los textos.
  • Evitar los elementos flotantes
  • No usar flash en nuestros diseños.
  • Evitar los estados de javascript como onMouseOver, ya que muchos dispositivos no lo reconocen.
  • iPhone no es compatible con <input type="file" />

Trucos para hacer webs para móvil mucho más usables

Sencillo y útil para facilitar al usuario una mejor experiencia web móvil:

Número de Teléfono Clicable para llamar automáticamente desde el móvil

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left;"><a href="tel:15032084566" class="phone-link">(503) 208-4566</a></span> <a href="tel:15032084566" class="phone-link"> (503) 208 a 4566</ a></span>

La clase .phone-link activa la posibilidad de hacer click sobre el numero de teléfono solo si visitamos la página desde un móvil.

Usando Input y sus types de HTML5

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left;"><inputtype="tel"/></span> <input type="tel"/></span>

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text"style="direction: ltr; text-align: left;"><input type="email"/></span> <input type="email"/></span>

Estos tipos de INPUT de HTML5 permiten que los dispositivos como el iPhone muestren un teclado contextual que se relaciona con el tipo de entrada.  En el ejemplo anterior type="tel" desencadena un teclado numérico ideal para introducir números de teléfono y type="email" desencadena un teclado con @ y . botones.

Detectar la orientación del dispositivo móvil

Para detectar la orientación del dispositivo, podemos utilizar una consulta similar a la detección de dispositivos de cliente que hablamos antes. Dentro de la hoja de estilo, incluimos:

<span onmouseover="_tipon(this)"onmouseout="_tipoff()"><span class="google-src-text"style="direction: ltr; text-align: left;">@import url("portrait.css") alland</span> @ Import url("portrait.css") y todos los</span>
<span onmouseover="_tipon(this)"onmouseout="_tipoff()"><span class="google-src-text"style="direction: ltr; text-align: left;">(orientation:portrait);</span> (Orientación: vertical);</span>
<span onmouseover="_tipon(this)"onmouseout="_tipoff()"><span class="google-src-text"style="direction: ltr; text-align: left;">@import url("landscape.css") alland</span> @ Import url("landscape.css") y todos los</span>
<span onmouseover="_tipon(this)"onmouseout="_tipoff()"><span class="google-src-text"style="direction: ltr; text-align: left;">(orientation:landscape);</span> (Orientación: horizontal);</span>

Aquí portrait.css añadido para dispositivos en vertical y la landscape.css será añadido para los visualizados en horizontal.

Via www.smashingmagazine.com

Espero que os sirva de ayuda, seguiré indagando y aportando más información sobre web para móviles, a mi parecer, un futuro muy presente.

[tweetmeme source=”kike_puelles” only_single=false]

Controlas de CSS y HTML y haces cosas maravillosas para web? Te han pedido maquetar una Newsletter estupenda? Genial…

Pues olvídate de todo lo aprendido. Resetea todo lo que sabes de CSS3, de DIVs con bordes redondeados… Hemos regresado al viejo mundo olvidado de:

Las tablas y CSS en código: <table style=”código”>

Flipante! Pero cierto. Por qué? Los gestores de email son duramente atacados, suelen ser la entrada localizada de virus que infectan nuestros ordenadores, de spam, de correos de sigue la cadena o morirás… Así que han tomado la decisión de ser muy estrictos con lo que permiten visualizar/ejecutar y lo que no, todo es por nuestra propia seguridad (Que majos!)

Vamos a intentar explicar lo que podemos o no utilizar con el fin de obtener Newsletters que se muestren ‘igual’ en los distintos gestores de email.
Las Newsletter son uno de los medios más populares para las comunicaciones en internet, además esta comprobado que el diseño de estas es fundamental para conseguir suscriptores.
Desafortunadamente, el email no es la web. Un bonito diseño puede verse bien en un gestor de email, pero no en otro.

A principios de 2007, Gmail se convirtió en el servicio más restrictivo, ya que ignora todas las hojas de estilos externos e internos y solo permite los estilos en línea. Así que:

Si se ve bien en Gmail, es más que probable, que se vea bien en los otros gestores de correo.

Pero no todo son buenas noticias, incluso con los estilos en código, hay algunas restricciones.

Así que sentemos las bases para la creación de Newsletters exitosas que se ve bien incluso en el peor de los gestores de correo electrónico.

Cosas a Evitar maquetando nuestra Newsletter

  1. La referencia externa de CSS ( <link ref.=”style.css” type=”text/css”) o incrustada de hojas de estilo. Muchos servicios de correo electrónico cortan todo el código por de la etiqueta <body> con lo que desactiva las hojas de estilo externas.
    Pero atento, revisa tu lista de emails de destinatarios. Si en ella no tienes ningún correo de Gmail puedes incluir la etiqueta <style> dentro/después de <body> y funcionará! Incluso en Hotmail (Testado y aprobado para Outlook 2003 también)
  2. No usar javascript en nuestra newsletter. Nunca! No hay mejor manera de que marquen nuestra newsletter como spam, además de no funcionar.
  3. No utilizar CSS en código con la etiqueta <body> (tales como el ancho o color de fondo). La mayoría de servicios de correo electrónico ignoran la etiqueta. Trata de poner toda la newsletter dentro de un <table> o <div> y aplicar CSS a la misma.

Cosas que Si hacer al maquetar una newsletter

  1. Utilizar tablas para maquetar. El diseño no variará. Con las etiquetas <div> el posicionamiento puede variar según el gestor de correo, no es 100% seguro que se vea correctamente.
  2. Usar estilos CSS en código, sobretodo centra tus desarrollos en los <td>.
  3. Declarar ancho, cellpadding, cellspacing y para todas las tablas y celdas de la tabla. Así, tendremos un ancho fijo de la plantilla, es mejor que dejar anchos al azar. Como sugerencia, haz un diseño pequeño, ya que la mayoría de la gente va a ver la newsletter en un panel de vista previa.
  4. Prueba el envío. Obtén una lista de los distintos gestores de correo a los que va dirigido tu newletter y prueba el envío para detectar cualquier problema antes de que tu lista de suscriptores lo haga.

Imágenes en newsletter

  1. No utilizar imágenes de fondo. Gmail, entre otros, ignora cualquier declaración url () en un atributo de CCS. Eso si, puedes utilizar colores de fondo con el atributo de etiqueta bgcolor o color de fondo.
  2. No utilizar imágenes para contenido importante como las llamadas a la acción, los titulares y enlaces a su sitio web. Outlook, Gmail (entre otros) no descargan las imágenes hasta que lo permite el usuario. Si tu newsletter esta llena de gráficos, los destinatarios solo verán un montón de imágenes rotas, lo que conlleva a la desconfianza.
  3. Proporcionar texto alternativo para todas las imágenes. De esta forma el lector podrá ver algún contenido en lugar de las imágenes sin descargar. Esto funciona especialmente bien para los logotipos.
  4. Declarar ambos parámetros de altura y anchura para las imágenes, no dejes al azar la redimensión de las mismas.
  5. Usar hspace y vspace para agregar márgenes alrededor de la imagen.

Listado de las etiquetas y estilos CSS y su comportamiento en los distintos gestores de email

Actualizado en abril de 2010

Style Element Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

<style> in <head> Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
<style> in <body> Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
Link Element Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

<link> in <head> Yes Yes Yes Yes Yes Yes Yes No Yes Yes Yes
<link> in <body> Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
Selectors Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

e Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
* Yes Yes Yes No No Yes Yes No No Yes Yes
e.className Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
e#id Yes No Yes Yes Yes Yes Yes No No Yes Yes
e:link Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
e:active, e:hover Yes Yes Yes Yes No Yes Yes No No Yes Yes
e:first-line Yes No No Yes No Yes Yes No No Yes Yes
e:first-letter Yes No No Yes No Yes Yes No No Yes Yes
e > f No No Yes Yes No Yes No No No No No
e:focus No No Yes Yes No Yes Yes No No No No
e+f No No No No No Yes Yes No No No No
e[foo] No No Yes Yes No Yes Yes No No No No
Text & Fonts Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

direction Yes Yes Yes Yes No Yes Yes No No Yes Yes
font Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
font-family Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
font-size Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
line-height Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
text-overflow CSS3 Partial or buggy support Partial or buggy support No No No Partial or buggy support Partial or buggy support Partial or buggy support No Partial or buggy support Partial or buggy support
text-shadow CSS3 No Partial or buggy support Partial or buggy support Partial or buggy support No Yes Yes Partial or buggy support No No No
text-transform Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
white-space No Yes Yes Yes Yes Yes Yes Yes No No No
word-spacing Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
word-wrap CSS3 Partial or buggy support No Yes Yes No Yes Partial or buggy support No No Partial or buggy support Partial or buggy support
vertical-align Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
Color & Background Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
background Yes No Yes Yes Partial or buggy support Yes Yes Partial or buggy support No No Yes
-moz-background CSS3 No No No No No No No No No No No
-webkit-background CSS3 No No No No No Yes Yes No No No No
background-color Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
background-image Yes No Yes Yes No Yes Yes No No No Yes
background-position Yes No Yes Yes No Yes Yes No No No Yes
background-repeat Yes No Yes Yes No Yes Yes No No No Yes
-khtml-background-size CSS3 No No No No No Yes Yes No No No No
-moz-background-size CSS3 No No No No No No No No No No No
-o-background-size CSS3 No No No No No No No No No No No
-webkit-background-size CSS3 No No No No No Yes Yes No No No No
HSL Colors CSS3 Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
HSLA Colors CSS3 No No No No No Yes Yes No No No No
Opacity CSS3 No No No No No Yes Yes No No No No
RGBA Colors CSS3 No No No No No Yes Yes No No No No
Box Model Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

border Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
-moz-border-color CSS3 No No No No No No No No No No No
-moz-border-image CSS3 No No No No No No No No No No No
-moz-border-radius CSS3 No No No No No No No No No No No
-webkit-border-radius CSS3 No No No No No Yes Yes No No No No
-moz-box-shadow CSS3 No No No No No No No No No No No
-moz-box-sizing CSS3 No No Yes No No No No No No Yes Yes
height Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
margin Yes No Yes Yes Yes Yes Yes Yes No Yes Yes
padding Yes Yes Yes Yes Partial or buggy support Yes Yes Yes No Yes Yes
width Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
Positioning & Display Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

bottom Yes No No No No Yes Yes No No Yes Yes
clear Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
clip Yes No No No No Yes Yes No No No Yes
cursor Yes Yes Yes Yes No Yes No No No Yes Yes
display Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes
float Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
left Yes No No No No Yes Yes No No Yes Yes
opacity No No No No No Yes Yes No No No Yes
outline CSS3 No No Partial or buggy support Partial or buggy support No Yes Yes Partial or buggy support No No No
overflow Yes Yes Yes Yes No Yes No Yes No No Yes
position Yes No No No No Yes Yes No No Yes Yes
resize CSS3 No Yes Yes Yes No Yes No No No Yes Yes
right Yes No No No No Yes Yes No No Yes Yes
top Yes No No No No Yes Yes No No Yes Yes
visibility Yes Yes Yes Yes No Yes Yes No No No Yes
z-index Yes No No No Yes Yes Yes No No Yes Yes
Lists Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

list-style-image Yes No Yes Yes No Yes Yes No No No Yes
list-style-position Yes Yes Yes Yes No Yes Yes Yes No No Yes
list-style-type Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes
Tables Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

border-collapse Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes
border-spacing No No Yes Yes No Yes Yes Yes No No No
caption-side No Yes No No No No No Yes No No No
empty-cells No Yes Yes Yes No Yes Yes Yes No No No
table-layout Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
Total Market Share 28% 16% 14% 9% 8% 7% 6% 1% 1%

Fuente: www.campaignmonitor.com/css/

Herramientas curiosas:

Soldesign. Transforma tu html en una newsletter
Para vaguetes. Funciona si tu diseño es muy básico, realmente incluye automaticamente la etiqueta <style> en la de <body> y poco más.

Espero que os sirva!