RESPONSIVE DESIGN    Madrid,	  19	  de	  Julio	  de	  2012	              #responsivetucamon                MANU MEDINA
#responsivetucamon	     @medinamanu	  
RESPONSIVE DESIGN    Madrid,	  19	  de	  Julio	  de	  2012	              #responsivetucamon                MANU MEDINA
@medinamanu                         manumedina@gmail.com                         •  Manumedina.com (mi blog)              ...
¡	  Un	  an                                                                                        illo	  que             ...
Os presento al señor….Ethan Marcotte   Creó el término de Responsive Design en el post del blog “A list apart”#responsivet...
¿Qué es Responsive Design?                 	         Es un diseño flexible y diferente para las diferentes resoluciones de...
CONCEPTOS	  CLAROS	  	           ANTES	  DE	  EMPEZAR	  A	  HACER	  	                    RESPONSIVE	  #responsivetucamon	 ...
Diferentes aplicaciones para Móviles                           Apps	  NaOvas	                             Programación	  p...
Viewport vs Resolución                         	         Que nuestra web se vea a 100% sin que se redimensione.	          ...
Viewport en Iphone: Navegador            Iphone-­‐	  Portrait:	  	  	  	  	                                      Iphone-­‐...
Viewport en IPHONE: Aplicaciones nativas                                  En	  aplicaciones	  naOvas	  de	  Iphone	  	  en...
Retina Display           Iphone	  3G:	  	  	  	  	                       Iphone	  4S:	  	  	  	  	             Tamaño	  Pa...
EMPECEMOS	  A	  HACER…	                      RESPONSIVE	  #responsivetucamon	                       @medinamanu	  
¡¡¡Emp                                    ieza	  lo                                              	  bueno                 ...
FLEXIBLE GRID                                         Es	  com                                                            ...
Nuestra plantilla flexible                                                      -­‐	  ObjeOvo/	  contenedor	  =	  resultad...
Nuestra plantilla flexible                                     -­‐	  ObjeOvo/	  contenedor	  =	  resultado	               ...
Las fuentes flexibles                                                                            Volvem                   ...
¿y las imágenes? …también flexibles       <style>	         img	  {	  max-­‐width:	  100%;	  }	         </style>	         	...
MEDIA QUERIES                                                              ¡	  Ahora                                      ...
CSS + MEDIA QUERY                         Bajando	  el	  sidebar	  en	  Iphone:	                           @media	  screen...
Cambi                                                                               a	                                    ...
RESPONSIVE…	                             RECURSOS	                           FRAMEWORKS	                            LIBRER...
¡	  Al	  ha                                                                                                            cer...
Diferentes imágenes para diferentes resoluciones   AdapOve	  Images	     	     Muestra	  imágenes	     diferentes	  depend...
¡Recom                                           ien                                     Colum do	  	                     ...
Responsive Framework para prototipar#responsivetucamon	                @medinamanu	  
Librería de Javascript para interactuar con nuestra web con        gestos como tab, double tap, pinch, spread, drag….#resp...
Themes para Wordpress   THEMETRUST	     THEMEFOREST	     THEMIFY	     STUDIOPRESS	  #responsivetucamon	         @medinaman...
¡Recom                                  en                           pacom dado	  por	  	                                 ...
RESPONSIVE…	                             EJEMPLOS	  #responsivetucamon	                       @medinamanu	  
Uhhh…                                                              	  si	  Mic                                            ...
¡Ojo	  al                                                                     	  menú                                     ...
Cambi                                                                 os	  en	  e                                         ...
Cambi                                                         buscad       o	  de	  fo                                    ...
Uso	  de                                                                 	  “                                             ...
FIN	                           ¡GRACIAS!	  #responsivetucamon	                     @medinamanu	  
Upcoming SlideShare
Loading in …5
×

Responsive design presentación en Camon Madrid

3,589 views

Published on

Published in: Design

Responsive design presentación en Camon Madrid

  1. 1. RESPONSIVE DESIGN Madrid,  19  de  Julio  de  2012   #responsivetucamon MANU MEDINA
  2. 2. #responsivetucamon   @medinamanu  
  3. 3. RESPONSIVE DESIGN Madrid,  19  de  Julio  de  2012   #responsivetucamon MANU MEDINA
  4. 4. @medinamanu manumedina@gmail.com •  Manumedina.com (mi blog) •  maspixel.com (mi proyecto) Trabajo: - Isban (Consultor de UX) - TAI (Profesor)#responsivetucamon   @medinamanu  
  5. 5. ¡  Un  an illo  que gobier  lo     ne  tod o    !   ¿Porqué el futuro es Responsive design? Cada  vez  hay  más  tamaños  de  pantallas  diferentes    y  más  disposi6vos  móviles  #responsivetucamon   @medinamanu  
  6. 6. Os presento al señor….Ethan Marcotte Creó el término de Responsive Design en el post del blog “A list apart”#responsivetucamon   @medinamanu  
  7. 7. ¿Qué es Responsive Design?   Es un diseño flexible y diferente para las diferentes resoluciones de nuestros dispositivos. (Es  más  que  hacer  una  web  líquida)     -­‐   Escalar  los  textos  para  que   en  los  disposi6vos  móviles  se   vean  más  grandes   -­‐   Ocultar  información  no   necesaria  para    determinados   disposi6vos   -­‐   Mostrar  la  información  en   orden  diferente   -­‐   Reducir  opciones  de  menú   -­‐   Ocultar  publicidad  #responsivetucamon   @medinamanu  
  8. 8. CONCEPTOS  CLAROS     ANTES  DE  EMPEZAR  A  HACER     RESPONSIVE  #responsivetucamon   @medinamanu  
  9. 9. Diferentes aplicaciones para Móviles Apps  NaOvas   Programación  propia  para  IOS,  Android,  Blackberry….   Webapps   Usar  HTML5,  CSS3  y  JS  y  Frameworks  6po  Phonegap,   Sencha,  Lungojs…   Responsive  Web  en  tu  móvil   Accedes  mediante  el  navegador  de  tu  disposi6vo  móvil..   Safari,  Chrome,  Opera….  #responsivetucamon   @medinamanu  
  10. 10. Viewport vs Resolución   Que nuestra web se vea a 100% sin que se redimensione.   Ampliar  o  agrandar  un   objeto,  Zoom  in   Añadiendo  este  código  en  el  head     <meta  name="viewport"  content="width=device-­‐width”/>  #responsivetucamon   @medinamanu  
  11. 11. Viewport en Iphone: Navegador Iphone-­‐  Portrait:           Iphone-­‐  Landscape  :         Pantalla:      320x480   Pantalla:  480x320   Viewport:  320x356     Viewport:  480x208   Viewport:  320x356  px  #responsivetucamon   @medinamanu  
  12. 12. Viewport en IPHONE: Aplicaciones nativas En  aplicaciones  naOvas  de  Iphone    en  posición       -­‐  Portrait:           Pantalla  y  viewport:    320x480     -­‐  Landscape:   Pantalla  y  viewport:    480x320      #responsivetucamon   @medinamanu  
  13. 13. Retina Display Iphone  3G:           Iphone  4S:           Tamaño  Pantalla:      480x320       Tamaño  Pantalla:      480x320       Resolución  480X320  (163  ppp)   Resolución  960  x  640  (326  ppp)  #responsivetucamon   @medinamanu  
  14. 14. EMPECEMOS  A  HACER…   RESPONSIVE  #responsivetucamon   @medinamanu  
  15. 15. ¡¡¡Emp ieza  lo  bueno !!!   ¿Qué es lo que necesitamos para hacer RESPONSIVE DESIGN?#responsivetucamon   @medinamanu  
  16. 16. FLEXIBLE GRID Es  com o  la    fó r  de  la  C mula  secreta oca-­‐Co   la   Todo flexible… Nuestra  web  6ene  que  tener  su  contenido  en  porcentaje  para  que  pueda   ser  flexible.   ObjeOvo/  contenedor  =  resultado  #responsivetucamon   @medinamanu  
  17. 17. Nuestra plantilla flexible -­‐  ObjeOvo/  contenedor  =  resultado     640/960=  0,666667     300/960=  0,3125     -­‐  Nuestra  CSS:   #wrap{   width:960px;}    66,66667%                31,25%   #content{   width:  66.666667%;}     #sidebar{   widht:  31.25%;}    #responsivetucamon     @medinamanu  
  18. 18. Nuestra plantilla flexible -­‐  ObjeOvo/  contenedor  =  resultado   obje6vo:  290px   contenedor=640px     290/640=0.453125  (45,3125%)     -­‐  Nuestra  CSS:     .lem  ,  right  {   width:45,3125%   45.3125%   }    #responsivetucamon   @medinamanu  
  19. 19. Las fuentes flexibles Volvem os ObjeOv  a  la  formula o/  con   Por  defecto  el  tamaño  de  las  fuentes  son:   tenedo de   font-­‐size:  100%;   resulta r  =   do     font-­‐size:  16px;   font-­‐size:  1em;       Para  hacerlo  proporcional  ponemos:     h1{   font-­‐size:  3em;    48px/16px=3   }     p{   font-­‐size:  75%;      12px/16px=0,75  (75%)   }  #responsivetucamon   @medinamanu  
  20. 20. ¿y las imágenes? …también flexibles <style>   img  {  max-­‐width:  100%;  }   </style>     <img  src="img/nombre.jpg”  alt=”Texto  alt"  width="99"  height="135”  />      #responsivetucamon   @medinamanu  
  21. 21. MEDIA QUERIES ¡  Ahora  empie za  la  m agia  !   Dentro  de  nuestra  CSS     Ejemplo  IPHONE-­‐  Landscape   CHULETA   min-­‐width:  Si  la  ventana  es  mayor  que…   @media  screen  and  (max-­‐device-­‐width:  480px)   max-­‐width:  si  la  ventana  e  menor  que…    {     Mis  es&los  para  este  tamaño  de  pantalla  de  480px   }     Ejemplo  IPAD  –  Portrait   @media  screen  and  (min-­‐widht:  480)  and  (max-­‐width:  768px)     {     Mi  es&lo  para  viewport  entre  480  y  768  pixels    }    #responsivetucamon   @medinamanu  
  22. 22. CSS + MEDIA QUERY Bajando  el  sidebar  en  Iphone:   @media  screen  and  (max-­‐device-­‐witdh:  480px){     #wrap  {   width:100%;   }     #content,  #sidebar{   width:100%;   float:lem;   }     }  #responsivetucamon   @medinamanu  
  23. 23. Cambi a   diseña de  mentalida Resumiendo… r,  ¡pien d sa  en  m  al   óvil!   1. Haz  tu  grid  o  plan6lla  flexible   2. Haz  las  imágenes  y  otros  elementos  flexibles   3. Añade  a  tu  CSS  uno  o  2  media  queries  (para  iphone  y  ipad)   4. Empieza  a  fijarte  en  los  detalles  #responsivetucamon   @medinamanu  
  24. 24. RESPONSIVE…   RECURSOS   FRAMEWORKS   LIBRERÍAS  JS  #responsivetucamon   @medinamanu  
  25. 25. ¡  Al  ha cer   Retina Display imágen zoom  nuestr es  no  p as ierden   resoluc   ión  !   RETINA.JS   -­‐  Imagen  normal:  <img  src="/images/my_image.png"  />   -­‐  Imagen  de  alta  resolución  habría  que  llamarla  igual  añadiendo  “@2x”      "/images/my_image@2x.png"  #responsivetucamon   @medinamanu  
  26. 26. Diferentes imágenes para diferentes resoluciones AdapOve  Images     Muestra  imágenes   diferentes  dependiendo   de  la  resolución  del   disposi6vo     Únicamente  modificando:   fichero  .htcaccess,   e6queta  meta,  subiendo   un  fichero  php  al  servidor   y  modificando  nuestro   fichero  media  query  #responsivetucamon   @medinamanu  
  27. 27. ¡Recom ien Colum do     nal!  CSS Responsive frameworks 5  Frameworks  con   Responsive  Grid:     Seman6c     Skeleton     Less  Framework     1140  CSS  Grid     Columnal      #responsivetucamon   @medinamanu  
  28. 28. Responsive Framework para prototipar#responsivetucamon   @medinamanu  
  29. 29. Librería de Javascript para interactuar con nuestra web con gestos como tab, double tap, pinch, spread, drag….#responsivetucamon   @medinamanu  
  30. 30. Themes para Wordpress THEMETRUST   THEMEFOREST   THEMIFY   STUDIOPRESS  #responsivetucamon   @medinamanu  
  31. 31. ¡Recom en pacom dado  por     ontes.n et  !   Themes para Drupal* OMEGA   FUSION   ZEN  #responsivetucamon   @medinamanu  
  32. 32. RESPONSIVE…   EJEMPLOS  #responsivetucamon   @medinamanu  
  33. 33. Uhhh…  si  Mic es  que ros  va  en   ov  lo  uOliza   serio,  o Ejemplos…  no?   Móvil  portrait   Tablet  portrait   Tablet  landscape  y  pcs   320x480     768x1024   1024x  768   hyp://www.microsom.com/en-­‐us/preview/  #responsivetucamon   @medinamanu  
  34. 34. ¡Ojo  al  menú cómo  l  principal     o  ocult a!   Ejemplos… Móvil  portrait   Tablet  portrait   Tablet  landscape  y  pcs   320x480     768x1024   1024x  768   hyp://2012.dconstruct.org/    #responsivetucamon   @medinamanu  
  35. 35. Cambi os  en  e l princip  menú   al   Ejemplos… Móvil  portrait   Tablet  landscape   Portá6les  y  Pcs   320x480     1024x768   1280x  1024   hyp://thinkvitamin.com    #responsivetucamon   @medinamanu  
  36. 36. Cambi buscad o  de  fo or  lo  p oter,  e one  de l   conten bajo  de ido   l   Ejemplos… Móvil  portrait   Tablet  portrait   Tablet  landscape  y  pcs   320x480     768x1024   1024x  768   hyp://css-­‐tricks.com/    #responsivetucamon   @medinamanu  
  37. 37. Uso  de  “ visuali Select  “  para zación  de  mó   vil   Ejemplos… Móvil  portrait   Tablet  portrait   Portá6les  y  pcs   320x480     768x1024   1280x1024   hyp://www.smashingmagazine.com/    #responsivetucamon   @medinamanu  
  38. 38. FIN   ¡GRACIAS!  #responsivetucamon   @medinamanu  

×