{"id":429,"date":"2021-02-16T07:15:20","date_gmt":"2021-02-16T07:15:20","guid":{"rendered":"https:\/\/softwareinformatico.com\/blog\/?p=429"},"modified":"2021-05-03T05:46:20","modified_gmt":"2021-05-03T05:46:20","slug":"importancia-de-mobile-first","status":"publish","type":"post","link":"https:\/\/softwareinformatico.com\/blog\/importancia-de-mobile-first\/","title":{"rendered":"Importancia de Mobile first"},"content":{"rendered":"\n<p><br><br>Hoy en d\u00eda el uso del m\u00f3vil es el referente para acceder a internet, superando ampliamente al ordenador. Esto refleja que nuestros h\u00e1bitos de consumo han cambiado, de ah\u00ed a la importancia de Mobile first.<br><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u00bfQu\u00e9 es Mobile First?<\/strong><\/h2>\n\n\n\n<p><br><strong>\u201cMobile first\u201d<\/strong>, como su propia terminolog\u00eda indica, \u201cPrimero m\u00f3vil\u201d. <strong>Es un dise\u00f1o web adaptativo que prioriza la visualizaci\u00f3n en m\u00f3viles<\/strong>, se encarga de optimizar los elementos para que el usuario pueda ver el contenido correctamente, y sin ning\u00fan problema.<br><br><\/p>\n\n\n\n<p>Antes, el dise\u00f1o web se orientaba para ser usado desde un ordenador (uso Desktop), y se hac\u00eda responsive para adaptarse al resto de los dispositivos. Ahora en cambio, gracias a esta nueva estrategia podemos realizarlo a la inversa.<br><br><\/p>\n\n\n\n<p>En primer lugar se inicia el proceso pensando en las peque\u00f1as pantallas, y despu\u00e9s desde ah\u00ed el dise\u00f1o avanza, y se ajusta hacia las pantallas de mayor tama\u00f1o.<br><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u00bfPor qu\u00e9 es tan importante?<\/strong><br><\/h2>\n\n\n\n<p><br><strong>Una de las principales razones de la importancia de Mobile first es que actualmente el m\u00f3vil es nuestro principal medio de comunicaci\u00f3n<\/strong>. Por la facilidad que nos ofrece para comunicarnos,  de realizar consultas o compras en la web y que siempre lo llevamos encima.<br><br><br>Por este motivo para que la experiencia del usuario sea lo m\u00e1s grata posible desde el principio, debemos adaptar nuestra web a sus necesidades.<br><br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>Que una web sea navegable desde un m\u00f3vil es fundamental para Google<\/strong>. <br><br><\/h4>\n\n\n\n<p style=\"font-size:17px\" class=\"has-text-color has-very-dark-gray-color\">Para el <a aria-label=\"undefined (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/softwareinformatico.com\/posicionamiento-en-google\/\" target=\"_blank\" rel=\"noreferrer noopener\">posicionamiento en google<\/a> se tiene muy en cuenta que una web <strong>sea completamente accesible y navegable desde un m\u00f3vil<\/strong>. Si queremos escalar en los resultados de b\u00fasqueda tenemos que trabajar a conciencia la parte m\u00f3vil.<br><\/p>\n\n\n\n<p style=\"font-size:17px\" class=\"has-text-color has-very-dark-gray-color\"><br>No trabajar correctamente First Mobile har\u00e1 que Google considerare que ofrecemos una p\u00e9sima experiencia al usuario, reduciendo nuestra visibilidad y perdiendo visitas de usuarios a la web.<br><\/p>\n\n\n\n<div class=\"div_consulta_bordes\"><p class=\"text_ini\">Si necesitas ayuda, o tienes dudas sobre <a href=\"https:\/\/softwareinformatico.com\/\" title=\"aplicaciones inform\u00e1ticas\">aplicaciones inform\u00e1ticas<\/a> preg\u00fantanos, podemos ayudarte.<\/p><div class=\"creatutienda\"><a href=\"https:\/\/softwareinformatico.com\/consulta-informatica\/\" title=\"consulta informatica\">CONSULTA INFORMATICA<\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><br><br><br><strong>Beneficios del uso del Mobile<\/strong> first<br><br><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Est\u00e1 pensado para conseguir un m\u00e1ximo rendimiento en todos los dispositivos.<br><br><br><\/li><li>Obtendremos una mayor velocidad en los tiempos de carga.<br><br><br><\/li><li>El contenido estar\u00e1 disponible en todas las resoluciones<strong>.<\/strong><br><br><br><\/li><li> Es m\u00e1s f\u00e1cil hacer un dise\u00f1o Mobile first, ya que se centra en lo m\u00e1s importante y se empieza a trabajar con una estructura m\u00e1s sencilla.<br><br><br>Por otro lado, para el dise\u00f1o en pantallas de mayor tama\u00f1o solamente tendremos que a\u00f1adir elementos, y aumentar la resoluci\u00f3n.<br><br><br><\/li><li>Nos enfocaremos en lo esencial priorizando contenidos.<br><br><\/li><li>Se producir\u00e1 una mejora del posicionamiento SEO ya que Google prioriza el dise\u00f1o orientado a m\u00f3viles.<br><br><\/li><li>Mantenimiento m\u00e1s econ\u00f3mico al ser un dise\u00f1o m\u00e1s minimalista.<br><br><br><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Aspectos importantes para adaptar mi web a Mobile first.<\/strong><br><\/h2>\n\n\n\n<p style=\"font-size:17px\" class=\"has-text-color has-very-dark-gray-color\"><br><br>En primer lugar, deber\u00e1 de ser accesible, atractiva, intuitiva y amigable, adem\u00e1s de tener una estructura simple.<br><br><\/p>\n\n\n\n<p style=\"font-size:17px\" class=\"has-text-color has-very-dark-gray-color\">Es muy importante enfocarnos en lo esencial y en su funcionalidad dependiendo de nuestros objetivos. Que el contenido sea f\u00e1cil de leer y visible a primera vista.<br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u00bfQu\u00e9 es Mobile friendly?<\/strong><\/h2>\n\n\n\n<p><br>\u201cMobile friendly\u201d, es un etiquetado de Google para describir a las web que tienen un dise\u00f1o optimizado para m\u00f3viles, y que tratan de ofrecer la mejor experiencia a los usuarios que navegan en internet. <br><br><\/p>\n\n\n\n<p style=\"font-size:17px\" class=\"has-text-color has-very-dark-gray-color\"><strong>Su objetivo es que al realizar una b\u00fasqueda en Google veamos r\u00e1pidamente si est\u00e1 adaptada a m\u00f3viles.<\/strong><br><br><\/p>\n\n\n\n<p>Para que una web sea Mobile friendly, es necesario:<br><br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Buena visibilidad de los botones y de la fuente sin necesidad de hacer zoom.<br><br><\/li><li>Navegaci\u00f3n en vertical (Scroll).<br><br><\/li><li>Uso de im\u00e1genes de alta calidad y <a href=\"https:\/\/softwareinformatico.com\/blog\/formatos-de-imagen\/\" target=\"_blank\" aria-label=\"undefined (abre en una nueva pesta\u00f1a)\" rel=\"noreferrer noopener\">formatos de imagen<\/a> correctos..<br><br><\/li><li>Contenido con un peso reducido para una mejor velocidad de carga.<br><br><\/li><li><a aria-label=\"undefined (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/softwareinformatico.com\/optimizacion-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">Optimizaci\u00f3n web<\/a>.<br><br><\/li><li>Incluir una distancia suficiente entre enlaces y botones.<br><br><\/li><li>No utilizar Flash.<br><br><\/li><li>No usar Pop ups.<br><\/li><li>Usar <a aria-label=\"undefined (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/softwareinformatico.com\/blog\/que-es-lazy-load-y-por-que-usarlo\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lazy Load<\/a><br><br><br><\/li><\/ul>\n\n\n\n<p>Por otro lado, para comprobar si una web es considerada \u201camigable\u201d, podemos realizar un test de optimizaci\u00f3n para m\u00f3viles de Google (<a href=\"https:\/\/search.google.com\/test\/mobile-friendly\">Mobile test Google<\/a>).<br><br><\/p>\n\n\n\n<p> Para ello tenemos que introducir la URL correspondiente en el campo de b\u00fasqueda, y Google se encargar\u00e1 de&nbsp;evaluar los diferentes aspectos.<br><br><br>De este modo, podremos ver si se cumplen los requisitos para una correcta visualizaci\u00f3n y navegaci\u00f3n en m\u00f3viles.<br><br><br><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>Hoy en d\u00eda el uso del m\u00f3vil es el referente para acceder a internet, superando ampliamente al ordenador. Esto refleja que nuestros h\u00e1bitos de consumo <a class=\"mh-excerpt-more\" href=\"https:\/\/softwareinformatico.com\/blog\/importancia-de-mobile-first\/\" title=\"Importancia de Mobile first\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":509,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[31,32,43,44,46,23,33],"class_list":["post-429","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-core-webs-vitals","tag-google","tag-mobile-first","tag-movil","tag-navegacion","tag-optimizacion-web","tag-seo"],"_links":{"self":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts\/429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/comments?post=429"}],"version-history":[{"count":0,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts\/429\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/media\/509"}],"wp:attachment":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/media?parent=429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/categories?post=429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/tags?post=429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}