Diseño adaptativo y responsive

Diseño web adaptativo y responsive Renny Batista

¿Adaptivo o Responsive?

¿Adaptivo o Responsive?

DISEÑO WEB RESPONSIVE

El termino “responsive” apareció por primera vez en

Mayo del 2010 en un artículo del blog “A List

Apart” llamado Responsive Web Design escrito por

Ethan Marcotte

Hace que el contenido del sitio web se adapte por completo a la pantalla del dispositivo a través del cual se

visualiza, para lo cual los datos que envía la página web son siempre los mismos, es decir que se reestructuran

los elementos que contiene el sitio con el fin de optimizar el espacio disponible.

DISEÑO WEB RESPONSIVE

DISEÑO WEB ADAPTATIVO

La palabra “adaptive” aparece habitualmente para referirse a

un concepto, acuñado por

Aaron Gustafson en su libro Adaptive Web Design.

Consiste en que dependiendo con que dispositivo accedamos a nuestra web, así tendremos preparado un

diseño u otro, o dicho de otra manera, crearemos diseños específicos para los distintos dispositivos que definamos

DISEÑO WEB ADAPTATIVO

¿CUALES SON LAS DIFERENCIAS ENTRE DISEÑO ADAPTATIVO Y RESPONSIVE?

EXPERIENCIA MÓVIL PERSONAL

Permite un diseño mas personalizado. Se utilizan múltiples diseños para el website, ofreciendo mayor flexibilidad en el diseño en función de cada dispositivo

Utiliza un sólo diseño para adaptarlo a la resolución de todos los dispositivos. El diseño del website se limita a la resolución de cada pantalla.


FÁCIL MANTENIMIENTO

Requiere mantenimiento de los diseños del website por separado, lo que implica más tiempo para actualizar y mantener su contenido.

Se diseña un solo contenido para cada resolución de pantalla. El contenido es simplemente formateado con el estilo seleccionado para adaptarse a las dimensiones de la pantalla.


IMPLEMENTAR EN WEB EXISTENTES

Los websites móviles pueden ser creados sin tener que rediseñar la versión de escritorio.

El website debe ser rediseñado para transformarlo en responsive.


ES UN DISEÑO PARA TODOS

El diseño adaptativo es una solución para aquellos websites con un alto volumen de funcionalidad compleja, donde el objetivo principal es proporcionar fácil uso para un dispositivo móvil.

El diseño responsive es una buena solución para los websites de gran contenido con limitadas funcionalidades, dónde el objetivo principal es el marketing y comunicación de información.

La palabra inglesa "framework" (infraestructura, armazón, marco) define, en términos generales, un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar.

En el mundo del diseño web, un framework se define como una es una estructura conformada por un conjunto de archivos y carpetas de código estándar (HTML, CSS, scripts JS, etc.) que pueden ser utilizados para apoyar el desarrollo de sitios web, como base para empezar a construirlo.

En resumen: ¡No hay necesidad de reinventar la rueda..!

El objetivo de un framework es

proporcionar una estructura común para

que los desarrolladores no tengan que hacerlo a partir de cero y puedan

reutilizar el código proporcionado.

¿Cuántos tipos de frameworks

existen?

Hay básicamente 2 tipos a diferenciar:

backend y frontend. En función de si el

framework es para la capa de presentación o

la capa de aplicación (lógica del negocio)

S

Sólo algunos…

Pure es un framework responsivo creado por yahoo que usa como base Normalize.css. Aparte del grid responsivo, cuenta con los elementos básicos que componen la interfaz de usuario, como botones, menús, etc. Es sencillo de usar y cuenta con abundante documentación y ejemplos en su web.

La nueva versión de este popular framework poco tiene que ver con su predecesora. En esta ocasión se le ha dado una prioridad absoluta al diseño responsivo, hasta el punto de que se diseña primero para los dispositivos móviles, para posteriormente ir adaptando a resoluciones mayores. Otro de los puntos fuertes de este framework, es la gran cantidad de componentes que incluye, como alertas, barras de progreso, dropdowns, botones etc.

Kube es un framework de corte minimalista, adaptable y responsivo, basado en un grid flexible. Esta pensado para dejar libertad de diseño al desarrollador por lo que contiene lo básico, la tipografía y unos pocos elementos, lo que deja un peso muy reducido.

Metro UI es un conjunto de estilos que proporcionan una interfaz similar a la de Windows 8. Estos estilos, desarrollados con LESS, se aplican a una página en HTML5 que también hace uso de Jquery. La responsividad se basa en bootstrap css, por lo que en las resoluciones más pequeñas se pueden apreciar ciertas similitudes.

Kickoff es un framework front-end para crear sitios escalables y responsivos que cuenta con un mantenimiento muy activo. Basado en la filosofía del mobile-first (los móviles primero) y creado con SASS y Grunt, este proyecto incluye numerosos elementos ya diseñados, documentación y ejemplos. Compatible solo de explorer 8 en adelante.

Creado y diseñado por Google, Material Design es un lenguaje de diseño que combina los principios clásicos del diseño exitoso junto con la innovación y la tecnología. El objetivo de Google consiste en desarrollar un sistema de diseño que permite una experiencia de usuario unificada a través de todos sus productos en cualquier plataforma.

http://www.informatica-hoy.com.ar/mi-propio-blog/Diseno-web-Adaptativo-Responsive-mejor.php.

http://trip2themoon.com/por-que-lo-llamas-adaptativo-cuando-quieres-decir-responsive/

http://tunegocioenlanube.net/diseno-responsive-o-diseno-web-adaptativo/

http://www.ixistudio.com/blog/paginas-web/diseno-web-adaptativo-vs-responsivo/

Diseño adaptativo y responsive

Education