Application for Desktop + Mobile - Responsive / Mobilefirst

We are currently looking into building a small reservation system where clients can reserve some resources in a calendar.
The “resolution” for the reservations is 1 hour, so the vaadin calendar would be ideal for visualizing it on devices with “enough” screen space.

But,
we also with to be able to provide a solution for the smartphone type users.

In traditional websolutions we would use mobile first + responsive design.
In Vaadin I currently see the touchkit solution, a responsive component

Which would be “the best” way to handle such different clients with a single vaadin application ?
Or if this is not possible, how do we descide which UI to show?

Offline features are not needed, but would be cool to test out…

André

You might want to ask these questions in the
TouchKit Webinar
starting in a few hours.

You usually really want separate UIs for mobile and desktop browsers, as using a desktop UI with a phone can be inconvenient. You may also want to have a separate UIs (or at least layouts) for tablets and phones. Some components in TouchKit work a bit adaptively in both, so it’s not always necessary.

With TouchKit, you need to define a
fallback UI
in a custom UI provider. The example given there just checks if the browser is webkit-based, but to check that it’s a (supported) mobile device, you would need some additional checks, like checks for “android”, “iphone”, and “ipad” (case-insensitively). The
WebBrowser object
should also be available in the UI provider, so you could use it for the logic. Just notice that some data, such as the handy isTouchDevice() method, are filled later from the client-side and are not available in the UI provider.

If you need separation of phones and tablets, you can do those with separate UIs or maybe a bit easier with logic in a single UI. The MobileMail demo does that.

If not using TouchKit, you can use similar logic, typically using the information available from the WebBrowser object in the UI.

I’m not sure how touchscreen friendly the Calendar is, I hope it works well enough.

Unfortunally I have not the time to attend the webinar today, just some other other meeting at the same time :frowning:

Calendar is touch-friendly to some degree, at least you should be able to tap and drag the events.

The new Parking Demo uses Vaadin Responsive to do some adaptive layouts for phones and tables (see the Tickets, Shifts and Stats views), you can simulate it using a desktop browsers by just changing the browser window width.

If you have lots of experience doing traditional websites/solutions using mobile first and responsive design, I would probably try to use those skills to layout Vaadin components (CssLayout is well suited for that), if you don’t really need/want the extra components and features from TouchKit. If we’re only talking about responsive design, TouchKit doesn’t really offer that much.