Web Design

16ish expert tips for designing a café or coffee shop website (part one)

29 July 2024
Studio Cotton founder Aime.
Aime Cox
Founder of Studio Cotton
Aime is utterly obsessed with sharing heaps of small business and website advice that’s easy to action
In this article (& jump to a section)
Free from AI

This article and all others on the Studio Cotton blog are written by humans. Please enjoy our opinions, expertise, advice, experiences, and typos.

Howdy partner, it’s the fourth edition of our blog series on Website tips for… – a series of articles where we give you the ultra-specific to-do list you need for your brand’s website.

No more “Do SEO” or “Improve your user journey”. I mean, I do want you to have bangin’ SEO (search engine optimisation) and a tidy user journey – but that kinda content ain’t my jam, and I don’t think it’s particularly helpful either.

We’ve already looked into podcast websites, photography websites and jewellery websites – now it’s time to share my expert top tips for designing an utterly delicious website for your coffee shop or café.

To set the scene, I love spending alllll my fun money on premium lattes from the fanciest of coffee shops. My web design co is situated two-doors-up from Full Court Press, which is consistently nominated as one of the very best coffee shops in Bristol in r/Bristol.

We also love writing about coffee shops – in fact, one of my very first blogs EVER for Studio Cotton was about coffee shop websites – all the way back in 2017. I shan’t link to it though, as TBH I don’t think it’s my best writing 😅

You can also check out 14 cool cafés and coffee shops for client meetings in Bristol – a guide popped together by our content producer Lyzi and myself, to help get more butts in the chairs at our fav spots.

This is all to say that I am sincerely, wildly passionate about helping independent speciality coffee shops & cafés to stay serving delicious lattes for as long as possible.

I know I can type like a bit of a clown, but this advice comes from my caffeine-fuelled heart (and my over-a-decade-of-small-business-website-expertise-filled brain too).

Let’s get into it.

 

1. We want your opening hours (including the special ones)

I have some pretty darn strong opinions on coffee shop website designs, so I guessed other people might too. For this reason, just as I opened a blank page to start writing this article, I also dropped a question sticker to the 17.5k people who follow me on Instagram.

 

Instagram screenshot with text asking "Can you recall a time where you tried to find info from a coffee shop's website and it wasn't anywhere to be found? Tell me about it plz"

 

I asked, “Can you recall a time where you tried to find info from a coffee shop’s website, and it wasn’t anywhere to be found? Tell me about it plz.”

Boy-oh-boy, did people tell me about it. I kinda flexed on my Instagram follower count – but I’ll be honest, most of the time my reach is dans le toilette.

However, this innocuous Q brought out allll the As from a whole heap of peeps who have had their pants frustrated-off by coffee shop websites.

Don’t worry, I’m gonna share every single response at the end of this two-parter article, but I’m starting with the most popular: customers wanna know your opening hours, and they want to be confident that they are correct.

I’ll be honest – this is often my biggest bugbear too. Every bank holiday and betwixtmas I find myself scrolling through Instagram profiles of my fav coffee shops to find out who is able to fulfil my latte-based needs.

When I’m designing websites for cafés – and any business that is open to the public – at the minimum I include opening hours in website footers, contact pages, and a visit page too.

 

Screenshot of the visit up page for TABxTAB cafe in London
Screenshot of the visit page by Studio Cotton/me, for TAB x TAB cafe in London

 

Please, coffee shop owners, pop those opening hours somewhere big and obvious on your websites. Add your holiday hours too, even if that’s to say you’re open as usual.

If your hours change regularly, I’d also recommend adding in a quick “last updated DD/MM” to assure your customers that your website is up to date.

 

2. Add your café’s  address and describe your location

My web design studio is located at 63 Broad Street, Bristol BS1 2EJ. It’s also located on the edge of Bristol’s Old City, opposite the registry office, a short walk from St Nick’s market, next to the crossroads with those two barbershops rocking the heritage vibes, and as we were a few days away when I started writing this article – just off the Bristol Pride parade route.

Picturing locations and navigating (without Google Maps) is way easier using local landmarks than road names. The cross roads I mentioned are where Broad Street, Corn Street, Wine Street and another street meet.

It’s the literal geographic centre of the city I’ve lived in for 34 of my 37 years, and I still cannot remember what that other road is called without looking it up.

Ok, I looked it up. It’s High Street. Frickin’ High Street.

 

Screenshot from Handmade Design Ashbourne with their visitor guide
Handmade Design Ashbourne includes local landmarks with travel times (website design by me, again)

 

Describing your location – as well as sharing the address – not only helps more customers to know where you are, but it can also grab you a bushel of extra SEO wins.

For example, if your website says “find us next door to Exeter St David’s railway station”, and someone Devon-bound Googles “coffee near Exeter St Davids,” you’ve just massively increased your chances of not only showing up in their results, but showing up in a top-5 spot due to a lack of legit competition.

You can also start to give suggestions in your location information, like letting your customers know if your iced lattes are in walking distance of a sunny park or dreamy waterfront.

 

3. Tell us about your travel and parking logistics

Before your customers get inside your coffee shop or café – they need to get outside – which means travelling from wherever they are, to wherever you are.

Travel information is another web design staple I like to include for all of our clients who welcome visitors. It should include all relevant major transport options – car, train, tube, bus – plus location specific ones, like the scooters you’ll find around Bristol, which I cannot get enough of.

 

Screenshot of visitor parking information from Lauren Aston Designs' website
A quick travel guide I popped together for the Lauren Aston Designs website

 

Make sure to add in any major factors that could impact travel too, like how Studio Cotton is inside Bristol’s Clean Air Zone (CAZ), or if you are subject to any pedestrianised areas or one-way access.

Promotion

SEO-ified product descriptions

We create utterly thorough and seductive descriptions that give your customers all the information they need and Google everything it loves.

 

4. Identify accessibility barriers for your disabled patrons

A couple of years ago, I needed to arrange a meeting venue in Bristol that had accessible loos and step-free access. Naïve ol’ me thought I could just spend 15 mins Googling ‘venue hire Bristol’, and find the most on-brand option that ticked my two boxes.

Instead, I spent actual hours trawling websites that had precisely zero info about toilets, and very little about steps. I ended up delegating the task to a member of my team so they could send out 15 emails and chase responses.

It got me pretty-ruddy-pissed-off that, what I would consider absolutely basic information, was so hard to find. Writing “the venue has level access” or “whilst we do have toilet premises on-site, unfortunately they are not fully accessible” is a 2-second job.

This was a classic situation where I didn’t realise how ruddy frustrating something was, until it affected me personally. I needed to book one venue, in one city, for one meeting.

For every customer you have with accessibility needs – this situation is with every venue, everywhere, all the time.

I guess that was a bit ranty, but hopefully my semi-rage implores you to add accessibility information to your website.

It’s totally understandable if there are barriers you cannot reasonably remove – like toilets down spiral staircases – just let people know in advance so they don’t have to DM you on Instagram or wait 3 days for a busy barista to get back to an email.

 

5. Menus, dietary requirements, and telling customers about your vegan milks

Here’s some very good news. When it comes to that precious SEO I keep dropping into this article – coffee shops have it pretty darn easy.

Before I get into it, if you wanna read more about SEO, you’re in luck, because we write about it all the time.

In short, SEO is the process of optimising a website design to rank as highly and as often as possible in Google searches, as visits that start from Google tend to be the most likely to convert and the highest spending.

In comparison, jewellery brands  (the opener of my Website tips for… series) probably have the biggest challenge. They’re competing against every other jeweller, and every other brand that sells jewellery – from couture design houses to Asda. Everyone brand that could sell jewellery to the same customer is a competitor.

But for coffee shops & cafés, your SEO competitors are limited to those within the same geographical area. If a nice Geordie wants to find a quiet local spot for a Sunday batch brew, a café in Bude isn’t gonna solve their website-searching challenges.

That takes your ring of SEO competitors down to maybe 5, 10, or even 100 other websites – which is sweet fluff-all compared to hundreds of thousands of jewellers.

So what does this have to do with menus? Well, search terms related to menu items and dietary requirements are some of the easiest to win, and least sought after.

Ok, you might have 6 coffee shops in your neighbourhood going for “coffee shop Portsmouth”, but its rare that they’re also be going to “coffee shop vegan cakes Portsmouth” or “halal cafe Portsmouth” or “gluten free bread cafe Portsmouth”.

This ultra-low level of competition means you can sweep up a tonne of incredibly relevant searches with just a sentence or two of text on your website. That’s beautiful.

And, also importantly – those Instagram answerers from earlier are also gagging for your menu – especially knowing exactly what vegan milks you have.

In fact, menu was the third most popular response. So what was second?

 

6. “Does your coffee shop allow dogs?”

I am not a dog person. I don’t dislike dogs, they just do nothing for me. However, tonnes of people have dogs and love their lil paws off, and want to know if they can bring them to your café, so I’d make space for that in your web design too.

Now, this could be the whole theme of this article, but for the most part your audience just wants answers to their questions, even when your answer isn’t what they wanted to hear. If pets aren’t welcome, pop that info on your visitors page. If small, dry dogs are welcome, write that. If muddy pooches are your thang, write that too.

I wanted to give a special shoutout in this section to Coffi Lab – this isn’t a brand I’ve worked with, but it was sent to me by Esther of Creatorship & Talk Event Cardiff and they’re so darn dog-friendly, that they made sure to pop this info in their website title and description.

 

Screenshot of an Instagram conversation where the meta data for the Coffi Lab website reads 'Dog-Friendly Coffee Shops in Monmouth & Marlborough
No ambiguity, all the the puppies.

 

Not only will this use of website design metadata massively help them to rank for dog café and local search terms, but as you can see from my screenshot of my chat with Esther, it meant I knew the café ticked the dog-friendly box as soon as my friend sent it to me, so I didn’t even need to ruddy click. Delightful. Doglightful.

 

7. Laptop policies for solo workers

Don’t worry, this is *nearly* the final policy-related entry in this article. Laptop use in cafés and coffee shops is somehow a wildly controversial topic.

I know this, because I made the terrible decision to post on Threads in an attempt to hear from UK coffee shop owners, and instead reached over 100k people and got 100+ comments from people not based in the UK, who don’t own coffee shops.

Whether you’re happy to have remote/self-employed workers camp out all day for a hot choccy and a croissant, or if a solo worker taking up a four-top for 4 hours with a latte would fluff-up your covers (and revenue) for the day – your audience wants to know.

Now, here’s where I thought I was a weird one – I know that on multiple occasions, I have poo-pooed a specific cafe for a 45-minute visit and writing session because I don’t know if they’re laptop friendly.

I am so worried about taking the piss that I don’t even bother to do something that most would consider to be totally reasonable. Thing is, after my Instagram Q&A and mildly-viral Threads post, I heard from heaps of people just like me, and thought of the even more heaps of cafés that missed out on our custom.

Again, the issue here is the not-knowing, and no matter what you do here, I’m sure you’ll be in someone’s bad books.

Having a laptops policy – and publishing that laptops policy on your website – might actually help you win more customers, even if it does piss-off the occasional piss-taker.

Oh, and if you’re wondering what a real UK coffee shop owner thinks, thankfully my buddy Johnny, one of the owners of Full Court Press did me a solid and sent over his thoughts…

It’s… about awareness and being considerate. It also hugely depends on the coffee shop. First of all, look for visual cues that the place may not want you to camp out, such as not having WiFi, covered plug sockets, limited seating or how busy a place is.

Secondly, there’s a difference between having a meeting where you are conversing with someone else and sitting in silence on a laptop. One of the beautiful things that happens in coffee shops is people talking, and meeting new people, it’s much harder to do that when the seats are taken up by laptop users.

If you do find somewhere that seems like a good spot to work on a laptop, be aware of when a place gets busy and people are looking for seats, be nice, purchase food and drinks and tip the staff. Don’t think about what is the minimum amount to spend vs the time sat, but how can one support an establishment that is providing a welcoming environment for people to work from.

When I worked as a freelance photographer, I would go to the bigger chains to sit and edit my photos on my laptop, then go get a caffeine fix from an independent speciality coffee shops as a break from staring at a screen!

 

Stay tuned for part two…

Who knew a gal could write nearly 2,500 words about café and coffee shop websites, and not even cover half her list of tips and tricks.

Well, for the first time, this entry in our Website Tips For… series is turning into a two-parter. In the second part, we’ll be much lighter on the policies and much heavier on the sales, merch, traffic generation, bookings & retail. Promise.

Until then, follow me on Instagram via @studio.cotton as that’s where I share new blog releases (and a whole heap more), or if I’ve already written it – hit the link below.

(I haven’t written it yet, sorry).

PS. Thank you to Greytone – another absolute favourite coffee shop of mine based in St Paul’s Bristol. They hosted our most recent brand photoshoot, which is where the featured thumbnail of this article was taken by Georgia de Lotz.

Sign up for good stuff

More like this, plus seven free checklists

Join our mailing list for sickenin’ advice from our blog, updates on our Bristol workshops, some sales promotions and the occasional lovely offer too.

Plus! Seven free small business checklists. They’re well good too.

Lyzi from Studio Cotton using an Apple iPhone.
Join the mailing list

Freebies & advice & website stuff

Join the Studio Cotton mailing list for heaps of free advice for creative small businesses. You’ll also get seven totally free checklists, and we think they’re ruddy wonderful.