Sitios web de calidad con Google Sites

 AUTOR: Diego Allué Vicente

Crear un sitio web con Sites te ayuda a entender el interés de planificar y organizar, tanto su contenido como su diseño visual. La herramienta es muy sencilla y bastante intuitiva. Pero, para conseguir un sitio de calidad profesional es importante partir de información interesante, imágenes profesionales, y escribir y organizar los textos de forma clara, atractiva y accesible. Veamos algunos consejos útiles para crear un sitio atractivo.

Estructura

Decide cuáles serán las secciones principales. Si vas a presentar mucha información lo mejor es distribuirla en varias páginas y usar el menú para navegar por ellas. Dependiendo del caso te puede venir bien que cada opción del menú contenga un submenú. Piensa la estructura, quizá con lápiz y papel o una herramienta de prototipado (Canva, Adobe XD...). Pero, lo más directo es ir a Sites e ir creando páginas vacías, para ver cómo queda.

Navegación

El menú funciona como índice de contenidos. Una navegación adecuada mejora la experiencia del usuario y tenemos tres alternativas no excluyentes: 

1. Menú: Puede situarse arriba o a la izquierda. Se configura desde la rueda dentada y navegación. Cuando se crea una página, su nombre se muestra como opción del menú. Si se sitúa una página como subpágina de otra, se forma un submenú. Si queremos una opción sólo con subpáginas y  sin página asociada en lugar de crear una página se pulsa "+" y   "Nueva opción de menú". También se pueden poner opciones con una URL externa, que te sacan del sitio, o puedes crear páginas con una página exterior incrustada, que te mantienen en el sitio web. También puede haber páginas sueltas, inaccesibles desde el menú: se trata de la opción "ocultar de la navegación". Esto viene bien para enlazar una página, por ejemplo, en el pie de las páginas.
2. Índice de página: insertando el objeto "Índice" en una página, va creando automáticamente una tabla de contenido con enlaces a todos los títulos de la página. Se consideran títulos los textos con estilo título, encabezado o subtítulo.
3. Índice hecho a mano: además de la opción automática, siempre se puede crear el índice a mano e incluso usar botones, imágenes y cuadros de texto con enlace. Esta idea se puede usar en una página principal que presente las opciones y permita navegar hasta ellas.

Menos es más

Usar muchos colores, tipos de letra o imágenes hacen que la página parezca menos profesional. Usa diseños limpios y coherentes, con una paleta de pocos colores (que contrasten bien, puedes usar herramientas como webaim.org), uno o dos tipos de letra legibles y que armonicen (como roboto y roboto condensed) y márgenes bien distribuidos. Sites propone muy pocos temas predefinidos y conviene que seas original. 

Usa con moderación los elementos insertables (botones, enlaces, documentos Drive...). Siempre que sea posible unifica los tipos de letra y colores de estos elementos a los del sitio web para darle coherencia.

Limitaciones

Sites es simple porque tiene muy limitada la personalización. Por ejemplo, no se puede editar su HTML o CSS, ni permite alinear algunos objetos. Da facilidades para incluir documentos de Drive como documentos de texto, hojas de cálculo o formularios. También da una opción genérica "Insertar <>" para insertar elementos externos a Google aportando URL o código HTML.

Materiales de calidad

Usa buenas fotografías e imágenes. La calidad de estos elementos es parte esencial de la calidad del sitio. Tienes cientos de opciones para ilustrar bien tu contenido. Intenta que transmitan optimismo. Elige fotos bien iluminadas, con colores vivos, limpias y despejadas, ambientes abiertos o naturales, con gente sonriendo. En las cabeceras busca imágenes con mucho espacio vacío (cielo, mar, fondo uniforme...) para poder superponer texto fácilmente.

Los detalles importan

Al pasar el ratón en la parte inferior del editor aparece "Añadir pie de página". Es una opción escondida que puede ser interesante. La cabecera se personaliza desde la rueda dentada: en "Navegación" el color de fondo, en "Imágenes de marca" el logotipo y el icono de la página que aparece en la pestaña del navegador (¡no dejes el logo por defecto!), en "Aviso" la personalización de un aviso, por ejemplo, para presentar cuestiones legales. 

Te aconsejo que personalices el tema. Allí tienes unas cuantas opciones adicionales con colores y tipos de letra. Por ejemplo, puedes cambiar el color de fondo del menú.

Alternativas para el multilingüismo

Sites no ofrece ninguna ayuda para construir un sitio en varios idiomas. Nos obliga a hacerlo de forma manual. Pero podemos dar los siguientes pasos para hacer una versión en otro idioma:

1. Crea el sitio completo en un idioma. Por ejemplo, en español.
2. Duplica el sitio web. En los tres puntos verticales pulsar "hacer una copia".
3. Enlaza entre sí ambos sitios. Incluye en la navegación un enlace externo, por ejemplo "en" en el sitio en español y "es" en el otro.
4. Ayúdate de una herramienta de traducción para crear la versión en el otro idioma. Funcionan bien DeepL, Google translator y las IA como ChatGPT.
   
5. Duplica, traduce y reenlaza los elementos incrustados. Como formularios u otros elementos externos a Google.

También es posible hacerlo todo en un único sitio web, pero entonces el menú debe tener todas las opciones en ambos idiomas y no da la sensación de haber cambiado de idioma.

Revisar es importante

Es importante eliminar los errores ortográficos, que funcionen todos los enlaces y que se vea bien en móviles, tarjetas y navegadores habituales. 

Conclusiones

Para lograr un resultado atractivo hay que tocar varios palos, no es sólo copia y pega de elementos, hay que organizar, seleccionar bien materiales y formatos y cuidar los detalles.