Diseñando para la Web Móvil

Diseñando para la Web Móvil

hablando un poco sobre responsive y adaptive design... y algunas cosas relacionadas con diseño web para móviles

A0574e5093df6afd68f1c109c5a9bf22?s=128

Orlando Del Aguila

May 26, 2012
Tweet

Transcript

  1. 8.

    Extras y Closing La Web Móvil Fixed y Fluid Layouts

    Adaptive Design Breakpoints Responsive Design
  2. 11.
  3. 20.
  4. 21.
  5. 22.
  6. 24.
  7. 28.
  8. 39.

    EMS Hacen que nuestro texto no sea fijo y que

    pueda cambiar con el layout
  9. 40.

    EMS

  10. 42.

    CSS h3 { font-size: 50px; font-weight: bold; color: black; span{

    color: red; font-size: 30px; font-weight: lighter; } }
  11. 43.

    CSS h3 { font-size: 50px; font-weight: bold; color: black; span{

    color: red; font-size: 30px; font-weight: lighter; } }
  12. 50.

    EMS h3 { font-size: 5em; *50px* font-weight: bold; color: black;

    span{ color: red; font-size: 3em; *30px* font-weight: lighter; } }
  13. 51.

    EMS

  14. 52.
  15. 55.

    EMS h3 { font-size: 5em; == 50px font-weight: bold; color:

    black; span{ color: red; font-size: 3em; font-weight: lighter; } }
  16. 57.

    EMS h3 { font-size: 5em; == 50px font-weight: bold; color:

    black; span{ color: red; font-size: 0.6 em; *30px / 50px* font-weight: lighter; } }
  17. 58.

    EMS

  18. 65.
  19. 69.

    Secciones Para pasar el padding a porcentaje, se toma como

    contexto el tamaño del mismo elemento
  20. 73.

    Secciones Al contrario del padding, el margin se calcula igual

    que los ems, usando como contexto el elemento que contiene al elemento que estamos evaluando.
  21. 74.
  22. 76.

    Secciones Alguno quizás dirá, tener img tags para imágenes que

    son del layout y no del contenido es una mala practica
  23. 79.
  24. 80.
  25. 82.

    Adaptive Design Adaptar nuestro diseño a un contexto, ejemplo un

    dispositivo en especifico, un iPhone o un iPad por ejemplo
  26. 86.
  27. 87.

    Adaptive Design • Quien es mi usuario • Como usa

    mi sitio • Contexto (Dispositivo) • Contenido (¿como se adaptaría?) Puntos a considerar
  28. 91.

    Breakpoints También son los puntos importantes como el tamaño de

    las pantallas de los distintos dispositivos
  29. 105.
  30. 106.
  31. 107.
  32. 114.

    Secciones MediaQueries @media only screen and (max-width : 850px){ nav,

    #name{ float:none; width:100%; text-align:center; } }
  33. 116.

    Secciones MediaQueries @media only screen and (max-width : 850px){ header{

    margin-bottom:50px;} nav, #name{ float:none; width:100%; text-align:center; } }
  34. 118.

    Secciones MediaQueries En este punto hay que probar y corregir

    los breakpoints hasta que tengamos lo que queremos
  35. 119.
  36. 123.

    El responsive design no es un silverbullet, no va ser

    viable en todos los casos Extras y Closing
  37. 124.

    En otros casos, app nativas para móviles es la solución,

    o alternativas como jQuery Mobile Extras y Closing
  38. 126.

    Extras y Closing IE6-8 no soportan mediqueries, pero hay un

    polyfill para eso Respond.js http://bit.ly/LQaei0
  39. 127.

    Extras y Closing Hay frameworks de CSS que se basan

    en fluid layouts y responsive design • Twitter Bootstrap • Zurb Foundation