Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,709 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  

×