El  diseño web hace parte de una buena estrategia de SEO pero en ese sentido tu prioridad es no solo hacer que el sitio cargue rápido, también debes velar por ofrecer un diseño web amigable a la percepción del usuario.

Uno de los apartados importantes de un diseño web es la paginación del sitio, aquella que se encuentra casi siempre al final de los post y es utilizada para que el usuario pueda navegar y leer post anteriores.

En esta oportunidad te presentamos una espectacular paginación para que utilices en tu próximo o actual diseño web. Los botones se encuentran disponibles para formato PSD y CSS y son totalmente gratis. El diseño se encuentra disponible en dos colores blanco y gris.

Puedes descargar este buen complemento para el diseño de tu sitio web en el enlace de más abajo.

Descargar | Paginación en PSD o CSS

Si quieres darle un aire más fresco a tu diseño web queremos compartir contigo una serie de espectaculares botones creados por Josh Katherman. Los diseños se encuentran en formato PSD así que puedes modificarlos a tu manera utilizando Photoshop y utilizarlos en tu sitio web.

El Pack de imágenes contiene botones relacionados con las tiendas de Aplicaciones móviles como son el App Store y Google Play y botones para descargar o realizar compras. También incluyen botones relacionados con el Social Media como por ejemplo Facebook, Twitter, Google Plus.

Y el último pack contiene imágenes para llamar a la acción en paginas de aterrizajes también conocidas como Landing Pages. Recuerda que un diseño web atractivo debe hacer parte de la estrategia de SEO de un sitio web, utiliza estos botones por ejemplo para la sección de descargas de tu website.

Descargar | Botones PSD para diseño web

Via | Xyberneticos

Los Gifs son utilizados principalmente para crear animaciones de imágenes, hacen parte de los formatos de imágenes populares utilizados en Internet  Hace varios años atrás era común observar la incursión de imágenes animadas en el diseño de un sitio web.  

Pero, los tiempos cambian y también las tendencias. En el año 2013 por principios especialmente si eres diseñador web no puedes incluir imágenes Gifs para tratar de hacer más “atractivos” tus diseños webs.

Los Gifs pueden ser todavía incluidos pero solo en lugares donde todavía son amados, como por ejemplo en Tumblr donde las imágenes animadas todavía son el pan de cada día. Pero si eres un Webmaster que se preocupa por la calidad de tu sitio olvídate de los Gifs.

La misma premisa debes tener en cuenta para el Flash que también tiene sus días contados debido a que el HTML5 y el CSS3 lo remplazan de excelente manera.

Foto | Tumblr.com

El SEO ya no solamente debe aplicarse a la versión navegador de tu sitio web, ahora debemos pensar en los usuarios que nos visitan a través de sus móviles. Debemos velar por ofrecerles un sitio optimizado para sus móviles de manera que puedan visitarnos en cualquier momento, además crear una versión móvil de nuestro blog le gusta a Google y esto te beneficia en el SEO.

Qué es el Responsive Web Design

El diseño web adaptable, es la nueva forma en la que crean los diseños de las paginas webs para que puedan ser visualizadas de forma correcta a través del navegador, tablets, Smartphone.

Antes los tamaños de los sitios web los definíamos con base en valores fijos, por ejemplo el Header con 1024px, ahora estos tamaños son definidos en porcentajes y se aplica una regla para cada dispositivo.

Un diseño web es adaptable, cuando a través del código el blog reconoce la procedencia de la visita y con base en ello muestra una versión adaptada al dispositivo que utiliza el usuario para visitarnos.

5 Temas de WordPress gratis con diseño Responsive

Para ayudar en tu labor hemos recopilado unos cuantos temas de WordPress que ofrecen diseño web adaptable. Las plantillas son gratis, también puedes optar por contratar un diseñador web para que adapte tu actual tema a un diseño responsive, recuerda que esta tarea aumentará tu posicionamiento en Google.

Tema Designfolio – Demo – Descargar

Tema Responsive – Demo – Descargar

Tema Fanwood – Demo – Descargar

Tema Respo – Demo – Descargar

Tema AccentBox – Demo – Descargar

En los últimos años los sitios web han tenido una fuerte mutación, atrás quedaron aquellos días donde el usuario solo podía consumir la información, ahora con la aparición de la web 2.0 los contenidos son transmitidos de forma bidireccional de manera que el visitante puede generar contenidos, opinar los mismos y compartirlos.

Foto: Giftiniti (Via Flickr)

Es por ello que el diseño web también cambio y si queremos posicionar nuestro sitio web en las primeras posiciones de Google, debemos cambiar la manera en como diseñamos nuestra web. En esta oportunidad no hablaremos sobre como diseñar un sitio web amigable al SEO, sino que listaremos las acciones que no debes usar en tus diseños webs.

Esto ya no se utiliza en el diseño web

• Adiós Gift animados

Los Gifts animados ya no están de moda, de hecho hacen pensar al usuario que tu sitio web es “viejo” y de poca profesionalidad. Lo mejor es optar por imágenes estáticas de calidad amigable a la vista del visitante.

• No más contadores de visitas

Ya los usuarios no creen y a otros no le gusta ver un contador de visitas de tu sitio web, ahora el seguimiento de las estadísticas son realizadas por interno, por ejemplo utilizando Google Analytics.

• Por favor quita el Autoplay

Esa época donde visitábamos un sitio web y automáticamente sonaba una canción ya paso hace mucho, los usuarios ahora detestan eso. Por cierto yo me incluyo entre ellos. La misma recomendación es para la incrustación de videos de Youtube, no utilices el Autoplay.

• El Flash murió

El Flash ya no es apoyado por nadie, ni siquiera por el mismo Adobe, desarrolladores del mismo. Debes evitar por incluir Flash en tu web especialmente para intros de tu sitio web. Ademas el Flash no le gusta a Google.

• Desinfla las Pop ups

Los Pop-ups o ventanas emergentes son un fastidio para la navegación y usabilidad de un sitio web. Quita las ventanas emergentes de tu sitio web y especialmente aquellas que no cierran enseguida sino que te preguntan “realmente quieres cerrar la ventana”.

En la segunda parte de esta serie de artículos sobre SEO para el diseño web, hablamos sobre como optimizar las imágenes. En esta tercera parte hablaremos sobre los atributos de las imágenes.

Los atributos de las imágenes

Los atributos son aquellos elementos que se utilizan en la web, para diferenciar una imagen de cada una. Los principales atributos de una imagen son:

La etiqueta ALT

La etiqueta ALT en el HTML se utiliza para indicar el texto que se mostrara de una imagen en caso de que esta no cargue,.

La etiqueta TITLE

La etiqueta TITLE le indica al robot de Google sobre que trata una imagen, por ejemplo al pasar el puntero sobre la imagen que acompaña este articulo encontraras una descripción de la imagen.

Esta etiqueta es leída por el robot de Google Imágenes, de manera que cuando realicen una búsqueda en Google Imágenes que contenga las palabras de tu imagen en la etiqueta TITLE, las imágenes que mostrara serán las tuyas, y así tendrás muchas mas visitas y tus imágenes se posicionaran mejor.

Perfecto uso del ALT y TITLE

Las etiquetas ALT y TITLE pueden convivir de manera perfecta en el código HTML de una imagen, para utilizarlas el código es:

1

<img title="”Aqui titulo" src="”Aqui enlace URL" alt="”Aqui texto a mostrar si no carga" />

En la primera parte de esta serie de artículos sobre SEO para el diseño web, hablamos sobre los tipos de imágenes y sus usos en la web. En esta segunda parte hablaremos sobre como optimizar las imágenes.

Ya tenemos claro que tipos de extensiones para imágenes existen, ahora la prioridad es lograr que estas carguen mucho mas rápido en la web, para ello las optimizaremos. Optimizar una imagen consiste en reducir el peso de esta sin dañar la resolución esto se logra eliminando colores, en sentido general las imágenes tienen hasta 256 colores pero muchas pueden verse bien con solo 128 minimizando el peso de la imagen.

Como optimizar las imágenes

En la red existen diferentes programas para optimizar imágenes, mi recomendación seria el editor de imágenes desarrollado por Adobe, Photoshop. Sin embargo, también puedes usar programas online muy fáciles de usar como son RIOT y Kraken. Ambos programas funcionan de manera simple, escoges la imagen desde tu ordenador, el porcentaje de optimización que desees y listo. El usuario puede en cualquier momento previsualizar la imagen antes de terminar la edición.