Nicolás Flores

Diseñador Multimedial

Diseño, optimización de webs y soluciones autogestionables

Yaestabaregistrado.com

Diseño por Kumite.
La gente de YER quería rediseñar su sitio, y me contactó para la implementación del mismo.
El desafío fue hacer los cambios sin que la rutina que el equipo tenía para actualizar el sitio cambie.
  • WordPress
  • Maquetación respetando los estándares de W3C y SEO.
  • PHP/MySQL | jQuery
Ir al sitio Datos técnicos

Filmabonito

Diseño por Pixelate Creativos.
La empresa necesitaba de un sistema para administrar algunos contenidos del sitio, pero en especial que permita altas, bajas y modificaciones de los productos y upload de fotos. Además el administrador permite elegir entre tres layout de banners para la home.
  • PHP/MySQL | jQuery
  • CMS propio
  • Maquetación respetando los estándares de W3C y SEO.
  • Montado en Smarty
Ir al sitio Datos técnicos

Playroad

Diseño y maquetación por Estudio 46.
El sitio ya contaba con un CMS, pero estaba incompleto. Me confiaron la terminación del mismo, permitiendo altas, bajas y modificaciones de productos y upload de fotos. Luego, se me encargó el desarrollo del carrito de compras.
  • Para el CMS, PHP/MySQL | jQuery
  • Carrito de compra con Dineromail
Ir al sitio Datos técnicos

OD Real Estate

Diseño y maquetacion por Estudio 46.
Se necesitaba un administrador para el catálogo del sitio, el cual permita altas, bajas y modificaciones de propiedades y noticias y upload de fotos. Se hizo también un sistema de propiedades destacadas para la home.
  • PHP/MySQL | jQuery
  • Creación de un CMS propio
  • Montado en Smarty
Ir al sitio Datos técnicos

Bien Cortado

El emprendimiento necesitaba un rediseño del logo y comenzar su comunicación web desde cero.
  • XHTML | jQuery
  • Maquetación respetando los estándares de W3C y SEO.
Ir al sitio Datos técnicos

Tercer Ojo

Se terminó el desarrollo del sitio full flash de la empresa. Además se agregó la sección "Novedades", y se optimizó el sitio para que sea correctamente indexado por buscadores.
  • AS 3
  • Información a través de XMLs
  • SEO aplicado a Flash
Ir al sitio Datos técnicos

Coramina Lenceria

Diseño por Pixelate Creativos.
Desarrollo de un sistema de administración para el catálogo del sitio, que permite altas, bajas y modificaciones de los productos y upload de fotos.
  • PHP/MySQL | jQuery
  • CMS propio
  • Maquetación respetando los estándares de W3C y SEO.
Ir al sitio Datos técnicos

El blog del Turu

pero no soy blogger

« ir al inicio

Guía de maquetación HTML para e-mails marketing

17 de abril de 2009 | 6:46 pm

En el tiempo en que llevo trabajando en Interactive, aprendí que algo a lo que hay que prestarle un poco más de atención en la etapa de test es a los e-mails marketing. Debido a la ausencia de estándares, y que corporativamente se utilizan clientes de email como lotus o outlook pero el público en general utiliza webmails, uno se ve obligado a reducir las piezas html a una serie de reglas para performar correctamente en todos los medios.

Como no suelo encontrar guías en la web sobre este tema, comparto la que uso diariamente. Agreguen o corrijan lo que crean necesario:

  1. Resolución de imágenes para web: 72 dpi.
  2. Evitar usar imágenes menores a 14px de alto y 8px de ancho.
  3. No usar hojas de estilos externas, ni estilos embebidos en el head.
  4. No usar javascript.
  5. No usar div para maquetar, usar tablas y no más de dos anidadas.
  6. Evitar usar degradés como fondo donde haya un cuerpo de texto. De esta manera se puede setear el color de fondo sólido como propiedad del td.
  7. Evitar la imágenes como fondo de un td.
  8. Utilizar etiqueta alt en todas las imágenes.
  9. Setear altura y ancho en tablas y tds.
  10. Setear alineaciones verticales y horizontales, aún cuando sean las default (middle y left).
  11. Para setear márgenes con presición, usar spacer.gif, archivo gif transparente de 15×15 pixeles seteándole ancho y alto a necesidad.
  12. Usar entidades htmls. Adjunto las más comunes:
    • á, é, í, ó, ú = á, é, í, ó, &uacute.
    • Á, É, Í, Ó, Ú = Á, É, Í, Ó, &Uacute.
    • ñ, Ñ = ñ, Ñ
    • TM = ™
    • (R) = ®
    • (C) = ©
    • Comillas simples = ‘
    • Comillas dobles = “
    • & = &
  13. Ojo al utilizar superscript “<sup></sup>”, en textos multilínea agregará márgenes.
  14. No usar etiqueta <p>.
  15. Colocar textos entre <font></font>. La forma correcta de formatear un texto sería:

<font face=”arial, helvetica, sans-serif” size=”1″ color=”#666666″ style=”font: normal 10px arial, helvetica, sans-serif; color:#666666;”>Lorem ipsum dolor sit amet</font>

De esta forma se asegura que el texto tenga el formato deseado, ya sea por “style”, o por los antiguos parámetros. Lotus usará face=”arial, helvetica, sans-serif” size=”1″ color=”#666666″, los webmails style=”font: normal 10px arial, helvetica, sans-serif; color:#666666;”.
La equivalencia en tamaños de tipografía sería:
- 10-11 = size 1
- 12-13 = size 2
- 14+ = size 3

Notar el retraso importante que se tiene en materia de email. No conozco a nivel mundial la eficacia que tiene un email marketing. Sí sé la eficacia que tienen en los sitios que maneja la agencia, porcentaje alto cuando el email se convierte en una pieza de comunicación y deja de ser un “correo no deseado”.

Más sobre eficacia de email marketing en Dossiernet.

decime lo que pensás...