Responsive design presentación en Camon Madrid
description
Transcript of Responsive design presentación en Camon Madrid
RESPONSIVE DESIGN
Madrid, 19 de Julio de 2012
#responsivetucamon
MANU MEDINA
@medinamanu #responsivetucamon
RESPONSIVE DESIGN
Madrid, 19 de Julio de 2012
#responsivetucamon
MANU MEDINA
@medinamanu #responsivetucamon
@medinamanu [email protected] • Manumedina.com (mi blog) • maspixel.com (mi proyecto)
Trabajo: - Isban (Consultor de UX) - TAI (Profesor)
@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 !
@medinamanu #responsivetucamon
Os presento al señor….Ethan Marcotte Creó el término de Responsive Design en el post del blog “A list apart”
@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
@medinamanu #responsivetucamon
CONCEPTOS CLAROS ANTES DE EMPEZAR A HACER
RESPONSIVE
@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….
@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
@medinamanu #responsivetucamon
Viewport en Iphone: Navegador
Iphone-‐ Portrait: Pantalla: 320x480 Viewport: 320x356
Iphone-‐ Landscape : Pantalla: 480x320 Viewport: 480x208
Viewport: 320x356 px
@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
@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)
@medinamanu #responsivetucamon
EMPECEMOS A HACER… RESPONSIVE
@medinamanu #responsivetucamon
¿Qué es lo que necesitamos para hacer RESPONSIVE DESIGN?
¡¡¡Empieza lo bueno!!!
@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
@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%;}
@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% }
@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
@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” />
@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…
@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; } }
@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
@medinamanu #responsivetucamon
RESPONSIVE… RECURSOS
FRAMEWORKS LIBRERÍAS JS
@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 !
@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
@medinamanu #responsivetucamon
CSS Responsive frameworks
5 Frameworks con Responsive Grid: Seman6c Skeleton Less Framework 1140 CSS Grid Columnal
¡Recomiendo Columnal!
@medinamanu #responsivetucamon
Responsive Framework para prototipar
@medinamanu #responsivetucamon
Librería de Javascript para interactuar con nuestra web con gestos como tab, double tap, pinch, spread, drag….
@medinamanu #responsivetucamon
Themes para Wordpress
THEMETRUST THEMEFOREST THEMIFY STUDIOPRESS
@medinamanu #responsivetucamon
Themes para Drupal*
OMEGA FUSION ZEN
¡Recomendado por pacomontes.net !
@medinamanu #responsivetucamon
RESPONSIVE… EJEMPLOS
@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?
@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!
@medinamanu #responsivetucamon
Ejemplos…
Portá6les y Pcs 1280x 1024
Móvil portrait 320x480
Tablet landscape 1024x768
hyp://thinkvitamin.com
Cambios en el menú principal
@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
@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
@medinamanu #responsivetucamon
FIN ¡GRACIAS!