Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Seo para diseñadores

750 views

Published on

He subido la presentación de la charla que impartí recientemente en la empresa al equipo de diseñadores sobre las recomendaciones SEO que deberían tener en cuenta a la hora de diseñar un nuevo proyecto web.

Muchos de los errores o problemas SEO vienen dados por un mal diseño, o un diseño no orientado a SEO, así pues el objetivo de la misma es involucrar al departamento de diseño a cuidar ciertos aspectos importantes a tener en cuenta si queremos que la nueva web parta de una base sólida.

Los puntos más importantes son:
1. ¿Qués es el SEO? Implicaciones en el diseño.
2. Títulos y encabezados.
3. Diseño adaptativo, responsive design - Bootstrap
4. Tipografías y contenido rastreable.
5. Equilibrio entre velocidad y diseño.
6. Páginas de error 404.
7. Redes sociales
8. Técnicas de Link Baiting
9. CRO y UX
10. Errores comunes
11. Enlaces de interés

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

Seo para diseñadores

  1. 1. Por Jonatan Jumbert http://jonatanjumbert.com/ Diseño web orientado a SEO
  2. 2. Por Jonatan Jumbert http://jonatanjumbert.com/ 1. ¿Qué es el SEO? Implicaciones en el diseño. 2. Títulos y encabezados 3. Diseño adaptativo / responsive - Bootstrap 4. Tipografías y contenido rastreable 5. Equilibrio entre velocidad y diseño 6. Páginas de Error 404 7. Redes Sociales 8. Técnicas de Link Baiting 9. CRO y UX 10. Errores comunes 11. Enlaces de interés Diseño web orientado a SEO
  3. 3. Por Jonatan Jumbert http://jonatanjumbert.com/ 1. ¿Qué es el SEO? Implicaciones en el diseño. 2. Títulos y encabezados 3. Diseño adaptativo / responsive - Bootstrap 4. Tipografías y contenido rastreable 5. Equilibrio entre velocidad y diseño 6. Páginas de Error 404 7. Redes Sociales 8. Técnicas de Link Baiting 9. CRO y UX 10. Errores comunes 11. Enlaces de interés ¿Qué es el SEO? Implicaciones en el diseño.
  4. 4. Por Jonatan Jumbert http://jonatanjumbert.com/ ¿Qué es el SEO? • Search Engine Optimization • Técnicas de posicionamiento en buscadores • Salir en Google (sin pagar – resultados orgánicos) • Tener visibilidad en Google (existir en Internet) ¿Porqué Google? Volumen de búsquedas en España 2013 Google Bing Yahoo! Babylon Conduit Otros Google 95.04% ¿Qué es el SEO? Implicaciones en el diseño.
  5. 5. Por Jonatan Jumbert http://jonatanjumbert.com/ Algoritmo interno de Google Google, al igual que el resto de buscadores, tienen un algoritmo que determina la relevancia (posición) de las páginas web para una determinada consulta. Gracias a este algoritmo posiciona un resultado sobre otro. 1. El éxito de Google está en su algoritmo, muestra resultados relevantes para los usuarios. 2. Hay más de 300 factores que Google tiene en cuenta para determinar la posición de una página web. 3. Algunos de estos aspectos afectan directamente o indirectamente al departamento de diseño. Factores importantes (implicación directa) • Importancia del contenido • Titulares y encabezados • Velocidad de carga • Tipografías e imágenes • Diseño adaptativo / responsive • Redes sociales ¿Qué es el SEO? Implicaciones en el diseño.
  6. 6. Por Jonatan Jumbert http://jonatanjumbert.com/ ¿Qué es el SEO? Implicaciones en el diseño. 1. ¿Qué es el SEO? Implicaciones en el diseño. 2. Títulos y encabezados 3. Diseño adaptativo / responsive - Bootstrap 4. Tipografías y contenido rastreable 5. Equilibrio entre velocidad y diseño 6. Páginas de Error 404 7. Redes Sociales 8. Técnicas de Link Baiting 9. CRO y UX 10. Errores comunes 11. Enlaces de interés
  7. 7. Por Jonatan Jumbert http://jonatanjumbert.com/ ¿Qué entiende Google por encabezado? Google, al igual que el resto de buscadores, distinguen hasta 6 tipos de encabezados (títulos, titulares, headings). En código HTML se representan con <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Estas etiquetas son muy importantes a nivel SEO, puesto que su función es la de contener un título que resuma el contenido que aparecerá a continuación. Así, Google, puede hacerse a la idea de que encontrará en esa página. No se acostumbra a usar todos los encabezados, pero a nivel de diseño es interesante que se planteen los diferentes estilos/formatos para los diferentes encabezados y mantener esta coherencia en todas las páginas. Siendo el <h1> el más importante y <h6> el titular de menor importancia. Hay que entender el sistema de encabezados como el índice de un libro. Dónde <h1> sería el título del libro (sólo puede haber un <h1> por página), <h2> serían los capítulos, <h3> los temas que se tratan en los capítulos, <h4> subtemas de un tema… Títulos, encabezados y textos
  8. 8. Por Jonatan Jumbert http://jonatanjumbert.com/ ¿Qué hay que tener en cuenta? 1. Todas las páginas tienen que tener un <h1>. Todas las páginas tienen que tener un título. 2. No debe existir un <h3> si no hay un <h2> en la misma página. Estéticamente puede quedar bien en una página concreta poner un titular del tipo <h3>…. Pero hay que tener en cuenta que los anteriores deben existir. 3. La página principal también debe tener un título. 4. Evitar en la medida de lo posible los títulos con imagen. Títulos, encabezados y textos
  9. 9. Por Jonatan Jumbert http://jonatanjumbert.com/ Títulos, encabezados y textos
  10. 10. Por Jonatan Jumbert http://jonatanjumbert.com/ Títulos, encabezados y textos
  11. 11. Por Jonatan Jumbert http://jonatanjumbert.com/ <a> <h1> <h2> <h2> Títulos, encabezados y textos
  12. 12. Por Jonatan Jumbert http://jonatanjumbert.com/ Recomendaciones Cuando se implemente diseño para un nuevo website, crear un PSD (guía de estilo) con: 1. El estilo necesario para los 6 tipos de encabezados (títulos) <h1>, <h2>, …. <h6>. 2. Párrafos de texto, citas. 3. Negritas, cursivas, subrayados. 4. Listas 5. Tablas ¿Qué conseguimos? 1. Facilitar trabajo al maquetador. 2. Coherencia de estilos para toda la web. 3. Tener una plantilla básica para que los content managers puedan escribir sin depender del diseño y pensando en SEO. Títulos, encabezados y textos
  13. 13. Por Jonatan Jumbert http://jonatanjumbert.com/ Títulos, encabezados y textos
  14. 14. Por Jonatan Jumbert http://jonatanjumbert.com/ Responsive design 1. ¿Qué es el SEO? Implicaciones en el diseño. 2. Títulos y encabezados 3. Diseño adaptativo / responsive - Bootstrap 4. Tipografías y contenido rastreable 5. Equilibrio entre velocidad y diseño 6. Páginas de Error 404 7. Redes Sociales 8. Técnicas de Link Baiting 9. CRO y UX 10. Errores comunes 11. Enlaces de interés
  15. 15. Por Jonatan Jumbert http://jonatanjumbert.com/ Definición: El diseño web adaptable o adaptativo (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario. Resumiendo: Una misma página web se ve bien en diferentes dispositivos (desktop, tablet, mobile, …) ¿Por qué? 1. Habrán más dispositivos móviles conectados a Internet que personas a finales de 2014. Leer noticia. 2. A finales de 2013 un 31% del tráfico web proviene de dispositivos móviles. Fuente. 3. Perdemos usuarios al no tener el sitio adaptado a dispositivos móviles. 4. Aparecemos más abajo en las SERP de dispositivos móviles si no tenemos el sitio adaptado. Responsive design
  16. 16. Por Jonatan Jumbert http://jonatanjumbert.com/ Responsive design
  17. 17. Por Jonatan Jumbert http://jonatanjumbert.com/ Responsive design
  18. 18. Por Jonatan Jumbert http://jonatanjumbert.com/ Responsive design
  19. 19. Por Jonatan Jumbert http://jonatanjumbert.com/ Responsive design
  20. 20. Por Jonatan Jumbert http://jonatanjumbert.com/ Boostrap http://getbootstrap.com/ The most popular front-end framework for developing responsive, mobile first projects on the web. La idea es diseñar pensando en dispositivos móviles (mostrar información básica) e ir ampliando. Fuentes: • Desktop First vs Mobile First • What is mobile first and why I should I care? • Mobile first design. Pensemos de pantalla smartphone a PC y no alrevés. Responsive design
  21. 21. Por Jonatan Jumbert http://jonatanjumbert.com/ Responsive design
  22. 22. Por Jonatan Jumbert http://jonatanjumbert.com/ ¿Cómo empezamos? Boostrap trabaja con un grid de 12 columnas a 1200px (aunque es modificable). 53.71 % Responsive design
  23. 23. Por Jonatan Jumbert http://jonatanjumbert.com/ Escenario ideal Hacer 3 diseños, empezando por la versión móvil, luego diseñar para tablets y finalmente para desktop. Evidentemente el proceso de conceptualización de la web y el diseño llevarán más tiempo, pero luego todo son ventajas. 1. Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, PCs, tabletas, teléfonos móviles y esto hace que el impacto en el usuario sea mucho mayor y de mejor calidad. 2. Se reducen los costes brutalmente, nada de realizar mantenimientos especializados o versiones diferentes. 3. La usabilidad es infinitamente mayor, si desde cualquier teléfono puedo USAR tu web, tendré muchísimas más posibilidades de ser usuario y tú muchas más posibilidades de que convierta. 4. En cuanto a la optimización de motores de búsqueda, también se ve notoriamente mejorada con tan sólo una URL en los resultados de búsqueda. + horas calidad UX SEO Conversión y ventas Responsive design
  24. 24. Por Jonatan Jumbert http://jonatanjumbert.com/ Tipografías y contenido rastreable 1. ¿Qué es el SEO? Implicaciones en el diseño. 2. Títulos y encabezados 3. Diseño adaptativo / responsive - Bootstrap 4. Tipografías y contenido rastreable 5. Equilibrio entre velocidad y diseño 6. Páginas de Error 404 7. Redes Sociales 8. Técnicas de Link Baiting 9. CRO y UX 10. Errores comunes 11. Enlaces de interés
  25. 25. Por Jonatan Jumbert http://jonatanjumbert.com/ Principales problemas 1. No todos los navegadores muestran igual las tipografías. 2. No siempre disponemos de la tipografía para formato web. ¿Qué se suele hacer? En lugar de maquetar el contenido donde el texto sea rastreable (accesible), se acaba convirtiendo en una imagen para que todos los navegadores muestren la tipografía de la misma manera. Si además le sumamos el factor de no disponer de la tipografía lo anterior ocurre el 100% de la veces. ¿Consecuencias? Google y el resto de buscadores ignoran ese texto, porqué no lo encuentran en el documento HTML (está, pero como una imagen). Tipografías y contenido rastreable
  26. 26. Por Jonatan Jumbert http://jonatanjumbert.com/ Google Chrome Tipografías y contenido rastreable
  27. 27. Por Jonatan Jumbert http://jonatanjumbert.com/ Tipografías y contenido rastreable Mozilla Firefox
  28. 28. Por Jonatan Jumbert http://jonatanjumbert.com/ Tipografías y contenido rastreable Internet Explorer 8
  29. 29. Por Jonatan Jumbert http://jonatanjumbert.com/ Tipografías y contenido rastreable Safari
  30. 30. Por Jonatan Jumbert http://jonatanjumbert.com/ Tipografías y contenido rastreable Internet Explorer 11
  31. 31. Por Jonatan Jumbert http://jonatanjumbert.com/ Más detalles en: http://moz.com/blog/designing-for-seo/ Tipografías y contenido rastreable Textos importantes que perdemos para SEO
  32. 32. Por Jonatan Jumbert http://jonatanjumbert.com/ Equilibrio entre velocidad y diseño 1. ¿Qué es el SEO? Implicaciones en el diseño. 2. Títulos y encabezados 3. Diseño adaptativo / responsive - Bootstrap 4. Tipografías y contenido rastreable 5. Equilibrio entre velocidad y diseño 6. Páginas de Error 404 7. Redes Sociales 8. Técnicas de Link Baiting 9. CRO y UX 10. Errores comunes 11. Enlaces de interés
  33. 33. Por Jonatan Jumbert http://jonatanjumbert.com/ El problema Implementar diseños super-fashion-molones conllevan muchas líneas de código. Muchos ficheros Javascripts para hacer esas animaciones tan extraordinarias o esos slideres que se mueven a velocidad de crucero. Y como ya sabemos, contra más pese/ocupe una web, más lento carga. Contra más lenta carga una web peor posiciona en los buscadores. ¿Qué es una web rápida? Google considera una web rápida, aquella que carga en menos de 3 segundos. Equilibrio entre velocidad y diseño
  34. 34. Por Jonatan Jumbert http://jonatanjumbert.com/ Lo que el usuario ve: Equilibrio entre velocidad y diseño
  35. 35. Por Jonatan Jumbert http://jonatanjumbert.com/ Lo que Google ve: Page load time: 1.16s Total page size: 446KB Total number of requests: 14 Equilibrio entre velocidad y diseño
  36. 36. Por Jonatan Jumbert http://jonatanjumbert.com/ Equilibrio entre velocidad y diseño Lo que el usuario ve:
  37. 37. Por Jonatan Jumbert http://jonatanjumbert.com/ Page load time: 4.90s Total page size: 3.37MB Total number of requests: 45 Equilibrio entre velocidad y diseño Lo que Google ve:
  38. 38. Por Jonatan Jumbert http://jonatanjumbert.com/ Equilibrio entre velocidad y diseño Lo que el usuario ve:
  39. 39. Por Jonatan Jumbert http://jonatanjumbert.com/ Page load time: 6.95s Total page size: 4.00MB Total number of requests: 76 Equilibrio entre velocidad y diseño Lo que Google ve:
  40. 40. Por Jonatan Jumbert http://jonatanjumbert.com/ Equilibrio entre velocidad y diseño Lo que el usuario ve:
  41. 41. Por Jonatan Jumbert http://jonatanjumbert.com/ Page load time: 9.90s Total page size: 6.12MB Total number of requests: 308 Equilibrio entre velocidad y diseño Lo que Google ve:
  42. 42. Por Jonatan Jumbert http://jonatanjumbert.com/ Hay que buscar el equilibrio entre el diseño y la velocidad de carga. Equilibrio entre velocidad y diseño
  43. 43. Por Jonatan Jumbert http://jonatanjumbert.com/ Páginas de error 404 1. ¿Qué es el SEO? Implicaciones en el diseño. 2. Títulos y encabezados 3. Diseño adaptativo / responsive - Bootstrap 4. Tipografías y contenido rastreable 5. Equilibrio entre velocidad y diseño 6. Páginas de Error 404 7. Redes Sociales 8. Técnicas de Link Baiting 9. CRO y UX 10. Errores comunes 11. Enlaces de interés
  44. 44. Por Jonatan Jumbert http://jonatanjumbert.com/ Páginas de error 404
  45. 45. Por Jonatan Jumbert http://jonatanjumbert.com/ Páginas de error 404
  46. 46. Por Jonatan Jumbert http://jonatanjumbert.com/ Páginas de error 404
  47. 47. Por Jonatan Jumbert http://jonatanjumbert.com/ Páginas de error 404 ¿Cuál preferimos y porqué?
  48. 48. Por Jonatan Jumbert http://jonatanjumbert.com/ Páginas de error 404
  49. 49. Por Jonatan Jumbert http://jonatanjumbert.com/ Las páginas de error permiten: 1. Dejar claro al usuario que a la página que han accedido no existe. 2. Reconducir a los usuarios que llegan a páginas con enlaces rotos a otras secciones interesantes. 3. Reducir la tasa de rebote, factor clave para el SEO. Importante • En los mockup / wireframes de los nuevos proyectos se suele obviar/olvidar la página de error. Seamos proactivos e informemos de la importancia de esta página. • La página de error debe mantener la línea y estilo de la web general. • En la medida de lo posible integrar un buscador que permita a los usuarios buscar la página deseada. • Incluir enlaces a secciones destacadas de la web. • Dejar claro que se trata de un error. Páginas de error 404
  50. 50. Por Jonatan Jumbert http://jonatanjumbert.com/ Redes sociales 1. ¿Qué es el SEO? Implicaciones en el diseño. 2. Títulos y encabezados 3. Diseño adaptativo / responsive - Bootstrap 4. Tipografías y contenido rastreable 5. Equilibrio entre velocidad y diseño 6. Páginas de Error 404 7. Redes Sociales 8. Técnicas de Link Baiting 9. CRO y UX 10. Errores comunes 11. Enlaces de interés
  51. 51. Por Jonatan Jumbert http://jonatanjumbert.com/ Redes sociales
  52. 52. Por Jonatan Jumbert http://jonatanjumbert.com/ Las redes sociales ayudan al SEO 1. Ayudan a generar enlaces (factor clave en algoritmo de posicionamiento de Google). 2. Viralidad. Si el contenido es atractivo, se compartirá la página en las redes sociales. Aspectos a tener en cuenta: • Si la página es privada (user/pass) no tiene sentido añadir enlaces sociales. • Cada web es un mundo y los widgets sociales varían dependiendo de la temática de la web. • Si no se han planteado botones sociales en los mockups y creemos que podrían ser interesantes, discutirlo. Redes sociales
  53. 53. Por Jonatan Jumbert http://jonatanjumbert.com/ Técnicas de Link Baiting 1. ¿Qué es el SEO? Implicaciones en el diseño. 2. Títulos y encabezados 3. Diseño adaptativo / responsive - Bootstrap 4. Tipografías y contenido rastreable 5. Equilibrio entre velocidad y diseño 6. Páginas de Error 404 7. Redes Sociales 8. Técnicas de Link Baiting 9. CRO y UX 10. Errores comunes 11. Enlaces de interés
  54. 54. Por Jonatan Jumbert http://jonatanjumbert.com/ ¿Qué es el Link baiting? Es un término en inglés que hace referencia a cualquier contenido o característica de un sitio web de que el usuario estimula a los visitantes a crear enlaces hacia él desde sus propias webs. Intentar generar este tipo de contenidos con frecuencia es empleado en tareas de posicionamiento en buscadores. Beneficios SEO ¡Enlaces, enlaces, enlaces y más enlaces! ¿Qué podemos hacer a nivel de diseño? • Sitio web atractivo • Crear infografías • Aspectos humorísticos / amarillistas • Generalmente es tarea de la gente de contenidos, pero para que la técnica funcione el diseño debe estar a la altura. Técnicas de Link Baiting
  55. 55. Por Jonatan Jumbert http://jonatanjumbert.com/ Técnicas de Link Baiting
  56. 56. Por Jonatan Jumbert http://jonatanjumbert.com/ CRO y UX 1. ¿Qué es el SEO? Implicaciones en el diseño. 2. Títulos y encabezados 3. Diseño adaptativo / responsive - Bootstrap 4. Tipografías y contenido rastreable 5. Equilibrio entre velocidad y diseño 6. Páginas de Error 404 7. Redes Sociales 8. Técnicas de Link Baiting 9. CRO y UX 10. Errores comunes 11. Enlaces de interés
  57. 57. Por Jonatan Jumbert http://jonatanjumbert.com/ ¿Qué es el CRO? • Conversion Rate Optimization • Optimizar nuestra página para que los usuarios hagan lo que queremos que hagan. • CRO va de la mano de la Usabilidad (experiencia de usuario – UX). Desmintiendo algunos mitos • Los formularios con múltiples pasos funcionan. • Es mejor reducir el número de decisiones que pueda tomar el usuario que abrumarlo con cientos de opciones. (Decidir por el usuario, según nuestros intereses). • Recordar que el usuario sabe hacer scroll. No es necesario ubicarlo todo en la parte superior. SEO y UX van de la mano 1. Una gran experiencia de usuario ayuda a que este consiga los objetivos marcados en nuestra web. 2. Si los consigue probablemente volverá. 3. Al ser fácil navegar y por la web, la tasa de rebote disminuye. CRO y UX
  58. 58. Por Jonatan Jumbert http://jonatanjumbert.com/ ¿Qué podemos hacer a nivel de diseño? 1. Añadir videos, los videos incrementan el CRO. Además, nos permiten añadir Rich Snippets en las SERP. 2. Iconos de confianza: CRO y UX
  59. 59. Por Jonatan Jumbert http://jonatanjumbert.com/ ¿Qué podemos hacer a nivel de diseño? 3. Añadir testimonios. Incluye comentarios y opiniones de la gente en tu página. CRO y UX
  60. 60. Por Jonatan Jumbert http://jonatanjumbert.com/ ¿Cómo diseñar una newsletter? Un boletín no tiene sentido sin el marketing de contenidos, porqué sin el, solo queda el SPAM. Si quieres que los usuarios respondan a las comunicaciones, estas no deben ser un tablón de anuncios. NO SPAMEES, detrás de cada email hay una persona que hay que respetar. 80% contenido de valor Que entretenga Que sea útil Que inspire 20% promoción Tenemos 2 opciones: 1. Dividir el espacio del email con un 80% para contenido de valor y 20 % de contenido promocional. 2. Enviar el 80% de los emails con contenido de valor y el 20% restante con contenido promocional (parece que funciona más esta estrategia). CRO y UX
  61. 61. Por Jonatan Jumbert http://jonatanjumbert.com/ Errores comunes 1. ¿Qué es el SEO? Implicaciones en el diseño. 2. Títulos y encabezados 3. Diseño adaptativo / responsive - Bootstrap 4. Tipografías y contenido rastreable 5. Equilibrio entre velocidad y diseño 6. Páginas de Error 404 7. Redes Sociales 8. Técnicas de Link Baiting 9. CRO y UX 10. Errores comunes 11. Enlaces de interés
  62. 62. Por Jonatan Jumbert http://jonatanjumbert.com/ Velocidad de carga • Personalizar botones de sistema (selects, radio buttons, checkboxs, file). • Tipografías y exceso de imágenes. • Coherencia (botones, encabezados, etc)  Maqueta y UX • Bordes redondeados, sombras y otros efectos con Internet Explorer 8. Rastreabilidad • Uso de Flash • Menús de navegación invisibles para los buscadores. % Rebote • Grid de Bootstrap. Pensar en dispositivos móviles, tablets… • Preparar una super home page y descuidar el resto. Hoy en día todas las páginas son landing pages. • Coherencia (botones, encabezados, etc)  Maqueta y UX Errores comunes
  63. 63. Por Jonatan Jumbert http://jonatanjumbert.com/ 1. Personalizar botones de sistema (selects, radio buttons, checkboxs, file) Errores comunes > Velocidad de carga
  64. 64. Por Jonatan Jumbert http://jonatanjumbert.com/ 1. Personalizar botones de sistema (selects, radio buttons, checkboxs, file) Implicaciones en maquetación y programación: 1. Agregar hasta 3 plugins externos que permitan modificar el diseño básico de sistema: • 3 peticiones extra al servidor. • Un aumento en el tamaño de la página de XXX Kb. • Si el programador no es muy avispado, estos 3 plugins se incluirán en todas las páginas de la web y no solo en la página necesaria. 2. El botón enviar carga una imagen. Errores comunes > Velocidad de carga
  65. 65. Por Jonatan Jumbert http://jonatanjumbert.com/ 2. Tipografías y exceso de imágenes Importancia del contenido En esta página ya tiene poco contenido como para hacer uso de tipografías que no disponemos y tener que realizar la maquetación como si todo fuera imagen. Si fuera posible evitar el uso de fuentes no estándar. Si no es posible usar fuentes estándar. Hacer uso de Google Fonts. Actualmente disponéis de 632 font- families. Errores comunes > Velocidad de carga
  66. 66. Por Jonatan Jumbert http://jonatanjumbert.com/ 3. Coherencia (botones, encabezados, etc) La coherencia es uno de los principios más importantes de la Usabilidad. Cuando se diseña una web hay que tenerla en mente y hacer que todos los botones, títulos, párrafos… sean iguales en todas las páginas. Hay que centrarse en el usuario… y sobre todo si estamos diseñando un site orientado a SEO el tener coherencia nos ahorrará muchas líneas de código (Menos tamaño  Mayor velocidad  Mayor posicionamiento). 4. Bordes redondeados, sombras y otros efectos con Internet Explorer 8 La premisa principal es dejar de dar soporte a navegadores obsoletos como Internet Explorer 8. Pero dependiendo del proyecto, no será posible. Entonces es cuando hay que tener especial cuidado con bordes redondeados, sombras, efectos y demás, porqué no se verán correctamente en IE8 y anteriores. Obligar al maquetador a conseguir bordes redondeados, sombras, etc. para este navegador afecta negativamente a la velocidad de carga puesto que hay que añadir imágenes, plugins js… Además IE8 no da soporte a media queries (técnica css que hace que los sites tengan un diseño responsive). Errores comunes > Velocidad de carga
  67. 67. Por Jonatan Jumbert http://jonatanjumbert.com/ 5. Uso de Flash Importancia del contenido Google no puede leer el contenido que se esta mostrando dentro de un Flash. Si el flash es necesario porque es interactivo y aporta valor a la página no hay ningún problema. Lo único que deberemos tener en cuenta es que deberemos replicar esta información para que Google la pueda encontrar. Errores comunes > Rastreabilidad
  68. 68. Por Jonatan Jumbert http://jonatanjumbert.com/ Enlaces de interés 1. ¿Qué es el SEO? Implicaciones en el diseño. 2. Títulos y encabezados 3. Diseño adaptativo / responsive - Bootstrap 4. Tipografías y contenido rastreable 5. Equilibrio entre velocidad y diseño 6. Páginas de Error 404 7. Redes Sociales 8. Técnicas de Link Baiting 9. CRO y UX 10. Errores comunes 11. Enlaces de interés
  69. 69. Por Jonatan Jumbert http://jonatanjumbert.com/ • A finales de 2014 habrá más dispositivos móviles conectados a Internet que personas. • A finales de 2013 un 31% del tráfico vino de dispositivos móviles. • Bootstrap Framework • Desktop First vs Mobile First • What is mobile first and why I should I care? • Mobile first design. Pensemos de pantalla smartphone a PC y no alrevés. • Designing for SEO • Creación de páginas 404 útiles • ¿Qué es el Link Baiting? • UX Myths That Hurt SEO • Panel Pinterest con infografías SEO y UX • Prepara tu newsletter - email marketing (min. 51) Enlaces de interés
  70. 70. Por Jonatan Jumbert http://jonatanjumbert.com/ GRACIAS Diseño web orientado a SEO Si te ha gustado la presentación, no dudes en visitar mi blog. Escribo sobre SEO, analítica web, redes sociales, monetización, marketing online y mucho más! http://jonatanjumbert.com/blog/

×