0% encontró este documento útil (0 votos)
16 vistas5 páginas

Diseño Web: Responsive y Mobile First

Cargado por

Sangungi Off
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
16 vistas5 páginas

Diseño Web: Responsive y Mobile First

Cargado por

Sangungi Off
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

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.

Common questions

Con tecnología de IA

El diseño web responsivo y el diseño Mobile First se relacionan como técnica y estrategia, respectivamente. El diseño web responsivo se enfoca en la adaptabilidad de una página para diversos dispositivos, mientras que Mobile First prioriza el diseño para dispositivos móviles, comenzando desde las pantallas más pequeñas . Ambos deben integrarse en el desarrollo de sitios web modernos comenzando por el diseño para móviles y manteniendo criterios de responsividad para una experiencia de usuario óptima en cualquier dispositivo .

El diseño web debe evolucionar priorizando el acceso desde dispositivos móviles, dado que aproximadamente un 55% de las visitas a páginas web se realizan desde smartphones. Esto implica centrar los esfuerzos de diseño en la experiencia móvil, adoptando estrategias como Mobile First para asegurar que los sitios sean funcionales y accesibles en dispositivos con diferentes tamaños de pantalla, lo que es crucial dado el desplazamiento de laptops y tablets .

Las Media Queries y la planificación del contenido son esenciales para la efectividad del diseño Mobile First. Las Media Queries permiten adaptar el diseño a diferentes dispositivos y condicionalmente modificar aspectos visuales, mientras que una planificación cuidadosa del contenido asegura que la información más relevante se presente de manera prominente en pantallas pequeñas. Estos elementos juntos garantizan que el sitio sea accesible, funcional y optimizado para móviles .

Las Media Queries influyen en la adaptación de un sitio web a diferentes dispositivos al permitir ajustes en el diseño de acuerdo con parámetros como dispositivo, pantalla o navegador. Su principal ventaja es que permiten partir de un único diseño adaptable, lo que facilita cambios como el número de columnas según el dispositivo, asegurando accesibilidad y adaptación sin necesidad de múltiples versiones del sitio .

El Mobile First Design presenta desafíos como la necesidad de diseñar para espacios de pantalla reducidos, lo que puede limitar la cantidad de contenido y funcionalidad disponible de inmediato. Comparado con el diseño de escritorio, esto requiere una priorización cuidadosa del contenido y un diseño centrado en la usabilidad. Soluciones incluyen el enfoque en la simplicidad, elementos adaptativos mediante Media Queries y asegurar que solo los componentes esenciales sean visibles en dispositivos móviles .

La creciente tendencia del uso de smartphones impacta significativamente el diseño web, haciendo vital que los sitios sean accesibles y funcionales en pantallas más pequeñas. El diseño responsive aborda esto asegurando que sitios web se adapten automáticamente a las condiciones del dispositivo utilizado por el usuario, proporcionando una experiencia consistente sin importar el tamaño de la pantalla .

El enfoque minimalista del Mobile First Design contribuye a mejorar la experiencia del usuario en dispositivos móviles al facilitar una navegación clara y sin distracciones. Este enfoque se enfoca en incluir solo los elementos necesarios, optimizando el espacio limitado de la pantalla y garantizando que los usuarios puedan acceder a la información esencial de manera rápida y eficiente .

El concepto de 'Mobile First Design' es importante en el desarrollo de páginas web porque un gran porcentaje de la población mundial utiliza teléfonos móviles sobre computadoras para acceder a internet. Diseñar primero para móviles garantiza una buena experiencia de usuario, esencial para la fidelización, y permite crear un diseño más simple que no está limitado por los diseños de escritorio .

Los principales beneficios del diseño web responsivo incluyen mejorar la experiencia del usuario, lograr mejores posicionamientos en buscadores, y la practicidad al ajustarse automáticamente a cualquier dispositivo. Estos beneficios son importantes porque facilitan la navegación del usuario, mejoran la accesibilidad y aumentan la satisfacción al interactuar con el sitio .

El diseño responsivo se considera una técnica porque se trata de ajustes técnicos que permiten que un sitio se adapte a cualquier dispositivo. En contraste, Mobile First es una estrategia porque se centra en una planificación inicial que prioriza la experiencia en móviles. Complementarse efectivamente implica comenzar el diseño enfocándose en funcionalidades básicas para móviles y luego utilizar el diseño responsivo para extender el soporte a otros dispositivos a través de adaptaciones específicas .

También podría gustarte