• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design
 

Responsive Web Design

on

  • 727 views

Una Introducción y algo más sobre Responsive Web Design

Una Introducción y algo más sobre Responsive Web Design

Statistics

Views

Total Views
727
Views on SlideShare
704
Embed Views
23

Actions

Likes
3
Downloads
0
Comments
0

1 Embed 23

https://twitter.com 23

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Web Design Responsive Web Design Presentation Transcript

    • Responsive Web Design
    • Responsive Web Design Es una técnica que reune elementos de desarrollo conocidos para: Construir un único sitio que se adapte a múltiples dispositivos, para ofrecer la mejor Experiencia de Usuario.
    • 01 Layout basado en grilla flexible 02 Imágenes flexibles 03 Media Queries (CSS3) ...
    • En un sitio web que tiene su diseño basado en una grilla fija, Si el tamaño de la pantalla es menor al ancho total, scrollbars aparecen...
    • 01 Diseño basado en grilla flexible
    • Para conseguir flexibilidad necesitamos establecer proporción. ¿Cómo? buscado ÷ contexto = resultado
    • Comencemos fácil... Fonts Flexibles.
    • Para conseguir proporción, utilizaremos herencia de CSS.
    • Tamaño inicial de fuentes, aplicado al <body> font-size: 100%; En la mayoría de los navegadores equivale a 16px.
    • Debemos pasar de un tamaño fijo (px) a tamaño proporcional (em), utilizando la fórmula: buscado ÷ contexto = resultado
    • Ejemplo HTML CSS <body> <div class=”container”> <header> <h1>UX Team <span>blog!</span></h1> </header> <article> <header> <h2>Responsive Web Design</h2> </header> </article> </div> body{ font-size: 100%; } header h1{ font-size: 36px; } header h1 span{ font-size: 22px; } article h2{ font-size: 32px; }
    • Ejemplo HTML CSS <body> <div class=”container”> <header> <h1>UX Team <span>blog!</span></h1> </header> <article> <header> <h2>Responsive Web Design</h2> </header> </article> </div> body{ font-size: 100%; } header h1{ font-size: 2.25em;/* 36px / 16px */ } header h1 span{ font-size: 0.55555555555556em; /* 20px / 36px */ } article h2{ font-size: 2em;/* 32px / 16px */ }
    • Implementemos ahora un diseño con grilla flexible... Si tenemos un contenedor reemplazamos width por max-width.
    • Pasamos widths, margins y paddings, de un tamaño fijo (px) a tamaño proporcional (%), con la fórmula: buscado ÷ contexto = resultado * 100
    • Ejemplo HTML CSS <body> <div class=”container”> <header> </header> <article> </article> <aside> </aside> </div> .container{ width: 960px; margin: 0 auto; } article{ width: 540px; margin: 20px 10px 20px 90px; float:left; } aside{ width: 220px; margin: 20px 10px 20px 90px; float: left; }
    • Ejemplo HTML CSS <body> <div class=”container”> <header> </header> <article> </article> <aside> </aside> </div> .container{ max-width: 960px; margin: 0 auto; } article{ width: 56.25%; /* 540px / 960px */ margin: 2.083333333333% 1.041666666667% 2.083333333333% 9.375%; /* 20px / 960px , 10px / 960px , 90px / 960px */ float: left; } aside{ width: 22.916666666667%; /* 220px / 960px */ margin: 2.083333333333% 1.041666666667% 2.083333333333% 9.375%; /* 20px / 960px , 10px / 960px , 90px / 960px */ float: left; }
    • Realizar repetidamente cálculos, toma mucho... mucho tiempo.
    • Frameworks estáticas flexibles http://960.gs/ http://www.1kbgrid.com/ http://www.blueprintcss.org/ http://adapt.960.gs/ http://cssgrid.net/ con soporte para Preprocesadores de CSS (SASS o Less) http://goldengridsystem.com/ http://framelessgrid.com/ http://semantic.gs/ http://twitter.github.com/bootstrap/ http://foundation.zurb.com/ http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/
    • El diseño se adapta según el ancho de la pantalla. Scrollbars desaparecen... Las imágenes tienen tamaño fijo y rompen el diseño.
    • 02 Imágenes flexibles
    • Las imágenes tienen ancho fijo y rompen el layout cuando desbordan a su contenedor.
    • Podemos ajustar por corte, por medio de una regla de css que controla cuando algo desborda al elemento: overflow. .img-container{ width: 25%; /* 240px / 960px */ overflow: hidden; }
    • Mejor es ajustar proporcionalmente, que la imagen se adapte al tamaño del contenedor automáticamente. .img-container{ width: 25%; /* 240px / 960px */ } img{ max-width: 100%; height: auto; }
    • No solo las imágenes tienen ancho fijo, también videos y otro tipo de objetos. .media-container{ width: 25%; /* 240px / 960px */ } img, embed, object, video{ max-width: 100%; height: auto; }
    • Tenemos un diseño flexible, que se ajusta a distintos tamaños de pantalla. Sin embargo hay puntos en los que el diseño se rompe...
    • 03 Media Queries (CSS3)
    • CSS2 Media Types Permiten especificar como se presenta el mismo contenido en distintos medios. http://www.w3.org/TR/CSS2/media.html
    • Los media types disponibles son: all braille embossed handheld print projection screen speech tty tv
    • Se pueden utilizar de distintas maneras /* En el <head> del html */ <link rel="stylesheet" type="text/css" media="print" href="print_styles.css"> /* Dentro de un archivo css */ @import url("print_styles.css") print; @media print { /* reglas css */ }
    • CSS3 Media Queries Extienden a CSS2 Media Types. Permiten aplicar un conjunto de estilos cuando una condición se cumple. http://www.w3.org/TR/css3-mediaqueries/
    • CSS3 Media Queries Ejemplo .title{ width: 56.25%; color: #333; font-size: 2.25em; } @media screen and (max-width: 480px){ .title{ width: 100%; font-size: 1.5em; } } Los estilos de width y font-size aplicados a la clase title se sobreescriben cuando el ancho de la ventana del browser sea hasta 480px, mientras que el color sigue siendo el mismo.
    • devices features disponibles: http://www.w3.org/TR/css3-mediaqueries/#media1 width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid No aceptan min- max-
    • 01 display area vs rendering surface 02 browser viewport vs entire display 03 width vs device-width En desarrollo para testing utilizar max-width o min-width
    • Breakpoints?
    • Una mejor estrategia es elegir breakpoints en las resoluciones u otras restricciones donde nuestro diseño se rompe.
    • Múltiples Media Queries body{ color: black; background-color: white; } @media screen and (min-width:1200px) { body{ color: blue; } } @media screen and (max-width:768px) { body{ color: red; } } @media screen and (max-width:320px) { body{ color: green; background-color: black; } } Ejemplo: Si el ancho es 600px color: red y background-color: white Si el ancho es 240px color: green y background-color: black
    • Expresiones lógicas /* AND */ @media screen and (min-width:180px) and (max-width:480px) { /* El ancho de la ventana del browser es < 480px y > 180px */ } /* OR */ @media screen and (min-width:180px), print (min-width:20em) { /* El ancho de la ventana del bowser es > 180px o la hoja > 20em */ } /* NOT */ @media not all and (color) { /* El dispositivo no tiene pantalla color */ } /* ONLY */ @media only screen and (color) { /* Sirve para esconder css a browsers que no soportan media queries */ }
    • Mobile browsers tienen definido el viewport por defecto en un ancho mayor que el display. Defaults: 980px Safari iPhone 850px Opera 800px Android WebKit 974px IE
    • El viewport debe ser controlado, por medio de su metatag. Para responsive: device-width. Podemos evitar el zoom del dispositivo por medio de user-scalable. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no"> http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
    • Soporte de Browsers Desktop Chrome Firefox 3.5+ Safari 3+ Opera 9.5+ Internet Explorer 9+ http://caniuse.com/css-mediaqueries
    • Con ayuda de algun polyfill... Chrome Firefox 1+ Safari 2+ Opera 9.5+ Internet Explorer 5+ http://code.google.com/p/css3-mediaqueries-js/ http://github.com/scottjehl/Respond https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
    • Modernizr solo detecta features de browsers, permite por medio de yepnope, cargar polyfills externos. http://modernizr.com
    • Soporte de Browsers Mobile http://caniuse.com/css-mediaqueries http://www.quirksmode.org/mobile/tableViewport.html#mediaqueries iOS Safari Android Browser Google Chrome Opera Mobile Opera Mini Symbian Firefox BlackBerry (Webkit) IE windows phone 7.5+ Para IE windows phone 7 http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx
    • Para poder apuntar con media queries a Retina y otros displays de alta definición, tenemos la opción de la actual feature resolution, o la mejor, device-pixel-ratio. #image { background: url(image.png); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { #image { background: url(image_2x.png); background-size: 50%; } }
    • 01 Layout basado en grilla flexible 02 Imágenes flexibles 03 Media Queries (CSS3) ... 04 Estrategia de Contenidos 05 Optimización de Recursos 06 Conditional Loading Cualquier optimización posible mas
    • Según el dispositivo y el entorno donde se lo utiliza, tendremos restricciones como tamaño de pantalla, conectividad, distintas maneras de input, etc.
    • 06 Estrategia de Contenidos
    • Es necesaria una estrategia a la hora de que contenidos mostrar en cada dispositivo. El contenido también debe ser responsive a las posibilidades que ofrece el dispositivo.
    • Ejemplo
    • Ejemplo
    • Imágenes y videos, de alta resolución, en dispositivos con pantallas de baja resolución son desperdiciados. Necesitamos poder ofrecer alternativas de recursos eficientemente.
    • 05 Optimización de Recursos
    • Actualmente se trata desde los Web Standards, por parte de la W3 <picture alt="descripcion de la imagen"> <source src="small.jpg"> <source src="medium.jpg" media="(min-width: 400px)"> <source src="large.jpg" media="(min-width: 800px)"> <img src="small.jpg" alt="descripcion de la imagen"> </picture>
    • Grupo de Responsive Images en W3 http://www.w3.org/community/respimg/ http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/ Actualmente no hay soporte en browsers pero si un polyfill de la propuesta https://github.com/scottjehl/picturefill
    • Los videos en HTML5 ya son responsive. <video> <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video>
    • Además de CSS y recursos de imágenes y video, tenemos javascript que aportará comportamiento a nuestro sitio según el dispositivo.
    • 06 Conditional Loading
    • Media queries en javascript var mq = window.matchMedia( "(max-width: 500px)" ); if (mq.matches) { ! // ventana hasta 500px } else { ! // ventana mayor a 500px }
    • Detección de características del navegador. Podemos utilizar Modernizr. if ( Modernizr.touch ) { // scripts para comportamiento con touch } else { // scripts para comportamiento sin touch }
    • Aún hay algunos celulares en el mercado que no soportan totalmente HTML5. Se estima que el consumo de internet desde mobile superará ampliamente al de desktops.
    • Mobile First! Sitio diseñado y desarrollado primero para mobile ejemplos: http://www.smashingmagazine.com/ http://bostonglobe.com/ Graceful Degradation Progressive Enhancement
    • Artículos http://www.alistapart.com/articles/dao/ http://www.alistapart.com/articles/responsive-web-design/ Libros
    • Fernando Pasik Lead Front-End Developer @fernandopasik Gracias!