Een mobielvriendelijke webapp bouwen

Een mobielvriendelijke webapp is een website die werkt als een app op een telefoon: hij past op het smalle scherm, heeft grote aanraakvlakken, laadt snel op mobiele data en kan als progressive web app (PWA) aan het startscherm worden toegevoegd. Voor de meeste nieuwe apps is dit de praktische eerste versie: één codebase, één link, geen store-beoordeling. Er zijn wel echte grenzen, vooral rond meldingen op de iPhone en diepe toegang tot het apparaat, en deze gids is duidelijk over wanneer je wel een native app nodig hebt.

Drie manieren om "op mobiel" te zijn

Een PWA is een responsive webapp met een paar extra's, dus je hoeft niet te kiezen tussen de eerste twee. Bouw eerst responsive en maak hem daarna installeerbaar. Voor een diepere vergelijking zie native versus progressive web apps.

Wat webapps op telefoons wel en niet kunnen

Browsers kunnen meer dan veel mensen denken:

• Camera en fotoupload, via standaard bestandsinvoer.
• Locatie, met toestemming van de gebruiker.
• Installeren op het startscherm met een icoon en opstarten op volledig scherm.
• Offline gebruik, door pagina's en data te cachen met een service worker (een achtergrondscript dat de browser voor je site draait).
• Pushmeldingen — met een kanttekening op de iPhone. Het webteam van Apple zegt dat webpush naar iOS en iPadOS 16.4 kwam voor webapps die aan het beginscherm zijn toegevoegd. Gebruikers moeten de app eerst installeren en daarna meldingen toestaan.

Waar native nog steeds wint:

• Diepe apparaatfuncties, zoals achtergrondlocatie, Bluetooth-accessoires, gezondheidsdata en widgets op het startscherm — ondersteuning in de browser is beperkt of verschilt per platform.
• Vindbaarheid in de app store. Als mensen in de store naar je zoeken, moet je erin staan.
• Zwaar offline werk, zoals grote datasets die op de achtergrond worden gesynchroniseerd.
• Grafisch veeleisende onderdelen, zoals zware games.

Als geen van die dingen centraal staat in je app, is een webapp waarschijnlijk een goede keuze.

Eerst ontwerpen voor telefoons

Ontwerp de lay-out voor de telefoon eerst en laat hem uitbreiden voor grotere schermen; andersom levert dat meestal krappe telefoonschermen op.

Lay-out

• Eén kolom op kleine schermen. Zijbalken worden een onderbalk of een menu.
• Geen zijwaarts scrollen. Brede tabellen worden kaarten of scrollen binnen hun eigen container.
• Leesbare tekst zonder in te zoomen — lopende tekst rond de 16px.

Aanraken

• Grote tikvlakken. Rond de 44 bij 44 pixels is een gangbaar minimum. Laat ruimte tussen de vlakken.
• Belangrijkste acties binnen bereik van de duim, dicht bij de onderkant van het scherm op hoge telefoons.
• Geen functies die alleen met hover werken. Tooltips en menu's die bij hover verschijnen bestaan niet op touchschermen.
• Het juiste toetsenbord. E-mailvelden moeten het e-mailtoetsenbord tonen, telefoonvelden het nummerblok. Vraag de juiste invoertypen aan.

Snelheid

• Kleine afbeeldingen op verstandige formaten, pas geladen als ze in beeld komen.
• Minder zware bibliotheken. Elke bibliotheek voegt downloadtijd toe op mobiele data.
• Skeleton-schermen of duidelijke laadstatussen, zodat de app nooit vastgelopen lijkt.

Veilige gebieden en de adresbalk

Op moderne telefoons kan inhoud onder de inkeping of de thuisindicator terechtkomen, vooral in een geïnstalleerde app op volledig scherm. Vraag om padding voor de veilige gebieden. Let ook op lay-outs van volledige hoogte die verspringen wanneer de adresbalk van de browser verschijnt en verdwijnt.

Installeerbaar maken (PWA)

Om installeerbaar te zijn, heeft een webapp nodig:

1. Een webapp-manifest — een klein bestand met de naam van de app, de korte naam, iconen, themakleur en hoe hij moet openen (meestal op volledig scherm, "standalone").
2. Iconen in de formaten die de platforms verwachten, inclusief een geschikt voor Apple-apparaten.
3. HTTPS, wat elke goed gehoste app al heeft.
4. Een service worker als je offline-ondersteuning of pushmeldingen wilt.

Vertel gebruikers daarna hoe ze moeten installeren. Android-browsers bieden meestal een installatiemelding of een menu-item; op de iPhone is het de deelknop, en daarna "Zet op beginscherm". Een korte melding "Installeer deze app" met die stappen helpt veel.

Offline-ondersteuning is waar PWA's ingewikkeld worden. Het cachen van de pagina's van de app zodat hij opent zonder verbinding is eenvoudig. Het toestaan dat mensen offline data wijzigen en die later synchroniseren is echt werk — vraag er alleen om als je gebruikers het echt nodig hebben.

Een eerste prompt die werkt

Bouw een webapp voor ons schoonmaakteam om de klussen van vandaag te zien en af te vinken. Ontwerp eerst voor telefoons: één kolom, grote tikvlakken, de belangrijkste actieknop vast onderaan bij de hand, geen besturing die alleen met hover werkt, geen zijwaarts scrollen, en de juiste toetsenborden voor telefoon- en e-mailvelden. Elke klus toont het adres (tik om in kaarten te openen), het telefoonnummer van de klant (tik om te bellen), een checklist en een knop "Markeer als voltooid" waarmee een foto kan worden gemaakt. Managers loggen in op een laptop om klussen toe te wijzen; op een breed scherm tonen we een tabel in plaats van kaarten. Maak het een installeerbare PWA met een manifest, iconen en een standalone weergave, en cache de app-shell zodat hij opent zonder signaal. Sla data op in een database.

Bouwstappen

1. Bouw eerst de lay-out voor de telefoon, met voorbeelddata, en controleer die in een voorbeeld op telefoonformaat.
2. Test op echte telefoons — minstens één iPhone en één Android als je gebruikers beide hebben. Emulators missen dingen zoals het schermtoetsenbord dat invoervelden bedekt.
3. Doorloop de hoofdtaak met één duim. Als iets twee handen of inzoomen nodig heeft, los het op.
4. Voeg het manifest en de iconen toe, installeer de app daarna op beide platforms en controleer icoon, naam en splash.
5. Beslis over offline. Begin met "opent zonder signaal en toont een duidelijke melding"; voeg offline bewerken alleen toe als dat nodig is.
6. Controleer de snelheid op een trage verbinding. De ontwikkelaarstools van je browser kunnen er een simuleren.
7. Voeg meldingen als laatste toe, als dat al nodig is — en plan een e-mail als terugval voor gebruikers die niet installeren.

Veelgemaakte fouten

• Alleen ontwerpen op een groot scherm. Controleer elk scherm onderweg op telefoonbreedte.
• Tabellen die overlopen. Maak rijen op kleine schermen tot kaarten.
• Kleine tikvlakken en links die dicht op elkaar staan.
• Formulieren die tegen het toetsenbord vechten — verkeerde invoertypen, velden die achter het toetsenbord verdwijnen, geen "volgende"-stroom.
• Aannemen dat pushmeldingen op de iPhone werken in het browsertabblad. Daarvoor moet de app op het beginscherm staan.
• Een App Store-app beloven die je niet kunt uitbrengen. Als de store belangrijk is, plan er apart voor.
• Een website verpakken en een app noemen. De App Review Guidelines van Apple vragen om apps die verder gaan dan een opnieuw verpakte website; een dunne wrapper riskeert afwijzing.

Wanneer je een native app nodig hebt

Kies voor native (of plan een native versie na de webapp) wanneer:

• Aanwezigheid in de store is hoe klanten je gaan vinden.
• Je afhankelijk bent van achtergrondlocatie, Bluetooth, gezondheidsdata, widgets of andere apparaatfuncties die browsers niet betrouwbaar bieden.
• Je app lange tijd volledig offline moet werken.
• Je gebruikers het verwachten — sommige doelgroepen gebruiken simpelweg niets dat niet in de store staat.

Publicatie in de stores heeft eigen kosten en stappen. Volgens hun eigen sites kost het Apple-ontwikkelaarsprogramma vanaf september 2026 US$99 per jaar, en een Google Play-ontwikkelaarsaccount eenmalig US$25, en elke release gaat door een beoordeling. Veel teams beginnen met een mobielvriendelijke webapp om te bewijzen dat mensen het product willen, en investeren daarna in native als ze dat zeker weten. Hoe je een app met AI bouwt behandelt die eerste fase van begin tot eind.

Bouwen met Mythex

Mythex bouwt webapps: je beschrijft de app in de chat en controleert hem in de live preview op de desktop en in een frame van telefoonformaat dat je kunt aanpassen. De documentatie heeft een prompt voor mobiele responsiviteit om lay-outs op kleine schermen te verbeteren. Je kunt een PWA-manifest en iconen vragen zoals bij elke andere functie, en daarna publiceren op een openbare link die op elke telefoon werkt. Op Pro kan Mythex de app ook als Android- en iPhone-app verpakken, die naar interne tests in Google Play en TestFlight wordt gestuurd. Zie de AI-webapp-builder of bekijk de app-sjablonen om te beginnen. Voor een uitgewerkt voorbeeld lees je hoe je een app voor gewoontes bouwt.

Veelgestelde vragen