Hemos creado una lista de los puntos que creemos importantes para publicar una web de manera óptima. Al menos ésta es la que intentamos seguir, lo máximo que podemos, desde PulpoLab.

Maquetación CSS/Diseño

1. Todos los botones tienen que tener diseño para las acciones: rollover para los ordenadores con mouse y clic para pantallas táctiles (iPhone, Android, iPad, …)
2. Trabajar la web pensando mínimamente en móvil. Apple ha preparado un documento para programar pensando en una interfaz táctil. Aquí podéis encontrar información para diseñar pensando en una pantalla táctil.
3. Subir el ico de la web.
4. Utilizar ems –> regla del 62’5% –> punto 1.5 del artículo 70 ideas expertas para mejorar el código CSS
5. Hacer font stacks –> Helvetica, Arial, Sans,…
6. Con el CSS3 podemos llegar a resultados visuales muy buenos. Un buen ejemplo es el text-shadow.
7. Revisar alineaciones en el diseño –> que todo sea equidistante, valorar los espacios en blanco y la jerarquía de información a nivel visual. Repasar los diseños del diseñador para que todo este exactamente igual.
8. Ajustar bien las tipografías para que sean lo más parecidas a los diseños del diseñador. Ajustar bien el line-height y las propiedades adecuadas. Truco para títulos gruesos: si nuestra tipografía HTML no es tan gruesa como la del programa de diseño podemos falsear el grosor haciendo un text-shadow de 1px a la izquierda
9. Organizar el código CSS con algún comentario en el código tipo tipografias, seccion somos, seccion bla bla ,…
10. Print version –> mirar si la web se ve lee bien cuando la imprimimos, sino siempre podemos hacer una versión sencillita para imprimir. Este artículo explica cómo generar un css para la versión imprimible

PHP

1. Crear clases y organizar bien el código.

Javascript/Ajax

1. Priorizar las cargas. Utilizar javascript para que visualmente aparezca mejor la web
2. Utilizar algún framework tipo jQuery para facilitaros la vida
3. Sólo si mejora la experiencia de usuario utilizar algún elemento animado dinámico. Por ejemplo un slideshow, un carrito de la compra por Ajax, ….

Flash

1. Sólo si no se puede hacer en Javascript y el proyecto lo requiere, utilizar Flash.

Creación de la web en XHTML

1. El HTML tiende a XHTML, es mucho más estricto y elegante. Se deberán seguir algunos pasos que Smashing Magazine explica en el artículo 10 pasos para crear una web XHTML
2. Si el logo es una imagen, para que se vea bien sin estilos el nombre de la empresa, se debe poner con texto también. Truco:

<h1 id=”logo”>
<a title=”Nombre Empresa Homepage” href=”http://www.nombreempresa.com”>Nombre Empresa</a>
</h1>
con estilo h1 a{ text-indent:-9999em;}

Optimización del peso de la página

1. Optimizar imágenes con sprites
2. Meter todo el css en un mismo archivo y comprimirlo
3. Meter todo el js en un mismo archivo y comprimirlo.
4. Herramienta para comprimir
5. Meter todos los css al inicio y los js al final del documento
6. Comprimir, si podemos, con Gzip
7. También podemos  cargar los javascripts sólo cuando los necesitemos
8. Leer este interesante artículo para ver qué técnicas podemos utilizar para optimizar la velocidad de nuestra web
9. Añadir expires headers en el .htaccess para ver cuanto tiempo tienen que estar en caché los archivos.
10. Añadir ETags en el .htaccess
11. Este tutorial te explica cómo cachear correctamente tu web
12. Todos los links tienen que linkar exactamente al link indexado. Si tiene una barra al final se tiene que poner
13. Instalar el YSlow para ver si tenemos bien optimizada nuestra web. También hay otro plugin de YSlow llamado WTF que te mira otros elementos

SEO

1. Urls amigables para SEO –> rewrite, htaccess
2. Cuidado con las urls duplicadas
3. Poner los titles optimizados para el buscador (sin accentos). Actualmente es el factor on-page más importante de nuestra web. Ver factores importantes en el SEO
4. Sitemap.xml dinámico para los buscadores
5. Poner el código de analytics en todas las páginas
6. Página 404 para páginas no encontradas
7. Poner metas diferentes para cada página trabajando la keyword adecuada
8. Links con title
9. Imágenes con alt y title
10. Validar  CSS/XHTML/links rotos/URLs indexadas (comprobar que no existe ninguna URL duplicada)
11. Al finalizar avisar a los buscadores –> google web master tools y otros buscadores
12. Poner no follow en el link de contacto y secciones que no queremos posicionar y restan importancia a nuestra web
13. Hacer h1 y h2’s reforzando el title de la página y la url
14. Footer con menu tipo sitemap para reforzar los links internos de nuestra web
15. Footer con créditos que linken a nuestra web  ;)
16. Hacer un robots.txt diciendo lo que no se quiere indexar
17. Si se puede crear la página en wordpress para posicionar mejor e instalar plugins de analytics, sitemap, seo (all in one seo pack)
18. Un blog wordpress almenos nos ayudará a posicionar nuestras long tails y reforzar nuestra web (siempre que se cuide el blog)
19. Recordar que los buscadores priman la experiencia de usuario para posicionar, así que todo lo que mejore la experiencia de nuestro usuario sumará puntos tanto en funcionalidad como en SEO.

Testeo

1. Hacer validación de CSS/XHTML/links rotos/URLs indexadas (para ver las URLs duplicadas)
2. Comprobación en Chrome PC/Mac.
3. Comprobación en ie7/ie8 PC/Mac.
4. Comprobación en Firefox PC/Mac.
5. Comprobación en Safari Mac.
6. Probar alguna herramienta de cross browser test de Adobe o una gratuita que te genera screenshots de diferentes navegadores

Otros detalles

1. Poner los emails codificados para que los rastreadores de emails para spam no los localicen.

SIEMPRE: Actualizar conocimientos

1. Smashing magazine y muchas webs más.

Aportar vuestro punto de vista, será interesante.
¿Qué opináis? ¿Alguna sugerencia?

Tags: CSS, html, optimizacion web, publicacion web, SEO, testeo web, velocidad web, xhtml