UA-10684197-1
Lista
Optimización para Web y dispositivos móviles

Optimización para Web y dispositivos

El diseñador Web además de preparar las imágenes para su publicación en Internet con una calidad adecuada, toma medidas tanto para agilizar la carga del Sitio Web, como para transmitir el contenido de su Sitio o página Web con fidelidad a usuarios con discapacidad, optimizar el contenido para aumentar las visitas al ser encontrado vía buscadores (tráfico orgánico) y adaptar la forma en que se muestra a usuarios que lo visitan desde su computadora o  dispositivos móviles como celulares y tabletas.

Optimización para Web

En el artículo anterior sobre la Interfaz hablaba sobre el espacio de color adecuado para las imágenes que se publicarán en Internet y su resolución. Además de ésos factores es importante considerar otros detalles que afectan el rendimiento y compatibilidad del Sitio Web en general.

Carga

Hay una relación entre lo que el Sitio Web se tarda en cargar y las hay peticiones HTTP realizadas en nuestro servidor, éstas incluyen la ejecución de código, hojas de estilo CSS, imágenes, etc.

Para mejorar la velocidad del Sitio puede hacer las siguientes modificaciones:

Image Sprites o Sprites CSS

Sprite CSS

Sprite CSS

Una forma de Optimizar las imágenes para una carga más rápida en el navegador es creando una sola imagen que contenga en ella  todas las imágenes permanentes del Sitio Web, en lugar de utilizarlas individualmente y usar CSS para mostrar cada una como si fuera individual.

Patrones en documentos separados

Tanto el código  PHP como el de las hojas de estilo (CSS) y Javascript (Js) pueden ser adjuntados como documentos separados en vez de repetirse individualmente dentro de cada documento HTML. También es recomendable tener el menor número posible de hojas de estilo y Javascript.

Esto también agiliza de forma considerable la actualización del Sitio Web.

Minificar archivos

Minificar las hojas de estilo (CSS) y Javascript de un Sitio Web es una buena práctica de codificación que  elimina las cadenas innecesarias, reduciendo así el peso del archivo y disminuyendo la cantidad de datos que recibe el navegador del visitante.

Compresión Gzip

La compresión Gzip es una solución para ayudar que se acelere la carga de los archivos del Sitio Web.

El formato comprimido permite que ocupen un menor espacio y se distribuyan de forma mas rápida.

Utilizar Servicios CDN

Un CDN (Content Delivery Network) es una red de computadoras distribuidas globalmente, sincronizadas para ofrecer el contenido de una página Web de forma más ordenada y eficaz a la forma en que lo hace una arquitectura tradicional en la que se  utiliza un solo  servidor .

En pocas palabras… ayuda a eliminar cuellos de botella,  reduciendo el tiempo de descargas y el uso de ancho de banda de forma considerable.

Accesibilidad y Optimización para Buscadores (SEO)

HTML sin tablas como estructura

Diseñar la estructura de las páginas Web sin tablas mejora en la accesibilidad del documento de los navegadores orientados a personas con limitaciones sensoriales.

La etiqueta <title>

Optimización para dispositivos móviles

Optimización para dispositivos móviles

  • Mejorar la etiqueta <title> que define el título de una página web, usando las palabras clave más utilizadas en las búsquedas del tema del que trata la página ayuda a los visitantes a encontrar nuestra página Web  mediante buscadores como Google.

Metaetiquetas

Al igual que la etiqueta title, todas las metaetiquetas pueden mejorar incluyendo en ellas palabras o frases clave.

  • Description

Buscadores como Google no usan la metaetiqueta Description como un resumen de la página en sus resultados si es mala, si tiene la palabra “Sin título”, se repite o tiene otros problemas.

Al escribir las descripciones únicas para cada página asegúrese de utilizar un máximo de 160 caracteres.

Aprenda más en: Description.

Nombres de dominio

Los nombres de dominio son importantes en los resultados de búsqueda de Google y otros buscadores. Elija uno descriptivo y fácil de leer para su sitio web. Por ejemplo, use www.nombre.com/genealogia en lugar de www.nombre.com/prodid?123.

Es básico que un Sitio Web cuente con enlaces para navegación (Interna) o menú de sus secciones. Si la cantidad de páginas del Sitio Web lo amerita, es recomendable organizar grupos de páginas en categorías y sub-categorías evitando crear demasiadas o sobre-estructurar el contenido del Sitio Web de manera que tome demasiados clics recorrerlo todo.

Use texto simple en lugar de una navegación que contenga únicamente imágenes, menús desplegables y animaciones.

También debe hacer posible la navegación mediante la edición de la URL. Un usuario de Internet experimentado puede borrar parte de una dirección con la intención de encontrar información más general.

Mapa del sitio

Mapa del Sitio

Mapa del Sitio 1

Su Sitio Web debe contar con un mapa del Sitio para los visitantes y otro para los buscadores como Google que sus visitantes puedan revisar en caso de no encontrar una sección determinada. El mismo principio aplica para los motores de búsqueda, ya que el mapa del sitio permite una mejor indexación de las páginas en él.

Textos ancla

Los buenos textos ancla transmiten mejor el contenido al que dirigimos con los enlaces tanto a los visitantes como a buscadores como Google. Por ejemplo es preferible usar uno descriptivo como  “Descargar portafolio pdf” a uno muy general como: “Click aquí”.

Imágenes

Accesibilidad, Dispositivo Braile

Dispositivo Braile  2

Es una buen práctica usar nombres de archivo y texto en el atributo alt  que sean breves y descriptivos.

A su vez evite saturar dicho atributo con muchas palabras clave y/o copiar y pegar frases.

Un archivo de Mapa del Sitio solo de las imágenes del Sitio Web puede ofrecer a los buscadores más información sobre ellas.

Por otra parte es recomendable seguir los estándares como:

  • Utilizar los formatos de imágenes más conocidos: JPEG, GIF, PNG y BMP.
  • Contener todas las imágenes del Sitio Web en un mismo directorio.

Cabeceras

Utilice las etiquetas de cabecera para dar énfasis al texto importante en orden de importancia de mayor a menor de la h1 a la h6. Siendo h1 la de mayor tamaño y la h6 la de menor.

Evite usar las etiquetas de cabecera cuando otras etiquetas como <em> y <strong> puedan ser más adecuadas al contexto, saltar de un tamaño de cabecera a otro sin ninguna lógica ni continuidad y sobre todo modificar el orden de tamaños por ejemplo mediante CSS.

Contenido

Optimización para aparecer en buscadores

Ayuda usar las frases clave más buscadas del tema.

Anticípese a la diferencia de conocimiento de sus visitantes sobre el tema que trata usando distintas frases clave de acuerdo a el y ofrezca contenido único y exclusivo. ya sea con un servicio original o mediante publicaciones investigativas sobre las que no se haya tratado antes.

Prácticas para promocionar el Sitio o página Web

Se recomienda:

  • Publicar el enlace al Sitio Web, en publicaciones y Sitios Web relevantes sin llegar al extremo que puede ser considerado como spam.
  • La  generación de contenido original y publicación de contenido útil a su mercado meta vía un Blog y Boletines.
  • Promocionarse fuera de Internet colocando la dirección del Sitio Web al pie de los correos electrónicos, publicidad, papelería, en redes sociales y cualquier otro tipo de comunicación visual.
  • Si administra un negocio local, añadir la información de éste a Google Places le ayudará a contactar con clientes en Google Maps y en búsquedas Web.

Optimización para dispositivos móviles

El Responsive Web Design, Diseño Web adaptativo o adaptable

Es una técnica de que mediante el uso de estructuras fluídas y media queries en el CSS adapta los tamaños del contenido al dispositivo que usa el visitante.

Media query

Es un módulo CSS3 que permite la representación de contenido para adaptarse a la resolución de pantalla y es un estándar recomendado por la W3C (Junio del 2012).

Cuando el media type especificado en el media query coincide con determinado tipo de dispositivo, el documento es mostrado sobre y todas las expresiones media queries que sean verdaderas y la hoja de estilo o las reglas de estilo correspondientes son aplicadas siguiendo las reglas normales del CSS.

Actividades

  1. Si su Sitio Web ya está en línea, para comprender y optimizar el tiempo de carga de una página Web puede usar herramientas como Google PageSpeed que le permitirán comprender las mejoras más importantes que debe realizar.
  2. Adjunte el CSS y JavaScript al HTML en documentos separados.
  3. Utilice alguna de las herramientas gratuitas de minificación: el Compresor YUI de Yahoo, el JS Compress para archivos JavaScript u otras para minificar hojas de estilo CSS.
  4. Cree un mapa del Sitio para los visitantes y otro para los buscadores como Google.
  5. Si desea delegar la Optimización en buscadores de su Sitio Web (SEO):

Un profesional en SEO puede ofrecerle:

  • La revisión del contenido y estructura del Sitio Web,
  • Asistencia técnica en el desarrollo de sitios Web ncluyendo: alojamiento, redireccionamientos, páginas de error, uso de JavaScript, etc.,
  • Optimización de contenidos,
  • Investigación sobre palabras o frases clave e
  • Instrucción en SEO.

Imágenes gracias a : 1 Experiencia Joomla! y 2  Quinn Anya

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *