Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
1
Índice
Introducción 4
Capítulo 1. Diseño Web Responsivo 14
1.1 ¿Qué es RWD? 14
1.1.1 Conceptos precursores al término 15
1.1.1.1 A Dao of Design 15
1.1.1.2 Progressive Enhancement 16
1.1.1.3 Fluid Grids 17
1.1.1.4 Mobile First 18
1.1.2 Término por Ethan Marcotte 19
1.2 ¿Cómo funciona? 20
1.3 ¿Por qué se usa? 22
1.4 Ventajas 24
1.5 Desventajas 25
Capítulo 2. Partiendo del Concepto Básico: Flexible Layouts 27
2.1 Tipos de Layouts 27 2.1.1 Layout Fijo 28 2.1.2 Layout Fluido 30 2.1.3 Layout Elástico 32 2.1.4 Layout Hibrido 33
2.2 Implementación de Layouts 34 2.1.1 Mostly Fluid 34 2.1.2 Column Drop 35 2.1.3 Layout Shifter 36 2.1.4 Tiny Tweaks 36 2.1.5 Off Canvas 37
2.3 Frameworks 38 2.3.1 Ventajas y desventajas de su aplicación 39 2.3.2 Ejemplos de Frameworks 40
Capítulo 3. Aspectos Técnicos: Responsive para el Programador 42
3.1 Media Queries 42 3.2 Viewport 44 3.3 Medidas Relativas 46 3.4 Tipografía Flexible 47 3.5 Imágenes Flexibles 47 3.6 Optimización de Contenido 49
Capítulo 4. Aspectos Visuales: Responsive para el Diseñador
4.1 Interfaz 4.2 Menú 4.3 Imágenes 4.4 Tipografías 4.5 Iconos 4.6 Videos
2
Capítulo 5. Creación de un Sitio Web Responsivo
5.1 Pautas para la creación de un sitio web adaptable
Conclusiones
Imágenes seleccionadas
Lista de referencias bibliográficas
Bibliografía
3
Índice de figuras
Figura 1. Mostly Fluid Pattern
Figura 2. Column Drop Pattern
Figura 3. Layout Shifter Pattern
Figura 4. Tiny Tweaks Pattern
Figura 5. Ejemplo del layout Tiny Tweaks
Figura 6. Off Canvas Pattern
4
Introducción
El avance acelerado de la tecnología ha causado cambios considerables en la forma de
comunicarse. Actualmente, la mayoría de los aparatos electrónicos tienen acceso al
Internet, que es un medio un medio de comunicación relevante hoy en día.
A causa de la variedad de gadgets por los que se puede navegar, el diseño web tiene
que migrar a estas necesidades y diseñar sitios para los diferentes tamaños de pantalla.
Por tal motivo surge la exigencia, tanto para los diseñadores como los programadores, de
crear un diseño web multidispositvo que permitiese su buen funcionamiento.
El Diseño Web Responsivo como su nombre lo indica, es un diseño que responde a la
resolución de pantalla del dispositivo del cual se está navegando adaptándose a él según
sus dimensiones teniendo la posibilidad de ampliar, contraer o reestructurar su interfaz y,
a su vez, se optimizan sus contenidos para su correcta reproducción.
Desarrollar este tipo de sitos evita tener que hacer distintos diseños para cada una de las
resoluciones y trae como resultado una mejor experiencia de usuario con un uso más
práctico y accesible.
En la sociedad actual, cada vez son más los dispositivos y los usuarios que buscan un
rápido y fácil acceso a la red desde sus dispositivos móviles. Se estima que el futuro del
diseño web apunte en su totalidad hacia el desarrollo de páginas responsivas, es un tema
que comienza a surgir desde finales del año 2013 y actualmente ha tomado fuerza
convirtiéndose en una necesidad, de tal magnitud que Google ha comenzado a exigir a
los webmasters la optimización móvil, valorando aquellas que tengan una buena
usabilidad. Responsive se ha instalado en el mundo del desarrollo web y ha despojado a
todos aquellos sitios que no respondan a las necesidades del mercado actual.
El presente Proyecto de Graduación (PG) pretende servir como una guía para entender
los conceptos básicos y, posteriormente, poder desarrollarlos llevándolos a la práctica
con la creación de un sitio, tanto en aspectos técnicos como visuales.
5
Se elige éste tema por ser un proyecto de contenido actual que sigue evolucionando; así
también por la importancia del internet, el cual se ha convertido en una herramienta
esencial en el diario vivir.
El PG busca resolver la problemática ¿Cuáles son las pautas a seguir para la
construcción de un Sitio Web Responsivo?
El objetivo general es diseñar un sitio web multidispositivo que responda a los estándares
de diseño y comunicación, estableciendo las características técnicas y visuales para
poder lograr un sitio de calidad. Se tiene como objetivos específicos, fundamentar el uso
del diseño responsivo e investigar su funcionamiento, además de analizar las ventajas
que puede llegar a tener así como sus falencias, analizar y explorar las técnicas de
implementación de los layouts que permiten que el sitio pueda ser adaptable, explorar las
herramientas que se emplean para su buena reproducción basados en el lenguaje
HyperTextMarkupLanguage, versión 5 (HTML5) y Cascading Style Sheets versión 3
(CSS3), así también establecer los principios de diseño que demuestren como crear un
sitio que tenga una adecuada visualización y experiencia de usuario.
Éste PG se ubica en la categoría de Proyecto Profesional, ya que sea desea analizar la
necesidad social y de mercado para posteriormente llegar a conclusiones que permitan
crear un propio proceso de construcción y, con base a esto, culminar con la producción
de un sitio web adaptativo que pretende cubrir la necesidad detectada en la etapa de
investigación.
El proyecto se encuentra dentro de la línea temática de Medios y Estrategias de
Comunicación ya que se concentra en el desarrollo de múltiples estrategias de
comunicación online con el objetivo de posicionar empresas en los medios digitales, los
cuáles han modificado el modo de vida de los usuarios dentro del mercado de internet y
proponiendo al diseño web como una actualización que mejora el desarrollo corporativo.
6
Para poder realizar el presente PG se recurrió a una serie de antecedentes que tuvieran
relación con la temática de éste. La Facultad de Diseño y Comunicación cuenta con una
gran cantidad de publicaciones de contenidos innovadores y rigor científico como
Proyectos de Investigación, Tesis de Maestría, Proyectos de Graduación y, Actas y
Cuadernos escritos por alumnos y profesores de la Universidad de Palermo. Todo el
material antes mencionado sirve de consulta y apoyo. A continuación se mencionarán
diez de ellos relacionados a la línea temática del presente.
Reynoso, M. (2014). Multiplicidad digital. Proyecto de Graduación. Facultad de Diseño y
Comunicación. Buenos Aires: Universidad de Palermo. Éste PG se toma como
antecedente y como un referente bibliográfico para la realización del presente. Se trata de
un ensayo que hace referencia al uso de tecnologías para acceder a la red. Menciona
primeramente los datos técnicos a cerca de la composición de la estructura de un
website, posteriormente relata su evolución y uso actual, enfocándose en los sitios web
orientados a dispositivos móviles. Utiliza como caso de estudio, de igual manera que el
presente, al Diseño Web Responsivo, describe características de su uso y
funcionamiento para al final concluir destacando la importancia que éste tiene
actualmente. Se relaciona con éste PG ya que la temática central es la misma,
valiéndose de los fundamentos expuestos por la autora de este ensayo para después
llevarlos a la práctica. Se diferencia en que, al ser éste un Proyecto Profesional, se toman
las técnicas y conceptos de RWD, para desarrollarlos en un proyecto web que se
realizará en el transcurrir del mismo. Asimismo, pretende aportar pautas para su creación
tomando en cuenta al programador si dejar atrás al diseñador, es decir, crear un proceso
de diseño que contemple al diseñador y programador.
De la misma manera se describe a Salgueiro, G. (2013). Diseño de interfaces web
efectivas y usables. Proyecto de Graduación. Facultad de Diseño y Comunicación.
Buenos Aires: Universidad de Palermo. Como su nombre lo menciona éste maneja un
término básico en el mundo web, interfaz. Describe a ésta como un elemento de
7
interacción entre el sitio web y el usuario, tomándolo como un elemento relevante para
lograr que una aplicación sea exitosa. De aquí desprende y toma un concepto que se
maneja con mayor frecuencia en materiales digitales enfocados a internet, Experiencia de
Usuario o User Experiencie (UX), que se encarga de estudiar las interacciones entre el
usuario y sistema. La relación de ésta temática con respecto al presente, está vinculada
de tal manera que al hablar de RWD, en otras palabras y debido a su concepción básica,
se está hablando de una interfaz. Cuyo principal aporte y funcionamiento es la capacidad
que tiene ésta de adaptarse a algún dispositivo.
Una publicación que funciona también como material de apoyo es Zavala, W. (2005).
Pautas que hacen a un desarrollador web profesional. Reflexión Académica en Diseño y
Comunicación Nº VI. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de
Palermo. Éste escrito contiene las pautas básicas y esenciales que debe tener en cuenta
todo desarrollador web al momento de crear un sito. Establece aquellas que se deben
cumplir estrictamente si se quieren lograr las funciones de comunicación. Otorga
importancia a la UX y la usabilidad, menciona las premisas básicas para que un sitio
tenga probabilidades de alcanzar el éxito. Hace referencia a autores como Keith Instone,
Jakob Nielsen, Jeffrey Veen y Kali Romiglia, que mencionan que es el cliente quien
diseña la funcionalidad de un sitio y exigen a los desarrolladores sitios que les
proporcionen una buena experiencia.
Como ya se mencionó estos patrones de usabilidad, deben estar presentes en todos los
sitios. También es el caso del diseño web responsivo ya que se debe seguir tomando en
cuenta todas estas consideraciones como cimientos para crear un contenido dinámico e
interactivo que, aparte de ser usable, sea creativo sin olvidar los principios básicos del
desarrollo web.
Igualmente, se encuentra Zavala, W. (2011). Lo que hay que saber para desarrollar un
sitio web. Reflexión Académica en Diseño y Comunicación NºXVI. Facultad de Diseño y
Comunicación. Buenos Aires: Universidad de Palermo. Es una publicación escrita por el
8
mismo autor a la anterior y profesor de la facultad de Diseño y Comunicación, Wenceslao
Zavala. Profundiza sobre algunas cuestiones ya mencionados; la usabilidad como factor
importante de la UX y habla de ésta como la capacidad de una interfaz de generar
sensaciones y emociones positivas durante el proceso de interacción con quien la utiliza,
en este caso los usuarios, quienes son el principal objetivo e indicador de un sitio web
exitoso. Esto se logra, primeramente, facilitándoles la búsqueda de información y
después creando experiencias positivas al momento de navegar. Otro tema relevante
relacionado con esto es Search Engine Optimization (SEO) y la importancia de los
buscadores. Priorizar el crear un código limpio para que los buscadores, puedan indexar
y encontrar rápidamente el sitio que se está desarrollando, y a su vez, su buena
optimización para alcanzar un buen posicionamiento web. Éstos son temas que se deben
considerar en el ámbito web y toda persona relacionada a la creación de contenidos en la
red. Como menciona el autor, el diseño y el desarrollo son dos factores que deben de ir
de la mano, una página web no es sólo un buen diseño, sino también debe considerarse
una buena programación para, que aparte de que los buscares indexen el sitio, tenga
una correcta funcionalidad y usabilidad. El uso de multidispositivos fue un obstáculo
importante para poder lograr estos principios, es por eso que surgen distintas
alternativas para poder cumplirlos.
Otro antecedente es Cortez, D., De Bisschop, N., Pérez, J., Salvietti., (2006). Nuevas
tendencias en el diseño de páginas web. Creación y Producción en Diseño y
Comunicación Nº10. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de
Palermo. Éste articulo contiene un poco de historia relacionado con la invención del
internet y describe cómo han ido evolucionando las páginas web con el transcurrir del
tiempo. Compara los primeros sitios creados hasta los últimos y más innovadores que se
pueden encontrar en la red. Analiza todas las características de diseño presentadas en
su estructura, tanto de imágenes, colores, tipografías, figuras, proporciones y estructuras
9
que se han ido modificando día a día. Menciona las tendencias utilizadas en los sitios
actuales y cómo la percepción de los usuarios se ha ido modificando paralelamente.
El vínculo entre este tema con el PG se relaciona en la tendencia a ir modificando
principalmente en sus proporciones e interfaz, no sólo como una tendencia estética, sino
por las necesidades que los consumidores, la tecnología y los nuevos dispositivos
demandan.
Así mismo se expone a Alliey, L., Milagro, A. (2009). Diseño de la interfaz gráfica web en
función de los dispositivos móviles. Caso de estudio: diarios digitales. Cuadernos del
Centro de Estudios de Diseño y Comunicación Nº38. Facultad de Diseño y
Comunicación. Buenos Aires: Universidad de Palermo. El Cuaderno No. 38 del Centro de
Estudios de Diseño y Comunicación, contiene este proyecto realizado por Ana Milagro y
Luzardo Alliey, titulado Diseño de la interfaz gráfica web en función de los dispositivos
móviles. Este tema tiene una gran relación al del presente PG, el cual también su
principal prioridad es poder diseñar sitios web multidispositivos, tales como celulares y
tabletas.
El proyecto menciona la problemática y contradictoria hipótesis del crecimiento
vertiginoso que ha tenido el uso de dispositivos móviles y a su vez el poco y mínimo
acceso a la web a través de estos. Debido a que no se le ha tomado la importancia
requerida que los gadgets demandan y los desarrolladores muestran su poca
preocupación acerca del tema. Una posible alternativa a resolver esta problemática
mencionada por los autores es RWD propuesto por el presente PG, el cual pretende
indagar y llegar a una solución a la problemática presentada en éste antecedente.
Además, Méndez, S. (2011). Empresas online. Web 2.0: un nuevo medio de
comunicación entre las empresas y sus públicos. Proyecto de Graduación. Facultad de
Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Éste PG titulado
Empresas Online, consiste en aplicar técnicas de investigación científica que permitan
reflejar el conocimiento a través de un análisis crítico del impacto que se tiene con un el
10
uso de las Tecnologías de Información y Comunicación (TICs), de las empresas en línea.
Específicamente en herramientas de la web como; blogs, micro blogs y redes sociales
para las comunidades corporativas. Así también como un fenómeno de interacción de
usuarios con la tecnología y como herramientas, Wikipedia, Youtube, Flickr y blogs, micro
blogs como Twitter. El dilema o problema es en la interacción personalizada entre usuario
y empresa o la web y la empresa. Cuáles son los beneficios de uso de la web dentro de
un mundo globalizado, y el desconocimiento de su uso para empresas específicamente
en Argentina, por eso es el interés de estudio.
Al tratarse del mundo 2.0 y el de internet, este tema se vincula al propuesto en el
presente PG debido a que las empresas necesitan un plan de comunicación completo
para poder lograr los objetivos de difusión. Un buen plan de comunicación, implica el uso
adecuado de redes sociales y un sitio web multiplataforma. Así como las redes sociales
adaptaron ya sus sitios para poder ser vistos desde distintos dispositivos. ¿Por qué los
sitios web no deberían de hacerlo?
En siguiente lugar Muguillo, M. (2011). Mobile Marketing nueva herramienta de
comunicación. El teléfono móvil y la publicidad. Proyecto de Graduación. Facultad de
Diseño y Comunicación. Buenos Aires: Universidad de Palermo. María Julia Murillo
autora del PG menciona y destaca el uso de celulares como principal herramienta de
comunicación publicitaria actual. Se analiza el mercado, la nueva especie de usuarios y
consumidores, tomando en cuenta que éstos son cada vez más selectivos y exigentes
con aquello que quiere mostrar una pieza publicitaria. Se introduce al Mobile Marketing
como elemento que surge consecuentemente de la evolución tecnológica enmarcada por
la telefonía celular. Se estudia el mercado actual el cual se busca explotar mediante el
estudio de su consumo.
En el presente, se plantea al diseño responsivo como un método de diseño de sitios web
que son una publicitaria para dispositivos móviles y, que de igual manera a la publicación
11
ya mencionada, abastece a esos consumidores actuales que se encuentran en la
búsqueda incesante de la innovación.
De la misma manera Machese, J. (2010). Web 2.0 y la nueva audiencia activa. Ensayos
Contemporáneos. Proyecto de Graduación. Facultad de Diseño y Comunicación. Buenos
Aires: Universidad de Palermo. El objeto de estudio del PG es, como su nombre lo
indica, la Web 2.0 cuya principal característica es convertir al usuario en agente social
activo, participando en la generación de contenidos de un sitio. Al ser el público el
autogestor de contenidos, el usuario puede crear contenidos desde cualquier
instrumento, ya no sólo desde una computadora, sino a partir de una tablet o un celular, y
a su vez pretende que éste pueda ser visualizado de una manera óptima en cualquier
otro aparato. Aquí es donde radica, lo que ya se ha mencionado, la trascendencia que
puede llegar a tener un sitio web perteneciente al mundo 2.0 si éste tiene la capacidad de
adecuarse a cualquier dimensión de pantalla.
Para finalizar Valverde, J. (2011). Impreso vs. Online. Proyecto de Graduación. Facultad
de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Es una investigación
que consistió en determinar las fortalezas y debilidades de lo impreso y lo online o digital,
debido a las exigencias de los profesionales. La línea temática de investigación es la
vertiginosa revolución en los avances de la tecnología, como la creación de nuevos
dispositivos, la demanda y su consumo, siendo la web, la más importante y revolucionaria
fuente de información instantánea, cambiando notablemente los medios de
comunicación. El proyecto consiste en la realización y comparación minuciosa del diseño
editorial de una versión en papel y otra digital del diario La Nación, considerando seis
elementos gráficos; la grilla o estructura, la tipografía, el uso de márgenes, las
misceláneas y el color empleado y el reparto de blancos. Se desarrolló el ensayo del
diseño editorial mediante una configuración visual, favoreció la comparación del lenguaje
gráfico y digital. Por lo que los medios de comunicación y los diseñadores, tienen el gran
12
reto y desafío de adaptarse a tan acelerados cambios que atraviesan, requiriendo de
adaptaciones constantes de los contenidos.
Los antecedentes funcionan como elementos de apoyo para conformar el marco teórico y
confeccionar el diseño metodológico. De esta manera se puede establecer la información
necesaria que conforma el presente PG para profundizaren ella y así cumplir con los
objetivos específicos y generales planteados.
El presente Proyecto de Graduación consta de cinco capítulos; en el primero se define
que es el Diseño Web Responsivo y sus diferencias con los distintos métodos diseño
web. Se nombran sus principales atributos y conceptos básicos, definiendo cada una uno
de ellos y la importancia de estos para que el sitio funcione adecuadamente en cualquier
aparato. A su vez, explica cómo surge la necesidad de crear este tipo de diseño como
una alternativa de diseño multidispositivo, analizando al usuario actual y sus
necesidades. Se menciona al internet móvil y la variedad de dispositivos desde los que,
hoy en día, se puede acceder a la red. Se concluye examinando sitios web responsivos
marcando sus ventajas y desventajas.
El segundo capítulo se orienta a un concepto básico y elemental que hace que el RWD
funcione, los layouts o grilla de contenido. Se desarrolla en todo un capitulo ya que se
explica los tipos de layouts que pueden existir, sino también ejemplifica las distintas
maneras en que pueden ser implementados proporcionando opciones de funcionamiento
de los sitios web. A su vez se analiza y explica el funcionamiento de los frameworks, una
herramienta que se implementa actualmente en la construcción de estructuras
adaptables.
En seguida, el tercer capítulo trata sobre las funciones técnicas de este tipo de diseño. Se
desarrolla una guía para el programador sobre los aspectos a considerar al momento de
programar. Abarca todos los aspectos de código que ayudan a la creación del sitio
responsivo conociendo las distintas técnicas y herramientas para implementar la interfaz.
13
El cuarto menciona los aspectos visuales, comienza con la creación de la interfaz, y a su
vez del layout, para que exista una buena UX desde cualquier aparato. Se diseñan las
interfaces para las distintas resoluciones de pantalla considerando el concepto Mobile
First. Se mencionan los elementos que ayudan a que el contenido pueda estar
optimizado y reproducido de la mejor manera y se exploran las nuevas tendencias del
diseño web.
Para finalizar el PG se crea un sitio web responsivo, en el último capítulo, estableciendo
las pautas que se deben seguir para que sea elaborado. Se plantea un proceso de
diseño, desde objetivo general del proyecto hasta su lanzamiento. Se proponen
recomendaciones a la hora de crear el sitio web y se enfoca en reunir los aspectos
técnicos y visuales, en su debido orden. Se realizan los objetivos propuestos y analizados
durante todo el proyecto en cuestiones de diseño, usabilidad y experiencia de usuario.
El contenido que se eligió se vincula con la carrera de Diseño de Imagen y Sonido debido
a que se trata de un medio de comunicación multimedial, que hace uso de imágenes y
mensajes visuales en soporte digital, para crear diseños teniendo en cuenta las
estrategias comunicativas y estéticas. Los aportes que proporciona este tema en relación
a la carrera ya mencionada, es marcar las pautas para la construcción de un sitio web
responsivo, sino también darse cuenta que el internet ya no está solamente en las
computadoras de escritorio sino en más dispositivos móviles y debido a esto buscar
alternativas que permitan estar al alcance de la tecnología y el comercio actual.
El diseño web se encuentra en constante crecimiento, por tanto, todas las personas que
se encuentran sumergidas en esta área deben de estar en incesante investigación
innovadora y práctica diaria. Se debe adaptar a los frecuentes cambios y desarrollar
habilidades técnicas y de diseño para crear completas experiencias digitales para los
usuarios.
14
Capítulo 1. Diseño Web Responsivo.
A lo largo de este primer capítulo se introduce al lector a conocer a fondo la temática
centrar de este PG, se hace un proceso de investigación en que se estudia con
profundidad al Diseño Web Responsivo o Responsive Web Design (RWD) según las
siglas en inglés. Primeramente se define el término, investigando su origen de acuerdo a
algunos conceptos que sirvieron como precursores para poder desarrollarlo, pasando
desde sus primeros indicios desde que John Allsopp comienza a hablar de las diferencias
entre el diseño impreso y el digital, hasta que se establece el término cuando Ethan
Marcotte lo concreta como una nueva filosofía de diseñar. Posteriormente se conoce la
herramienta, determinando cuál es su función y definiendo sus principios básicos. Una
vez expuesto esto se realiza un análisis de su uso, justificando su implementación de
acuerdo al análisis del al avance de la tecnología, los dispositivos móviles y los hábitos
del usuario actual. Para concluir, se realiza una observación en el mercado exponiendo
las ventajas y desventajas de su implementación.
1.1 ¿Qué es RWD?
El RWD es una filosofía de diseño web a la que se originó a partir del trabajo de
profesionales en busca de una solución a dificultades técnicas que, generalmente, se han
ido planteando según variaban los hábitos de los usuarios y la tecnología.
Como ya se mencionó en la introducción del éste PG, se trata de un diseño
multidispositivo que tiene como objetivo responder a la resolución de pantalla, teniendo
como principal cualidad la capacidad de adaptación. Esto es posible de acuerdo a
algunas técnicas de desarrollo web que permiten crear una interfaz flexible que, a su vez,
permite optimizar sus contenidos para su correcta reproducción en los dispositivos
móviles con los que se cuentan hoy en día.
15
1.1.1 Conceptos precursores al término.
Para poder llegar a un concepto, generalmente existen una serie de antecedentes que
dan origen a su creación. Tratando de entender de mejor manera el RWD, el presente PG
hace un paso por algunas ideas que surgieron con antelación, que originaron algunas
problemáticas que engloban este tema y ayudan a conocer de mejor manera sus
características.
Si bien RWD es un término que surgió en los más recientes años, tiene sus orígenes
desde varios años atrás. Durante la primera década del siglo veinte surgieron una serie
de conceptos que buscaban resolver problemáticas técnicas presentadas en el mundo de
la web. Entre ellas surgía la complicada tarea que se enfrentaba un diseñador al crear
para medios digitales y no impresos, de similar manera se trataba el problema de la
incompatibilidad de navegadores, así como, a partir de la inclusión de los dispositivos
móviles, la necesidad considerarlos como primer lugar al momento de diseñar y de crear
disitintos sitios web para cada una de las resoluciones. A continuación se desarrollaran
cada uno de estos conceptos en orden cronológico ascendente, para comprender como
surge el termino RWD.
1.1.1.1 A Dao of Design.
En el año 2000 John Allsopp expone las diferencias que hay entre el diseño impreso y el
diseño web en un artículo titulado A Dao of Web Design. De acuerdo a la comparativa
que hace entre lo impreso y lo digital Allsopp (2000) plantea las dificultades que tiene el
diseñador cuando se trabaja en un medio como la web. Se comienzan a tomar los
conceptos del diseño web responsivo, descubriendo que en los medios digitales se
enfrenta a diferentes variables como dispositivos con distintas capacidades, tamaños de
pantalla, orientación de las mismas, entre otras cosas que no están en el control del
diseñador. Caso contrario a lo que sucede cuando se diseña para medios impresos,
donde se saben las medidas de manera concreta. Se plantea que el diseñador debe
16
tener la capacidad de adaptarse debido a que en el diseño web existen una cantidad de
variables que pueden modificar el diseño.
The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things. [El control que los diseñadores conocen en el medio de impresión, y, a menudo desean en el medio web, es simplemente una función de la limitación de la página impresa. Debemos aceptar el hecho de que la web no tiene las mismas limitaciones, y el diseño de esta flexibilidad. Pero primero, hay que ‘aceptar el flujo y reflujo de las cosas.’]. (Allsopp, 2000).
En un artículo titulado Ethan Marcotte on how responsive web design came about
publicado por el portal web Creative Bloq establece que Marcotte se refiere a dicha
publicación de la siguiente manera:
…we should take the web on its own terms and stop defining it by the physical boundaries of the printed page. The industry kept having this discussion about when it was 'safe' to upgrade the width of our designs. [John's article] urged us to think about making designs that followed the shape of the browser, to letting the user's preferences take hold”. […debemos de tomar la web en sus propios términos y no definirla más por los límites físicos de la página impresa. La industria siguió teniendo esta discusión acerca de cuando era ‘seguro’ para actualizar el ancho de nuestros diseños. El artículo nos impulsó a pensar en hacer diseños que siguieron a la forma del navegador, para dejar que las preferencias del usuario se apoderen.] (Ethan Marcotte on how responsive web design came about, 2014)
De acuerdo a esta publicación se daban los primeros pasos a pensar de manera fluida y
ver al diseño para medios digitales como un nuevo enfoque. Está impulso a varios
diseñadores a salirse del entorno impreso y demostrar que la web podría ser un medio
poderoso el cual debería ser aprovechado de mejor manera.
1.1.1.2 Progressive Enhancement.
Posteriormente Champion (2003) propone una filosofía llamada Progressive
Enhancement, la cual surge a partir de otro concepto llamado Graceful Degradation el
cual establece que los usuario con navegadores más actuales tengan un cierto nivel de
experiencia, pero también permite ser usado con navegadores antiguos ofreciendo un
nivel bajo en su experiencia de usuario.
17
Al cual Kadlec se refiere de la siguiente manera: “El concepto no es especialmente
amigable con el futuro. Muestra una falta de respeto a los usuarios de navegadores más
antiguos e ignora la creciente realidad de que hay nuevos dispositivos móviles, que
también cuentan con navegadores menos capaces” (2012, p. 15). En cambio, la mejora
progresiva propone que se comience con una base usable para todos y se incrementa la
riqueza de la experiencia para quienes utilicen mejores y modernos medios de acceso, a
su vez se promueve hacer mejoras técnicas en los sitios web cada vez que un navegador
sea actualizado garantizando así que se mantenga técnicamente a la vanguardia.
Para que pueda existir una mejora progresiva se deberían cumplir algunos parámetros
como que el diseño web debe permitir el acceso correcto a todo el contenido de la página
independientemente del navegador y su versión del cual sea visitado. Una vez cumplida
esta consigna establece que se deben utilizar instrucciones moderadas del lenguaje CSS,
primero creando las reglas principales que puedan ser soportadas por todo navegador y
posteriormente pensar en aquellas que sean soportadas por navegadores modernos y
justificando su uso con una mejor experiencia para el usuario.
1.1.1.3 Fluid Grids.
De acuerdo a estos dos planteamientos propuestos tanto por Allsopp como por
Champion, se ponían sobre la mesa dos de los aspectos fundamentales que hacen que
una web no pueda ser vista adecuadamente, la resolución de pantalla y los navegadores.
Son dos variables a las que se enfrenta el RWD, la primera debido al avance de la
tecnología y la a numerosa cantidad de tamaños de pantalla con la llegada de los
dispositivos móviles y la segunda, visto desde la parte técnica, a la discapacidad de los
navegadores de estandarizar reglas de comportamiento para que puedan ser
reproducidas los sitios por igual en cualquiera de ellos.
Marcotte (2009) comienza a entrar en el tema y pública un artículo titulado Fluid Grids
donde define el concepto de Diseño Fluido, como solución a la adaptación de pantalla a
18
cada dispositivo. La propuesta de Marcotte radica en el uso de medidas relativas y no en
tamaños definidos en pixeles sino en porcentajes para que de esta manera el sitio tenga
un contenedor que sea el 100% de la pantalla y los demás elementos se redimensionen
dependiendo de su resolución.
Actualmente Marcotte, se refiere a su publicación de la siguiente manera:
For a long time, fluid layouts were a nice-sounding theory, rather than something I'd be comfortable using on client projects. As a designer, there's nothing worse than maximizing a window on a huge monitor and seeing uncomfortably long lines of text. So it wasn't until media queries began gaining some traction, I started to realize you could have the fluidity and also preserve a little bit of control over it. [Durante mucho tiempo, los diseños fluidos parecían ser una buena teoría, en lugar de algo que estaría cómodo utilizando en proyectos de clientes. Como diseñador, no hay nada peor que la maximización de una ventana en un gran monitor y ver incómodamente largas líneas de texto. Así que no fue hasta que los media queries comenzaron ganando algo de tracción, empecé a darme cuenta que podría tener la fluidez y también preservar un poco de control sobre él.] (Ethan Marcotte on how responsive web design came about, 2014)
Como lo menciona el mismo autor Fluid Grids trajo un aporte que era el uso de medidas
relativas para que su estructura fuera elástica, pero se enfrentó al problema de que los
elementos que estaban en el contenido quedaban desproporcionados. Esta publicación
fue un buen inicio para Marcotte y comenzaba el reto de trabajar con medidas relativas
teniendo el control de ellas y sus elementos.
1.1.1.4 Mobile First.
En este mismo año nace un concepto básico para el diseño multidispositivo. Mobile First
fue escrito por Wroblewski (2009) en el cual expone su filosofía que es bastante simple,
diseñar pensando en primer lugar en los dispositivos móviles. Una de sus justificaciones
es debido a que un dispositivo móvil tiene menor ancho de banda que una computadora,
por lo tanto es conveniente centrarse primero en un diseño que tenga más limitaciones.
Por otro lado, el concepto se fundamenta en acelerado cambio en la manera de navegar
de los usuarios por lo que pretende llegar a mayor número de personas y optimizar su
contenido en algo básico y funcional. Como resultado se tendrán sitios más fáciles de
navegar y entender, con menor carga cognitiva y visual. Ahora, cada pieza de
19
información, cada enlace, debe ganarse su lugar. Esto ayuda a priorizar contenidos y
funcionalidades eliminado lo innecesario: las páginas son más cortas y sencillas y la
navegación más racional.
La metodología Mobile First para RWD ayuda a que las páginas sean más accesibles,
favorece a todos los usuarios, pero sin duda especialmente a los usuarios con
discapacidad cognitiva, a los usuarios que utilizan lectores de pantalla o a los usuarios
que tienen una discapacidad motora y utilizan dispositivos de entrada alternativos.
1.1.2 Término por Ethan Marcotte.
Las publicaciones anteriores dieron pie a que Ethan Marcotte sentara las bases técnicas
y conceptos básicos del diseño web responsivo escritos en su libro Responsive Web
Design en el año 2010, es aquí cuando se le atribuye el concepto. Dicha publicación
funciona como referente bibliográfico para el presente PG debido a que es la primera
publicación en la que se define a este tipo de diseño. Marcotte se basa en los principios
de Arquitecture Responsive para crear un nuevo concepto de intercambio de información
continuo y constructivo.
Recientemente, una disciplina emergente llamada ‘Arquitecture Responsive’ ha empezado a preguntar cómo pueden espacios físicos responder a la presencia de personas pasando por ellos. Mediante una combinación de robótica y materiales elásticos, los arquitectos están experimentando con instalaciones de arte y estructuras en paredes que se doblan, flexionan y expanden conforme las multitudes se acercan a ellas. Se pueden sincronizar sensores de movimiento con sistemas de control climático para ajustar la temperatura de una habitación y la luz ambiental con base en la cantidad de personas que ocupan la misma. Hay empresas que ya han creado “tecnología de vidrios inteligentes” que se opaca automáticamente cuando los ocupantes de una habitación llegan a un límite determinado, brindándoles una capa adicional de privacidad. (Marcotte, 2011, p.9)
En esta cita explica la relación que existe entre los espacios físicos y la manera en la que
serían influenciados por las personas que los habitan. Por ejemplo, si se transporta este
pensamiento en términos de la de la web, se busca que el diseño tanto del espacio dela
presentación y los contenidos estén vinculados. Independientemente de las técnicas y
20
conceptos relacionados a la web, el libro menciona a RWD como una nueva forma de
pensar sobre el diseño en general,
Se puede concluir estableciendo que el Diseño Web Responsivo es una filosofía, un
nuevo enfoque, cuyo objetivo es solucionar los problemas ocasionados por la diversidad
de resoluciones y dispositivos. A diferencia de otras metodologías de diseño que
pretenden resolver la misma problemática, RWD busca ser una solución única, es decir,
no tener que desarrollar un sitio web para cada resolución de pantalla, tipo de dispositivo
e inclusive orientación del mismo. Este enfoque tiene como objetivo central ocasionar en
el cliente una buena experiencia de usuario, considerando sus nuevas prácticas en la red,
y su manera de navegar por medio de distintos aparatos.
1.2 ¿Cómo funciona?
Una vez definido el concepto de Diseño Web Responsivo, se profundizará en cómo
funciona esta forma de diseñar y desarrollar sitios multidispositivo.
Como ya se mencionó, su función principal consiste en cambiar la apariencia de un
diseño. El sitio web necesita modificarse ya sea colapsando, adaptando e incluso
ocultando contenido para que se pueda visualizar en cualquier tamaño de pantalla, para
poder lograr esto se utiliza el mismo lenguaje de programación que cualquier otro tipo de
desarrollo web, se refiere a los lenguajes básicos como lo son HTML5 y CSS3. Aunque
cabe mencionar que la clave radica en las hojas de estilo, es aquí donde se logran alterar
los aspectos técnicos para su adecuada adaptación. Las hojas de estilo sirven para darle
presentación a cada elemento que se tiene en las páginas web y de esta manera
modificar la apariencia tanto de su estructura como del contenido.
Con anterioridad se solían realizar dos web en paralelo, una para la computadora y otra
para los dispositivos móviles. En un principio parecía ser una solución eficaz a los
primeros problemas que surgieron con la aparición de la red móvil, pero posteriormente
se percataba que requería más esfuerzos y recursos para poder ejecutarla. En cambio,
21
Marcotte (2011) menciona que RWD se basa en la construcción de un solo sitio como
solución única a todas las variables de aparatos, de esta manera no es necesario
redirección el trafico proveniente de los móviles a otro directorio y propone hacer un
desarrollo basado en prácticas de flexibilidad, fluidez.
En seguida se mencionara conceptos básicos para poder comprender el funcionamiento
un sitio web responsivo para posteriormente, en el capítulo 3, poder describir y desarrollar
cada uno de estos detalladamente.
En su libro, Marcotte (2011) explica que la implementación de RWD tiene tres principios
básicos. El primero se trata de crear un diseño web fluido, se basa en la creación de
layouts definidos en porcentajes que se ajustan a los anchos de la pantalla. Desde la
aparición de la web se acostumbraba a tener valores absolutos expresados en pixels, se
utilizaban las mismas premisas y reglas que se ejecutan en los medios impresos, pero
como describe Allsopp ha llegado la hora de evolucionar y entender que los medios
digitales exigen sus propias principios a la hora de diseñar.
El diseño fluido consiste en ajustar el tamaño de su dimensión horizontal de manera
automática, tiende a ocupar todo el ancho de la pantalla sin importar cuál sea el
dispositivo donde sea visualizada, para poder lograrlo todos los elementos tienen
distintos valores expresados en porcentajes que al sumarlos logren ocupar el 100% de
tamaño horizontal del monitor de esta manera se garantiza que sus proporciones se
mantengan iguales.
Después habla sobre un segundo concepto que se refiere a los contenidos que van
dentro de los layouts, estos pueden ser fuentes, imágenes y elementos multimedia.
Para poder posicionar estos elementos se sugiere mantener el concepto del diseño fluido,
es decir, utilizar valores relativos tanto para sus dimensiones como su posicionamiento.
En el caso de las imágenes se propone manejar sus medidas en porcentajes, mientras
que en las tipografías en una unidad de medida llamada em, el nombre de em está
relacionado con la letra M originalmente, la unidad se deriva de la anchura de su letra
22
mayúscula en el tipo de letra dado. Ésta medida se caracteriza porque su valor está en
relación al tamaño de su contexto.
Y por último menciona a los Media Queries que ofrece CSS3 permitiéndo aplicar estilos
condicionalmente teniendo en cuenta parámetros de la pantalla. La implementación de
este recurso está orientado a configurar el alto, ancho y resolución dependiendo de las
características del dispositivo desde donde se consulte el sitio.
1.3 ¿Por qué se usa?
Con la llegada de los Smartphones cambio el modo de comunicarse y navegar por
internet, esto suponía un reto importante ya que cambiaban los paradigmas acerca del
uso de la red a través de una computadora. A partir de este hecho surge un crecimiento
exponencial del uso de estos dispositivos y fue tomando cada vez más importancia el
pensar en comunicar a través de este medio. De acuerdo con Kemp (2015) en el informe
Digital, Social & Mobile Worldwide in 2015 el año 2014 fue un año clave para el
crecimiento del mercado digital. Según su estudio revela que actualmente el 42% de la
población mundial tiene acceso a internet, la red móvil logró superar el 50% de los
usuarios activos en el mundo representado en 3.649 millones de aparatos, desplazando
al mercado de las computadoras de escritorio. Sus estadísticas revelan que inclusive a
finales del año 2014 el número de usuarios con conexiones móviles activos supero la
población total del mundo. Además, se vendieron 1.245 millones de Smartphones en el
mundo, estimando que para el año 2020 estos serán los responsables del 80% del tráfico
en la red.
De similar manera, el artículo Revolución Móvil: los usuarios y el negocio viven en los
Smartphones publicado por el diario La Nación, afirma que actualmente el acceso a la red
a través de dispositivos móviles en Argentina ha incremento debido a que el 84% de los
celulares son Smartphones. Actualmente en el país siguen siendo más los usuarios que
23
acceden a la red a través de una computadora pero se estima que a finales del año 2016
esto cambie y el mercado mobile sea el que domine el tráfico en internet.
Como las estadísticas lo avalan el mercado ahora se encuentra en la red móvil debido a
su drástico crecimiento siendo éste el que hoy en día, tiene más tráfico y numero
usuarios, ahora las empresas buscan impactar en él, ya que pretenden llegar a la
mayoría de sus consumidores. En pleno año 2015, sería desacertado pensar en tener un
sitio web que no sea adaptable a dispositivos móviles. Y aún más ahora que Google está
evitando mostrar los sitios web que no cuenten con un diseño adaptativo, con esta
actualización del algoritmo, resulta una exigencia para poder posicionar un sitio en el
buscador que a la vez impulsará el desarrollo para múltiples pantallas. Inclusive su no se
adoptan las medidas requeridas se podría correr el riesgo de desaparecer de las
primeras posiciones del buscador Google. Con esto se busca garantizar la experiencia,
usabilidad y navegabilidad.
El Diseño Web Responsivo se usa por éstas dos principales razones, los usuarios están
invadiendo la red móvil y se pretende llegar a ellos, una vez que se llega a ellos se
procura mantenerse y perdurar. Como se mencionó anteriormente RWD es una nueva
forma de pensar el diseño que busca principalmente la adaptación, y en ese proceso se
debe entender al público actual como un nuevo usuario que con el uso de gadgets se
convirtió en un nuevo estilo de vida, transformando su comportamiento y su necesidad de
mantenerse siempre comunicado. Por lo tanto, está técnica de diseño se crea para
brindar una buena experiencia de usuario proporcionando todas las herramientas
necesarias para que se pueda navegar cómodamente, adaptándose no solo al
dispositivo, sino principalmente al usuario moderno, contemplando que sus hábitos han
cambiado, que éste ahora busca el fácil y rápido acceso a la información.
24
1.5 Ventajas.
El Diseño Web Responsivo aporta distintas ventajas a la hora de implementarse. Sin
embargo, estas ventajas pueden apreciarse desde distintos roles o perspectivas dentro
del desarrollo web.
La primera de las ventajas, a nivel empresarial, es la reducción de costos en el desarrollo,
ya que el objetivo es único y claro con una sola implementación válida tanto para
dispositivos de escritorio como para móviles. La creación de webs específicas para
dispositivos aumenta el costo de desarrollo. Sin embargo, un solo desarrollo de un portal
web accesible desde cualquier dispositivo es bastante más barato.Por ejemplo, como no
es necesario alojar distintas versiones de la web no es necesario ser propietario de
distintos dominios o el coste adicional de desarrollar una aplicación móvil.
Otra ventaja que aporta es la gran eficiencia a la hora de realizar los procesos de
mantenimiento y actualización del contenido, ya que con un solo cambio se podrá ver
reflejado en todos los dispositivos. Sin embargo, si se poseen distintos desarrollos para
cada plataforma se deberá realizar este proceso pudiendo provocar posibilidades de error
e inconsistencia además de un consumo mayor de recursos. Si desea realizar un cambio
en la identidad corporativa del negocio y desear cambiar el color principal de la página
web, con RWD solo sería suficiente con modificar CSS, mientras que con distintas
versiones se deberían modificar todas las hojas de estilos todas las webs o aplicación
móvil.
Lo que todos los estudios reflejan es la mejora de la usabilidad, ya que la navegación por
parte del usuario es mucho más cómoda, adaptándose la web al medio correspondiente
facilitando la navegación. Además a nivel de consumo por parte del cliente provoca un
gran impacto ya que se suele asociar el desarrollo con grandes niveles de creatividad e
innovación tecnológica.
Otras de las ventajas, dejando aparte la usabilidad y la interacción, se trata del
posicionamiento web. Este tipo de desarrollos ayudan al posicionamiento de la web en
25
los rankings de buscadores debido a sus características. Una de ellas se trata de poseer
una única Uniform Resource Locator (URL), ya que cuando se fragmentaron los
desarrollos para diversos dispositivos se emplearon distintos dominios o subdominios
para la versión correspondiente, no estando los desarrollos alineados a nivel de SEO.
Ahora se puede emplear una URL para todos los soportes que aporten la centralización
de todo el tráfico para poder manejarlo de manera eficiente, creando informes reales del
tráfico producido obteniendo una visión completa de todo el tráfico y acumulando todos
los enlaces o pageranks. Además todas las acciones que sean necesarias que desee
tomar el SEO para posicionar la web serán mucho más productivas si las desarrolla sobre
una sola web que si se tiene que hacer con varios.
Además otro ejemplo, es que antes cuando un usuario accedía a una web a través de un
dispositivo móvil y compartía una URL esta llegaba a una serie de usuarios que no
obligatoriamente deben de estar en un medio móvil. Para solucionar este problema era
necesario crear redirecciones que dirijan a los clientes hacia el sitio web
adecuado respecto del dispositivo conectado para no perder la experiencia de usuario.
Ya que con RWD todos los dispositivos acceden a una misma dirección, ya no son
necesarias las redirecciones. Además el acceso a la web desde un Smartphone permite
como desarrolladores web sacar beneficio de las tecnologías móviles explotando
funcionalidades como la geo localización y los eventos táctiles.
1.6 Desventajas.
Como todas las tecnologías el Diseño Web Responsivo también tiene sus falencias que
se deben tener en cuenta a la hora de implementar esta filosofía.
Uno de los problemas que puede repercutir en RWD son los tiempos de carga, ya que el
usuario debe descargar todo el código fuente, aún sin ser necesario, e incluso si el diseño
no está optimizado con imágenes adaptadas a distintas resoluciones, debe descargar
imágenes de gran resolución sin ser necesario, sino simplemente reescala pero mantiene
26
el mismo peso que tenía lo que hace que el tiempo de carga aumente en gran medida.
En un dispositivo móvil la espera en los tiempos de carga se ve afectada en la
experiencia del usuario en el sitio web. De un lado factores como el tipo de conexión en el
que se encuentra el usuario en el momento, si es 3G o Wifi, y de otro la optimización del
contenido del sitio afecta al peso y tiempo de carga.
Aunque se han comentado las ventajas SEO, también presenta desventajas, ya que las
descripciones en títulos, imágenes y contenidos son comunes tanto para usuarios de
dispositivos móviles como no, siendo distinto el objetivo de las palabras claves en
búsquedas móviles como búsquedas desde computadoras de escritorio.
Aunque aporta ventajas para el desarrollador web, también éste debe de emplear más
tiempo en optimizar el diseño para las distintas resoluciones respecto de un
desarrollo web no responsivo, el tiempo de desarrollo es mayor que con otros modos, ya
que no lleva mucho tiempo y, aunque la tendencia se está instaurando muy rápidamente,
no está estandarizado al 100%, como barrera de entrada aún no hay muchos expertos
que dominen este desarrollo completamente.
Actualmente otra desventaja que se podría presentar son los costos, hay menos
empresas especializadas y por ello son más caras, los costos de actualización y de
mantenimiento también son mayores, de similar manera los tiempos para la creación del
sitio puede alargarse más de lo esperado. Se podría llegar a pensar en un plan b si no se
dispone de recursos económicos ni temporales para contar con una web adaptada al
dispositivo móvil.
27
Capítulo 2. Partiendo del Concepto Básico: Flexible Layouts.
En el presente capitulo se pretende explicar el funcionamiento de los layouts, el primer
concepto fundamental que establece Marcotte y los cuales son la base estructural del
RWD, se reconocerán los tipos de layouts existentes así como la implementación y
funcionamiento de los mismos, para finalizar el capítulo se investigara es uso de
frameworks como un recurso usado contantemente para poder desarrollar sitios web
responsivos.
Los layouts suelen utilizarse para nombrar al esquema de distribución de los elementos
dentro un diseño. Es habitual que un diseñador que se dedica a la creación de páginas
web desarrolle un layout, wireframing o prototypado que no es más que una especie de
croquis que muestra tablas o espacios en blanco, con la finalidad que a partir de éste la
página web comience a desarrollarse con sus contenidos específicos. Si se traslada este
concepto a términos de arquitectura, como ejemplificaba Marcotte, el layout sería el plano
de una casa donde se marcan todos y cada uno de sus espacios. Y de acuerdo a su
ideología de ver al diseño responsivo como una nueva forma de pensar el diseño se llega
a la necesidad de crear estructuras que puedan flexibles y tengan la capacidad de
adaptación.
De similar manera Allsop (2000) reconoció que la flexibilidad es lo que convierte a la web
en un medio único y de mayor potencia que los medios impresos. Anteriormente los
layouts en la web eran fijos, no se modificaban en sus dimensiones, tamaño y estructura,
sus medidas eran concretas. Es decir, se seguía pensando la web de la misma forma en
que se diseña una revista, solo diferenciándose que una era en un medio digital y sus
medidas eran expresadas en pixels, pero de igual manera se concebía a la web como un
soporte fijo, inclusive se estandarizaron medidas fijas que funcionaban como un lienzo
que no podía variar y era visible en todas las pantallas, tomando en cuenta que antes
solo se diseñaba para computadoras cuyos monitores tenían medidas muy similares.
Tuvieron que pasar doce años para que la industria finalmente tomara las ideas
28
propuestas por Allsopp y se comenzara a pensar en crear ideologías y fundamentos
propios para el diseño digital.
Actualmente el primer paso, si se busca lograr un diseño web responsivo, es dejar atrás
la idea de tener layouts fijos, y crear estructuras flexibles que responder a las
dimensiones del dispositivo.
Mickley (2009) en el libro Flexible Web Design define cuatro tipos de layouts: de ancho
fijo, liquido, elástico, e híbridos, siendo éste último la combinación entre cualquiera de los
anteriores.
2.1.1 Layout Fijo.
Éste es el que se ha venido usando por mucho tiempo en el diseño web, ya que
anteriormente los sitios eran visitados en su mayoría desde una computadora de
escritorio cuyos monitores tenían resoluciones relativamente parecidas, tales como 800
por 600 o 1024 por 768.
En un artículo titulado Optimal width for 1024px resolution? Escrito por Moll (2006)
sostiene que el salto de resoluciones de pantalla de 800 x 600 pixeles a 1024 x n se
había concretado en aquellos años. Por lo cual propone estandarizar los anchos de las
páginas web a esta resolución de pantalla, en un principio se hablaba de 974px como el
ancho ideal, posteriormente 984px hasta que se logró homogenizar en 960px que no era
un numero casual sino que era muy amigable al ser un numero divisible entre por 3, 4, 5,
6, 8, 10, 12 y 15 por lo que ofrecía una variedad de opciones de medición.
Una de las principales virtudes de trabajar con este tipo de layouts es que el diseñador
tiene más control sobre cada uno de los elementos, al tener una medida exacta como lo
son esos 960px que permiten delimitan la zona de diseño, se puede hacer la demás
composición con cálculos matemáticos para lograr dimensiones absolutas de todos los
elementos que van a conformar el sitio web. De esta manera se puede reproducir un
29
maquetado exacto a como se planea en un principio en la propuesta visual, logrando así
diseños que son más consistentes.
Si bien resulta una buena manera para producir sitios web que gráficamente pueden ser
muy firmes debido a la exactitud de sus medidas, maneja el mismo concepto que la forma
de pensar en diseñar para medios impresos, son fijos. En este caso se está limitando la
flexibilidad del diseño, marcando el lienzo sobre el que se va a trabajar por lo que origina
muchas limitantes que, hoy en día, proporcionarían una mala experiencia para el usuario
a causa de su nula capacidad de adaptación.
La mayor desventaja que presentan los layouts fijos son que el diseñador toma
decisiones con base va a varias suposiciones, principalmente sobre la dimensión de
pantalla de los visitantes. Antes podría ser un problema menor, ya que eran menos los
usuarios que tenían resoluciones de pantalla menores o mayores a la medida estándar.
Sin embargo ahora podría resultar una dificultad debido a la aparición de los dispositivos
móviles, por lo que tomar esa importante decisión implicaría limitar mucho el alcance del
sitio web.
Por ejemplo, considerando que el sitio está hecho con un contenedor de 960px, si uno
de los usuarios accedía a la página a través de un dispositivo con una resolución de
pantalla menor a 800px, éste solo podría visualizar una parte del sitio web y el navegador
colocaría unas barras de navegación horizontales y/o verticales que por lo generan poca
comodidad al momento de navegar. Por otra parte, si se ingresaba a la página desde
pantallas más grandes, también presentaba problemas. Si alguien con un gran monitor
viera el mismo sitio generaría un espacio en blanco alrededor del contenedor del diseño,
restando mucho espacio de trabajo desperdiciado y también visualmente no era bueno
como parte de un diseño
Estos obstáculos se presentaban considerando que el usarlo mantenía maximizada la
ventana de su navegador, ahora el pensar en que una persona podría tener el control del
tamaño de su ventana generaba más restricciones presentadas por este tipo de layout.
30
Actualmente la mayoría de los sitios que carecen de responsividad emplean este tipo de
layout que de acuerdo al dispositivo, como tablets y celulares, son ampliados o reducidos
en sus dimensiones con la finalidad de que quepan en la pantalla. Esto genera que todos
los elementos que se encuentran en él se modifiquen, presentando una problemática
cuando el texto es reducido de manera importante, siendo poco legible y el usuario se ve
obligado a hacer zoom y navegar de manera incomoda.
El tamaño del texto también puede variar dependiendo de la elección de los usuarios. El
tamaño de la tipografía que viene por default en casi todos los navegadores es de 16px.
Sin embargo, aunque en menor medida, el usuario es capaz de alterar este valor
generando un cambio importante en el diseño del sitio web. Aparte de modificar la
legibilidad del texto de acuerdo a su longitud de línea, ya que podría haber líneas de texto
muy largas o cortas que no favorezcan a la velocidad de lectura.
Los layouts fijos son buenos y de gran utilidad en ciertas situaciones, donde se necesita
una reproducción más exacta, precisa y constante de un diseño web. No se consideran
obsoletos, mucho menos cuando todavía muchos diseñadores los emplean, pero se les
tiene que dar utilidad solamente en los momentos adecuados. La principal desventaja
que presenta es que, como un nombre lo indica, se trata de un layout fijo, que de acuerdo
con el presente PG es algo que se busca superar para darle entrada a diseño flexibles y
dinámicos, que puedan abastecer las exigencias por el actual mercado digital.
2.1.2 Layout Fluido.
Este tipo de layout, a diferencia del anterior, utiliza medidas relativas. En estos sus
dimensiones están determinadas por porcentajes y no por pixels. De esta manera se
asegura que el diseño pueda ocupar el 100% del ancho de la pantalla, es decir, no
importa si el usuario está entrando al sitio desde una computadora de escritorio de
1024px o de un dispositivo móvil de 768px, los porcentajes harán que se ajusten al ancho
de la pantalla sea pequeña o grande.
31
Con este tipo de diseño fluido en muchas ocasiones se evitan las barras de
desplazamiento horizontal de la venta, dado que éste puede adaptarse a la anchura de la
ventana del navegador, de esta manera se evita que el público solo vea una parte del
sitio web o bien se elimina el espacio en blanco mostrado en un layout fijo en pantallas de
gran dimensión.
Sin embargo, aunque este tipo de diseño garantiza una estructura flexible que no pierde
proporciones y que puede ser visualizada en cualquier dispositivo sin importar su medida,
tiene un gran desventaja que son las longitudes de línea de texto. Las líneas de texto
pueden llegar a ser demasiado grandes si se está visualizado desde pantallas muy
amplias o bien demasiado cortos si lo vemos desde un celular. Como bien se mencionó
en el subtema anterior, la longitud de línea de texto es un elemento importante a tener en
cuanta ya que se debe garantizar que el visitante de la página web pueda leer la
información que se le esta proporcionado de manera cómoda.
Asimismo, otra debilidad que presenta se refiere a los tamaños de las imágenes,
generalmente sus mediadas están expresadas en pixels, que es una medida absoluta, Si
bien la estructura es flexible, su contenido no. Por lo que si una imagen es pequeña
cuando se vea en una pantalla grande dejara mucho espacio en blanco, en caso contrario
si la imagen es muy grande y se ve en un dispositivo de resolución pequeña, por más que
la estructura se acomode la imagen sobrepasa las dimensiones de la pantalla generando
las barras de desplazamiento. A causa de esta problemática se comenzó a poner las
imágenes como imágenes de fondo de un div o cuadro del layout, esta flexibilidad evita
que las barras de desplazamiento horizontal de aparecer y hace pleno uso del espacio de
la pantalla disponible en el dispositivo de cada usuario, sin embargo según la W3C no es
la forma correcta de colocar imágenes ya que están indexadas en el código CSS y no el
HTML, por lo tanto debilita la optimización del sitio y la posibilidad de que esta sea
indexado en los buscadores.
32
Los layouts líquidos funcionan en un rango más amplio de escenarios de visión,
Implementando estrategias RWD y apoyándose en media queries y CSS se puede
optimizar la visión para diferentes resoluciones, haciendo que este tipo de layouts sea
una buena estrategia. Sin embargo, también existen varios problemas que se deben
solucionar ya que todo esto no es suficiente para asegurar que el diseño se vea
adecuadamente tanto en un teléfono como en una televisión respetando las preferencias
de los usuarios de cómo les gusta ver la web.
2.1.3 Layout Elástico.
Como lo menciona Mickley (2009) los layouts elásticos funcionan de la misma manera
que los layouts fluidos, excepto que sus medidas están determinadas por el tamaño
tipográfico usando la medición em. Por ejemplo si el texto tiene un tamaño de fuente de
16px, un em correspondería con 16 pixels calculando los tamaños proporcionalmente.
Con este tipo de layouts se garantiza que la anchura del contenedor siempre mantenga la
longitud de línea apropiada, se erradican los problemas que presentaban los dos
anteriores. Y de esta manera las proporciones entre tipografía y tamaño del layout no se
pierden escalándose de manera proporcional en cualquier dispositivo.
Desafortunadamente, en éste tampoco se tiene el control total sobre las medidas ya que
al tomar medidas según la tipografía, ésta puede ser alterada por el usuario desde la
configuración del navegador, provocando un aumento o reducción importante en sus
dimensiones, de esta manera se puede presentar los mismo problemas de la barra
horizontal o espacios en blanco.
De similar manera que los líquidos, éstos varían sus mediciones en cuanto a estructura, y
en este caso tipografía, pero no en el de las imágenes, provocando que el diseño se
altere.
El gran benéfico que aporta es la capacidad de mantener proporciones intactas entre
estructura y tamaño tipográfico. Diseñar esquemas que permanecen proporcionales
33
pueden ayudar a una amplia variedad de personas y que estas pueden leer la
información de manera cómoda.
2.1.4 Layout Hibrido.
Por último está el hibrido el cual combina dos o más de los layouts anteriores. A
diferencia de que éste tiene la capacidad de mezclar tanto medidas relativas como
absolutas, es decir se pueden mezclar pixels con porcentajes o em.
La mayoría de los diseños web se construyen con la idea de columnas, si las columnas
son explícitamente visibles en el diseño. Cada columna puede tener su propia unidad de
medida y ser pensado en forma individual como fijo, líquido o elástico
Esta técnica se emplea generalmente cuando se necesita dar medidas fijas a alguna
columna que tenga elementos con medidas absolutas, por ejemplo cuando se quiere
insertar un anuncio en un sitio web cuyas medidas están estandarizadas y se deben
respetar.
Los diseños híbridos ofrecen más ventajas que los diseños de líquidos y elásticos. Pero
son a veces difíciles de construir debido a las matemáticas involucradas.
Debido a la mezcla de porcentajes con pixels surgen dos conceptos de CSS nuevos que
ayudan a manejar de mejor manera las dimensiones de los elementos; max-whidth y min-
whidth, estos permiten establecer límites en las medias, comúnmente se utilizar anchos
expresados en porcentajes pero están delimitados por la cantidad de pixels, por ejemplo,
para que una imagen no vaya a redimensionarse más de su tamaño original.
Una vez indagado sobre cada uno de los tipos de layouts que puede presentar una web,
se puede llegar a concluir que cada método tiene sus propias ventajas y limitaciones. En
el caso de diseñar un sitio web responsivo, ninguno de estos es el único e idóneo para
hacerlo. Aunque lo más probable es que se pueda de servir de recursos propuestos tanto
por el líquido, elástico e hibrido ya que se busca que la web sea flexible y no fija sin
capacidad de adaptación
34
2.2 Implementación de Layouts.
Estos tipos de layouts ya mencionados pueden tener distintas técnicas de
implementación. En un RWD éstas se refieren al comportamiento de su estructura
dependiendo de las variables en tamaños de pantalla.
Las técnicas a continuación mostradas fueron diseñadas por Wroblenski (2013) en un
artículo titulado Multi-Device Layout Patterns que publicó en su portal web. Éstas fueron
realizadas y categorizadas debido a una investigación que hace el autor acerca de los
patrones que se presentan con mayor frecuencia que se utilizan hoy en día en los sitios
web responsivos.
2.1.1 Mostly Fluid.
Dentro de todas las técnicas ésta se considera como el patrón predominante entre los
sitios web responsivos. Se emplea comúnmente en los frameworks, que son una
herramienta útil para desarrollar estructuras web y los cuales se detallaran más adelante.
Este patrón se basa en la cantidad de columnas que presenta de acuerdo al dispositivo,
generalmente en dimensiones pequeñas como la de un Smartphone se encuentran todas
las columnas, una por arriba de la otra, ocupando todo el ancho de la pantalla; y entre
más se agrande la dimensión del dispositivo estas se acomodan una del lado de la otra
tanto como el ancho del navegador lo permita. (Ver figura 1).
Cuando las pantallas son grandes o medianas, comúnmente se le suele agregar un
wrapper que es una especie de contenedor que define el ancho máximo de la estructura
del sitio web, esto se hace con la finalidad de tener más el control sobre los elementos,
por ejemplo para que las imágenes no accedan las dimensiones de su tamaño original.
Ésta consideración se toma de los típicos layouts fijos que muestran el contenido
centrado y delimita el espacio del diseño dejando espacios en blanco a los costados. De
acuerdo con esto se origina el nombre de mayormente fluido, ya que la estructura
principal de los layouts no cambia hasta que se llega a resoluciones pequeñas donde se
35
vuelve totalmente fluida y aplica la caída de columna, colocándose una debajo de la otra
y modificando su altura dependiendo de su contenido, es decir, entre más angosto sea la
dimensión de la pantalla el contenido se ira acomodando de manera vertical y su altura
será mayor.
Una de las mayores ventajas de este patrón es que, en general, solo se necesita un
punto de interrupción entre las pantallas grandes y las pequeñas. Se puede observar que
en cada salto de dimensión entre móvil, tablet y escritorio puede haber pequeños
cambios, ya sea de navegación, organización o quizás de contenido.
2.1.2 Column Drop.
En español el nombre de esta técnica es Ciada de Columna, el cual se nombró en el
tema anterior. Ésta se refiere también a un patrón multicolumna que funciona de similar
manera que el Mostly Fluid, donde las columnas también caen una debajo de la otra
hasta llegar a convertirse en una sola columna, pero a diferencia que las columnas no
son tan flexibles debido a que el tamaño de los elementos suele permanecer constante.
Es decir, tal vez una columna puede ser fluida mientras que otros permanece con
dimensiones fijas, se asemeja a lo que se conoció en temas anteriores como un layout
hibrido. (Ver figura 2).
Se puede notar esta diferencia en como las columnas se agrandan o no dependiendo de
los puntos de quiebre o breakpoints, tema que se verá con más detalle en el próximo
capítulo. Esta caída de columnas está determinada por el número de columnas y el
momento en el que el diseño pida espacio para una buena usabilidad.
36
2.1.3 Layout Shifter.
También conocido como Cambio de Layout a causa de que presenta más variaciones en
cuanto al diseño de su estructura dando la impresión de un cambio de layout de acuerdo
al dispositivo (Ver figura 3).
Aunque se adapta de manera adecuada a los distintos tamaños de pantallas puede llegar
a ser más complejo, por tal motivo es menos usado que los anteriores. Para desarrollar
este patrón se requiere de más tiempo y trabajo para ajustar todos los elementos a cada
una de las resoluciones y puntos de quiebre.
Debido a que está determinado principalmente por los breakpoints es menos fluido que
los anteriores, se pueden llegar a ver variaciones notorias entre un tamaño de pantalla y
otra, cambiando de manera importante jerarquías y posición de las columnas. Por
ejemplo una columna horizontal que en gran resolución ocupa todo el ancho de la
pantalla, puede variar de manera drástica en una pantalla menor colocándose de manera
vertical, como lo muestra el gráfico anterior.
A causa de sus considerables variaciones es más complejo de mantener los elementos
que se encuentran dentro de una columna intacta, y es posible que se deban realizar
cambios dentro de ellos, no solo en el diseño, sino de contenido general. Comúnmente
este tipo de layouts se jerarquiza la importancia del contenido y suele omitirse contenido
menos relevante en los dispositivos pequeños.
Se puede establecer que este patrón maneja dos técnicas explicadas en los temas
anteriores, en algunos casos el layout funciona como una caída de columnas mientras
que en otros se mantiene la organización pero fluyendo el contenido proporcionalmente.
2.1.4 Tiny Tweaks.
Éste patrón permite realizar pequeños cambios en el diseño. Los cambios en su
estructura son prácticamente nulos sino se concentra en las modificaciones de los
37
elementos que conforman el sitio web. Puede llegar ajustar el tamaño de la fuente, de las
imágenes o desplazar el contenido de diferentes maneras. (Ver figura 4).
Por lo general este layout tiene una estructura simple que cuenta con dos únicas
columnas, una para el menú y otra para el contenido. Para un correcto funcionamiento es
ideal que éstos tengan menús ideales para landing pages o que funcionen para celulares
así como para pantallas grandes, su contenido debería de ser con pocos elementos que
sean capaces de reacomodarse o varias sus tamaños.
Como se observa en el grafico anterior no presenta cambios importantes debido a que
solo se muestran las columnas o wireframe mas no su contenido, que en realidad es
donde se presentan las variaciones.
Para entender mejor el funcionamiento de este patrón se muestra la siguiente imagen
(ver figura 5) donde se puede apreciar que la estructura no presenta variaciones pero si
sus elementos que se encuentran dentro de ella. Se puede observar que las imágenes se
reducen en dimensión a medida que reduce la pantalla, de igual manera que los textos.
Es importante en esta técnica considerar elementos de diseño que hagan que los
elementos no se vean desproporcionados o que alguno de ellos tome más relevancia que
otro cuando cambia de dimensión y no es una decisión pesada por el diseñador. De igual
manera es importante considerar elementos claves como márgenes, paddigns y espacios
entre líneas de texto.
2.1.5 Off Canvas.
Por ultimo esta la técnica Off Canvas expuesta por Wroblenski (2013) la cual se asemeja
al diseño que presentan las apps para móviles. Funciona como si fuese un lienzo grande
donde se tiene toda la estructura del sitio web y la pantalla funciona como el espacio
visible de alguna parte de este creando así una navegación cómoda para el usuario. (Ver
figura 6).
38
Como se puede observar en el gráfico, en tamaños grandes puede poseer distinto
diseño, pero al llegar a dimensiones pequeñas, se sacan del lienzo y se superponen en la
parte visible a través de alguna interacción del usuario. Para ello debe de ayudar de
JavaScript.
Este layout se centra en resoluciones pequeñas con la finalidad de aprovechar el espacio
disponible y no tomar el tamaño de la pantalla como un obstáculo y expandirse más allá
de sus límites. Por lo general una capa que se oculta, en la mayoría de los casos es la
columna de navegación, ya que en términos de usabilidad, está siempre debería de estar
disponible en la pantalla, y como sucedía en las técnicas anteriores el menú podía
desaparecer si se iban acumulándose las columnas.
En muchas aplicaciones web, es común emplear un espacio a un lado de la pantalla,
donde se ocultan opciones de navegación hasta que se interactúa con un elemento que
hace que el contenido de la pantalla se deslice y se superponga esta capa. Un ejemplo
común es la app móvil HTML5 de Facebook.
Además se puede aprovechar no solo para tamaño Smartphones sino también para
aplicaciones web cuando la dimensión de la pantalla es de una tablet. Este patrón aporta
originalidad, ahorro de espacio y sobre todo innovación.
2.3 Frameworks.
De acuerdo con Karlsson (2014) un framework para front-end es un conjunto de
conceptos y herramientas que facilita el trabajo de diseñar una web proporcionando una
base o esqueleto para la creación nuevos diseños. En RWD ésta estructura proporciona
la posibilidad adaptarlo a distintas resoluciones y tamaños de pantalla a través de
sistemas de grids, layouts u otros mecanismos.
La mayoría de los desarrollos web comparten una estructura simular, por lo tanto el
objetivo de estos frameworks es proporcionar una estructura común para desarrolladores
39
web, y de esta manera agilizar el proceso de maquetado aportando la reutilización de
elementos básicos y repetibles.
Éstos suelen consistir en una estructura de archivos y directorios de código estándar
divididos en elementos HTML, CSS y JavaScript. En general la mayoría de estos
frameworks comparten características como proporcionar un código CSS para diseñar
cualquiera de los layouts mencionados en el capítulo anterior, lo que se conocen como
grids o cuadriculas, suelen contener definiciones de tipografía, soluciones para el
problema de las incompatibilidades de los distintos navegadores como reset css, y
componentes avanzados de interfaces de usuario.
2.3.1 Ventajas y Desventajas de su aplicación.
El empleo de un framework posee una serie de ventajas para el desarrollador web, pero
también inconvenientes como lo menciona un artículo publicado por el blog online 4R
Soluciones.
A continuación se detallaran las principales ventajas e inconvenientes de emplear este
tipo de herramientas a la hora de diseñar páginas web responsivas.
La principal ventaja del uso de estas herramientas es la rapidez que aportan debido a que
no es necesario implementar todo de una manera manual y desde cero, este tipo de
frameworks aporta ciertas funcionalidades ya implementadas proporcionando agilidad
sobre todo a la hora de maquetar los diseños. Además esta agilidad será bien recibida
por los clientes que siempre exigen el tiempo como mayor valor.
El apoyo de la comunidad web con ciertos de estos frameworks provoca que los
desarrolladores compartan conocimiento y buenas prácticas sobre estos, además estas
herramientas se han ido perfeccionando de tal manera que aportan un código limpio y
ordenado. Contribuyen a la hora de decidir factores como los saltos necesarios de media
queries para cada dispositivo e incluso algunas herramientas proporcionan soluciones a
los problemas comunes en CSS y de compatibilidad de navegadores.
40
En contraposición a las ventajas de emplear un framework, se detallan las desventajas
que pueden presentarse al no emplear ninguno de ellos y trabajar de manera manual.
Al trabajar con un framework se pierde en libertad, ya que está limitando a ajustar el
diseño a un grid preestablecido y a los requerimientos de la herramienta. Sin embargo,
creando un diseño de forma manual o artesanal, se genera un código flexible y siempre
bajo control aunque haya que invertir mayor tiempo en su desarrollo. Además el empleo
de un framework requiere de tiempo de aprendizaje para poder manejarlo.
2.3.3 Ejemplos de Frameworks.
En seguida se recopilarán una colección de frameworks para la creación de diseños web
responsivos. Si bien el más usado actualmente por la comunidad web es Bootstrap 3,
existen otras opciones que pueden funcionar como una buena opción para la creación de
layouts.
Bootstrap 3, como ya se mencionó, es uno de los más populares del mercado, habiendo
sido desarrollado por el equipo de Twitter. Bootstrap ha sido creado pensando en ofrecer
la mejor experiencia de usuario tanto para móvil como para desktop, utilizando una grilla
responsiva de 12 columnas y trae integrado algunos complementos, plugins de
JavaScript, formulario, sliders, entre otros.
La principal cualidad que presenta este framework es que maneja el concepto creado por
Luke Wroblewski de Mobile First, que a diferencia de otro genera una mejor experiencia
de usuario para los usuarios de dispositivos móviles.
Por otro lado Foundation en su web se dice ser el framework más avanzado para front-
end. Éste ha sido desarrollado con SASS, un potente preprocesador de CSS que hace de
Foundation un framework fácilmente personalizable que se sirve de las nuevas
tecnologías y funciona con IE8+. Posiblemente sea uno de los frameworks más
avanzados que existen en la actualidad.
41
De similar manera existe Gumby que es un framework responsivo con un grid de 960px.
Gumby permite descargar la grilla con una opción de 12 columnas, de 16 columnas o
bien la opción hibrida 12/16. Al igual que Bootstrap 3 lleva integrado estilos y plugins para
ahorrar trabajo de desarrollo, como son formularios, botones, menús desplegables y
otros. Una de las principales ventajas que presenta esta herramienta es que también
incluye plantillas de Photoshop para editar los diseños de los websites.
Y por último se menciona a Aeon, que es un framework que viene codificado en HTML5 y
con un grid CSS3 de hasta 1104px. El JavaScript se carga en paralelo, lo que mejora el
tiempo de carga. Tal y como indican en su página web es fácil de usar y de entender. Es
un framework minimalista con sólo 120 líneas de código para su funcionamiento.
Existe gran variedad de herramientas que permiten la construcción de layouts flexibles,
actualmente es importante considerarlas que pueden ahorrar tiempo de trabajo y
desarrollo de un sitio web. Es importante analizar sus características y los servicios que
ofrecen para poder utilizar la adecuada de acuerdo a las pretensiones que se tienen del
sitio web.
En este capítulo se analizó el aspecto esencial y que hace que los sitios flexibles puedan
funcionar. Partiendo desde las descripciones de cada uno de los layouts existentes, las
diferentes maneras de implementarlos y las herramientas con las que se cuentan
actualmente para poder desarrollarlos. Una vez entendió la manera funciona las
estructuras flexibles, será más fácil poder comprender los aspectos técnicos y visuales,
que se detallaran en los capítulos siguientes, para la creación de un sitio web responsivo.
42
Capítulo 3. Aspectos Técnicos: Responsive para el Programador.
En el presente capitulo se busca introducirse en las técnicas de CSS3 Y HTML5 para
poder desarrollar sitios web responsivos. Mediante estas cuestiones técnicas se busca
crear estructuras flexibles que permitan lograr un buen RWD. Una vez analizado la
manera de implementar los distintos tipos de layouts ahora se busca llevarlos a la
práctica y explicar cómo se pueden desarrollar mediante el uso de div, media queries,
viewport, medidas relativas, fuentes flexibles, imágenes flexibles y la optimización de su
contenido.
3.1 Media Queries.
La nueva versión de CSS3 ha evolucionado el concepto de los media queries. Hasta
ahora éstos solo habían sido empleados para mostrar la presentación en dispositivos
como impresoras. Sin embargo, con esta nueva versión se emplea este concepto un
paso más allá para detectar el tipo de dispositivo conectado a la web, consiguiendo la
posibilidad de adaptarse al dispositivo concreto a través de distintos factores como
pueden ser ancho y alto de la ventana del navegador, ancho y alto del dispositivo, la
resolución del dispositivo o la orientación de la pantalla del dispositivo.
A la hora de utilizar los media queries se debe tener en cuenta el ancho de ventana del
navegador y no la resolución de pantalla del dispositivo. Por ejemplo si se define una
mediaquerie como la siguiente:
<link rel="stylesheet" media="screen and (min-device-width: 960px)" href="960.css” />
El atributo min-device-width tiene en cuenta la resolución del dispositivo a la hora de
ejecutar el CSS, esto quiere decir que si se reduce el ancho del navegador, seguirá
mostrándose de la misma manera ya que la resolución seguirá manteniéndose, por lo
que no se adaptará al nuevo ancho de ventana. Por lo tanto, lo más adecuado es
parametrizar estas acciones teniendo en cuenta el ancho de ventana del navegador y no
de la resolución del dispositivo. Por ejemplo tomemos la siguiente media querie:
43
@media screen and (min-width: 960px) { /* Código CSS*/ }
Ésta es una expresión condicional por el cual si se cumplen las condiciones que se
especifiquen se aplicará el código CSS que se encuentre en su interior. La primera
condición, en este ejemplo screen, indica el tipo de dispositivo que mostrará la salida, por
ejemplo, una impresora o una pantalla y el segundo parámetro indica el ancho de
ventana, para este ejemplo el ancho de pantalla ha de ser como mínimo 960 pixeles para
que se interprete el código.
Además se pueden incorporar varias condiciones, por ejemplo, especificar un máximo y
un mínimo para el ancho de pantalla, como lo muestra la siguiente línea de codigo;
@media screen and (min-width: 480px) and (max-width: 960px) { /* Código CSS*/ }
Éste indica que se ejecutará el código CSS que tenga un ancho de pantalla entre 480
pixeles y 960 pixeles ambos incluidos.
Además de las características para determinar las resoluciones y anchos de pantalla, se
puede determinar otros parámetros, como por ejemplo la orientación del dispositivo,
importante en dispositivos móviles:
@media screen and (orientation: landscape) { /* Código CSS*/ }
Una vez que se conoce como crear puntos de ruptura mediante los media queries, la
incógnita se basa en resolver como se deben de determinar los puntos o medidas
concretas en lo que se debe crear un punto de ruptura.
La forma convencional de determinar estos saltos ha sido teniendo en cuenta anchos
determinados de ciertos dispositivos, por ejemplo 320px que es el ancho del iPhone,
768px que es el ancho del iPad y 1024px soportado por la mayoría de los equipos de
escritorio. Confiar en unas medidas estándar para definir unos puntos de ruptura no es lo
más adecuado. Si se comienza a definir puntos de ruptura teniendo en cuenta
resoluciones de dispositivo para llegar a una medida común, se corre el riesgo de que el
mercado de dispositivos vaya desapareciendo o modificándose ya que está en constante
crecimiento, apareciendo nuevos dispositivos con diversas características en lo que a
44
tamaños de pantalla se refiere. Por lo tanto, la mejor aproximación es usar la propia
intuición ya que el mismo diseño exigirá cuando establecer el siguiente salto y
reorganización de los elementos.
3.2 Viewport.
El termino viewport se refiere a la zona visible de un navegador, es decir se limita por el
ancho del navegador. Sin embargo, todo cambia al mostrarse en un dispositivo móvil. A
pesar de este tipo de pantalla, los navegadores por defecto intentan mostrar el sitio
completo con el objetivo de proveer una experiencia web completa, pero esto no es
totalmente adecuado.
La mayoría de los navegadores móviles escalan las páginas HTML al ancho del viewport
para que se pueda ver completa en la pantalla. Sin embargo, HTML5 propone una meta
tag para controlar esta acción. El tag viewport permite decir al navegador que emplee el
ancho del dispositivo como ancho de viewport y así además se puede desactivar la
escala inicial por defecto del navegador. Esta meta tag se debe emplear en las
cabeceras HTML dentro de la etiqueta <head>.
Básicamente debido a esta función se va indicar como debe de comportarse el
navegador a la hora de mostrar en la pantalla un diseño web. Un ejemplo de uso de esta
etiqueta es el siguiente:
<meta name="viewport" content="width=device-width, initial- scale=1, maximum-
scale=1">
Por defecto los navegadores muestran un ancho determinado de página dependiendo del
terminal y el navegador, por ejemplo, en el caso de iPhone el ancho por defecto es de
980 pixeles. Esto tiene un inconveniente, porque además de mostrarse la página web
reducida no se aplicarán los media queries definidos. A causa de esta etiqueta se pueden
establecer parámetros como el ancho, el alto o el zoom de la pantalla.
45
La meta viewport posee una lista de parámetros clave-valor separadas por comas. Un
ejemplo de las distintas propiedades aplicables son width, height, initial-scale, minimum-
scale, maximum-scale, user-scalable.
Con la propiedad width se puede indicar el ancho que tomará la página renderizada en el
dispositivo. Esta propiedad permite indicar un valor estático en pixels para páginas con
contenido fijo, pero para el objetivo de este PG, se puede indicar el valor device-width,
que representa el ancho real del dispositivo, adaptándose la web al viewport y así
pudiendo llevar a cabo las media queries.
Por otro lado, la propiedad height representa al igual que la propiedad anterior una
medida de la pantalla, en concreto indica el alto, aunque esta propiedad no posee
demasiada utilidad funciona exactamente igual que la propiedad width, teniendo el
parámetro device- height por el cual se toma el alto de la pantalla del dispositivo.
La propiedad initial-scale indica el zoom inicial que se está aplicando a la página. Si se
visita alguna página desde un dispositivo móvil sin RWD se puede observar como es
necesario realizar zoom para poder leer el contenido o acercarte a cierta parte de la web.
Este parámetro permite indicar el tanto por cierto, por lo que si se coloca un valor de 0,9
se podrá ver inicialmente un zoom del 90% respecto el ancho total. De similar manera
que la propiedad anterior existe Maximum/Minimum Scale que funciona para indicar el
zoom por defecto inicial, con estas dos propiedades se puede indicar cuál será la escala
máxima y mínima a la hora de establecer zoom.
Para finalizar, la propiedad User-Scalable está directamente relacionada con la anterior,
ya que se puede controlar la acción del usuario a la hora de hacer zoom. Con un valor
booleano, de esta manera se logra indicar si permite que el usuario pueda manipularlo
para visualizar la web.
Respecto al tema de la etiqueta viewport la comunidad web considera de malas práctica
el empleo de las etiquetar user-scalable y minium-scale, ya que por ejemplo se considera
46
un gran problema de accesibilidad a personas con problemas de visión el impedir no
poder moverse en la página con total libertad o limitando el zoom.
3.3 Medidas Relativas.
Hasta ahora los diseños webs tomaban medidas absolutas en pixels basadas en
resoluciones concretas. Por otro lado, con esta filosofía se emplean porcentajes y
unidades como los em en los diseños con el objetivo de mantener los elementos flexibles.
Las unidades relativas acercan a este concepto, proporcionando herramientas para
adaptarse a las enormes variaciones de los tamaños de pantalla, densidad de pixels y los
niveles de zoom.
Mientras las media queries son el secreto esencial de las webs responsivas, para la
mayor parte del trabajo se va a tener que trabajar con unidades de medida relativas.
Usando un layout flexible, dejando atrás los anchos fijos en los elementos. Esto significa
que todos los elementos de del diseño modifican su tamaño proporcionalmente entre sí.
La idea básica de un layout fluido es utilizar la fórmula que provee Marcotte (2011) para
convertir dimensiones absolutas basadas en pixeles en unidades relativas.
Por ejemplo se tiene un layout de 800pixeles de ancho con dos columnas, una de ellas
580px y la otra de 220px, y se quiere transformar estas medidas a porcentajes se debe
de dividir el objetivo entre el contexto padre, para ejemplo; 580/800=72,5%
220/800=27,5% y rn el código CSS se deben emplear estos porcentajes;
#column1 {width: 72.5%;} #column2 {width: 27.5%;}
Como menciona Marcotte solo se necesita cambiar la manera de pensar, olvidando que
se está diseñando para medio impresos con medidas absolutas y comenzar a tomar las
medidas necesarias en porcentajes, empleando unos sencillos cálculos siempre teniendo
cuidado de no escoger el contexto equivocado por lo que se debe de tomar la referencia
adecuada, el elemento del cual toma la referencia.
47
3.5 Tipografía Flexible.
Las fuentes flexibles están estrechamente relacionadas con los layouts elásticos. Para
que un diseño sea totalmente fluido al dispositivo, además de los anchos de los
elementos, deben de considerarse los tamaños de fuente de los textos. Como se ha
comentado anteriormente los em son la medida adecuada, ya que esta unidad, es al
tamaño de fuente lo que los porcentajes son a los pixeles.
Por defecto cada navegador tiene definido un tamaño de fuente predeterminado, si se
determina el atributo font-size al 100% se establece que la fuente tendrá un tamaño
respectivo al 100% con su tamaño de fuente relativo. Por lo tanto, tomará su medida
relativa. Si el texto se encuentra dentro de la etiqueta body, el tamaño relativo que toma
es el de navegador y en algunos casos puede ser un tamaño de 14 a otros que puede ser
16 pixels. Lo que concuerda en todos los navegadores es que el 100% del tamaño
corresponde a 1em en ese navegador. Si se determina el tamaño predeterminado de la
fuente a otra medida mayor, por ejemplo 24 pixels, 1 em correspondería a esa medida.
Se recomienda a la hora de desarrollar diseños responsivo acostumbrarse a definir
fuentes en em, y calcular los tamaños determinados a través de la fórmula de Ethan
Marcotte. Una buena práctica es definir en la etiqueta body el tamaño base de la fuente,
por ejemplo determinar el tamaño por defecto del navegador: body {font-size: 100%}
Con esta decisión esta será la referencia para el resto de elementos del diseño.
3.6 Imágenes Flexibles.
Uno de los mayores problemas que presenta un diseño responsivo es trabajar con
imágenes. Hay diversas técnicas para redimensionar imágenes proporcionalmente y
muchas de ellas son fáciles de implementar. Sin embargo, la opción más popular descrita
por Marcotte (2011) es el uso del atributo max-width. img { max-width: 100%;}
Con esta técnica se le indica al navegador que el ancho de la imagen nunca debe
superar el ancho de su contenedor, por lo tanto, gracias a este atributo nunca se
48
desbordarán del div que lo contiene sin romper la estructura del diseño, por lo cual, si el
div determina su ancho respecto al ancho del navegador, la imagen se redimensionará
para dar una sensación única de flexibilidad.
Además de servir para imágenes también tiene bastante utilidad en otros tipos de objetos
multimedia. Por ejemplo, si se desea insertar un video de cualquier fuente externa como
Youtube pero se pretende que éste se adapte al tamaño, también se le aplicar la misma
regla: img, object, embed, video {max-width: 100%}
Sin embargo, la técnica de las imágenes fluidas tiene sus desventajas, ya que aunque la
imagen se redimensione en dispositivos de menor tamaño, el peso de las imágenes es el
mismo que el de la imagen al 100%, por lo tanto la carga de la imagen en un dispositivo
móvil puede llegar a ser un problema.
La solución a este problema sería cargar una imagen con distintas resoluciones y que se
cargue dinámicamente dependiendo del tamaño de pantalla. Sin embargo, no es nada
sencillo, existen distintas implementaciones y soluciones por partes de la comunidad,
pero ninguna es la idónea. Los desarrolladores web utilizan una variedad de hacks para
evitar el problema empleando cachés y otras técnicas para mejorar en rendimiento, pero
para que realmente se resuelva el problema, la web necesita nuevas herramientas por lo
que el W3C está trabajando en una posible solución muy próxima
La idea para resolver esta problemática sería determinar que se va a cargar una imagen
y darle distintas fuentes para consumir. Además de determinarle en que breakpoint debe
cargarse la imagen, se podría elegir la imagen dependiendo de la definición que permite
el dispositivo móvil, si se trata de una resolución estándar o para pantallas dpi.
Pero esta solución de momento es una propuesta del W3C que se encuentra en
desarrollo, cuando HTML5 se transforme en un estándar es posible que esta solución
esté disponible y se evitarán todo este tipo de problemas.
49
3.7 Optimización de Contenido.
Una de las técnicas empleadas en RWD es la de ocultar o mostrar elementos según el
tipo de resolución. Aunque se han visto las técnicas para transformar proporcionalmente
los elementos y reorganizarlos, muchos desarrolladores emplean esta técnica para
proporcionar una navegación más simple, un contenido más específico o simplemente
privar de la funcionalidad a determinado dispositivo. Favorablemente CSS permite
mostrar u ocultar elementos.
En CSS existe la opción display, la cual se le puede asignar el parámetro none, así el
elemento HTML al que se le aplique esta propiedad se verá oculto. display:none
Esta técnica se emplea tanto para ocultar o mostrar contenido en resoluciones pequeñas
como grandes, un ejemplo de ello es cambiar el tipo de navegación ocultando un bloque
y haciendo mostrar otro. Por otro lado, existe otra opción en CSS llamada visibility,
que se puede establecer a valor hidden. Sin embargo, esta opción esconde el
contenido pero el elemento permanece en la misma posición a diferencia de
display:none que oculta totalmente como si no estuviera en el DOM.
Con esta habilidad para manejar la visibilidad de los elementos abre las puertas a
distintas transformaciones, adaptar diseños, reorganizar elementos y abrir la mente del
diseñador para mostrar al usuario lo que realmente se desea mostrar, optimizando su
contenido y a su vez mejorando el rendimiento del sitio.
El rendimiento web es uno de los factores que más preocupan a los desarrolladores,
sobre todo al trabajar con la filosofía RWD, ya que transmitir la página web a un
dispositivo móvil requiere un coste que las conexiones 3G deben asumir a pesar de no
proporcionar la misma velocidad que una red cableada. Por lo tanto, no todo es la forma
en que se ve, si no también cuenta el tiempo, para muchos oro y para los clientes la
decisión de permanecer en la web o abandonarla.
Existen multitud de herramientas online y plugins para analizar los tiempos de carga y
optimizar los recursos para lograr la experiencia de usuario más cómoda. Entre ellos se
50
encuentran GTMetrix, Firebug o Pingdom. Estas herramientas evalúan el rendimiento de
un website y proporcionan un informe de los puntos que se deben mejorar aportando
ciertas recomendaciones.
Entre las razones de optimizar los tiempos de carga las páginas web se encuentran
mejorar la experiencia de usuario causando una impresión positiva en el cliente o
minimizar los problemas de latencia por las distancias entre los clientes los servidores.
Desde el punto de vista empresarial usar buenas prácticas de optimización hace al
desarrollador más profesional y excelente desde la visión del cliente, lo que permite
incrementar los ingresos y beneficios.
En seguida se presentarán algunas consideraciones a tomar en cuenta para poder
desarrollar un sitio web responsivo que tenga un buen rendimiento.
Aunque se ha recomendado la técnica de la visibilidad de los elementos con el parámetro
display, no es una buena opción rellenar el código de display:none, ya que aunque el
elemento contenga este atributo y no se visualice igualmente se descargará todo el
contenido y se incluirá en el código por lo que los tiempos de cargas serán mayores.
También se recomienda incluir las hojas de estilos CSS y los documentos JS en un único
fichero, ya que cada fichero necesitará una nueva petición HTTP por parte del navegador
incrementando los tiempos de carga. Asimismo se recomienda que estos ficheros sean
externos, y evitar incluir etiquetas CSS o styles o embeber código JavaScript en el HTML.
La razón principal es que estos ficheros se guardan en la caché del navegador, y no es
necesario volver a descargarlos, aunque esto puede ser un inconveniente mientras se
está desarrollando, borrando repetidas veces la caché para probar el nuevo código.
Además del tema de la caché encapsulando código en ficheros externos, se evita la
repetición de código aligerando el documento HTML.
Se recomienda poner los enlaces a las hojas de estilos en el header ya que los
navegadores por defecto no cargan la página web hasta haber obtenido las hojas de
estilos manteniendo el viewport en blanco. Por otro lado, los JavaScript se recomiendan
51
ponerlos después del body, justamente por lo contrario, para poder visualizar la página
cuanto antes correctamente mientras se termina de descargar los scripts
correspondientes. Además se debe de que tener en cuenta que los redireccionamientos
son un gran inconveniente para la optimización, ya que estos aumentan potencialmente
los tiempos de espera.
Conociendo los aspectos técnicos de código que se mencionaron en el presente capitulo
y tomando en cuenta estas consideraciones se puede llegar a desarrollar un sitio web
responsivo que contenga una estructura flexible y se logre adaptar a cualquier de los
dispositivos. Es importante considerar las necesidades del proyecto y del cliente para
hacer determinaciones correctas de acuerdo a la manera de programar el sitio de manera
adecuada para poder lograr una mejor reproducción y provocar mejores experiencias en
el usuario.
52
Imágenes Seleccionadas.
Figura 1: Mostly Fluid Pattern. Fuente: LukeW (2015). Multi-Device Layout Patterns. (2012). Recuperado el
15/09/12 de http://www.lukew.com/ff/entry.asp?1514
Figura 2: Column Drop Pattern. Fuente: LukeW (2015). Multi-Device Layout Patterns. (2012). Recuperado el 15/09/12 de http://www.lukew.com/ff/entry.asp?1514
53
Figura 3: Layout Shifter Pattern. Fuente: LukeW (2015). Multi-Device Layout Patterns. (2012). Recuperado el 15/09/12 de http://www.lukew.com/ff/entry.asp?1514
Figura 4: Tiny Tweaks Pattern. Fuente: LukeW (2015). Multi-Device Layout Patterns. (2012). Recuperado el 15/09/12 de http://www.lukew.com/ff/entry.asp?1514
Figura 5: Ejemplo del layout Tiny Tweaks. Fuente: Responsive Web Design (2013). SlideShare (2015). Recuperado el 15/09/12 de http://www.slideshare.net/aaronbernardo1/responsive-web-design-bridging-the-gap-between-art-directors
54
Figura 6: Off Canvas Pattern. Fuente: LukeW (2015). Multi-Device Layout Patterns. (2012). Recuperado el 15/09/12 de http://www.lukew.com/ff/entry.asp?1514
55
Lista de Referencias Bibliográficas.
Allsopp, J. (2000). A Dao of Web Design. (2000). Recuperado el 22/08/15 de http://alistapart.com/article/dao
Bigio, P. (2015, 6 de julio). Revolución móvil: los usuarios y el negocio viven en los
Smartphones. La Nación. Recuperado el 31/08/2015 de http://www.lanacion.com.ar/1807622-revolucion-movil-los-usuarios-y-el-negocio-viven-
enlos-smartphones Champion, S. (2003). Progressive enhancement. New York: Hesketh Editorial ComScore (2015). Device Essentials. (2015). Recuperado el 31/08/2015 de
http://www.comscore.com/esl/Prensa-y-Eventos/Comunicados-de-prensa/2011/6/comScore-Introduces-Device-Essentials
Ethan Marcotte on how responsive web design came about. (2014, Junio 9) [11 parrafo].
Creative Bloq [Revista en línea]. Disponible en: http://www.creativebloq.com/netmag/ethan-marcotte-how-responsive-web-design-came-
about-61411189 Kadlec, T. (2012). Implementing responsive design: building sites for an anywhere,
everywhere web. Berkeley: New Riders. Citado en: Reynoso, M. (2014). Multiplicidad digital. Proyecto de Graduación. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en: http://fido.palermo.edu/servicios_dyc/catalogo_de_proyectos/detalle_proyecto.php?id_proyecto=3032
Marcotte, E. (2011). Responsive Web Design. (4° Ed.). New York: A Book Apart Editorial. Marcotte, E. (3 de marzo de 2009) A List Apart. [posteo en blog]. Disponible en:
http://alistapart.com/article/fluidgrids Mickley, Z. (2011). Flexible Web Design. Berkeley: New Riders Editorial. Moll, C. (2006). Optimal width for 1024px resolution? (2006). Recuperado el 08/09/15 de
http://www.cameronmoll.com/archives/001220.html Kemp, S. (2015). Digital, Social & Mobile Worldwide in 2015. (2015). Recuperado el
30/08/2015 de http://wearesocial.net/blog/2015/01/digital-social-mobile-worldwide-2015/ Wroblewski, L. (2011). Mobile First. New York: A book apart.
Wroblewski, L. (2012). Multi-Device Layout Patterns. (2015). Recuperado el 15/09/2015 de http://www.lukew.com/ff/entry.asp?1514
56
Bibliografía
Anderson, T., Elloumi, F. (2004). Theory and Practice of Online Learning .Athabasca: Creative Commons.
Bernal, A. (2010). Influencia de las redes sociales en los medios de comunicación.
Zamora: Comunicación Social. Berners-Lee, T. (2001). The Semantic Web. (s.l.): Scientific American Magazine. Casillas J. (2005). Comunicación masiva. El Prisma. Apuntes para estudiantes
universitarios y profesionales. (2005). Recuperado el 22/05/14 de http://www.elprisma.com/apunes/comunicación_y_periodismo/comunicacionmasiva.html
Coppola, R. (1997). ¿Qué es Internet? (12º Ed.) Caracas: PcNews. Fernández, A. (2003). Las nuevas adicciones. Madrid: Tea Ediciones. Ferrero, M. (2001). Internet y los Portales como nuevo espacio para los medios de
comunicación. (2001). Recuperado el 22/05/14 de www.las5w.com.ar Fumero, A., Roca, G. (2007). Web 2.0. Madrid: Fundación Orange. Hicks, Atkins, Irish, Weakley, Rieger, Porter, Carson, Ta’eed, Stocks. J. T. P. R. B. P. R.
C. E. J. (2012). Smashing Book #2: Responsive Design. (2° Ed.). Freiburg: Smashing Media.
Jeffrey, V. (2001). Arte y Ciencia del Diseño Web. Madrid: New Riders. Krug, E. (2000). Don’t make me think. (2º Ed.). New York: Pearson. Laclau, J. (2008). Microsoft: su versión para Internet. (2010). Recuperado el 27/05/14 de
http://www.infobrand.com.ar/notas/10148-Microsoft:-su-versi%C3%B3n-2008-para-Internet---Silverlight
Lozada, P. (s.f.). Evolución de la Web. (s.f.) Recuperado el 23/05/14 de
http://profesores.elo.utfsm.cl/~tarredondo/info/networks/Evolucion_Web.pdf Lynch, P., Horton, S. (2009). Web Style Guide. (3° Ed.) New Haven: Yale University. Martí, J. (2011). El uso de la web en las diferentes generaciones. (2011). Recuperado el
24/05/14 de http://www.xarxatic.com/el-uso-de-la-web-en-las-diferentes-generaciones. Marcotte, E. (2011). Responsive Web Design. (4° Ed.). New York: A Book Apart Editorial. Nieto, A., Rouhiainen, l. (2012). La Web Empresa 2.0. (2° Ed.) Madrid: Global Marketing
Strategies. Osuna, C., Busón, C. (2008). Convergencia de medios. La integración tecnológica en la
era digital. Barcelona: Icaria Editorial. PuroMarketing (2014). Web Cerebral: la transformación de la Web 4.0 (2014).
Recuperado el 21/05/14 de http://www.puromarketing.com/12/11439/cerebral-transformacion.html
57
Ramonet, I. (2009). La catástrofe perfecta. Galicia: Icaria editorial S.A y Éditions Galilée. Spiekerman, E. (2013). Webfonts: A Designers Guide. Berlin: Font Shop. Ureña, A. (2011). Las Redes Sociales en Internet .Barcelona: Estudios del ONTSI. Vivar, J., Arruti, A. (2001). Ciberperiodismo. Madrid: Limusa. Woolgar S. (2002). ¿Virtual society? Technology, cyberbole, reality. Oxford: Oxford
University Press. Wroblewski, L. (2011). Mobile First. New York: A book apart. Zanoni, L. (2008). El imperio digital. Buenos Aires: Ediciones B
58
Lista de antecedentes.
Alliey, L., Milagro, A. (2009). Diseño de la interfaz gráfica web en función de los dispositivos móviles. Caso de estudio: diarios digitales. Cuadernos del Centro de Estudios de Diseño y Comunicación Nº38. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_articulo=6997&id_libro=321
Cortez, D., De Bisschop, N., Pérez, J., Salvietti., (2006). Nuevas tendencias en el
diseño de páginas web. Creación y Producción en Diseño y Comunicación Nº10.Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_articulo=3560&id_libro=25
Machese, J. (2010). Web 2.0 y la nueva audiencia activa. Proyecto de Graduación.
Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_libro=163&id_articulo=613
Méndez, S. (2011). Empresas online. Web 2.0: un nuevo medio de comunicación entre
las empresas y sus públicos. Proyecto de Graduación. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_articulo=8140&id_libro=374
Muguillo, M. (2011). Mobile Marketing nueva herramienta de comunicación. El teléfono
móvil y la publicidad. Proyecto de Graduación. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_libro=336&id_articulo=7487
Reynoso, M. (2014). Multiplicidad digital. Proyecto de Graduación. Facultad de Diseño y
Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/catalogo_de_proyectos/detalle_proyecto.php?id_proyecto=3032
Salgueiro, G.(2013). Diseño de interfaces web efectivas y usables. Proyecto de
Graduación. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/catalogo_de_proyectos/detalle_proyecto.php?id_proyecto=2048
Valverde, J. (2011). Impreso vs. Online. Proyecto de Graduación. Facultad de Diseño y
Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/proyectograduacion/detalle_proyecto.php?id_proyecto=2521
Zavala, W. (2005). Pautas que hacen a un desarrollador web profesional. Reflexión
Académica en Diseño y Comunicación Nº VI. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en
59
http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_articulo=799&id_libro=121
Zavala, W. (2011). Lo que hay que saber para desarrollar un sitio web. Reflexión
Académica en Diseño y Comunicación NºXVI. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_libro=270&id_articulo=6503
60
Producción de contenidos curriculares.
De acuerdo a los contenidos de la carrera de Diseño de Imagen y Sonido de la
Universidad de Palermo, se asocian tres materias en las cuales presentan contenidos
que sirvieron como conceptos fundamentales para la realización del presente Proyecto de
Graduación.
Primeramente se presenta la materia de Producción Digital I cuya finalidad está
relacionada con la solución de productos de diseño web, adquiriendo los fundamentos y
conceptos generales de utilidad, función y comunicación en el campo digital. Esta se
relaciona de manera importante al contenido del presente PG cual el principal tema y
objetivo general se basa en la producción de un sitio web que funcione como elemento de
comunicación en la era digital.
Posteriormente se nombra a la materia de Diseño de Imagen y Sonido II que tiene como
objetivo incorporar elementos fundamentales del lenguaje digital y audiovisual, la
conceptualización y la creatividad. Se aproxima al diseño de contenidos web, al ejercicio
del pensamiento proyectual y a los caminos de sustitución entre la idea de diseño y su
concretización. De acuerdo a los fines de esta asignatura tiene en común al Diseño
Adaptable los aspectos de conceptualización y creatividad porque a partir de una idea se
crea un diseño que se materializa en un producto digital.
Por último se cita a la asignatura de Producción Digital III pues se vincula a éste PG de
manera en que, como lo establece la finalidad de la materia, se estructura, piensa y
produce un proyecto digital de multimedia online.
61
Palabras Claves.
Soporte Digital
Diseño
Diseño Web
Programación
Interfaz
Dispositivo Móvil
Experiencia de Usuario
Usabilidad
Internet
Tecnología de las comunicaciones