Progressive Web App (PWA) development with Vaadin makes it easy to build responsive, mobile-friendly business applications using Java. Vaadin components are built with responsiveness in mind, and by using tools like the AppLayout, your top-level navigation is already mobile-aware — adapting well to both desktop and handheld devices out of the box.
However, creating a truly seamless and usable experience on smartphones requires more than built-in responsiveness. In practice, it takes testing, a bit of design thinking, and minor technical tweaks to make your business-grade app feel native and intuitive on mobile. Here are five tips to get you started:
1. Master the @PWA annotation
Delivering a mobile-friendly app isn’t just about responsive layouts; it’s about behaving like a first-class citizen on mobile devices. That’s where Progressive Web Apps come in.
Vaadin’s @PWA annotation gives your app a significant boost, making it:
- Installable on the user's home screen
- Fast-loading, thanks to automatic service worker caching
- Visually branded, via mobile icons and splash screens
Here's a simple example what you can configure via the annotation:
@PWA(name = "My App", shortName = "App", themeColor = "#3367D6")
It:
- Creates and registers a service worker to enable caching
- Defines short and long names for install prompts
- Generates app icons from your original placed in
META-INF/resources/icons/icon.png - Sets a theme color for the browser and device UI (like the Android/iOS status bar)
If you need more dynamic control — say, to inject device-specific meta tags — you can implement an IndexHtmlRequestListener.
Note, that in recent years, PWAs have been extending to desktop devices as well. For example Windows and macOS these days support installing PWAs so that they open up “full-screen” (without the browser chrome) on desktop as well.
2. Use emulators and simulators
Testing on real devices is great, but it’s often inconvenient and inefficient, especially when targeting multiple platforms and screen sizes.
Instead, leverage emulators and simulators during development:
- Android Studio offers reliable emulation across Android device types and is available across major operating systems.
- For iOS testing, Xcode simulators are only available on macOS, but they're the most accurate way to test on Apple devices.
Using these tools makes it easier and faster to test early, directly from your development workstation, without needing a stack of phones on your desk.
3. (Remote) browser inspector tools
Browser developer tools are still your best friends — not only for layout debugging, but also for tracking down touch-specific issues, latency bottlenecks, or CSS breakpoints. Chrome DevTools in Device Mode gives you quick insight into many layout issues and breakpoints, but beware that behavior (especially related to gestures or touch events) can differ from real devices, especially if your app runs as a “home screen web app”.
With real devices, or emulators/simulators, you can still utilize this same browser inspector with “remote debugging”. iOS devices (and simulators) can be connected to Safari and Android devices to Google Chrome.
4. Flatten the Data Grids
Data grids are a hallmark of desktop enterprise UIs, but they don’t scale well to smaller screens. Trying to cram six or more columns onto a phone display often results in a frustrating experience.
Instead, rethink how you present tabular data:
- Show fewer columns by default and offer a column chooser
- Combine columns into a single summary column
- Replace the grid with a card-based list or other mobile-friendly layout
Here’s a simple snippet using ResizeObserver to toggle between grid configurations:
ResizeObserver.get().observe(grid, dimensions -> {
grid.removeAllColumns();
if (dimensions.width() < 800) {
grid.addColumn(p -> p.getFirstName() + " " + p.getLastName())
.setHeader("Name");
grid.addColumn("age");
} else {
grid.setColumns("id", "firstName", "lastName", "age", "joinTime");
}
});
5. Use Icons (but do it right)
Icons help save space on smaller screens and are a natural fit for mobile UIs. But icon-only buttons have a big problem: they lack clarity, especially for new users. Touchscreens don't support hover tooltips, so there's no natural way to explain what an unfamiliar symbol means.
To avoid confusion:
- Avoid relying on obscure or custom icons without explanation
- Provide textual descriptions in overflow menus or helper dialogs
- Consider a hybrid approach: show icon-only buttons for speed, but mirror them in a text-labeled menu (e.g., opened from a three-dot or hamburger icon)
This approach acts as built-in documentation. Users can learn what the icons mean over time without guessing or making mistakes.
Wrapping up
Vaadin makes it simple to get started with mobile-friendly UIs, but with a few practical tweaks, your app can feel delightfully native even on the smallest screens. Whether it’s reworking your data grids, optimizing your app manifest, or clarifying iconography, small changes can have a big impact on usability.
Invest a little effort up front and your users will thank you, with smoother workflows, fewer frustrations, and maybe even a spot on their home screen.
Ready to take the next step? Get started with Vaadin and build business apps that work beautifully on any device.