A tap wall that opens
A row of tap handles sits under the hero, and scrolling opens them into the list of what’s pouring.
SELECTED WORK / RESTAURANT & BAR
Shoreline Bar & Grill.
A neighborhood bar & grill in Long Beach, California
A website for a family-owned bar and grill in Belmont Shore, with a neon-sign homepage, a scroll-opened tap wall and hiring built in.
Visit live website (opens in a new tab)Explore the project
- CLIENT
- Shoreline Bar & Grill
- INDUSTRY
- Restaurant & bar
- OUR WORK
- Website design & development, local SEO
- WEBSITE
- shorelinelb.com
THE PROJECT
Burgers. Beers.
Sports. Spirits.
Shoreline Bar & Grill is a family-owned neighborhood bar and grill on 2nd Street in Belmont Shore, Long Beach, built around griddle-smashed burgers, rotating craft taps and every game on the screens.
We designed and built the site: a homepage, the full menu, a drinks and tap page, weekly specials and events, a careers page with an application form, a contact page with directions, and privacy and accessibility pages.
DESIGN STRATEGY
Your seat
at the bar.
The site is meant to feel like walking into the room. A glowing neon sign hangs over dark wood paneling, with a row of tap handles along the bottom of the hero. As you scroll, the taps open and the list of what’s pouring runs across the page, so the first thing regulars check is the first thing they see.
Everything a visitor comes for is one tap away: the menu, this week’s specials and happy hour, today’s hours, the phone number and directions to 5283 E 2nd St. The copy talks like the bar does, from “the plates the regulars defend like family” to a 404 page that says the page “just kicked.”
TYPOGRAPHY
Bricolage Grotesque in heavy capitals for headlines, Hanken Grotesk for text and spaced capitals for labels.
COLOR
Charcoal and dark wood with warm lamplight and amber, and a neon blue for buttons.
MOTION
A glowing neon sign, tap handles that open as you scroll and a moving list of what’s on tap, toned down for reduced motion.
HOW IT’S BUILT
Built to run
a busy bar.
The site runs on Next.js and React with Tailwind CSS. Pages are prerendered and served through Amazon CloudFront, dish photos go through Next.js image optimization as WebP, and every page generates its own social share image.
The forms do real work for the business. The careers form takes the position, availability, a résumé and a headshot. The contact form is sorted by topic. The mailing list offers optional texts, with a 21-and-over confirmation, clear text message consent and a hidden field that catches spam bots.
- FRAMEWORK
- Next.js and React
- STYLING
- Tailwind CSS
- HOSTING
- AWS, served through Amazon CloudFront
- SHARE IMAGES
- Generated for every page
- FORMS
- Job applications with uploads, contact by topic, email and text list
SEARCH, BUILT IN
Found on
2nd Street.
Most guests decide from a search result or a map listing, so the site tells search engines exactly what Shoreline is, where it is and when it’s open.
Restaurant structured data carries the address, map coordinates, phone, opening hours for every day, cuisine, price range and a link to the menu.
The full menu is published as Menu structured data, with six sections and 37 items.
Each open position on the careers page is marked up as a JobPosting, so openings can appear in Google’s job search.
Every page has its own title, meta description, canonical tag and share image.
An XML sitemap lists every page, and robots.txt points to it.
THE SAME WEBSITE. A SMALLER SCREEN.
PROJECT HIGHLIGHTS
The details
that make it work.
Specials front and center
Weekday happy hour and this week’s specials and events appear on the homepage and on their own page.
Hiring built in
Six open positions, each with JobPosting data, and an application form that accepts a résumé and headshot.
KEEP EXPLORING
Learn more about the services behind our work.
- Service
Web design & software
Custom websites, online stores and software built around your business.
- Service
Custom websites
A website designed and built around your services and your customers.
- Service
Ecommerce stores
Online stores with clear product pages, simple checkout and the integrations you need.
- Service
SEO
Technical fixes, content and local search that help customers find you.
- Service
Google Maps & local SEO
Your Google Business Profile and local listings, set up for nearby customers.
- About us
Client reviews
What clients say about working with our team.
YOUR NEXT WEBSITE
Planning a website
your customers will use?
Let’s talk about your business, your customers and what your website needs to do.