Responsive design aims to improve the usability of your app on different devices and varying window sizes. Many consider responsive web design to be a task dedicated to CSS magicians. With Vaadin, the same end result can also be accomplished in pure Java. In fact, you can achieve much more than what is possible with plain CSS.
In the most trivial form, you can request the true size of the browser window via the Page object and make design decisions based on it.
UI.getCurrent().getPage().retrieveExtendedClientDetails(details -> {
if (details.getBodyClientWidth() < 800) {
add(new VerticalLayout(cards));
} else {
add(new HorizontalLayout(cards));
}
});
But there are a lot of other tricks you can do. I collected five tips from my own toolbox into an example application, which is essentially a full version of this blog post. 😀
Continue reading for more tips in the example app.
New to the Vaadin platform? Craft stunning full-stack web apps at lightning speed, from hobby projects to enterprise scale. Take it for a spin at start.vaadin.com.