En 20 minutos ... Responsive Design

Responsive Design

Jesús María Méndez Pérez
Grupo 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

• 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, and
3. Media queries, a module from the
CSS3 specification.

1. A flexible, grid-based layout
2. Flexible images and media
- ¿Recortar imágenes?
Crop foreground
Crop 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/


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

Bootstrap
Default grid system Fluid grid system
Ancho de las columnas en porcentaje
en vez de px

Bootstrap Richfaces
• FUNDEWEB 1.x
RichFaces 3.x
http://livedemo.exadel.com/richfaces-demo/

PrimeFaces 1.x, IceFaces ?

• FUNDEWEB 2.x
RichFaces 4.x
http://livedemo.exadel.com/richfaces4-demo
http://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 Bootstrap
https://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

En 20 minutos ... Responsive Design

Presentaciones relacionadas

Más contenido relacionado

En 20 minutos ... Responsive Design