Necesita una estrategia móvil para su sitio. Tienes que elegir Responsive Design o un sitio móvil dedicado, ¿verdad? Tal vez no. Tal vez puedas mezclar y combinar una variedad de estrategias.
El equipo y yo estamos trabajando duro en CodePen todos los días. Pero somos un equipo de tres. Nuestra estrategia móvil es aprovecharlo lo mejor que podamos, ya que 1) tenemos tiempo y 2) tenemos buenas ideas sobre cómo manejar las cosas.
Ejemplo de una plantilla receptiva
Toma nuestra página de Actividad reciente. Esta página es tan simple que escribir un par de consultas de medios para mezclar las cosas y un poco de JavaScript para alternar los filtros es una solución decente:
Ejemplo de una plantilla específica para móviles
Ahora mire nuestra página de detalles en el escritorio:
Esta página es mucho más complicada. Comparte el mismo diseño que la vista Editor. Puede hacer clic y arrastrar el área de vista previa para hacerla más grande o más pequeña. Hay comandos de teclado. Dejarlo en tamaño de escritorio fue incómodo porque el texto era microscópico. El uso de las metaetiquetas adecuadas y hacer que se cargue en el tamaño de un dispositivo móvil generó un diseño muy incómodo y un desplazamiento incómodo, donde era posible.
Esta fue nuestra peor vista móvil en todo el sitio.
Podría haber ido a la guerra con esta vista con CSS y darle forma. Pero incluso si hiciera eso, se estaba cargando bastante JavaScript que ya no tenía ningún propósito. En cambio, decidí usar una plantilla específica para dispositivos móviles. De esta manera, pude tomar el control completo de HTML, CSS y JavaScript y solo cargar lo que se necesitaba. Pude reutilizar casi todo, porque abordamos todo desde una perspectiva modular. Podía elegir los parciales HTML, los módulos JS y compilar un nuevo archivo CSS solo con los bits que necesitaba, escribiendo muy poco desde cero.
La vista Detalles es mucho más útil ahora, sin mencionar que es más rápida.
Para los curiosos, usamos la gema del navegador y elegimos la plantilla para renderizar a nivel del controlador. Es un rastreo de UA, que no se siente muy bien, pero al menos es del lado del servidor1 y se basa en un proyecto de código abierto que se mantiene actualizado.
if browser.mobile?
render :template => 'details/mobile', :layout => "mobile-pages"
else
render :template => 'details/index', :layout => "pages"
endTambién para que conste, no hay nada que no pueda hacer en la versión móvil que pueda hacer en la versión de escritorio.
Ejemplo de la vista Uhm-Not-Quite-Ready
No todas las vistas en CodePen son excelentes en pantallas pequeñas todavía. El Editor, posiblemente la página más importante de la aplicación, no utiliza un diseño receptivo ni una plantilla móvil.
Funciona bastante bien en iPad y tabletas grandes, pero más pequeño no es genial. Esta vista no es algo que queramos hacer a medias. Dejar el diseño en tamaño de escritorio lo mantiene utilizable hasta que llegue el momento en que tengamos una buena idea y podamos abordarlo de frente. Es muy probable que sea una plantilla específica para dispositivos móviles.
Ejemplo de piezas específicas para dispositivos móviles en una plantilla receptiva
Echa un vistazo a nuestra vista de perfil:
Esta es una plantilla receptiva. Creo que funciona muy bien, excepto por el área de “pestañas” donde se divide en dos líneas. Eso es incómodo y no escalará a medida que agreguemos potencialmente más navegación. En cambio, servimos un parcial diferente justo en ese lugar que genera un <select> Navegación por menús en lugar de pestañas.
Un poco mejor, de todos modos.
es un proceso
No escribo esto en este blog para mostrar CodePen como este modelo de perfección en el diseño móvil. Ciertamente no lo es. Creo que es interesante pensar en enfoques híbridos e iterativos para el desarrollo móvil.
Sin dominios/URL separados, sin bases de código/repositorios separados, sin equipos separados. Todo junto como un gran monstruo. Como creo que debería ser.
muy relacionado
RESS: Diseño receptivo + Componentes del lado del servidor
1 Siento que el rastreo de UA del lado del servidor es un poco mejor porque 1) la plantilla correcta se sirve de inmediato, no es una redirección y 2) las pruebas de UA del lado del cliente significan servir una gran parte de JavaScript solo para ese propósito.