21/08/2013

Mobile first: otro enfoque para crear sitios web multiplataforma

Mobile first: otro enfoque para crear sitios web multiplataforma

Generalmente, cuando se desarrolla un sitio web buscando que se vea bien en dispositivos móviles se sigue alguno de los siguientes enfoques:

  • Generar una plantilla diferente para cada tipo de dispositivo (tablets, smartphones, etc.).
  • Seguir los lineamientos del diseño web responsivo: generar una plantilla única, pero con bloques de tamaño relativo, imágenes flexibles y características variables implementadas a través de media queries. La plantilla será una sola, pero su aspecto será diferente en cada dispositivo.

El primer enfoque tiene varios problemas. La cantidad de plataformas que permiten navegar por Internet es cada vez mayor, y sus diferencias pueden ser muchas. Crear una plantilla para cada dispositivo consume muchísimo tiempo y obliga a implementar ajustados mecanismos de detección de plataformas.

El diseño responsivo resuelve todos esos inconvenientes. Pero su enfoque tradicional consiste en empezar diseñando una interfaz de escritorio para luego achicarla hasta que se ajuste a tablets y teléfonos. Si el sitio de escritorio tiene un diseño complejo o un alto volumen de contenido, la versión móvil exigirá simplificar el aspecto visual o eliminar información. Mientras mayor sea la reducción que necesitemos, más dificultoso será el manejo de media queries.

El enfoque mobile first propone lo contrario: empezar diseñando una interfaz para móviles para luego adaptarla a dispositivos con tamaños de pantalla superiores. Su creador, Luke Wroblewski, explica sus razones:

  • La navegación móvil está en auge. Cada vez más usuarios navegan desde celulares o tablets. Pensar primero en ellos ayuda a brindarles la mejor experiencia posible.
  • Los dispositivos móviles nos obligan a focalizarnos. Empezar por la interfaz móvil restringe el volumen de información que podemos mostrar. Esto nos permite reconocer cuáles son realmente los elementos indispensables y desechar los demás. Esta decisión puede trasladarse a la interfaz de escritorio.
  • Los dispositivos móviles extienden nuestras posibilidades. Smartphones y tablets ofrecen prestaciones como geolocalización, entrada por tacto, cambio de orientación mediante acelerómetro, etc. Esto significa un horizonte más amplio para los desarrolladores.

Aunque el porcentaje de tráfico móvil todavía puede ser muy bajo como para implementar este enfoque, es probable que en los próximos años mobile first se convierta en una práctica extendida.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce