Short answer
Detect the app and hide web-only elements (app banners, footers, install prompts), use a fixed bottom navigation for key sections, prevent accidental text selection on buttons, respect the status bar colour and safe areas, keep the first page fast, show pressed states on taps, and use the app's pull-to-refresh and offline screen. All of it is CSS and JavaScript on your site — no rebuild.
Hide what only makes sense in a browser
- “Get our app” banners and install prompts — they're already in the app.
- Long site footers with sitemaps and legal links — move legal links to a settings or about page.
- Cookie banner on every launch — make sure consent persists (the app keeps cookies; check your banner's storage).
html.in-app .app-banner,
html.in-app .site-footer .sitemap { display: none; }
The app mode snippet adds the in-app class.
Feel
- Bottom navigation for 3–5 main sections. Thumbs live at the bottom of the screen.
- No accidental selection:
user-select:noneon buttons, tabs and icons (not on content people may want to copy). - Pressed states: a visible
:activestyle so taps feel acknowledged. Remove the grey tap highlight with-webkit-tap-highlight-color:transparentonce you have your own. - Viewport:
width=device-width, initial-scale=1, and don't disable zoom — Play reviewers and users with low vision notice. - Colours: match the app's status bar colour to your header. Test contrast.
Speed
- Make the first page light: under ~1 MB, images in WebP/AVIF, chat and marketing scripts loaded after interaction.
- Cache with a service worker so repeat launches open instantly — see offline screen.
- Avoid full reloads for small actions: add to cart, like, filter — update in place.
Behaviour
- Back button logic: modals and menus should close on back (push a history state when they open), instead of leaving the page.
FAQ
Do I need a native bottom tab bar?
No. A fixed bottom navigation in your site's CSS works well. Some converters can add native tabs pointing at different URLs.
Should I disable zoom in my app?
No. It hurts accessibility. Design so that zoom is rarely needed instead.