Responsive Design

Jesús María Méndez PérezGrupo de Apoyo a la Teleenseñanza (GAT)20/03/2013

• Introducción• Definición Responsive Design• Características • Patrones de diseño• Diferentes frameworks– Foundation– Bootstrap– Bootstrap Richfaces

• Herramientas

Introducción

• El teléfono móvil iguala ya al portátil en el acceso a internet

Imagen de http://www.dotcominfoway.com

• Solución: Responsive Design

• Gran cantidad de dispositivos y resoluciones.

Imagen de http://www.dotcominfoway.com

Solución: Responsive Design

Definición Responsive Design

• Un diseño que se adapta a la resolución del navegador o dispositivo con la que se visita el sitio web creando un diseño que responda a las necesidades del usuario.

http://stuffandnonsense.co.uk/

Ventajas• Una misma URL, un único contenido,

HTML5 y CSS3.• Las ventajas son evidentes:– Se consigue un ahorro en costes, no

teniendo que hacer desarrollos paralelos para cada dispositivo.

– Ahorro en tiempo, ya que solo hay que realizar las actualizaciones de contenido una única vez para todos los entornos.

– Mejora el SEO. Google incluso recomienda este tipo de prácticas y las valora muy positivamente.

– Mejor rendimiento.– Mayor soporte de navegadores.

Core Responsive Design

1. A flexible, grid-based layout,2. Flexible images and media, and3. Media queries, a module from the

CSS3 specification.

Core Responsive Design

1. A flexible, grid-based layout2. Flexible images and media- ¿Recortar imágenes?Crop foregroundCrop background

- ¿Sustituir una imagen por otra?http://stuffandnonsense.co.uk/projects/320andup/

- ¿Redimensionar imágenes?Nuestras imágenes se adapten al tamaño del contenedor.img { img, embed, object, video { max-width: 100%; max-width: 100%} }http://filamentgroup.com/examples/responsive-images/

Core Responsive Design

3. Media queries, a module from the CSS3 specification

<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-

scalable=0" /> NO

/* Large desktop */

@media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */

@media (max-width: 767px) { ... } /* Landscape phones and down */@media (max-width: 480px) { ... }

Ipod retina@media only screen and (-webkit-min-device-pixel-ratio: 2) { …}

Retina Images

Patrones de diseño

• http://bradfrostweb.com/blog/web/responsive-nav-patterns/

– Top Nav or “Do Nothing” Approach– The Footer Anchor– The Select Menu– The Toggle– The Left Nav Flyout– The Footer Only– The “Hide and Cry”

Frameworks

• Principales– Foundation– Bootstrap– Hay varios más pero son menos

conocidos y con menos comunidad detrás.

Foundation

http://foundation.zurb.com/

Bootstrap

http://twitter.github.com/bootstrap/index.html

Personalizarlo dependiendo de lo que necesites.

Bootstrap

Default grid system Fluid grid systemAncho de las columnas en porcentaje en vez de px

Bootstrap Richfaces

• FUNDEWEB 1.xRichFaces 3.x

http://livedemo.exadel.com/richfaces-demo/

PrimeFaces 1.x, IceFaces ?

• FUNDEWEB 2.x

RichFaces 4.xhttp://livedemo.exadel.com/richfaces4-demohttp://showcase.richfaces.org/

PrimeFaces 3.x http://www.primefaces.org/showcase/ui/home.jsf

IceFaces 3.x http://icefaces-showcase.icesoft.org/showcase.jsf

RichFaces Bootstraphttps://bootstrap-richfaces.rhcloud.com/

Herramientas

• Testear Responsive Design– Responsive PX– The responsinator– Screenfly– Responsive Web Design Testing Tool– Adobe Shadow– Firefox (Web developer) y Chrome

(Window Resizer)

• Responsive Design Sketchbook– Cuaderno de bocetos de diseño Responsive

Herramientas

• Plugins jQuery– FitText– Footable– Adaptative Images– Galería Imágenes Responsive

GRACIAS