Responsive design(Esli David)

1. Resposive Design
Acesibilidad, One Web

2. Ventajas del Diseño Web Adaptativo
 Mejora usabilidad y conversión.
 Eficiencia en la actualización.
 Reducción de costos.
 Mejora el SEO del sitio por dos motivos, uno Google valora cada sitio y aquellos
que soportan varios dispositivos los coloca antes que aquellos que no pueden y
además es un solo contenido el cual no tiene que competir con un mismo diseño
duplicado.
 Aprovechamiento del espacio disponible.

3. Desventajas del Diseño Web Adaptativo
 No se pueden aplicar a todos los sitios ya sea por
capacidad de desarrollo u otros factores que
limiten su implementación y no permite que sea
optimo.
 Un punto interesante es usabilidad != Diseño web
Adaptativo.

4. Parámetros básicos.
 Emplear el HTML5
 La primera, y la más importante es dejar de usar píxeles en todos los sitios y usar
porcentajes (por ejemplo: width:60%).
 Que establezcamos el ancho de la página con el 100% no significa que queramos que sea
este en una pantalla con alta resolución y para limitar el ancho (o alto si se terciara)
debemos de usar el parámetro max-width o si quisiésemos establecer un alto
máximo max-height (y para establecer el mínimo sería min-width y min-height, aunque
no será demasiado necesario usarlo).
 No usar posiciones absolutas ni fijas (menos cuando hagan falta), para crear una barra
lateral donde tendremos un menú, por ejemplo, lo mejor es flotarlo con float:left/right,
aunque esto sería lo básico puede que este ejemplo no se ajustase a nuestras
necesidades, pero es una técnica muy usada

5. Etiqueta Viewport
Esta meta-etiqueta fue creada en principio por Apple para su móvil predilecto, pero se ha convertido en todo un estándar que
es soportado por la mayoría de los dispositivos móviles (smartphones, tabletsy gran parte de móviles de gama media y baja).
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Se pueden usar los siguientes parámetros (separados por comas):
 Width: ancho de la página (se puede establecer en píxeles o como device-width y usará el ancho del que dispone).
 Height: alto de la página, actúa igual que el width.
 Initial-scale: escala o zoom inicial de la página (este y los demás tipos de escala se establecen con valores como 1.0 para no
tener zoom o 2.5 para tener un zoom del 2,5 de aumento, por ejemplo).
 Minimum-scale: zoom mínimo que podemos hacer en la página.
 Maximum-scale: zoom máximo que podemos hacer en la página.
 User-scalable: establece si está permitido o no hacer zoom (yes/no).

6. Tratamiento de las imagenes
 Las imágenes del sitio deben de seguir ciertos parametros recordemos que estas
deben de cambiar de tamaño del acuerdo al dispositivo que vayamos a emplear.
Ejemplo
Img
{
width:100%;
max-width:400px;
}

7. Formas de realizar el diseño adaptativo
• Utilizando la propiedad media de las hojas de estilos que esta define
tamaños minimos y maximos para cada dispositivo.
• Trabajar en filas y columnas de contenido empleando un diseño
flotante, con tamaños minimos y maximos definidos.

8. Formas de realizar el diseño adaptativo
• Utilizar una plantilla o maqueta. http://www.getskeleton.com/
• El ultimo seria empleado javascript. http://responsejs.com/

9. Conclusiones
• Para implementar el responsive design hay que primero realizar una análisis si
corresponde o no.
• Sitios que estan ya creados, se dificulta el proceso de trasladarlos o adaptarlos
a esta opción de diseño.