Diseño de sitios web adaptables

Sitios web adapatables

"El diseño web adaptable o adaptativo, conocido por las siglas RWD (del inglés, Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, smartphones, libros electrónicos, portátiles, PCs,... Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: Tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria,... Esta tecnología pretende que con un sólo diseño web tengamos una visualización adecuada en cualquier dispositivo."

Tomado de Wikipedia

Diferencias de sitios adaptables y no adaptables

Sitio web normal

Sitio web normal

En la imagen de arriba se muestra cómo un sitio web se despliega típicamente en una computadora: de acuerdo al trazado original, así se despliega la información. El texto es fácil de leer. Sólo tienes que desplazar verticalmente para ver el contenido de la página.

Sitio web adaptable

Sitio web adaptable

Un sitio web adaptable adapta su trazado de acuerdo al tamaño de la pantalla y sigue siendo fácil de leer y navegar: el menú se dobla debajo de un botón en la esquina superior izquierda, el tamaño del texto es importante para leer sin esfuerzo y el contenido del sitio se ha reorganizado en una sola columna.

Sitio web no adaptable

Sitio web no adaptable

Un sitio web no adaptable aparece en la misma forma que en la pantalla de la computadora, pero en una pantalla mucho más estrecha. En una pantalla de 2 pulgadas de ancho de un smartphone, los textos se convierten en demasiado pequeños para ser legible, obligando al usuario a agrandar manualmente el texto y la navegación se hace difícil.

Razones para usar el diseño web adaptable (Responsive Web Design)

  • 01

    El diseño adaptable ofrece una mejora experiencia al usuario.

    Este es uno de los beneficios más evidentes de diseño adaptable. Al diseñar un sitio web adaptable permite la mejor experiencia para el usuario, sin importar el dispositivo que está accediendo ya sea una tableta, teléfono móvil o un computador. La información desplegada será fácil de ver y la navegación sencilla.

  • 02

    Aumenta la popularidad de tu sitio

    La gran ventaja que también nos oportuna el uso del Diseño Web Adaptable, es que la misma URL sirve para ser compartida en diferentes medios, como redes sociales (Facebook, Twitter, Gplus), por lo cual podríamos popularizar nuestro sitios mediante dichas redes bajo una misma URL, sin tener que desviar tráfico a vistas para entornos móviles o de escritorios, entornos bajo los cuales podría encontrarse el usuario que lee la información o publicidad referente a nuestro sitio.

  • 03

    Rankings locales mas altos

    Si está apuntando a palabras clave locales para su negocio, un diseño web adaptable mejorará sus rankings. Recuerde que cada vez mas gente busca direcciones de comercios, empresas o servicios locales usando dispositivos móviles. Los resultados de búsqueda en dispositivos móviles son influenciados por parámetros geo-específicos, entonces su sitio web deberá contemplar tales parámetros SEO. De esta manera, Google será capaz de identificar su sitio optimizado como uno de los que serán presentados de acuerdo a la búsqueda realizada.

  • 04

    Se evitan los contenidos duplicados

    Dado el caso que deseáramos que determinada información o toda esté disponible para ser compartida desde nuestro sitio web para diferentes dispositivos, tendríamos que realizar un canonical que señale hacia la versión que deseáramos posicionar desde un entorno de escritorio o móvil. Mediante la aplicación del Diseño Web Adaptable, podemos simplemente utilizar una sola URL para los accesos a la información que ofrecemos dentro de nuestro sitio, dado que la misma vista estaría disponible para escritorio y móvil.

  • 05

    Se mantienen los enlaces (internos y externos o entrantes)

    El intercambio o construcción de enlaces (o Link building) lleva mucho tiempo y es mas costoso aún. Si usted ha invertido su tiempo o recursos en tener enlaces entrantes a su sitio, es mucho mejor utilizar esos enlaces para el beneficio de su sitio web móvil. Aquellos que crean versiones específicas de su sitio web para ser vistas por dispositivos móviles tienen que comenzar desde CERO con el trabajo SEO y de intercambio de enlaces. Creando o reformando su sitio web actual a uno hecho con diseño web adaptable tendrá una gran ventaja sobre los que no lo hagan.

  • 06

    Google ama el Diseño Web Adaptable (Responsive Web Design)

    Como es bien conocido Google, es uno de los principales motores de búsqueda, por lo cual maneja las claras prioridades que debe tener un sitio para estar dentro de sus primeros resultados al realizar una consulta de búsqueda, Google recomienda el uso del Diseño Web Adaptable, para ampliar la visualización de un mismo sitio en varios dispositivos, es decir; que el sitio se encuentre disponible a la vista del usuario dependiendo del dispositivo que utilice para la visualización de la página.