responsive design presentación en camon madrid
DESCRIPTION
TRANSCRIPT
![Page 1: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/1.jpg)
RESPONSIVE DESIGN
Madrid, 19 de Julio de 2012
#responsivetucamon
MANU MEDINA
![Page 2: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/2.jpg)
@medinamanu #responsivetucamon
![Page 3: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/3.jpg)
RESPONSIVE DESIGN
Madrid, 19 de Julio de 2012
#responsivetucamon
MANU MEDINA
![Page 4: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/4.jpg)
@medinamanu #responsivetucamon
@medinamanu [email protected] • Manumedina.com (mi blog) • maspixel.com (mi proyecto)
Trabajo: - Isban (Consultor de UX) - TAI (Profesor)
![Page 5: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/5.jpg)
@medinamanu #responsivetucamon
¿Porqué el futuro es Responsive design?
Cada vez hay más tamaños de pantallas diferentes y más disposi6vos móviles
¡ Un anillo que lo gobierne todo !
![Page 6: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/6.jpg)
@medinamanu #responsivetucamon
Os presento al señor….Ethan Marcotte Creó el término de Responsive Design en el post del blog “A list apart”
![Page 7: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/7.jpg)
@medinamanu #responsivetucamon
¿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
![Page 8: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/8.jpg)
@medinamanu #responsivetucamon
CONCEPTOS CLAROS ANTES DE EMPEZAR A HACER
RESPONSIVE
![Page 9: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/9.jpg)
@medinamanu #responsivetucamon
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….
![Page 10: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/10.jpg)
@medinamanu #responsivetucamon
Viewport vs Resolución
Que nuestra web se vea a 100% sin que se redimensione.
Añadiendo este código en el head <meta name="viewport" content="width=device-‐width”/>
Ampliar o agrandar un objeto, Zoom in
![Page 11: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/11.jpg)
@medinamanu #responsivetucamon
Viewport en Iphone: Navegador
Iphone-‐ Portrait: Pantalla: 320x480 Viewport: 320x356
Iphone-‐ Landscape : Pantalla: 480x320 Viewport: 480x208
Viewport: 320x356 px
![Page 12: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/12.jpg)
@medinamanu #responsivetucamon
Viewport en IPHONE: Aplicaciones nativas
En aplicaciones naOvas de Iphone en posición -‐ Portrait: Pantalla y viewport: 320x480 -‐ Landscape: Pantalla y viewport: 480x320
![Page 13: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/13.jpg)
@medinamanu #responsivetucamon
Retina Display
Iphone 4S: Tamaño Pantalla: 480x320 Resolución 960 x 640 (326 ppp)
Iphone 3G: Tamaño Pantalla: 480x320 Resolución 480X320 (163 ppp)
![Page 14: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/14.jpg)
@medinamanu #responsivetucamon
EMPECEMOS A HACER… RESPONSIVE
![Page 15: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/15.jpg)
@medinamanu #responsivetucamon
¿Qué es lo que necesitamos para hacer RESPONSIVE DESIGN?
¡¡¡Empieza lo bueno!!!
![Page 16: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/16.jpg)
@medinamanu #responsivetucamon
Todo flexible…
Es como la fórmula secreta de la Coca-‐Cola
ObjeOvo/ contenedor = resultado
Nuestra web 6ene que tener su contenido en porcentaje para que pueda ser flexible.
FLEXIBLE GRID
![Page 17: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/17.jpg)
@medinamanu #responsivetucamon
Nuestra plantilla flexible
-‐ ObjeOvo/ contenedor = resultado 640/960= 0,666667 300/960= 0,3125
66,66667% 31,25%
-‐ Nuestra CSS: #wrap{ width:960px;} #content{ width: 66.666667%;} #sidebar{ widht: 31.25%;}
![Page 18: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/18.jpg)
@medinamanu #responsivetucamon
Nuestra plantilla flexible
-‐ ObjeOvo/ contenedor = resultado
obje6vo: 290px contenedor=640px 290/640=0.453125 (45,3125%)
45.3125%
-‐ Nuestra CSS: .lem , right { width:45,3125% }
![Page 19: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/19.jpg)
@medinamanu #responsivetucamon
Las fuentes flexibles
Por defecto el tamaño de las fuentes son: font-‐size: 100%; 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%) }
Volvemos a la formula de ObjeOvo/ contenedor = resultado
![Page 20: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/20.jpg)
@medinamanu #responsivetucamon
¿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” />
![Page 21: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/21.jpg)
@medinamanu #responsivetucamon
MEDIA QUERIES
Dentro de nuestra CSS Ejemplo IPHONE-‐ Landscape @media screen and (max-‐device-‐width: 480px) { 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 }
¡ Ahora empieza la magia !
CHULETA min-‐width: Si la ventana es mayor que… max-‐width: si la ventana e menor que…
![Page 22: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/22.jpg)
@medinamanu #responsivetucamon
CSS + MEDIA QUERY
Bajando el sidebar en Iphone: @media screen and (max-‐device-‐witdh: 480px){ #wrap { width:100%; } #content, #sidebar{ width:100%; float:lem; } }
![Page 23: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/23.jpg)
@medinamanu #responsivetucamon
Resumiendo… Cambia de mentalidad al diseñar, ¡piensa en mó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
![Page 24: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/24.jpg)
@medinamanu #responsivetucamon
RESPONSIVE… RECURSOS
FRAMEWORKS LIBRERÍAS JS
![Page 25: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/25.jpg)
@medinamanu #responsivetucamon
Retina Display
RETINA.JS -‐ Imagen normal: <img src="/images/my_image.png" /> -‐ Imagen de alta resolución habría que llamarla igual añadiendo “@2x” "/images/[email protected]"
¡ Al hacer zoom nuestras imágenes no pierden resolución !
![Page 26: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/26.jpg)
@medinamanu #responsivetucamon
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
![Page 27: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/27.jpg)
@medinamanu #responsivetucamon
CSS Responsive frameworks
5 Frameworks con Responsive Grid: Seman6c Skeleton Less Framework 1140 CSS Grid Columnal
¡Recomiendo Columnal!
![Page 28: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/28.jpg)
@medinamanu #responsivetucamon
Responsive Framework para prototipar
![Page 29: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/29.jpg)
@medinamanu #responsivetucamon
Librería de Javascript para interactuar con nuestra web con gestos como tab, double tap, pinch, spread, drag….
![Page 30: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/30.jpg)
@medinamanu #responsivetucamon
Themes para Wordpress
THEMETRUST THEMEFOREST THEMIFY STUDIOPRESS
![Page 31: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/31.jpg)
@medinamanu #responsivetucamon
Themes para Drupal*
OMEGA FUSION ZEN
¡Recomendado por pacomontes.net !
![Page 32: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/32.jpg)
@medinamanu #responsivetucamon
RESPONSIVE… EJEMPLOS
![Page 33: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/33.jpg)
@medinamanu #responsivetucamon
Ejemplos…
Tablet landscape y pcs 1024x 768
Móvil portrait 320x480
Tablet portrait 768x1024
hyp://www.microsom.com/en-‐us/preview/
Uhhh… si Microsov lo uOliza es que va en serio, o no?
![Page 34: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/34.jpg)
@medinamanu #responsivetucamon
Ejemplos…
Tablet landscape y pcs 1024x 768
Móvil portrait 320x480
Tablet portrait 768x1024
hyp://2012.dconstruct.org/
¡Ojo al menú principal cómo lo oculta!
![Page 35: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/35.jpg)
@medinamanu #responsivetucamon
Ejemplos…
Portá6les y Pcs 1280x 1024
Móvil portrait 320x480
Tablet landscape 1024x768
hyp://thinkvitamin.com
Cambios en el menú principal
![Page 36: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/36.jpg)
@medinamanu #responsivetucamon
Ejemplos…
Tablet landscape y pcs 1024x 768
Móvil portrait 320x480
Tablet portrait 768x1024
hyp://css-‐tricks.com/
Cambio de footer, el buscador lo pone debajo del contenido
![Page 37: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/37.jpg)
@medinamanu #responsivetucamon
Ejemplos…
Portá6les y pcs 1280x1024
Móvil portrait 320x480
Tablet portrait 768x1024
hyp://www.smashingmagazine.com/
Uso de “Select “ para visualización de móvil
![Page 38: Responsive design presentación en Camon Madrid](https://reader034.vdocuments.net/reader034/viewer/2022051312/546d7516af795976298b5387/html5/thumbnails/38.jpg)
@medinamanu #responsivetucamon
FIN ¡GRACIAS!