TEXT CLASS REVIEW
TEMAS A TRATAR EN LA CUE
• Responsive Design
• Mobile First Design
• Medias Query
Producto de las necesidades humanas actuales de mantenerse en constante comunicación, con
mayor acceso a información y conocimientos y para acortar distancias entre personas que se
comunican desde distintos lugares del mundo debido a la globalización, los dispositivos móviles
inteligentes o smartphone han tenido un aumento exponencial desde su creación y se considera que
esta tendencia continuara al alza, desplazando en gran medida a computadores y laptop, dando
paso a smartphone cada vez más competentes que permiten tener una “oficina móvil” y realizar
cualquier actividad, te encuentres donde te encuentres.
Así es como hoy las personas realizan prácticamente todo usando su smartphone. Desde una
compra, una hora médica, un video de entretenimiento o buscar información sobre algún tema
específico, hasta estudiar en plataformas educativas. Todo este tipo de actividades realizadas
principalmente desde un teléfono móvil también se pueden realizar desde un ordenador o desde una
Tablet, incluso, desde un televisor.
Este es el motivo por el cual tener un sitio web responsivo se vuelve tan importante para un negocio
o empresa.
Pero acá nos hacemos la siguiente pregunta:
¿QUÉ ES EL DISEÑO WEB RESPONSIVO?
El diseño web responsivo o “responsive web design” en inglés, se refiere a la adaptabilidad de una
página en internet hacia los diferentes equipos desde los cuales pueda ser accedida. Por ejemplo,
poder adaptarse a la pantalla de una laptop, Tablet, smartphone, pantalla ancha, etc. Siempre
comenzando su diseño desde una pantalla de ordenador y adaptándolo a los distintos tamaños.
VENTAJAS DEL DISEÑO WEB RESPONSIVO
• Mejorar la experiencia del usuario
• Mejores posicionamientos en los buscadores
• Es práctico
• Los elementos se ajustan automáticamente para un desplazamiento vertical
• Las imágenes se adaptan al diseño
Ilustración 1 Diseño responsivo, adaptado a distintas pantallas
Es de gran relevancia entonces, lograr adatar nuestros sitios web a distintos tamaños de pantalla
para que logren verse bien, ser cómodos y prácticos para los usuarios en cualquiera de los
dispositivos de los que quiera hacer uso, sin embargo, como previamente dijimos, el uso de
smartphone va al alza (y ya se encuentra muy generalizado entre la población mundial), lo que hace
fundamental pensar en el diseño para pantallas móviles.
Actualmente, alrededor del 67% de la población mundial maneja un teléfono inteligente de los cuales
se estima que un 77% de ellos se encuentra con algún tipo de conexión a internet 3G, 4G o 5G
(estudios estadísticos: GSMA Intelligence DATA y Ericson Mobilitu Report Data).
Considerando estos números, se estima que alrededor del 55% de las visitas a páginas web se
realizan a través de smartphone, lo que hace relevante para los sitios web tener su material adaptado
para ser visitado a través de pantallas de celulares ya que, según este porcentaje, laptop y Tablet ya
han sido desplazadas. De esta forma es como nació el concepto Mobile First Design.
MOBILE FIRST DESIGN
El concepto Mobile First es un concepto acuñado originalmente en el año 2009 por expertos
diseñadores como Luke Wroblewski y desde entonces ha ido ganando cada vez más reconocimiento
como una evolución del diseño responsivo.
Mobile First en español significa “móvil primero” y se enfoca en diseñar primero el sitio web desde
las pantallas móviles más pequeñas con el objetivo de crear la mejor experiencia de usuario para
las personas que visitan la web a través de teléfonos inteligentes.
El Diseño Mobile First tiene que ver con la simplicidad y el minimalismo.
BENEFICIOS DEL DISEÑO MOBILE FIRST
Como vimos previamente, un gran porcentaje de la población mundial utiliza un teléfono móvil
inteligente por sobre una computadora. Esto entrega un punto importante de fidelización de los
usuarios que, al tener una buena experiencia móvil web se mantendrán visitando ese sitio, mientas
que, al tener una mala experiencia abandonarán el sitio web.
Crear primero el diseño para los dispositivos móviles puede ser más difícil que crear primero el
diseño para dispositivos de escritorio, sin embargo, permite diseñar una experiencia móvil de calidad
sin encontrarse limitado por el diseño web de escritorio terminado.
MOBILE FIRST DESIGN Y RESPONSIVE DESIGN
El diseño móvil primero es una estrategia, mientras que el diseño responsivo es una técnica lo que
hace que no debamos elegir entre una y otra (conceptos que en algunas ocasiones logran confundir)
si no, trabajarlas en conjuntos, combinando ambas. Podemos planificar primero el diseño móvil,
pero mantener los puntos de responsividad, teniendo un solo código que se adapte a distintas
pantallas, esta vez, partiendo por la pantalla más pequeña.
Ilustración 2 Responsive Web Design v/s Mobile First Design
ESTRATEGIAS PARA LA CREACIÓN DE SITIOS WEB SIGUIENDO EL CONCEPTO DE MOBILE FIRST
El contenido debe ser conciso y claro, considerando el tamaño diminuto de la pantalla (menos, es
más). También hay que considerar tener un sitio web sencillo, Se deben tener los elementos
realmente necesarios para el sitio web y si no son necesarios, no deben ser colocados (al menos no
para pantalla móvil).
MEDIA QUERY
Las Medias Querys son una de las principales novedades de CSS 3 y son útiles cuando deseamos
modificar una página web en función del tipo de dispositivo o de características o parámetros
específicos.
Son la base para el diseño responsivo y se plantean como una forma de mejorar la accesibilidad
web. A través de ellas es posible, por ejemplo, aumentar el tamaño de las fuentes en determinados
dispositivos o mejorar el contraste entre el color de la letra y el fondo.
La ventaja principal de utilizar las Media Querys es que partimos de un único diseño principal que se
irá adaptando y reajustando en función del navegador, el dispositivo, la pantalla o las preferencias
del usuario.
De esta manera podremos, por ejemplo, realizar un diseño que tenga una columna en dispositivos
móviles, dos columnas en tablets y tres columnas en ordenadores portátiles y de sobremesa.
Con esta información, podremos comenzar nuestros ejercicios, para dar uso a las Medias Querys y
realizar diseños responsivos que cumplan con el concepto de móvil primero.
