A café's website should provide guests with more information about the business, including the menu, prices, location, and operating hours. It's a bonus if the website offers online reservations, especially for more busy locations, or online ordering. The site should also include high-resolution images of the food and location.
When designing your own site, try Zarla's café AI website builder. It will design a site with AI-generated content for you in less than a minute.
Zarla checks that sites meet basic web standards for mobile and desktop. We also use Google's PageSpeed Insights, and WAVE, a service that evaluates accessibility for individuals with disabilities. PageSpeed scores and accessibility are important factors for search engine rankings. PageSpeed scores may not match user experience and can vary substantially.
Albany, New York, U.S.
Iron Gate Café is a family-operated café in downtown Albany. The images on the site featuring the simple but well-presented dishes and the setting are enticing and made me want to visit this café. The menu is available on the site, in both PDF downloads and online ordering integrations. It was also easy to find the company's contact details, although the operating hours could've been more prominent. However, the CTAs for ordering or joining the waitlist were prominently displayed.
WAVE reported only a small number of errors on the home page, including empty links and contrast errors. There are prominent CTAs on the site, consistent branding, clear pricing, and simple navigation.
The site is only semi-compliant with assistive technologies and, while links to the PDF menu were available, they were difficult to see on the desktop site. The contact details and business hours could have been more prominent, as they only appear in small font below the contact form.
The desktop site makes a splash. I found it inviting and simple to navigate, although I did miss the PDF menu link as it only appears in a small blue font in between two prominent CTAs for ordering online. The same is true of the catering menu. My real-world tests ran smoothly, but PageSpeed Insights noted slightly slower loading times on the home page, giving it a performance score of 63/100.
The mobile site highlights the text blocks and CTAs over the images, which are the stars of the desktop site. The location images are still clear and high-quality, but the images used as background to the text blocks become less visible.
The PDF download links stood out a bit more on the mobile site, simply due to the limited space. My real-world tests completely contradicted PageSpeed Insights reports, which listed slow loading times and large content with an overall performance score of 14/100 on the home page.
https://www.dineencoffee.com/index.php
Toronto, Ontario, Canada
The Dineen Coffee Co. is a boutique café located in a historical building in downtown Toronto and offers signature coffees and teas as well as baked goods and sandwiches. The site has a great modern aesthetic, with simple page layouts that are fun to navigate. It's an interesting, unique set-up, with the hero banner taking up the majority of the home page and images that I could scroll through, but I think it would be nice if they automatically rotated.
The site offers visitors separate pages for coffee, food, and locations with operating hours, so all the important information is easy to find. The online shop is a good option for people to get their favorite coffees or teas.
The site has a simple, clean aesthetic with minimal scrolling needed. All the essential information is concisely presented and the addition of the online shop made getting your favorite coffee, teas, or accessories easier.
This site is semi-compliant with assistive technologies and WAVE reported a large number of errors on the home page, including missing alternative text, empty headings, and contrast errors. I would have liked the option to view a detailed menu, rather than just categories of what's on offer, and the social media links were not clear enough.
The hero banner grabs attention on the desktop site, with high-quality images that shine. However, the arrows to rotate through the images and the logo are very subtle on top of the images, so you could easily overlook them. I only realized I could rotate through the images a while into my real-world tests. I also wish the social media icons were more prominent, as you can only see them in the menu banner on the home page and at the bottom of the shopping page.
The logo is even more invisible on the mobile site's home page, but the arrows to rotate through the images are immediately visible. The hamburger menu could be confused with the grid block on the right, which opens a short bio, social media links, and a grid of all the images in the hero banner.
What I found strange about the mobile site is that visiting any page caused the menu to disappear. I had to click on the business name at the bottom of the page to go back to the home page so that I could access the menu again — an unnecessary additional step. However, I did enjoy the clean simplicity of the mobile site. In contrast to my real-world tests, PageSpeed Insights awarded the mobile site's home page an average performance score of 51/100.
Cardiff, Wales, U.K.
Coffee Barker is a cafe located near top tourist attractions in Cardiff and offers breakfast, lunch, and brunch. The site has an inviting hero banner with important information right there on the home page, including directions, operating hours, and the menu, which is convenient. This single-page style creates a great minimalist design, with the hamburger menu linking you to the correct spot on the page. The social media links are also very prominent at the bottom of the page.
The single-page layout highlights the important information without extra pages that I'd need to scroll through. The social media links and newsletter signup are clearly available at the bottom of the page. I also liked the addition of "Things to Do, Places to See," which introduced the business's other offerings.
The site is not compliant with assistive technologies and WAVE reported a number of errors on the home page, including empty links and contrast errors. While there is a small gallery of images, I would've liked to see more images of the food and coffee.
While the hero image took up a large amount of space on the desktop site, I thought it was a nice welcome to the business. I thought the hamburger menu was somewhat pointless, as the website is a single page and I automatically scrolled through the whole site, but using the hamburger style does keep the menu unobtrusively to the side.
I liked that I could see the whole menu on the site, and didn't have to download it. The desktop site's home page scored exceptionally well on PageSpeed Insights, with 96/100 for performance.
Resized to fit the smaller screen, the hero banner doesn't take up as much space on the mobile site, clearly showing visitors that there is more to the page if you scroll down. I found that the font was a bit too small for easy legibility on a mobile screen, but the pricing on the menu was still clear.
Again, I didn't really need the hamburger menu, but as there's no back-to-top button, it was useful to jump back to the top of the home page. PageSpeed Insights reported some larger content on the mobile's home page, giving it a performance score of 71/100.
Sydney, New South Wales, Australia
Nth Degree Café serves coffee, burgers, and toasted sandwiches in Sydney. The site highlights the café's business aims and goals and lets customers see the menu with clear pricing. I thought the catering section was interesting, where you could custom order your catering package by selecting a product and the number of people it's for, then ordering online.
The contact details and social media links are always readily available on the site, and you can also make a reservation on the menu. The addition of a blog is unusual on a café's website and could be more prominently highlighted. It's also not clear that the link called "Best Coffee Shop in Sydney" is an "about us" page.
CTAs are prominently placed, along with social media links and contact details right in the site's header. The menu is available on the site, rather than as a PDF download, and pricing is clearly listed. The list of specials on the home page together with the images make for an enticing site.
The site is only semi-compliant with assistive technologies and WAVE reported a large number of errors on the home page, including missing alternative text, empty links, and contrast errors. The images lose quality and some text blocks get cut off on the mobile site.
The desktop site makes an impact with high-quality images and enticing specials, but I would have appreciated stronger contrast in the text versus the background, as I found it difficult to read some of the text blocks. While my real-world tests ran smoothly, PageSpeed Insights reported slightly slower loading times and awarded the home page a performance score of 89/100, leaving room for improvement.
In most of my real-world tests, I noticed that the mobile site is not well-optimized. Some text blocks get cut off and most of the images show poor resolution. However, the menu remains clearly legible and, while it involves horizontal scrolling, the catering ordering system is easily used.
The mobile site also loses the top banner holding the phone number, email address, and social media links. PageSpeed Insights reported a slow speed index on the home page, with an overall performance score of 61/100.
https://www.thebackyardcafe.info/
Cape Town, Western Cape, South Africa
The Backyard Café serves brunch, lunch, coffee, and fruit-based drinks like smoothies in the backyard of the owner's family home. I enjoyed the emphasis on the rustic backyard theme in the images and background, and the color palette chosen for the CTAs was also a great match. The contact details and social media links are clearly visible on the site, but I'm not sure why a "log in" option is needed on this type of website, especially as there's no online ordering option.
WAVE reported only a handful of errors on the site, including missing labels and some contrast errors. The design of the site is friendly and welcoming, subtly highlighting the business aesthetic. Clear CTAs invite customers to learn more about the various offerings.
According to accessScan, the site is only semi-compliant with assistive technologies. The site lacks customer reviews to build client trust, and the addition of a "log in" option doesn't make sense on this particular site.
The desktop site is simple and inviting, with the soft colors creating a welcoming and soothing effect that, when I read the business bio, complements the business's vibe. I enjoyed the concise text blocks which meant I didn't need to scroll much, and the menu was a good size for legibility. However, it wasn't immediately clear that you could scroll through the menu pages. The desktop site's home page scored an impressive 98/100 for performance on PageSpeed.
The mobile site is bright and vibrant, with a stronger color palette than the desktop site. The images shine in the vertical layout and really drew my attention. I found that the menu images were way too small, but fortunately, I could click on the image to enlarge it. It was also clearer than on the desktop site that I could scroll through and see more menu pages. On PageSpeed Insights, the mobile site scored an average of 54/100 for performance on the home page.
A café website introduces potential new customers to your business and provides essential information, such as the menu, pricing, operating hours, and location.
The "About Us" section of your café website should include information about the café itself, its ambiance, and food style. It's also nice to add information about the owner, especially if it's a family-owned café.
The main objective of a café website is to increase the visibility of the business and draw new customers to your café. You can also build your brand by offering take-out options, loyalty programs, or branded merchandise.
