{"id":6828,"date":"2018-09-14T14:00:54","date_gmt":"2018-09-14T14:00:54","guid":{"rendered":"https:\/\/www.conectasoftware.com\/?p=6828"},"modified":"2024-02-02T18:17:28","modified_gmt":"2024-02-02T18:17:28","slug":"mobile-first-principios-basicos-de-diseno-web","status":"publish","type":"post","link":"https:\/\/www.conectasoftware.com\/magazine\/mobile-first-principios-basicos-de-diseno-web\/","title":{"rendered":"Mobile first \u2013 principios b\u00e1sicos de dise\u00f1o web"},"content":{"rendered":"\n<p>La filosof\u00eda mobile first es una de las m\u00e1s importantes en el dise\u00f1o web de los \u00faltimos a\u00f1os. Es un cambio de enfoque que da respuesta al numero creciente de usuarios de m\u00f3vil comparado con ordenadores sobremesa y port\u00e1tiles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">El m\u00f3vil supera al ordenador<\/h2>\n\n\n\n<p>En 2016 elmundo.es publica \u201c<a href=\"http:\/\/www.elmundo.es\/sociedad\/2016\/04\/04\/57026219e2704e90048b465e.html\" target=\"_blank\" rel=\"noopener noreferrer\">El m\u00f3vil supera por primera vez al ordenador para acceder a Internet<\/a>\u201d. En el mismo a\u00f1o tenemos otra noticia, esta vez de 20minutos.es <a href=\"https:\/\/www.20minutos.es\/noticia\/2917027\/0\/espana-lidera-acceso-internet-movil-ue-eurostat\/#xtor=AD-15&amp;xts=467263\" target=\"_blank\" rel=\"noopener noreferrer\">Espa\u00f1a, a la cabeza de la UE en acceso a internet desde el m\u00f3vil<\/a>. Google anuncia en 2015 que recibe m\u00e1s consultas desde dispositivos m\u00f3viles.<br>Esto quiere decir que nuestro principal acceso a Internet es por medio del smartphone. Como consecuencia, la experiencia de usuario en la pantalla peque\u00f1a se vuelve prioridad el dise\u00f1o web.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Mobile First - Principios b\u00e1sicos de Dise\u00f1o Web\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/MIFBPFv3XgI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">La filosof\u00eda mobile-first nace en 2012<\/h2>\n\n\n\n<p>Lo que se llama \u201ctendencia\u201d, nace como filosof\u00eda \u201cmobile first\u201d en 2012 con las publicaciones de <a href=\"https:\/\/www.lukew.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Luke Wroblewski<\/a>. Desde entonces, se descubre y redescubre que el camino m\u00e1s sencillo es muchas veces el mejor.<br>El enfoque tradicional del dise\u00f1o web era empezar con un dise\u00f1o pensado para pantallas grandes. Este se adapta y simplifica despu\u00e9s a dispositivos m\u00f3viles por medio de plantillas responsive.<br>Pero si la mayor\u00eda de los usuarios acceden por m\u00f3vil, tiene mas sentido revertir este proceso. La prioridad ahora es crear ante todo una buena experiencia m\u00f3vil. Sus limitaciones, adem\u00e1s, facilitan el proceso de dise\u00f1o.<br>La filosof\u00eda mobile first propone construir primero un buen sitio web para la pantalla m\u00f3vil y desarrollar a partir de este dise\u00f1o base.<br>El m\u00f3vil no solo se define por las limitaciones que supone una pantalla mas peque\u00f1a o una velocidad de carga limitada por el plan de datos y la cobertura red. La comunicaci\u00f3n e integraci\u00f3n con otras aplicaciones nativas, como las de mensajer\u00eda o de navegaci\u00f3n por GPS ofrecen un nuevo abanico de oportunidades para interactuar con nuestros clientes. La navegaci\u00f3n t\u00e1ctil, la b\u00fasqueda por voz o la c\u00e1mara integrada son algunas de las caracter\u00edsticas a tener en cuenta par enriquecer el contenido de un nuevo sitio web.<br>Con dispositivos m\u00f3viles nos referimos a los tel\u00e9fonos m\u00f3viles, ya sea un Iphone X, el ultimo Samsung Note o un Google Pixel. Las tabletas, como el Ipad, a pesar de ser de un tama\u00f1o portable, aportan una experiencia mas parecida a las del port\u00e1til y sobremesa. Adem\u00e1s, no se utilizan ni de lejos tanto como los m\u00f3viles a lo largo del d\u00eda.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Un dise\u00f1o responsive y mobile friendly<\/h2>\n\n\n\n<p>Algunos factores a tener en cuenta para un dise\u00f1o apto para m\u00f3viles son<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tama\u00f1o de fuente para una lectura c\u00f3moda<\/li>\n\n\n\n<li>Enlaces f\u00e1ciles de reconocer y seleccionar<\/li>\n\n\n\n<li>La velocidad de carga optimizada por compresi\u00f3n<\/li>\n\n\n\n<li>Evitar flash<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/adaptacion-dispositivos-moviles-los-disenos-responsive\">Adaptaci\u00f3n a dispositivos m\u00f3viles \u2013 Los dise\u00f1os responsive<\/a><\/p>\n\n\n\n<p>Por su parte, Google ha lanzado su Google Mobile First Index este verano. A partir de ahora, para indexar una web, prevalece la versi\u00f3n m\u00f3vil a la de sobremesa.<br>Herramientas de Google para comprobar si un sitio es mobile friendly<br><a href=\"https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\/<\/a><br>PageSpeed Insights sobre la velocidad de carga<br><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/developers.google.com\/speed\/pagespeed\/insights\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&nbsp;<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfMobile first desde 0?<\/h2>\n\n\n\n<p>Replantear el dise\u00f1o de un sitio web que cuente ya con varios a\u00f1os, no es sencillo, sobre todo si cuenta con mucho contenido. Se puede empezar por fases, adaptando por ejemplo primero las p\u00e1ginas mas visitadas y la pagina de inicio. Este tipo de proyecto conlleva una auditor\u00eda con un inventario que recoge todo el material digital con el que contamos para luego proponer cambios graduales que aportan una mejora en la experiencia de usuario.<br>En cambio, un proyecto par un sitio web nuevo deber\u00eda centrarse desde el principio en la funcionalidad y el contenido principal que quiere ofrecer. El objetivo es un dise\u00f1o fluido, no solo adaptado, a todos los dispositivos m\u00f3viles y adem\u00e1s a los diferentes tama\u00f1os de pantalla de port\u00e1tiles y sobremesas. A la hora de decidir las funcionalidades de la web, ya podemos integrar las funcionalidades que mencionamos antes, como el GPS o la b\u00fasqueda por voz.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La filosof\u00eda mobile first es una de las m\u00e1s importantes en el dise\u00f1o web de los \u00faltimos a\u00f1os. Es un cambio de enfoque que da respuesta al numero creciente de usuarios de m\u00f3vil comparado con ordenadores sobremesa y port\u00e1tiles. El m\u00f3vil supera al ordenador En 2016 elmundo.es publica \u201cEl m\u00f3vil supera por primera vez al [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6832,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[23],"tags":[],"class_list":{"0":"post-6828","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-diseno-web"},"_links":{"self":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/6828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/comments?post=6828"}],"version-history":[{"count":2,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/6828\/revisions"}],"predecessor-version":[{"id":40034,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/6828\/revisions\/40034"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media\/6832"}],"wp:attachment":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media?parent=6828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/categories?post=6828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/tags?post=6828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}