25/3/2015

DiseoWebInteractivoo"ResponsiveWebDesign"Guayherramientas.|KsesoCss

KsesoCss

Diseo Web Interactivo o

"Responsive Web Design" Gua y
herramientas.
PUBLICIDAD

ANDROID

OPENSL

ES

AGONY?

Android audio done right. Stable. Low Latency.

Por Kseso 17.6.12 6 Comentarios

SelectLanguage

Este artculo pretende ser una gua para aclarar conceptos, tener claro qu y
cmo realizar tus pginas y las herramientas para verificar su comportamiento
en los distintos escenarios posibles.
Te encontrars con enlaces a artculos que desarrollan ms a fondo algunos
aspectos. As que si eres lector habitual del blog, puede que veas esta entrada
como un resumen de temas precedentes.

Nota: "Interactividad" en este contexto

No es de la pgina con el usuario. Es la respuesta o comportamiento de la
pgina al dispositivo donde se muestra y a los cambios que pueda haber en el
aparato una vez cargada la pgina (orientacin, redimensionado...). Tambin
debe tener presente las capacidades tcnicas del aparato y las condiciones o
vas de conexin del mismo a la red.

Qu es el Diseo Web Interactivo o

"Responsive Web Design"

http://ksesocss.blogspot.com/2012/06/disenowebinteractivooresponsiveweb.html

1/8

25/3/2015

DiseoWebInteractivoo"ResponsiveWebDesign"Guayherramientas.|KsesoCss

De un tiempo a esta parte ha aumentado

enormemente la disparidad de
dispositivos con los que se accede a
internet y los navegadores o sus
versiones utilizados.
Variedad tanto en el tamao de la
pantalla, capacidades tcnicas para
procesar las pginas y sus contenidos,
ancho de banda o velocidad en la
descarga, tecnologas, lenguajes o
propiedades que soportan... E incluso en
algunos dispositivos estas caractersticas
pueden cambiar una vez cargada la
pgina. Por ejemplo el tamao de la
pantalla en funcin de su orientacin.
Debido a lo anterior, es impensable
abordar la cuestin realizando una
pgina distinta por cada posibilidad,
discriminar qu y cmo accede y servir la
ms apropiada.
As que en base a la premisa anterior, se
puede entender que el Diseo Web
Interactivo o "Responsive Web Design"
es la tcnica que hace posible que tanto la forma (estilos) como la informacin
(contenido) que se suministra a cada dispositivo en cada situacin es la ptima
y est optimizada para l.
O de otra forma: hacer lo ms grata la experiencia al usuario con
independencia de con qu o cmo visite la pgina.
Y hacerlo con un mnimo de recursos o esfuerzos, tanto para el visitante como
para el desarrollador.
Aqu te lo explico desde otro ngulo.
Y ahora es donde te preguntas si ste concepto no es lo mismo pero en
moderno de lo que hasta ahora se llamaban diseos flexibles, layouts fluidos y
http://ksesocss.blogspot.com/2012/06/disenowebinteractivooresponsiveweb.html

2/8

25/3/2015

DiseoWebInteractivoo"ResponsiveWebDesign"Guayherramientas.|KsesoCss

elsticos.
No. En primer lugar el Diseo Web Interactivo es ms que evitar el scroll
horizontal. Involucra qu contenidos se suministra y al mismo tiempo cmo se
distribuye en la pgina y cmo se ha de mostrar en funcin de las capacidades y
caractersticas tcnicas del dispositivo al que se enva.
Y en segundo lugar no es algo exclusivo de Css. Tambin estn implicados otros
lenguajes y aspectos.

Cmo lograr el Diseo Web Interactivo

1. Lasreglas@Mediaqueriesmandan
2. Usaimgenessensiblesalmedio" responsiveimages ".
3. Usa"Javascriptdiscreto"onoinvasivo( UnobtrusiveJavaScript )
4. Trabajaconelconceptode" mejoraprogresiva "(Progressive
Enhancement)siempreenmente.

Reglas @Medias Queries

El peso de todo el control de la estructura o layout, as como la disposicin e
incluso la apariencia de los elementos recae en las reglas @media queries. Es
obligado entenderlas y dominarlas para lograr un verdadero Diseo Web
Interactivo o "Responsive Web Design".
Puedes iniciarte y conocerlas a fondo en los siguientes artculos:
1. " Css3@mediaQueriesUnadivinodevariablesyhacedordeimposibles ".
Unrepasoafondoencastellanoaldocumentodelconsorcio.
2. " Coleccinde@mediaQueriesparasmartphones ".
3. Ejemplosdepginasbasadasen@mediaqueries
4. Verificaconjavascriptsitus@MediaQueriesseejecutan
5. Anchurasmnimasenprrafosendiseosfludos

En el artculo enlazado en 1 podrs conocer a fondo las reglas media queries.

Las distintas formas de enlazarlas, las propiedades por las que podemos
discriminar los medios de acceso, cmo utilizarlas, etc.
http://ksesocss.blogspot.com/2012/06/disenowebinteractivooresponsiveweb.html

3/8

25/3/2015

DiseoWebInteractivoo"ResponsiveWebDesign"Guayherramientas.|KsesoCss

En los siguientes, casos muy concretos de su uso.

Gestin y control de las imgenes

Otro elemento imprescindible al que hay que
prestar especial atencin son las imgenes
incluidas en la pgina. Control que debe hacerse
en varios aspectos, tanto si son imgenes
colocadas va src en el html como si son fondos
va css:
1. Quversindelaimagenservirenfuncin
deldispositivo.
2. Tamaoconelquesevisualiza.
3. Mostrarlaimagencompletaounapartede
lamisma.

En este momento, el cmo servir una imagen u otra se est debatiendo

intensamente. Los frentes desde los que se aborda la cuestin son mltiples e
involucran a varios lenguajes.
Slo a mode de ejemplo, hay realizaciones que discriminar en el html de
diversas formas:
</html>

Lgicamente, estas propuestas necesitan de ayuda por parte de javascript o

algn otro lenguaje para seleccionar la versin de la imagen servida.
Pero con independencia de cmo se resuelva esta cuestin, con css s puedes
controlar al menos la presentacin de las imgenes para que no ocurran
desbordamientos.
Basta definir un tamao mximo con la propiedad max-width, ya sea en los
estilos generales o dentro de las medias queries especficas:
</Css>

Y si tienes que utilizar display:none en imgenes junto a las @media

http://ksesocss.blogspot.com/2012/06/disenowebinteractivooresponsiveweb.html

4/8

25/3/2015

DiseoWebInteractivoo"ResponsiveWebDesign"Guayherramientas.|KsesoCss

queries te ser de ayuda ste artculo .

Ms informacin sobre responsive imag

Artculos para ampliar informacin sobre la gestin y uso de las imgenes en el
Diseo Web Interactivo o "Responsive Web Design":
1. ResponsiveImagesCommunityGroup (W3c)
2. OnResponsiveImages
3. AdaptiveImagesforResponsiveDesigns
4. Whichresponsiveimagessolutionshouldyouuse?
5. ResponsiveImagesandWebStandards
6. ResponsiveImagesChart
7. AdaptiveImages
8. Responsiveimagesusingcss3

Herramientas, recursos y ejemplos del

Diseo Web Interactivo
Frameworks

Muchos de los aspectos expuestos del Responsive Web Design ya los ofrecen
resueltos muchos frameworks existentes. Una seleccin de ellos puedes
encontrarlos en este artculo al respecto .
http://ksesocss.blogspot.com/2012/06/disenowebinteractivooresponsiveweb.html

5/8

25/3/2015

DiseoWebInteractivoo"ResponsiveWebDesign"Guayherramientas.|KsesoCss

Testea en lnea tus realizaciones

Posblemente no tengas a mano en todo momento todos y cada uno de los

distintos dispositivos para comprobar cmo se ve tu trabajo en ellos. Por suerte
para ti, hay quien ha pensado en ello y tienes a tu disposicin y en lnea
herramientas para testarlas:
1. ResponsiveWebDesignTestingTool
AplicacinenlneadeMattKersley.Temostrarcmosevelapginaen
funcindeltamaodelapantallaopordispositivos.
2. Simpleresponsivedesigntestpage
3. ResponsiveDesignTestBookmarklet
4. Resizer basadaenjQuery

Ejemplos

mediaqueri.es : Extensa recopilacin de pginas que hacen uso de esta regla de

Css. Cada pgina es mostrada con cuatro capturas de pantalla a otras tantas
resoluciones de pantalla/dispositivo adems del enlace a ella.
http://ksesocss.blogspot.com/2012/06/disenowebinteractivooresponsiveweb.html

6/8

25/3/2015

DiseoWebInteractivoo"ResponsiveWebDesign"Guayherramientas.|KsesoCss

Otra pgina que siempre se pone como ejemplo es Css-tricks

de Chris Coyier.
Psate por Robot or Not? de Ettan Marcotte.
2 veteranas: Colly y en ALA The Baker Street Inquirer

Una de arena al Diseo Web Interactivo

El "Responsive Web Design" basado slo en la presentacin adaptada del
contenido al medio no es la panacea universal por s mimo.
En la versin destinada a los telfonos mviles deberas plantearte no slo
adaptar los tamaos, sino ir un paso ms all.
Tanto por el uso tan particular, como por sus caractersticas y por la limitacin
de trfico de muchos usuarios quizs deberas analizar adems de cmo se ve
tu pgina lo que manda tu servidor. Aligera los datos, reduce las peticiones al
servidor y el trfico generado.
El artculo de Jason Grigsby en Cloud Four
"CSS Media Query for Mobile is Fools Gold" es de lectura recomendada y es el
contrapunto final perfecto a este artculo.
Publicado el 17/6/12 por Kseso y Archivado en Diseo Web Interactivo
media queries Responsive Web Design RWD
PUBLICIDAD

PDF To TIFF Converter

Need A TIFF File When All You Have Are PDFs? Convert Your Files Now!

EN CONFIANZA

http://ksesocss.blogspot.com/2012/06/disenowebinteractivooresponsiveweb.html

7/8

25/3/2015

DiseoWebInteractivoo"ResponsiveWebDesign"Guayherramientas.|KsesoCss

Suscripcinnuevosartculos

Tu_email@dominio.ext

KsesoCss 2015 | Licencia Beerware | Algunos posts en PostCrossing |

Diseo por Kseso | Site Map

http://ksesocss.blogspot.com/2012/06/disenowebinteractivooresponsiveweb.html

8/8