DISEÑO WEB RESPONSIVE O ADADTIVO

IMAGEN.1http://www.mitziweb.com/img/blog/web-adaptativa02.jpg

IMAGEN.RODOS2http://www.roldos.es/blog/que-tu-web-sea-responsive/

IMAGEN3..http://www.40defiebre.com/que-es/diseno-responsive/

¿Qué es el diseño responsive?

El diseño web responsive o adaptativo es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos. Desde ordenadores de escritorio a tablets y móviles.

Hoy en día accedemos a sitios web desde todo tipo de dispositivos; ordenador, tablet, smartphone… por lo que, cada vez más, nos surge la necesidad de que nuestra web se adapte a los diferentes tamaños de los mismos. 

¿En qué consiste el diseño responsive?

Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario. Se caracteriza porque los layouts (contenidos) e imágenes son fluidos y se usa código media-queries de CSS3. 

El diseño responsive permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida y natural.

Se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario lo más similar posible, frente a otras aproximaciones al desarrollo web móvil como la creación de apps, el cambio de dominio o webs servidas dinámicamente en función del dispositivo.

En definitiva, el diseño web responsive se consolida como una de las mejores pràcticas hoy en dìa en diseño web. Aunque como todas, tiene sus pros y contras, la web responsive es considerada hoy en día la mejor práctica posible en el diseño web, y nosotros te enseñasmos los puntos que hay q tener en cuenta a la hora de hacer tu web responsive  

¿Cuales son las principales ventajas?

La principal y más obvia es la correcta visualización desde cualquier dispositivo: sea cual sea su tamaño, la web se adaptará a él. Además, varios motivos más nos hacen decantarnos por esta solución:

• Mejoras SEO: Google recomienda el uso de Responsive y tiene lógica ya que todos los esfuerzos SEO se centralizan en una misma url y no en diferentes.
• Mantenimiento web: mantener una web se hace mucho más sencillo ya que solamente se tiene una web -Responsive- y no dos (versión PC y versión móvil) por lo que se ahorra tiempo, recursos y esfuerzo.

• Disponibilidad de contenidos: a diferencia de las versiones para móviles, las páginas Responsive muestran el mismo contenido en PC que en dispositivos móviles, lo que hace que cualquier usuario, independientemente de su dispositivo pueda usar cualquier contenido o funcionalidad de la web. 

¿Cuales son los principales inconvenientes?

• A nuestro modo de ver, dos son los principales problemas que genera el diseño Responsive:
  
  
• Velocidad de carga: las páginas con un diseño Responsive tardan más en cargar, es un hecho. Sin embargo, la mejora de los dispositivos, de las velocidades de conexión y de las tarifas de datos, cada vez más harán este inconveniente menos importante.

• Estrategia web única: no está claro si es una ventaja o un inconveniente. En cualquier caso, la web que se sirve a móviles y a PCs es la misma por lo que no se pueden diseñar estrategias diferenciadas en función del dispositivo. Por un lado es bueno, porque se establece una estrategia web global; pero al mismo tiempo nos deja menos margen de maniobra a la hora de pensar en estrategias orientadas a un dispositivo específico.  

                   Diseño web adaptable

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 electònicos ,portatiles ,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 solo diseño web, tengamos una visualización adecuada en cualquier dispositivo.

Ventajas del diseño web adaptable

El uso de dispositivos mòviles está creciendo a un ritmo increíble, dispositivos como tablets y smartphones han incrementado sus ventas en los últimos años y la navegación en Internet mediante estos dispositivos es cada vez más común. Ese es el motivo por el que el diseño web adaptable se ha vuelto tan popular, pues es una técnica que proporciona una solución web que puede manejar la visualización web tanto de escritorio como de dispositivos.

Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado estará optimizado para todo tipo de dispositivos: PCs ,tabletas , teléfonos móviles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles.

De esta forma se reducen los costos de creación y mantenimiento cuando el diseño de las pantallas es similar entre dispositivos de distintos tamaños.

También se supone que evita tener que desarrollar aplicaciones ad-hoc para versiones móviles, o no, por ejemplo, una aplicación específica para iPhone , otra para móviles Android , etc.,aunque hoy en día las webs para móviles todavía no pueden realizar las mismas funciones que las aplicaciones nativas.

Desde el punto de vista de la optimización de motores de búsqueda, sólo aparecería una URL en los resultados de búsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan de éstas. También se evitarían errores al acceder al sitio web en concreto desde los llamados "social links", es decir, desde enlaces que los usuarios comparten en medios sociales tales como Facebook, Twitter, etc y que pueden acabar en error dependiendo de qué enlace se copió (desde qué dispositivo se copió) y desde qué dispositivo se accede.

Diferencias entre el diseño web adaptativo y responsive 

El diseño web responsive: reestructura en la pantalla del dispositivo de los elementos de la web para optimizar todo el espacio disponible y ofrecer una exelente experiencia de usuario.

Esto se consigue estableciendo unas medidas de ancho y de màrgenes  de diseño en tamaño proporcionales.

Por ejemplo , un menù  horizontal se covierte en vertical si se visualiza en smartphones evitando los scrolls infinitos y organizando el contenido de una mejor forma. La  ùnica desventaja de esta tecnica  de diseño web  es que los elementos no son redimensionables,con los videos y banners, que no cambian su tamaño dependiendo del dispositivo.

Un diseño web adaptativo: por otro lado , no es tan flexible como el responsive ,
Aunque las ventajas del sitio web con diseño web adaptativo son numerosas, sin embargo existen ciertos inconvenientes. Se trata particularmente del tiempo de carga de la web.

La mayoría de las veces, los usuarios se encuentran en la obligación de descargar de manera inútil un código HTML/CSS. De igual manera, las imágenes son a menudo simplemente alargadas y redimensionadas provocando un impacto negativo en el tiempo de descarga. Si el código está bien optimizado, esta descarga de información extra será imperceptible para el usuario. Las imágenes si que deben adecuarse en tamaño y sobre todo en peso (kb) para reducir la máximo su carga con velocidades de conexión lentas.Por otra parte, el diseño web adaptativo no permite ajustar fácilmente los títulos, las descripciones y otros contenidos en los teléfonos móviles. Además, el desarrollo del sitio web adaptativo exige más tiempo. Obliga a una descarga de todos los elementos que constituyen la página pudiendo ocasionar un rendimiento menor. Existen definitivamente más dificultades en cargar el contenido de un sitio web adaptativo que el contenido de un sitio móvil especializado. Al trabajar con diseños webs adaptables deberemos olvidarnos de las anchuras y tamaños en píxeles y pensar en %. Lo mismo pasa con los tamaños de letra. Ya no podrán tener un tamaño definido sino que deberán crecer y reducirse en función de la pantalla