Case study · Website
Sroja Coffee
A mobile-first website for an open-space coffee shop in Renon, Denpasar, Bali.
- Scope
- Design, front-end build, content structure
- Languages
- Indonesian and English
- Stack
- HTML, CSS, vanilla JavaScript
- 10homepage sections
- 72menu items in 9 categories
- 2languages, one-tap switch
- 0frameworks, just fast static code
The client, The brief, The approach
The client
An open-space coffee shop in the middle of Denpasar with outdoor, semi-outdoor and non-smoking indoor areas, plus a meeting room. Open every day until midnight.
The brief
Show the vibe, present the full menu, make group bookings easy and invite event collaborations. All on a site that feels like the brand, not a template.
The approach
Phone first, because a café site is opened at the table, on the way, or from a social profile. A bold editorial layout, real photography and light motion that never gets in the way.
A first screen that smells like coffee.
A slideshow of real photos from the café opens the site, with a giant wordmark that always fits one screen.
- 4 photo slides, 6 seconds each, with progress bars
- Photos are darkened so the headline stays readable
Open late, so it gets a stage.
One full-width section tells the story of morning, afternoon and night at Sroja.
- Live OPEN / CLOSED label calculated in Bali time
- Photo with subtle parallax
Four spaces, four clear choices.
Outdoor, semi-outdoor, indoor and the meeting room each get a card with one booking button.
- Each button pre-selects that area in the booking form
- Swipeable cards on phones
Favourites from one data file.
Colour-coded product cards with price stickers read from the menu data.
- Change a price in one place
- Category chips lead into the full menu
Booking on WhatsApp, no server needed.
The form checks the rules first, then opens a pre-filled WhatsApp message, so staff get complete requests.
- Live minimum-order calculator
- Checks opening hours, a 2-hour lead time and room capacity
Event collabs, impossible to miss.
The capacity of up to 150 people is the focal point, with the kinds of collaboration the café welcomes.
- Contact button opens WhatsApp with a pre-filled message
The full menu, scanned at the table.
72 items from one JSON file, with category tabs, search and a Signature filter. A small tool makes a print-ready QR card for every table.
- Sticky toolbar that follows the scroll
- The same page doubles as the table menu
On a phone
Designed on a phone, then expanded to desktop.
A bottom action bar keeps Menu, Directions and Reserve within thumb reach.
Full-screen menu 
Space cards 
Booking form 
Menu list
Stack
Small, fast and easy to maintain.
Structure
- Menu, shop settings and translations live in data files
- The language choice is remembered
- Packaged with Docker and nginx
Performance & SEO
- WebP photos in two sizes with srcset
- Coffee shop structured data (address, hours, location)
- Open Graph tags for link previews
Details
- Skip link and labelled controls
- Every animation has a reduced-motion fallback
- Open status and booking rules use Bali time
- HTML5
- CSS3
- Vanilla JavaScript
- Inter Tight
- WebP + srcset
- Docker
- nginx
- WhatsApp deep links
Want a site like this?
Tell us about your business. We will help you pick the right package, from a landing page to a booking system.