Curso:

Administración
de Redes Sociales

Clase 10:
- Diseño Responsivo
- Planificación del SEO
La web en los 90’s
La web ¿Ahora?
 ¿Qué es Responsive Design?

• El Responsive Design básicamente trata de redimensionar los

elementos de la web y colocarlos de manera que se adapten al
tamaño de cada dispositivo, permitiendo así una visualización
adecuada proporcionando al usuario una mejor experiencia
Responsive Design no es una opción
Responsive Design no es una opción

• Google ha anunciado que las webs que sean responsives serán

priorizadas en sus resultados de búsquedas, por lo que aquellas
webs que cumplan con este nuevo requisito serán premiadas
ocupando un lugar privilegiado en los resultados de Google.
Cómo probar si un sitio es responsivo
• https://ready.mobi/
Diseño Responsivo v/s Diseño Adaptativo
Diseño Diseño
Adaptativo Responsivo
Diseño Adaptativo
Diseño Responsivo
 Parámetros básicos

• Ancho y alto de la ventana del navegador.

• Orientación del dispositivo.
• Proporción entre el alto y ancho de la pantalla.
• Resolución del dispositivo, es decir, la precisión del detalle en las imágenes de
mapa de bits.
Portrait Landscape
 VIEWPORT
El área visible del navegador
 Resolución de pantalla (pixeles físicos)
• La resolución de pantalla es el número de píxeles que puede ser mostrado en la
pantalla.
• Es un valor relacionado a la construcción física del dispositivo (Hardware Pixel)
 Pixel Device v/s Viewport
• La resolución se refiere al número de píxeles que puede mostrar dicha pantalla;
mientras que el viewport es el tamaño en píxeles que simula el navegador móvil que
tiene la pantalla cuando visualiza una página web.
• Su relación determina cómo se visualizará un contenido web en la pantalla
 Device pixel ratio

• Es el ratio entre los pixels lógicos y los pixels físicos de un

dispositivo. Llamamos pixel físico a uno de los miles de puntos
(hardware) que forman la pantalla de un dispositivo.
Tamaño viewport iPhone
Device pixel ratio
Progressive Enhancement v/s
Graceful Degradation
 Mobile First

Diseño y maquetación web orientada a dar prioridad a la visualización

en dispositivos móviles, es decir, se diseña una web para smartphones
y tablets y su estructura se adapta a los ordenadores.
 Desktop First

Es como se realizaros los primeros sitios web responsive, en donde

primero se desarrolla la versión de escritorio, y luego, ésta se adapta
para mostrar el sitio web correctamente en pantallas más pequeñas
 ¿Cuál enfoque es mejor?

• Técnicamente Mobile First.

• Sin embargo, depende de donde proviene en su mayor parte el
tráfico web.
 ¿Cómo se lleva a la práctica?
• Mediante cambios en la estructura del código Html
• Mediante cambios en la estructura del código CSS (Cascade Style Sheets)
• Para wordpress elegir un Theme que ya tenga la característica de responsive
Patrones de Responsive Design

Para diseñar un sitio web responsive existen 5 patrones básicos que se

pueden usar:

1. Tiny Tweaks
2. Mostly Fluid
3. Column Drop
4. Layout Shifter
5. Off Canvas
 Patrones de Responsive Design

• Es el patrón más simple y sencillo de implementar de todos. Se

basa en una sola columna para el contenido.
• Sus cambios son básicamente que dependiendo del tamaño de
pantalla, se amplían los espaciados y el tamaño de fuente.
• Es muy utilizado en sitios con mucho contenido escrito, así
mejoran la experiencia de lectura.
Patrones de Responsive Design

• Este patrón consiste en tener una grilla

o Grid de tamaño flexible.
• Cuando estamos en un smartphone
todo forma una única columna, y en
varias filas quedan colocados los
distintos bloques.
• Según vaya creciendo la pantalla, los
distintos bloques se agrupan ocupando
toda la pantalla disponible.
• En pantallas más grandes, el diseño es el
mismo pero queda agrupado dentro de
un contenedor que queda centrado en
la página con un tamaño fijo de ancho
Patrones de Responsive Design
• Este patrón consiste en que cada
bloque de contenido, que en un
smartphone vemos en filas, vaya
formando columnas según vaya siendo
más grande la pantalla del dispositivo.
• Tendremos un primer
breakpoint donde la segunda fila pasa
a ser columna, pero ocupando la
primera posición, habitualmente para
un menú de navegación.
• El contenido que aparecía en primer
lugar en la versión móvil, pasa a
ocupar la segunda columna en el
primer corte.
• Tendremos un segundo punto de corte
donde la última fila se convierte en
columna también.
Patrones de Responsive Design

• Este es uno de los

patrones más complejos.
Consiste en mover los
bloques de contenido
cambiando totalmente
el Layout, de ahí el
nombre del patrón.
Patrones de Responsive Design

• El patrón más complejo de

implementar
• Uno de los más utilizados en
aplicaciones móviles
• Este patrón esconde contenido en la
pantalla y únicamente es visible si
realizamos un determinado gesto.
• Este contenido oculto normalmente
es un menú de navegación. Cuando
la pantalla es más ancha, este
contenido se hace visible.
 Manejo de Imágenes en Responsive
• Siempre las imágenes deben estar optimizadas (www.tinypng.com)
• Es algo complicado en general
 Breakpoints

• Mobile: 360 x 640.

• Mobile: 375 x 667.
• Mobile: 360 x 720.
• iPhone X: 375 x 812.
• Pixel 2: 411 x 731.
• Tablet: 768 x 1024.
• Laptop: 1366 x 768.
• laptop or desktop de alta resolución: 1920 x 1080.
 SEO: Search Engine Optimization
• Optimización para motores de búsqueda
• Es un conjunto de técnicas para aplicar al contenido del sitio y al código
del sitio web, para lograr los primeros lugares en los resultados de los
motores de búsqueda
SEO y SEM
 SEO (Search Engine Optimization)
La mayor parte del tráfico proviene de un buscador
La estructura del sitio web ayuda o perjudica para esto.
También el tiempo de carga de la página
Estar dentro de los 10 primeros resultados de búsqueda
genera un gran tráfico
 Search Engine Optimization vs Search Experience
Optimization
• Dar la mejor respuesta
• Optimizamos por el contexto de la búsqueda no por una palabra
• Los enlaces deben ser de calidad, contextuales
• El posicionamiento cambia en tiempo real
• Se pueden ver resultados hasta en 8 días
 Los 3 Pilares del SEO

1. SEO Técnico: Nuestra misión principal es que el sitio web sea fácil
de leer por los algoritmos y por las personas.

2. Estrategia y contenido: Crear los contenidos para solucionar lo que

las personas buscan.

3. Autoridad: Que el algoritmo confíe en el sitio web que tenemos y lo

lleve a las primeras posiciones.
 4
Los 3 Pilares del SEO

4. Responsive design
• Toda pagina web ya en 2020 debe ser disenada first mobile, para
ser consumida en teléfonos y tablets prioritariamente.
• También es importante la UX (User eXperience), para mejorar la
retención promedio del usuario por medio de que les guste estar
dentro de tu página.
 Certificado de seguridad SSL

• Google lleva tiempo impulsando el uso de la web https (2014), o lo

que es lo mismo, los certificados SSL. Y para ello, realizó un
comunicado oficial «HTTPS como señal de ranking» donde
informaba que el https empezaría a tomar influencia en su
algoritmo de posicionamiento.
• Desde entonces, este certificado de seguridad ha ido
incrementando paulatinamente su importancia, hasta tal punto de
conseguir mejorar en el ranking en Google, de manera que ahora
es otro factor importante de cara al SEO.
 Claves SEO
• Frecuencia > ¿Cuando?
• Relevancia > ¿Qué es?
• Autoridad > ¿Quién es?
• Responsive Design > ¿Cómo es?
Cómo mejorar el SEO de un sitio web

• Publicar contenido con mucha frecuencia,

• Publicar contenido relevante para las necesidades y expectativas del
usuario.
• Tener autoridad de dominio y página. La confianza de tu sitio aumenta
mientras más sitios externos tengan links a tu sitio web.
• Aplicar Responsive Design con los patrones de diseño recomendados
por Google.
Proceso para mejorar el SEO
Entender la intención de búsqueda
 Fórmulas para construir titulares

1. Cómo + verbo + nombre + beneficio.

➔ “Cómo ganar amigos e influir sobre las personas”.
2. Número + nombre + verbo + complemento.
➔ “Más de un millón de alumnos abandonan sus estudios en México”.
3. Verbo + deseo + complemento + negación
➔ “Aprende a programar sin saber matemáticas”.
4. Consigue + deseo + tiempo
➔ “Consigue vender tu casa al mejor precio en un mes”.
 Fórmulas para construir titulares

Para crear un buen título debes seguir los siguientes pasos:

• Reduce el objetivo del texto a máximo 3 palabras claves.

• Olvídate de los adjetivos y artículos.
• Piensa en la intención de búsqueda y en tu objetivo.
• Plantea preguntas.
• No te pases de 70 caracteres, este es el espacio que mostrará el
motor de búsqueda.
 Qué es el Link Building?
• El Link Building es el conjunto de técnicas para generar enlaces en
dominios externos con el objetivo de mejorar el posicionamiento SEO
de una página o sitio web dentro de los buscadores. A estos enlaces
externos se les conoce como backlinks.
 Link building
• Para crear una buena campaña de Link building debes:
• Crear contenido de calidad.
• Distribuir el contenido por diferentes canales.
• Buscar y analizar expertos o influenciadores.
• Haz una lista de los influenciadores y dales un puntaje.
• ¡A contactar! Recuerda que estás conversando con una persona real, habla de la
otra persona y de ti. Pídele exactamente lo que quieres que haga, busca un mensaje
que no sea ni muy corto ni muy largo.
 Keyword Research

• Keyword Research es una búsqueda y análisis de palabras clave

para tu contenido. Las keywords son cualquier input que los
usuarios escriban en el buscador, no importa si está compuesta por
una o varias palabras.

• Short Tail - Términos Generales

• Middle tail - Términos un poco más específicos
• Long Tail - Términos muy específicos
 Keyword Research: Google Trends

• Google Trends, es una herramienta que nos permite comparar

diferentes palabras y ver su comportamiento en diferentes lugares,
con un rango de tiempo determinado, por categorías o temas y
según el tipo de formato de contenido, como imágenes, videos o
noticias.
Followerwonk
 Google Search Console
Es una herramienta gratuita de google para ayudar a
mejorar el SEO
Se conecta a nuestra página web del negocio
Para configurarlo sólo se necesita una cuenta de Gmail
 Google Webmaster Tools: Herramientas
Son básicamente 4 herramientas
Configuración
Estado
Tráfico
Optimización
 Otras Herramientas
• https://answerthepublic.com/ (gratis)
• Ahrefs (pago)
• Semrush (pago , freetrial)
• Neilpatel (pago, freetrial)
• Quora
• Buzzumo
• MOZ
SEO Local: Google My Business