Cómo crear una app web optimizada para móviles

Una app web optimizada para móviles es un sitio web que funciona como una app en el teléfono: se adapta a la pantalla estrecha, tiene elementos 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: un solo código, un solo enlace, sin revisión de tienda. Tiene límites reales, sobre todo en las notificaciones del iPhone y el acceso profundo al dispositivo, y esta guía es clara sobre 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 los dos primeros. Primero haz la versión adaptable y después hazla instalable. Para una comparación más detallada, consulta apps nativas frente a aplicaciones web progresivas.

Lo que las apps web pueden y no pueden hacer en el teléfono

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 ejecuta el navegador para tu sitio).
• Notificaciones push, con una pega en el 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 y 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 sin conexión intensivo, como grandes conjuntos de datos sincronizados en segundo plano.
• Gráficos con exigencias de rendimiento, como juegos muy exigentes.

Si ninguna de esas cosas es central para tu app, es probable que una app web te sirva bien.

Diseñar primero para el teléfono

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

Diseño

• Una sola 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 en torno a 16 px.

Tacto

• Objetivos táctiles grandes. Un mínimo habitual son unos 44 por 44 píxeles. Deja espacio entre ellos.
• Acciones principales al alcance del pulgar, cerca de la parte inferior de la pantalla en los teléfonos altos.
• Nada de funciones que solo existan al pasar el ratón. Las descripciones emergentes y los menús que aparecen al pasar el cursor no existen en las pantallas táctiles.
• El teclado adecuado. Los campos de correo deben mostrar 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, que se cargan cuando entran en pantalla.
• Menos bibliotecas 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.

Áreas 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 área segura. Vigila también los diseños de altura completa que saltan cuando la barra de direcciones del navegador aparece y desaparece.

Hacerla instalable (PWA)

Para que sea instalable, una app web necesita:

1. Un manifiesto de app web: un pequeño archivo con el nombre de la app, el nombre corto, los iconos, el color del tema y la forma de 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 app bien alojada ya tiene.
4. Un service worker si quieres funcionamiento 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 en el menú; en el iPhone es el botón de compartir y después «Añadir a pantalla de inicio». Una nota corta de «Instala esta app» con esos pasos ayuda mucho.

El funcionamiento 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 cambie datos sin conexión y los sincronice después es 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 de hoy y marcarlos como hechos. Diseña primero para el teléfono: una sola columna, objetivos táctiles grandes, el botón de acción principal fijo cerca de la parte inferior, nada de controles que dependan del cursor, sin desplazamiento lateral y con los teclados correctos para los campos de teléfono y correo. Cada trabajo muestra la dirección (al tocarla se abre en mapas), el teléfono del cliente (al tocarlo se llama), una lista de comprobación y un botón «Marcar como completado» que puede hacer una foto. Los responsables inician sesión en un portátil para asignar trabajos; en pantallas anchas 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 el diseño para el teléfono, con datos de ejemplo, y revísalo en una vista previa del tamaño de un 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, arréglalo.
4. Añade el manifiesto y los iconos, luego instala la app en ambas plataformas y comprueba el icono, el nombre y la pantalla de inicio.
5. Decide sobre el modo sin conexión. Empieza con «se abre sin señal y muestra un mensaje claro»; añade la edición sin conexión solo si hace falta.
6. Comprueba la velocidad con una conexión lenta. Las herramientas de desarrollador de tu navegador pueden simular una.
7. Añade las notificaciones al final, si es que las añades, y prevé una alternativa por correo para quien no instale 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.
• Objetivos táctiles pequeños y enlaces demasiado juntos.
• Formularios que pelean con el teclado: tipos de entrada incorrectos, campos ocultos tras el teclado, sin flujo de «siguiente».
• Dar por hecho que las notificaciones de iPhone funcionan en una pestaña del navegador. Requieren que la app esté instalada en la pantalla de inicio.
• Prometer una app de la App Store que no puedes publicar. Si la tienda importa, plánala por separado.
• Envolver una web y llamarla app. Las Directrices de revisión de Apple piden apps que vayan más allá de una web reempaquetada; un envoltorio fino se arriesga al rechazo.

Cuándo necesitas una app nativa

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

• Estar en la tienda es la forma en que los clientes te encontrarán.
• Dependes 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 tiene que funcionar por completo sin conexión durante largos periodos.
• Tus usuarios lo esperan: 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 de desarrolladores de Apple cuesta US$99 al año y una cuenta de desarrollador de Google Play cuesta US$25 en un pago único, y cada versión pasa por revisión. Muchos equipos empiezan con una app web optimizada para móviles para comprobar que la gente quiere el producto, y luego invierten en lo nativo cuando ya lo saben. Cómo crear una app con IA cubre esa primera etapa de principio a fin.

Crearla con Mythex

Mythex crea apps web: describes la app en el chat y la compruebas en la vista previa en vivo, 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 para corregir diseños en pantallas pequeñas. Puedes pedir un manifiesto de PWA y iconos como cualquier otra función, y después publicar en un enlace público que funcione en cualquier teléfono. Con el plan Pro, Mythex también puede envolver la app como app para Android y para 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 completo, lee cómo crear una app de seguimiento de hábitos.

Preguntas