1

DISEO RESPONSIVO
Introduccin
Sin duda uno de los puntos importantes en el mundo actual es el proceso de la
adaptacin a los entornos que estn dominando el mundo presente y dentro del
mundo presente, est el desarrollo del software.
El software es esa parte considerable como intangible en las computadoras, pero
no por ser intangible, es menos importante que los elementos llamados hardware
de las computadoras, es ms, creo que su importancia va a la par, pues ninguno
de los dos puede subsistir sin el otro, ya que ambos se complementan para su
trabajo.
Pero bueno, dejemos a un lado al hardware y centrmonos en el software.
El software est presente en m!ltiples aplicaciones, sea en la forma de volar un
avin en modo automtico, en una tarjeta de crdito, en un auto, en un
refrigerador inteligente, en fin, en miles de dispositivos.
"ambin est presente en el mundo de las pginas web a travs de www y es
desde ah# que las personas tienen comunicacin con su mundo a travs de las
cone$iones que permiten las pginas web.
%ste es el tema que nos ocupa, las pginas web, su dise&o y la ahora tan
necesaria evolucin en su programacin para que sean asequibles desde
cualquier medio que se use para hacer las visitas a las mencionadas pginas
pertenecientes al mundo www.
'a necesaria evolucin es conocida como el dise&o responsivo o adaptativo.
Qu es el diseo responsivo?
1
El dise&o responsivo surge con los diversos dispositivos con los que contamos
ahora para hacer conectividad con una red.
En palabras simples, el dise&o responsivo es aquel que pertenece a los
dispositivos que son diferentes en el tama&o de la pantalla con la que
visuali(amos una informacin desprendida de la red.
En si el dise&o responsivo nos permite ver el contenido de una pgina )$*, ya que
se adapta el contenido a la pantalla del dispositivo, nos muestra todos los
elementos de una forma ordenada a la pantalla y al contenido
Esto del dise&o responsivo surge como una necesidad ante la creciente demanda
que tiene los usuarios para hacer consultas y compras v#a internet desde un
dispositivo diferente a una computadora, sea desde una "ablet, un celular.
+e hecho esto est sustentado en la naciente y creciente introduccin de los
mviles pues una buena proporcin de visitantes al mundo de internet alcan( el
porcentaje de ,-. del /--. que visitan internet y un 01. de compradores
prefieren hacer visitas y compras por internet, lo anterior desde dispositivos
mviles.
El dise&o responsivo tiene una gran aceptacin, pues presenta ventajas a los
usuarios y a quienes hacen estos dise&os de y para internet, veamos2
Se argumenta que se reducen los costos de desarrollo
E$iste una baja en el rebote de usuarios frustrados que antes abandonaban
el acceso a internet por no tener la posibilidad de hacer accesos a la red
por medio de un dispositivo mvil
E$iste incremento en el resultado de conversin
Podemos considerar que es en s# una estrategia de mar3eting
Boostrap de twitter y foundation Zurb en el diseo responsivo
Estos dos conceptos tiene que ver mucho con el trabajo que actualmente se
desarrolla en y para la web a travs del acceso con los dispositivos 4normales4 y
con los dispositivos mviles, ya que actualmente la tendencia hac#a el uso de los
1
mviles est superando el trabajo con la red por cone$in con las computadoras
de escritorio.
Boostrap de twitter
5ootstrap es un framewor3 que est destinado a la facilitacin en el trabajo en lo
que respecta al dise&o web, teniendo la combinacin de 6SS y 7avaScript.
5oostrap es una creacin de "witter y el framewor3 viene a apoyar el trabajo de
las interfaces que se adapten a los distintos navegadores, siendo entonces un
sustento al dise&o responsivo, por ende facilita la navegacin en diversos medios,
redundando esto en el menor esfuer(o y tiempo empleado en la navegacin.
6omo caracter#sticas principales de 5ootstrap tenemos2
5ootstrap permite una serie de plantillas 6SS y ficheros 7avascript que permiten
integrar el framewor3 de forma sencilla y potente en proyectos web
8acilita las interfaces que se adapten a los diferentes navegadores9 escritorio,
tablets y mviles a distintas escalas y resoluciones
Puede integrarse perfectamente con las principales librer#as 7avascript
5rinda un dise&o robusto a travs de 'ESS y estndares como 6SS:;<"='1
Es un 8ramewor3 ligero que se integra de forma limpia en proyectos web
>sable en todos los navegadores ?tambin @nternet E$plorerA empleando <"='
Shim para que recono(ca los tags <"='1
Foundation Zurb
+e acuerdo a lo que investigu, es un framewor3 que viene a poyar enormemente
el trabajo en cuanto al rendimiento web frontBend para el dise&o responsive o
adaptable.
1
En si est dedicado al dise&o de sitios web mviles y Curb fue el primero en lan(ar
la primer plataforma mvil para la web
El framewor3 frontBend de Curb es muy !til en los entornos para los dise&os web y
es muy popular para el trabajo de entornos de trabajo para la pginas web, tal es
el caso de estudios Pi$ar, Dational Eeographic y 8lite.
Cul es el orien del diseo responsivo?
Seg!n la investigacin, la idea y el propsito del dise&o web adaptativo fueron
contendidos y detallados por el consorcio W3C. Esto en el mes de julio del 0--F
en su recomendacin )Mobile Web Best Practices* bajo el subt#tulo )One Web).
El concepto de )One Web* concibe la idea de construir una Geb para todos ?Web
for AllA y que sea accesible desde cualquier tipo de dispositivo ?Web on
EverythingA
En ste sentido, el +ise&o web Hesponsive ?IdaptableA nace ante la imperiosa
necesidad de mejorar el desarrollo web que se adapte a los nuevos dispositivos,
esto con un considerable m#nimo de esfuer(o.
El dise&o web responsive nace como una idea econmica ante el hecho de tener
un slo cdigo que se adapte a todos los dispositivos mviles
Qu otros no!bres recibe el diseo responsivo?
+ise&o web adaptativo o como se le conoce mundialmente Jresponsive web
designK
"ambin por las siglas HG+
Cul es el ob"etivo del diseo responsivo?
Proporcionar a los usuarios de la web un contenido igual, no importando el tipo de
dispositivo desde el que se est ingresando a la web y como resultado, la pgina
1
deber estar siempre disponible, sin importar el tama&o de la pantalla o la
velocidad de carga del dispositivo.
Il uso ddebe unificar la web, reducir los tiempos en los cambios y mejorar el
posicionamiento, para ello se crea l amisma website con la utili(acin de 6SS:
adaptando los contenidos en funcin de la resolucin y de los dispositivos desde
los que se vaya a ser vista la llamada pgina web
Qu venta"as tiene el diseo responsivo?
6on la misma versin en <"=' y 6SS se cubren las resoluciones de
pantalla9 el sitio web creado estar optimi(ado para todo tipo de dispositivos
=ejora la e$periencia de usuario9 lo contrario sucede con sitios web de
ancho fijo cuando se hace accesos desde los dispositivos mviles
Se reducen los costos ante la creacin y el mantenimiento, ya que se evita
tener que desarrollar aplicaciones adBhoc para versiones mviles
En cuanto a la optimi(acin de motores de b!squeda, !nicamente
aparecer#a una >H' en los resultados de b!squeda, esto permite ahorros
en redirecciones y los fallos que se puedan derivan de stas.
Es factible que minimice los errores al intentar hacer accesos desde los
sitios web conocidos como social lin3s9 8aceboo3, "witter, que pueden
terminar en error
=ejora del posicionamiento SEL. 6uantos ms dispositivos compatibles se
tengan, mayor alcance conseguir la pgina
Eoogle da prioridad a las websites mviles en las b!squedas reali(adas
desde dispositivos mviles.
#"e!plos del diseo responsivo
1
El Universal
http2;;m.eluniversal.com.m$;home.html
El universal, peridico en l#nea que igual puedo ver desde la laptop donde se hace
ste trabajo. "ambin le estoy viendo en ste momento por mi celular.
Se ve lo mismo, claro que con su lgica distribucin
Nuestra universidad
http2;;www.unadme$ico.m$;
Meo la pantalla de inicio en ambos dispositivos
1
Puedo ver el menu de las diversas plataformas
'as diversas opciones de ingreso
Puedo ver mi plataforma desde la laptop y el celular
=i Plataforma
1
NASA
http2;;www.lanasa.net;
En ste momento estoy viendo en mi celular y en la laptop una noticia referente
'a misma noticia se ve perfectamente en ambos dispositivos
C!o funciona el diseo web responsivo?
'os conocedores del tema, argumentan que e$isten sencillos pasos para hacer un
dise&o responsivo2
1
El diseo fuido
Se define como el hecho de abandonar los esquemas de los anchos fijos, es
decir2 'os dise&os debern se fluidos.
>na idea de esto es ?ejemploA dejar2 width2 ,--p$ y pensar mejor en proporciones2
Esto permitir que al ver una pgina desde tama&os diferentes de pantallas por los
dispositivos que estemos usando, el resultado ser que los elementos de la
web se harn ms peque&os y guardarn una proporcin para su ptima
visuali(acin.
Meamos un ejemplo y miremos el siguiente contenedor
910 px
"enemos valores para el contenedor de N/-p$ y dentro de l a un elemento de
,--p$ de ancho
+ividamos el segundo entre el primero
,--; N/- y luego lo multiplicamos por /-- que es el total a cubrir de un /--. de
pantalla, Dos resulta en ,:,N1.
Entonces al evitar colocar ?p$A nuestro navegador sabr que desde el dispositivo
que se est usando para visitar la pgina web, el ancho del elemento interior
deber ser siempre del ,:.N1. de un total de /--. de ese dispositivo
Entonces, ese ancho de ,--p$, equivale en el dise&o responsivo a un ,:.N1. a la
hora de programar responsivamente
Ihora, vamos a suponer que tenemos el siguiente tama&o de la fuente2
400
px
1
6onsideremos el tama&o general que es del /--. equivalente a /Np$ y un t#tulo
de tama&o 0,p$, hagamos la operacin sin operar la !ltima etapa que es la
multiplicacin
Entonces2 0,;/N O /.0P
Pero se aplica em, es decir2 /.0Pem
Para los objetos, imgenes, videos podemos aplicar2 Qma$Bwidth2 /--.R
Il dar esta orden, siempre se tendr el ancho m$imo de acuerdo al dispositivo
usado
Pero no todo est solucionado, ya que al hacer uso de pantallas muy peque&as
como la de los mviles, entonces tendr#amos problemas que debemos de
resolver tcnicamente, para eso est el segundo paso2
Media Queries
Partamos de la premisa del significado de Sueries, que equivale a Pregunta
Entonces al intentar visitar una pgina, la primera pregunta de nuestro navegador
es2 desde que dispositivo se est intentando acceder a la pgina solicitada.
"odo parte de ah# y si se cubren las consideraciones para el dispositivo usado y se
ha hecho el trabajo previo de los media Sueries, entonces se aplicarn las
instrucciones dadas desde 6SS y entonces el dise&o fluido cambia el tama&o y lo
hace justo el requerido para ese dispositivo
El sustento para el funcionamiento del dise&o responsivo se hace a travs de
media queries en las propiedades de los Estilos 6SS:.
6onsideremos a las media queries como una serie de rdenes que se incrustan
en la hoja de estilos 6SS y que indica al documento llamado <"=' cmo debe
comportarse en diferentes resoluciones de pantalla que se presentan al momento
de hacer una visita web
Es importante considerar tambin el concepto de los =eta tags
1
Por ello es importante a&adir un metaBtag dentro del elemento header de la web a
manera de que le diga al navegador que use el ancho del medio como ancho
de la web, anulando as# la escala inicial
Meamos cmo quedar#a en cdigo
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" !
Conclusin
En concreto, El +ise&o Hesponsivo es la tecnolog#a que se est usando
actualmente para permitir que los usuarios de la web al reali(ar las visitas a las
pginas web solicitadas, tengan siempre la pgina a su entera disposicin, esto en
cuanto a la estructura del contenido mostrado.
6laro que un usuario que desconoce del tema, no sabe que todo lo que est
viendo es resultado de la aplicacin del dise&o responsivo y que e$iste un trabajo
previo en cuanto al dise&o responsivo, no sabe que los desarrolladores han usado
tecnolog#as y tcnicas llamadas <"=', 6SS:, =edia Sueries, el dise&o fluido, los
=eta "ags y que todo lo que ven parte de la codificacin del dise&o responsivo.
Por otro lado, esto del dise&o web responsivo es s!per importante y sin duda que
los que le propusieron, sab#an que ten#an ante sus miradas al gran potencial de la
navegacin v#a cualquier dispositivo
'os conocedores del tema y que le propusieron dieron por hecho que el fenmeno
de los dispositivos mviles jams cesar#an en su crecimiento y al final de cuentas,
se cumple una norma en el desarrollo del software, debe ser escalable, debe
evolucionar, debe ser adaptable a los entornos solicitados, en ste caso las
diversas pantallas desde las que se visita una pgina web.
En cuanto a que si debo incluir la codificacin para la pgina web propuesta2
6laro, no tendr#a caso dise&ar y desarrollar una pgina que de problemas ante su
funcionamiento.
En el momento actual, dejar de actuar bajo el tenor responsivo, es permitir que
muchos usuarios de la web, jams visiten nuestra pgina, pues el hecho de ver
que una pgina da problemas, al mostrar su contenido, es una pgina que no se
vuelve a visitar.
1
Biblioraf$a%
http2;;www.Tpanas.com;disenoBwebBresponsiveBvsBmobileBwebBvsBaplicacionBnativaBcualB
elegirByBporBque;
http2;;webdesignledger.com;tools;/0BhelpfulBtoolsBforBresponsiveBwebBdesign
http2;;vivedf.iba(ar.com.m$;queBesBelBdisenoBresponsivoByBcomoBfuncionaBenBiba(ar;
http2;;intera3tiba.com;blog;disenoBwebBresponsivo
http2;;www.emenia.es;disenoBwebBadaptableBoBresponsiveBwebBdesign;
I"ED"I=ED"E
Enrique "orrescano =ontiel