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 [email protected] •  Manumedina.com (mi blog) •  maspixel.com (mi proyecto)

Trabajo: - Isban (Consultor de UX) - TAI (Profesor)


¿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 !


Os presento al señor….Ethan Marcotte Creó el término de Responsive Design en el post del blog “A list apart”


¿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


CONCEPTOS CLAROS ANTES DE EMPEZAR A HACER

RESPONSIVE


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….


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


Viewport en Iphone: Navegador

Iphone-‐ Portrait: Pantalla: 320x480 Viewport: 320x356

Iphone-‐ Landscape : Pantalla: 480x320 Viewport: 480x208

Viewport: 320x356 px


Viewport en IPHONE: Aplicaciones nativas

En aplicaciones naOvas de Iphone en posición -‐ Portrait: Pantalla y viewport: 320x480 -‐ Landscape: Pantalla y viewport: 480x320


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)


EMPECEMOS A HACER… RESPONSIVE


¿Qué es lo que necesitamos para hacer RESPONSIVE DESIGN?

¡¡¡Empieza lo bueno!!!


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


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%;}


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% }


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


¿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” />


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…


CSS + MEDIA QUERY

Bajando el sidebar en Iphone: @media screen and (max-‐device-‐witdh: 480px){ #wrap { width:100%; } #content, #sidebar{ width:100%; float:lem; } }


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


RESPONSIVE… RECURSOS

FRAMEWORKS LIBRERÍAS JS


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 !


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


CSS Responsive frameworks

5 Frameworks con Responsive Grid: Seman6c Skeleton Less Framework 1140 CSS Grid Columnal

¡Recomiendo Columnal!


Responsive Framework para prototipar


Librería de Javascript para interactuar con nuestra web con gestos como tab, double tap, pinch, spread, drag….


Themes para Wordpress

THEMETRUST THEMEFOREST THEMIFY STUDIOPRESS


Themes para Drupal*

OMEGA FUSION ZEN

¡Recomendado por pacomontes.net !


RESPONSIVE… EJEMPLOS


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?


Ejemplos…




hyp://2012.dconstruct.org/

¡Ojo al menú principal cómo lo oculta!


Ejemplos…

Portá6les y Pcs 1280x 1024


Tablet landscape 1024x768

hyp://thinkvitamin.com

Cambios en el menú principal


Ejemplos…




hyp://css-‐tricks.com/

Cambio de footer, el buscador lo pone debajo del contenido


Ejemplos…

Portá6les y pcs 1280x1024



hyp://www.smashingmagazine.com/

Uso de “Select “ para visualización de móvil


FIN ¡GRACIAS!