Mobile friendly hotel booking website
More than half of travelers browse on a phone. Every page adapts to small screens.
Designed for phones first
All pages of the website, and the hotel owner panel, adapt to the width of the screen. There is nothing to configure: the layout changes automatically at tablet and phone sizes.
The mobile menu
On small screens the main menu collapses into a button with three lines. When the visitor taps it, the lines animate into a cross and a full-width menu opens right under the header. The menu contains the pages, the sign in and register links (or the account links of a logged-in user) and the List your property button. Tapping the cross, pressing Esc or following a link closes it.
The language dropdown stays visible in the header, so visitors can switch language without opening the menu. The header is white as soon as the visitor scrolls (and while the menu is open), so text never overlaps the page content.
Search, filters and results
- The search fields stack on top of each other with large touch targets.
- The filters of the results open in a full screen panel with an Apply button.
- Hotel cards are shown one per row with a large photo.
Hotel page and booking
On a phone the photo gallery, the tabs, the room list and the booking form follow each other in one column. The sticky booking box becomes a simple block. The checkout form uses the right keyboard for each field (e-mail, phone, numbers).
The owner panel on a phone
Hotel owners can check bookings, confirm a request or change a price from their phone: the menu of the panel collapses and tables scroll sideways instead of breaking the page.
Test your own content on a real phone. Very long hotel names or large images in descriptions are the most common cause of ugly mobile pages.
Last updated