Cómo crear una aplicación web adaptada al móvil

Una aplicación web adaptada al móvil es un sitio web que funciona como una app en el teléfono: se ajusta a la pantalla estrecha, tiene zonas táctiles grandes, carga rápido con datos móviles y puede añadirse a la pantalla de inicio como aplicación web progresiva (PWA). Para la mayoría de apps nuevas, esta es la primera versión práctica: una sola base de código, un solo enlace y sin revisión de tienda. Tiene límites reales, sobre todo en las notificaciones en iPhone y en el acceso profundo al dispositivo, y esta guía explica con franqueza cuándo necesitas una app nativa.

Tres formas de estar «en el móvil»

Una PWA es una app web adaptable con algunos extras, así que no tienes que elegir entre las dos primeras. Primero haz la versión adaptable y después hazla instalable. Para una comparación más detallada, consulta apps web nativas frente a progresivas.

Qué pueden y no pueden hacer las apps web en el móvil

Los navegadores pueden hacer más de lo que mucha gente supone:

• Cámara y subida de fotos, mediante los campos de archivo estándar.
• Ubicación, con el permiso del usuario.
• Instalación en la pantalla de inicio con icono y apertura a pantalla completa.
• Uso sin conexión, almacenando páginas y datos en caché con un service worker (un script en segundo plano que el navegador ejecuta para tu sitio).
• Notificaciones push, con una pega en iPhone. Apple, a través de su equipo de WebKit, indica que las notificaciones web llegaron a iOS y iPadOS 16.4 para las apps web añadidas a la pantalla de inicio. Los usuarios deben instalar primero la app y luego permitir las notificaciones.

Donde lo nativo sigue ganando:

• Funciones profundas del dispositivo, como la ubicación en segundo plano, accesorios Bluetooth, datos de salud o widgets en la pantalla de inicio: el soporte en el navegador es limitado o varía según la plataforma.
• Descubrimiento en la App Store. Si la gente buscará tu app en la tienda, tienes que estar en ella.
• Trabajo intenso sin conexión, como grandes volúmenes de datos sincronizados en segundo plano.
• Gráficos críticos para el rendimiento, como juegos exigentes.

Si ninguno de esos puntos es central en tu app, lo más probable es que una app web te funcione bien.

Diseñar primero para el teléfono

Diseña primero la versión de teléfono y deja que se expanda para pantallas grandes; lo contrario suele producir pantallas de teléfono apretadas.

Diseño

• Una columna en pantallas pequeñas. Las barras laterales se convierten en una barra inferior o en un menú.
• Nada de desplazamiento lateral. Las tablas anchas se convierten en tarjetas o se desplazan dentro de su propio contenedor.
• Texto legible sin hacer zoom: el texto principal de alrededor de 16 px.

Táctil

• Zonas de toque grandes. Alrededor de 44 × 44 píxeles es un mínimo habitual. Deja espacio entre ellas.
• Acciones principales al alcance del pulgar, cerca de la parte inferior de la pantalla en teléfonos altos.
• Nada que dependa del paso del ratón. Las descripciones y menús que aparecen al pasar el cursor no existen en pantallas táctiles.
• El teclado adecuado. Los campos de correo deben abrir el teclado de correo, y los de teléfono, el teclado numérico. Pide los tipos de entrada correctos.

Velocidad

• Imágenes pequeñas con tamaños razonables, cargadas al entrar en pantalla.
• Menos librerías pesadas. Cada una añade tiempo de descarga con datos móviles.
• Pantallas de esqueleto o estados de carga claros, para que la app nunca parezca bloqueada.

Zonas seguras y barra de direcciones

En los teléfonos modernos, el contenido puede quedar bajo la muesca o la barra de inicio, sobre todo en una app instalada a pantalla completa. Pide un relleno de zona segura. Vigila también los diseños de altura completa que saltan cuando aparece y desaparece la barra de direcciones del navegador.

Hacerla instalable (PWA)

Para que sea instalable, una app web necesita:

1. Un manifiesto de app web: un archivo pequeño con el nombre de la app, el nombre corto, los iconos, el color del tema y cómo debe abrirse (normalmente a pantalla completa, «standalone»).
2. Iconos en los tamaños que esperan las plataformas, incluido uno adecuado para los dispositivos Apple.
3. HTTPS, que cualquier alojamiento correcto ya tiene.
4. Un service worker si quieres uso sin conexión o notificaciones push.

Después, indica a los usuarios cómo instalarla. Los navegadores de Android suelen ofrecer un aviso de instalación o una opción de menú; en el iPhone es el botón Compartir y luego «Añadir a pantalla de inicio». Una nota breve de «Instala esta app» con esos pasos ayuda mucho.

El uso sin conexión es donde las PWA se complican. Guardar en caché las páginas de la app para que se abra sin conexión es sencillo. Dejar que la gente modifique datos sin conexión y los sincronice después es un trabajo real: pídelo solo si tus usuarios lo necesitan de verdad.

Un primer prompt que funciona

Crea una app web para nuestro equipo de limpieza para ver los trabajos del día y marcarlos como hechos. Diseñada primero para el teléfono: una columna, zonas táctiles grandes, el botón de acción principal fijo cerca de la parte inferior, sin controles que dependan del paso del ratón, sin desplazamiento lateral y teclados correctos para los campos de teléfono y correo. Cada trabajo muestra la dirección (toca para abrirla en mapas), el teléfono del cliente (toca para llamar), una lista de comprobación y un botón «Marcar como completado» que puede incluir una foto. Los responsables inician sesión desde un portátil para asignar trabajos; en pantalla ancha muestra una tabla en lugar de tarjetas. Hazla una PWA instalable con manifiesto, iconos y visualización standalone, y guarda en caché la estructura de la app para que se abra sin señal. Guarda los datos en una base de datos.

Pasos de construcción

1. Construye primero la versión de teléfono, con datos de ejemplo, y revísala en una vista previa de tamaño móvil.
2. Prueba en teléfonos reales: al menos un iPhone y un Android si tus usuarios tienen ambos. Los emuladores no detectan cosas como el teclado en pantalla tapando los campos.
3. Recorre la tarea principal con un solo pulgar. Si algo necesita las dos manos o hacer zoom, corrígelo.
4. Añade el manifiesto y los iconos, luego instálala en ambas plataformas y comprueba el icono, el nombre y la pantalla de carga.
5. Decide sobre el uso sin conexión. Empieza con «se abre sin señal y muestra un mensaje claro»; añade edición sin conexión solo si hace falta.
6. Comprueba la velocidad con una conexión lenta. Las herramientas de desarrollo del navegador pueden simularla.
7. Añade las notificaciones al final, si es que las añades, y planifica una alternativa por correo para los usuarios que no instalen la app.

Errores habituales

• Diseñar solo en un monitor grande. Revisa cada pantalla con el ancho de un teléfono según avanzas.
• Tablas que se desbordan. Convierte las filas en tarjetas en pantallas pequeñas.
• Zonas de toque diminutas y enlaces demasiado juntos.
• Formularios que pelean con el teclado: tipos de entrada incorrectos, campos tapados por el teclado, sin flujo de «siguiente».
• Dar por hecho que las notificaciones push del iPhone funcionan en una pestaña del navegador. Necesitan que la app esté instalada en la pantalla de inicio.
• Prometer una app de la App Store que no puedes entregar. Si la tienda importa, plánala por separado.
• Envolver una web y llamarla app. Las directrices de revisión de apps de Apple piden apps que vayan más allá de una web reempaquetada; un envoltorio fino corre el riesgo de ser rechazado.

Cuándo necesitas una app nativa

Pasa a nativo (o planifica una versión nativa tras la app web) cuando:

• Estar en la tienda sea la forma en que te encontrarán los clientes.
• Dependas de la ubicación en segundo plano, Bluetooth, datos de salud, widgets u otras funciones del dispositivo que los navegadores no ofrecen de forma fiable.
• Tu app deba funcionar del todo sin conexión durante periodos largos.
• Tus usuarios lo esperen: algunos públicos simplemente no usarán nada que no esté en la tienda.

Publicar en tiendas tiene sus propios costes y pasos. A septiembre de 2026, según sus propias webs, el programa para desarrolladores de Apple cuesta 99 US$ al año y una cuenta de desarrollador de Google Play cuesta 25 US$ una sola vez, y cada versión pasa por revisión. Muchos equipos empiezan con una app web adaptada al móvil para comprobar que la gente quiere el producto, y solo después invierten en la versión nativa. Cómo crear una app con IA cubre esa primera etapa de principio a fin.

Cómo construirlo con Mythex

Mythex crea apps web: describes la app en el chat y la revisas en la vista previa en directo, en escritorio y en un marco de tamaño de teléfono que puedes redimensionar. La documentación tiene un prompt para diseño adaptable al móvil para corregir diseños en pantallas pequeñas. Puedes pedir un manifiesto PWA y iconos como cualquier otra función, y luego publicar un enlace público que funcione en cualquier teléfono. En el plan Pro, Mythex también puede envolver la app como app de Android y de iPhone, enviada a las pruebas internas de Google Play y a TestFlight. Consulta el constructor de apps web con IA o explora las plantillas de apps para empezar. Para un ejemplo práctico, lee cómo crear una app de seguimiento de hábitos.

Preguntas