{"id":12288,"date":"2022-12-02T13:00:00","date_gmt":"2022-12-02T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=12288"},"modified":"2023-01-03T10:20:32","modified_gmt":"2023-01-03T09:20:32","slug":"diseno-mobile-first-responsive-web","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/diseno-mobile-first-responsive-web\/","title":{"rendered":"\u00bfPor qu\u00e9 necesitas un dise\u00f1o web mobile-first responsive?"},"content":{"rendered":"\n

Si quieres tener un dise\u00f1o web correcto y apto para todos los dispositivos digitales: m\u00f3viles, tablets y ordenadores. Necesitas un dise\u00f1o web mobile-first responsive<\/strong>. En este art\u00edculo te mostramos todos los detalles.<\/p>\n\n\n\n

\n
\n
\"Dise\u00f1o<\/figure>\n<\/div>\n\n\n\n
\n

\u00bfQu\u00e9 es el dise\u00f1o mobile-first?<\/h2>\n\n\n\n

Como explicamos en uno de nuestros art\u00edculos de blog anteriores, el dise\u00f1o web responsive y adaptativo<\/a>, es la estructuraci\u00f3n de la p\u00e1gina web pensando en la adaptaci\u00f3n a todo tipo de pantallas en las que se pueda visualizar la web. El dise\u00f1o mobile-first responsive consiste en dise\u00f1ar los sitios web para la versi\u00f3n de pantalla de m\u00f3vil primero<\/strong> y despu\u00e9s adaptar el dise\u00f1o a dispositivos con pantallas m\u00e1s grandes. De esta forma, se asegura la correcta visualizaci\u00f3n del sitio web en todo tipo de pantallas de una manera m\u00e1s eficaz que si lo hici\u00e9ramos, dise\u00f1ando primero para pantallas mayores y reduciendo.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u00bfPor qu\u00e9 dise\u00f1ar una web en mobile-first?<\/h2>\n\n\n\n

En el a\u00f1o 2015, el tr\u00e1fico online desde tel\u00e9fonos m\u00f3viles era de un 31% frente al tr\u00e1fico de ordenadores, porcentaje que cada a\u00f1o aumenta m\u00e1s y m\u00e1s, llegando a un 55% de visitas a trav\u00e9s de m\u00f3viles a nivel mundial en el a\u00f1o 2022.<\/strong> Podemos afirmar que los m\u00f3viles han superado a los ordenadores de sobremesa como dispositivos m\u00e1s utilizados para acceder a internet. Siendo esto as\u00ed, \u00bfC\u00f3mo es posible que a\u00fan hoy en d\u00eda haya sitios web que no est\u00e9n adaptados a dispositivos m\u00f3viles? \u00bfC\u00f3mo podemos seguir encontr\u00e1ndonos con scrolles laterales, tipograf\u00edas demasiado peque\u00f1as o p\u00e1ginas rotas en el entorno digital?<\/p>\n\n\n\n

La respuesta a estas preguntas es que muchas webs no est\u00e1n dise\u00f1adas teniendo en cuenta la teor\u00eda de \u00abmobile-first\u00bb. Si priorizamos la vista en pantallas peque\u00f1as y vamos adapt\u00e1ndola a pantallas de tama\u00f1o mayor, no nos encontrar\u00edamos con este tipo de problemas de usabilidad.<\/p>\n<\/div>\n\n\n\n

\n
\"Mobile-fist<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"Dise\u00f1o<\/figure>\n<\/div><\/div>\n\n\n\n
\n

Dise\u00f1o mobile-first responsive igual a contenido primero<\/h3>\n\n\n\n

Hacer un dise\u00f1o mobile-first es priorizar el contenido al dise\u00f1o<\/strong>. Priorizar la informaci\u00f3n y la manera en la que se transmite a cualquier otra cosa. Necesitamos que cuando un usuario haga una b\u00fasqueda en internet desde su tel\u00e9fono m\u00f3vil est\u00e9 donde est\u00e9, al acceder a nuestra p\u00e1gina web encuentre de forma muy r\u00e1pida y directa la informaci\u00f3n que busca, por lo que siempre habr\u00e1 que priorizar la funcionalidad al dise\u00f1o<\/strong>, exponiendo el contenido de manera clara y prioritaria.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Jerarqu\u00eda visual<\/h4>\n\n\n\n

La jerarqu\u00eda visual consiste en ordenar los elementos de una interfaz seg\u00fan la relevancia que tengan<\/strong>. Esta jerarqu\u00eda visual puede trabajarse de diferentes maneras, mediante todas las herramientas que ofrece el dise\u00f1o: el color, el contraste, la tipograf\u00eda, el espacio… El tama\u00f1o y la escala de un objeto ayudan a darle m\u00e1s importancia que al resto de elementos de la interfaz. El color y el contraste, utilizados de manera estrat\u00e9gica, podr\u00e1n facilitar destacar un contenido de otro. Para que un dise\u00f1o web sea efectivo y funcional ser\u00e1 necesario hacer uso de todas estas herramientas para jerarquizar todos los elementos que haya que incluir en el dise\u00f1o, clasific\u00e1ndolos en elementos de:<\/p>\n\n\n\n

  1. Primer nivel<\/strong>. La informaci\u00f3n m\u00e1s importante, por ejemplo, un titular.<\/li>
  2. Segundo nivel<\/strong>. Elementos de organizaci\u00f3n de secciones, agrupando informaci\u00f3n relacionada entre s\u00ed. Por ejemplo: Un subt\u00edtulo.<\/li>
  3. Tercer nivel<\/strong>. Contenido m\u00e1s extenso y con m\u00e1s detalle, por ejemplo un texto, en el que ser\u00e1 necesario priorizar la legibilidad.<\/li><\/ol>\n\n\n\n

    Menos es m\u00e1s<\/h4>\n\n\n\n

    Simplificar y reducir el contenido mejora la claridad y la calidad del contenido, y ayuda a los usuarios a centrarse en la informaci\u00f3n m\u00e1s importante, sin distracciones<\/strong>. En el dise\u00f1o mobile-first, es imprescindible mantener solo los elementos realmente relevantes para el sitio m\u00f3vil, evitando a\u00f1adir contenido superfluo que distraiga al usuario. Algunos m\u00e9todos para conseguir la simplificaci\u00f3n del contenido en nuestra web puede ser los siguientes:<\/p>\n\n\n\n