Resposive Design
Acesibilidad, One Web
Ventajas del Diseño Web Adaptativo
 Mejora usabilidad y conversión.
 Eficiencia en la actualización.
 Reducción de cost...
Desventajas del Diseño Web Adaptativo
 No se pueden aplicar a todos los sitios ya sea por
capacidad de desarrollo u otros...
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 us...
Etiqueta Viewport
Esta meta-etiqueta fue creada en principio por Apple para su móvil predilecto, pero se ha convertido en ...
Tratamiento de las imagenes
 Las imágenes del sitio deben de seguir ciertos parametros recordemos que estas
deben de camb...
Formas de realizar el diseño adaptativo
• Utilizando la propiedad media de las hojas de estilos que esta define
tamaños mi...
Formas de realizar el diseño adaptativo
• Utilizar una plantilla o maqueta. http://www.getskeleton.com/
• El ultimo seria ...
Conclusiones
• Para implementar el responsive design hay que primero realizar una análisis si
corresponde o no.
• Sitios q...
Resposive design (Esli David)
Upcoming SlideShare
Loading in …5
×

Resposive design (Esli David)

287 views
220 views

Published on

Responsive design(Esli David)

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
287
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Resposive design (Esli David)

  1. 1. Resposive Design Acesibilidad, One Web
  2. 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. 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. 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. 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. 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. 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. 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. 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.

×