Back to the journal

If you’ve already been following our accessibility in design series, you’ll know that we’ve so far covered colour testing, typography and legibility. And if you’re new here; welcome.

This time round, we’re chatting about the impact of 

 on accessibility. As many as 20% of audiences worldwide require some kind of accessibility in the digital world – and so we’ll talk you through how we make sure our UI elements meet the W3C’s minimum AA standards.

Why are sizing, spacing and states important for accessibility?

Short answer: all three are key to usability. The spacing, sizing and overall alignment of your UI elements play a huge part in how your users interact with elements and differentiate between page content.

States are the visual representations we use to communicate the status of a component or interactive element.

States allows all users to navigate through your website without the use of a mouse and only a keyboard. If you’ve ever tabbed your way through a website, the visual representation you see to demonstrate the element you are on is a focus state.

And when it comes to accessibility, you may have users that simply don’t have access to a mouse – or, you could have audiences that aren’t able to use a mouse at all. That’s why states matter.

Here are some examples of elements and their states.

The holy grail of grid systems. In web design, the sizing and spacing of every UI element should be in increments of 8px. Why? Because not only will your designs convert seamlessly to rems (for development), but it makes designing for different screen sizes super simple. Every viewport is an increment of 8px, so every element within a page follows the same rule and gives you the best responsive results.

A couple of tips when it comes to spacing.

It’s important to make sure all of your UI elements that follow the 8px grid system have enough spacing so that accessible users can clearly differentiate and identify content.

Between 24-40px is a good range of padding to have within your containers or spacing between elements so that they are visually different to users with visual impairments.

All of your interactive elements should be accessible to see, click or touch.

As a general rule, these elements should be no smaller in width or height than 40px – the average size of a touch point on touch screen device, and therefore the size that’s most finger-friendly.

Accessibility in design - UI states, spacing and sizing

Show me more

From AI idea generators to the ever-faithful English dictionary––there are plenty of online copywriting tools that can help with content creation. But here are the most useful ones that take pride of place in our bookmarks. Down the rabbit hole you go…

The obvious choice. A go-to for those times when you need another word for something––or simply just need to check that random word that popped into your head means what you thought it did. They’re also great if you’re British but writing for a US audience, and vice versa. Plus, if you’re doing a play on specific words or phrases, it always helps to see your example in a sentence.

 If you want to see everything in one place, try 

. You can browse definitions, synonyms, mentions and more––all in one place. But brace yourself for a tonne of search results––some helpful, some not so much. If you’re the type that tends to head off on tangents (guilty) or just don’t like sifting through too much info at once, then stick to one tool at a time.

 is one I use all the time for coming up with new ideas. It’s super useful for things like campaign headlines, product names, or just good old-fashioned wordplay. Throw in any word and it will present you with a list of common phrases. We’re talking everything from 70s song titles to cockney rhyming slang.

You’ll get a list of phrases containing your word as well as phrases related to your word. Sometimes you’ll instantly strike gold, other times not. But you’ll almost always, at the very least, give yourself a few new directions to explore.

. Enter a word and you’ll receive a list of results that rhyme, all categorised by number of syllables (handy, huh?). You can also search for similar-sounding words, words with similar spellings, and more. Probably not one you’ll use on the daily––not unless you’re creating assets like this for 

: I used Rhyme Zone recently while creating pun-heavy product content for a bathroom brand. Cue the endless opportunities for toilet humour…

Derriere self-care (can we get a hell yeah?)

All-natural toilet sprays, reporting for doody

These flushable wipes are a U-bend’s best friend

If you’re in search of inspiration around product copy, go straight to the source. The biggest fans are usually the most willing reviewers, so check out the product pages of the brand you’re writing for (as well as their competitors) and see how users put their experiences into words. You’ll learn first-hand what the biggest benefits are, how the product makes them feel, and how it fits into their world.

 If you’re writing for a brand with a big personality, then bonus points to be had here. Loyal fans will go the extra mile to connect with brands they love––and the reviews section is the perfect place to prove they’re part of the club. Check out this review of a product called Clutch from the punk and playful sex toy site, 

––the all-American bidet brand that goes hard on humour:

 was recently recommended to me by naming pro, Caitlin Barrett. If you want to know the kinds of words people associate with a certain subject––let’s say you were creating copy about a new line of woollen jumpers for a sustainable clothing brand, then poetry about sheep, farming and the wilderness is the perfect place for inspiration. Poems are emotive, they lean heavily on imagery, and they can help us think outside the box when it comes to generating ideas. So it makes sense, right?

Poetry can also be great if you’re writing about topics you know little to nothing about (which, as copywriters, we all know can happen a lot). You can research something over and over on the web, but finding out how something makes a person feel? Hit up the Poetry Foundation, people.

One of the newer (and actually helpful) AI tools on the block is 

. Enter any word and it will present you with loads of suggestions across different categories, from ready-built acronyms to descriptions from various points of view. This one’s a go-to if you’ve really drawn a blank or can’t get the same train of thought out of your head. But brace yourself, things could get weird pretty quickly.

Crank up the temperature control by the search box to see how crazy things can really get.

Our top online tools for copywriters

Pre-pandemic, there weren’t many businesses that were fully remote. Fast forward to today, and it’s safe to say a lot of us wouldn’t accept a role that wasn’t (at least) hybrid.

We’ve been WFH from the very beginning. It’s part of who we are. It makes us more diverse and more flexible – and it’s definitely the reason behind some of our best work. But the remote life isn’t for everyone. In fact, WFH is something we have to work pretty hard at. Here’s how we’ve become better at working remotely.

Work-home, same-same – unless you spend most of your time at co-working spaces (which, by the way, we have a whole lot of love for). When your home doubles up as your workplace, you need to find a way to separate the two. We’re strict, we set boundaries, and we lean into the things that actually make us productive – like dedicated desk space and a cupboard full of those coffee beans we like. But we switch off when we have to. Because when you work from home, the last thing you want to do is take work home with you. So delete that Slack app from your phone and shut that laptop lid until tomorrow. You’ll thank us later.

Switching off at the end of the day is one thing, but making sure you show up that day is another. Yes, the freedom of working at home is amazing. But we don’t let that flexibility get in the way of our working day. Like all agencies, logging our hours helps us keep track of the time we’ve spent on-task. And if we know there are things that will lead us into temptation, then we shut them out until the working day’s done. It’s a great way to double the feel-good factor.

If someone needs something urgent from you, they can’t just walk over to your desk or collar you on the way to the kitchen. There’s a level of trust that comes with WFH, and that has to be respected. If you’re out for a few hours, then fine. Need to take a long lunch? Go for it – and mute your notifications while you’re at it. As a general rule, we always set our Slack statuses to say when we’ll be back. That way, our teammates know when to expect a response – and we get to actually enjoy our lunchtimes. But the number one thing we never do is just log off and leave teammates in the lurch. Seriously, not cool.

We become more conscious communicators and collaborators

The WFH life can be a lonely one – especially for smaller teams. For those who are familiar with the world of freelance, it’s a dream. But if you don’t have a lot in the diary, you could go hours without seeing someone. That’s why we make a conscious effort to check in, only cancel facetime when we have to, and basically – just chat. What we’re having for dinner, the shows we’ve been binging, places we’re planning on going – it all gets a mention on S8 Slack.

When you work in an office, there’s usually a buzz about the place. Home life, well it can get a little samey sometimes – especially during the winter months when it feels like you start and finish work in the dark. That’s why we make an effort to try new hobbies, mix up those afternoon walks, and even get creative in the kitchen come lunchtime. The kind of things that force us to physically step away from the desk and take a break. Who cares if that lunch hour is a little longer than an hour? WFH enables you to do these things, so just embrace it.

How we make WFH work for us

Get in touch

Here at S8, if we’re creating, then we’re collaborating. We’re big fans of workshops – especially when it comes to the discovery phase. Here are just a few reasons why we think they work so well.

We can do all the research we like, but nothing comes close to hearing about your product or services directly from you. You know your brand, you know your audience, and you know what you want from the project – and talking it through in person means nothing gets lost in translation. It also gives us the chance to collect qualitative data vs. just quantitative – something that makes all the difference during UX/UI discovery.

You get to know the people behind the project

It goes both ways. You get to know us, and we get to know you. Your likes and dislikes, the way you communicate, and what the project means to you personally. The kind of information you get from real conversations, not written briefs. And the kind of rapport you can’t build via Slack or email alone.

Planning and prioritising become a lot simpler

The very nature of discovery means you put the work in at the start to get the best results at the end. Workshops just take that planning phase to the next level. They give you a platform to talk about challenges and chat through priorities – and they help us highlight any areas where we need that little bit more clarity. Doing all of this early doors means no last-minute curveballs and fewer hold-ups later down the line.

The best creative ideas come from collaboration

Workshops are great for idea generation, but this is especially true for busy, siloed teams. It means a dedicated time slot in everyone’s diary when they can down tools and just bounce ideas off one another. No idea is a bad one – and by creating a super-relaxed setting where you can come up with concepts and refine them in real time, there’s a good chance you’ll strike gold.

Workshops give everyone the chance to have their say. You can map out scenarios, explore various ideas and concepts, and get different opinions from multiple stakeholders there and then. When it comes to design, everything is subjective. But workshopping a solution that works for everyone means we can all move forward way more effectively.

And we don’t mean the first-day-of-a-new-job-icebreaker kind of fun. We’re talking super-interactive FigJam formats complete with stamps, hold music, countdown timers, and avatars. Because it’s not just about trusting the process, it’s about having fun with it. And we’re all about mixing up work and play (in a good way).

Why workshops work

L&D is a big deal round here. Every other week, each S8 teamie gets a full day to focus on personal growth. Here’s why we think dedicated L&D days are the way to go.

It’s easy to talk the talk when we say we’re creating a culture of continuous learning. But L&D days really do help us do just that. Personal development isn’t put on the back burner or forgotten about until annual reviews roll around – it’s front of mind for all of us. We’re building better habits when it comes to learning new things, challenging ourselves and expanding our skill sets. And that can only be a great thing, right?

Because L&D shouldn’t be an afterthought

L&D shouldn’t be left for ad-hoc downtime. By putting two full days in the diary every month, we give ourselves a realistic amount of time needed to study, practice and learn. But most of all – we make our L&D more purposeful. Having that dedicated time makes setting (and smashing) SMART objectives way easier than if we were picking up the odd hour here and there. And seeing progress only spurs us on.

Back in the day, we’d spend the last four hours of the week on L&D (RIP 50/50 Fridays). But nowadays, each of us gets a whole day set aside in our schedule instead. We switch our Slack statuses to ‘Do not disturb’ for the day, say no to things that aren’t urgent, and generally just get our heads down. Try it – you’ll be amazed at what you can get done with a whole day of focus time.

L&D isn’t just reserved for junior teamies, or those who have the luxury of a little more time on their hands. Project managers, designers, copywriters, developers – we should all be allowed to learn new stuff. No matter how busy you are or whatever your personal goals may be, we all get the time we need to develop in our way. And the more we can learn from each other in the long run, the better our work will be.

Why we dedicate two days a month to L&D

More from the journal

In the design world, it feels like UX gets talked about a lot in terms of rules and best practices. But UI, not so much. So when we recently got to talking about our top UI design tips, we couldn’t not share.

It all started with one simple question:

UI design tips: a thread

Shopify’s latest seasonal updates have dropped. Worth the wait? We certainly think so. Here’s our round-up of the best feature updates from 

Simplify even the most complex catalogues

 feature will rescue us all from hours of admin. By mapping predefined variants to specific categories, managing and creating products in even the most complex catalogues just became super simple.

For example, name a new product "Wool sweater" and Shopify will automatically suggest the category of "Clothing" > “Shirts & Tops”. And once you’ve got the category down, all you need to do is fill in the recommended attributes. You can even upload photos of the same product in two different colours. Shopify will identify both and list them separately under the "Colour" attribute. Because it’s smart like that.

. You’ll only be able to use it if you’re on Shopify Plus – but, it makes the shopping experience even more seamless. Instead of hopping between separate PDPs to browse different colours, materials and dimensions of the same product, your users can see it all in one place.

But that’s not all. You can now give each variant its own unique URL, title, description and media gallery. A big tick in the SEO strategy box.

. Not only does it give you built-in product search functionality, it enables you to filter and sort collections of any size. Plus – you get a powerful recommendation engine, too.

But Shopify is now making its search feature even more versatile. By combining the classic keyword matching with semantic search, your customers can now search for products using natural language, like: "Red dress for a wedding" or "Something warm to wear in the winter". Told you it was clever.

Shopify is always finding new ways to customise the checkout experience. This latest update has meant us developers can now tinker with the 

 feature is continuously gaining new APIs, updated cart validation functions and more customisable UI elements, which means even more personalised checkout experiences aren’t far off.

For us, performance is always a biggie. We’re continuously testing and analysing everything from site speed to user journeys, so we were stoked to see that Shopify is making it even easier to keep an eye on performance.

, you can now monitor the performance of your storefront with real users' data and get insights on how to improve things. A great tool to make sure that your customers are always getting the best experience possible.

Picture this: you hired a professional photographer, rented a location and shot all your products from every angle. Weeks later, you realise you need to tweak an image or remove the background.

Well, the days of digging out the photographer’s details or finding a new date for a reshoot are over. With Shopify’s new 

, you’ll be able to make minor image edits on the fly. We can’t say for sure how great the results will be, but we’re keen to see how well it tackles simple tweaks.

Shopify Winter Editions 2024: our top picks

Join us

Recently, the S8 crew grew by two… Emmas. Both are based in the UK. Both are super talented. And both are here to tell us a bit more about what makes them, them.

I’m Emma B, S8’s newest PM 👋 My job consists of many things like scheduling our amazingly talented designers and developers, making sure projects are running on track, and being there for all of our client's needs.

I’m originally from the Lake District, so I was lucky enough to grow up surrounded by beautiful mountains and lakes. I now live in Harrogate, so spend a lot of my spare time exploring Yorkshire with my partner and our dog Panda. She’s a sassy miniature sausage dog and she really keeps us on our toes!

I spent a lot of my working life in London, working for companies such as Burberry and Universal Music. It was great to see how these huge corporations work from the inside. Plus, a big perk of working in music is you get to go to free gigs and events.

I love to travel and have recently got back from a trip to Japan. I had wanted to go for years so it was a huge bucket list moment. We also love Southern California (Santa Barbara is our happy place) so we try and go back every few years if we can.

Emma G, UX/UI Designer + Webflow Developer

I’m Emma – the newest member of the Design team 👋

My day-to-day role is all about using my knowledge of user experience and design best practices to create interactive wireframe prototypes and UI design concepts. Then, we’ll keep refining our ideas until we have something both we and our clients love.

I was born and raised in Yorkshire, migrating in the last few years from York to Leeds where I’m currently based. I live with my eccentric little Persian cat in an old Edwardian period home which I’ve spent the last few years renovating back to its former glory.

I’m an avid hobby collector and love learning new things and skills. When I’m not doing the odd DIY job around my house, I’m usually found figure skating, playing pool with friends, horse-riding or listening to a good podcast.

Introducing…Emma²

From projects to pets, you can bet there’s an S8 Slack channel for it. We use Slack for everything from general chit-chat to client comms – and we’re always searching for ways we can use it better.

Here are 6 tips for getting the best out of Slack and making everyday work a breeze.

It’s great to be in the know. But choosing what you get notified about and when is key. We’re pretty considerate when it comes to channel shoutouts, so we’ll notify teams (i.e. @designers, @pmz and @devs) for team-specific things – and only hit @here for the super important stuff. Some of us choose to only get notified during working hours, while others have set up alerts for specific keywords. But we aren’t afraid to mute channels or pause notifications if we need some focus time.

The ultimate to-do list tool. Hit the ‘Save for later’ icon on any messages or requests that you can't take action on right away and they’ll be stored in your Later list. You’ll then be able to organise items into ‘In progress’, ‘Archived’ and ‘Complete’ – plus, you can even set up custom reminders if you need nudging on anything time-specific.

Connecting your tools and apps to Slack means less juggling and jumping between things. We’ve synced up Slack with our most-used platforms and tools, including ClickUp, Figma, and Google, to make sure we’re immediately notified of any new tasks, comments, or requests. But our other favourite apps include Polly (for polls) and Timetastic (for time off).

Who doesn’t love a keyboard shortcut? Turns out Slack has a keyboard shortcut for pretty much anything. To check out all the shortcuts and familiarise yourself with the ones you’ll need, just hit Cmd + / (MAC) or Ctrl + / (Windows/Linux) in Slack.

Huddles are already great for ad hoc catch-ups. While the average booked-in meeting is 30 minutes, most Huddles tend to last around 10 – which already means a big tick in the productivity box. But you can use the Huddle Thread to drop in key action points, useful notes and more – then follow up afterwards or even ‘Save for later’ if you want to refer back to your notes during focus time.

We’ve recently set up Workflows to help fast-track the onboarding of new teamies. In a couple of clicks, new Slack users are added to all the social, project and team channels they need to be in – rather than waiting to be invited manually. Plus, we’ve created a built-in employee handbook in Canvas format so we can quickly access handy links and policies around things like booking holiday (yay!).

Our top Slack hacks for productivity

If there’s one annual conference we carve out time in our diaries for, it’s 

. Because there’s nothing we love more than nerding out with other devs about what’s new in the world of the web.

Here are our top takeaways from this year’s talks courtesy of Lead Developer, Alistair.

'Web standards: does anyone actually care?' by Michael R. Lorek

Michael R. Lorek kicked off the day with a talk about Web Standards, why they’re important and the state of the web currently as they relate to Web Standards. A perfect talk for this conference given it’s run by London Web Standards!

The key message Michael was getting at was that it’s really important to publish high-quality work on the web, and some of the things we need to consider as web developers to do so. He mentioned that HTML and CSS validation and testing the security of sites using pen-testing methods are really important for security and are very rarely done within the industry.

I definitely agree that for security and code maintainability, validation is really important. One argument he used was that it was also important for SEO. However he then went on to show that basically none of the top 1,000 sites have valid HTML – so you could argue that it doesn’t make much of an impact on SEO!

'It all means nothing in the end' by Amy Hupe

Amy Hupe is known best for her work on design systems and documentation, but her talk at SotB23 was on burnout and finding value and meaning in your work. It was absolutely fantastic, really making us think about how to work best in the tech industry whilst also caring for ourselves, our emotions and self-worth. It was also one of the funniest conference talks I’ve seen, perhaps only beaten by a previous talk of hers!

The inspiration of the talk was that Amy found she really didn’t care about her work. She had burnt out, lost the passion and drive for design systems and the tech industry, and was struggling with the fact her self-worth was somewhat tied up in her work. That’s a feeling that I’ve also felt before, when I’ve pushed with all I had to get a project over the line and then felt like sitting at a computer is the last thing I care for.

The best thing about this talk was the key points that Amy made about how best to structure the relationship we have with our job to keep ourselves validated and motivated whilst also enjoying and thriving in our work:

Having times where you’re not fully invested in your work is fine, but if you work a full-time job it’s not a solution for happiness.

We all have a “core perspective” that shapes how we see and interact with the world. Amy defines that as a combination of your skills, experience and values. By identifying that perspective and aligning it with our work it will help us be motivated, productive, feel successful and, most importantly, happy.

Goals we make should align with our core perspective, but also should be achievable. Setting up impossible goals is a great way to disappoint ourselves. In Amy’s own words: “**** Moonshots”

It’s important to feel validated and successful, and we come to rely on certain structures to achieve that. Within big organisations, that may be promotion trees. On social media, the number of likes. By relying only on those structures, you risk losing your main source of validation so it’s key that you can also validate yourself based on the goals you’ve achieved also.

Amy gave us all a lot to think about, and it was an absolutely brilliant talk. It’s only been a couple of weeks but already I’m feeling better about the changes I’ve made to how I make goals, aligning my work alongside my core perspective, and making sure that both within and outside of work I’m enjoying how I spend my time!

'Accessibility is easy… except for when it isn’t' by Ian Lloyd

I always love an accessibility talk. State of the Browser always has at least one each year and they’re fantastic. And this year was no exception. Ian Lloyd gave a fantastic overview of some easy and really tricky accessibility points, featuring lots of examples, some serious stuff and also some great laughs. I loved that format – it makes me think I should put more jokes, memes and references in my talks…!

At the beginning, Ian covered some simple accessibility issues that most of the audience were familiar with, things like image alternative text, using headings and buttons etc. We then had a run through of “Accessibility Horror”, with some awful examples of developers getting it completely wrong in silly ways!

That was the “Accessibility Is Easy” bit done!

The “Except for When It Isn’t” for the rest of the talk was absolutely fascinating, and really went into the details of how you can make really complex UIs accessible. When it comes to accessibility, I know my stuff and do audits and such, but it was really evident how much experience Ian has – fixing some UIs I wouldn’t even know where to start with! It was extremely interesting to see how he went about working out interfaces that don’t match common patterns, like tab controls within a table, a theatre seat picker, multi-select menus or the “DiaMenuClosure” he showed.

Really inspiring and balanced, so it offered some new information to everyone in the audience — something very tricky at a conference with a fair few accessibility experts attending!

'Stop using JS for that: moving features to CSS and HTML' by Kilian Valkhof

I was really looking forward to Kilian’s talk because he has a really interesting insight on browsers and development. He develops the web browser 

, which is designed to make it easier for developers to debug and test the websites they build. That gives him a really interesting perspective on the industry, seeing what tools developers are using and what they’re testing, whilst also having insight into what makes a browser tick. This talk wasn’t about Polypane though, it was about HTML, CSS and how they can take the place of JavaScript.

It was a really good review of some of the new-ish features of HTML and CSS that have had support for a few years, but aren’t always being used in favour of JavaScript replacements. Browser vendors listen to developers and have been implementing features like accordions, input suggestions, smooth scrolling and dialogs, all in HTML and CSS. I’d recommend watching the recording to see them all, Kilian does a great job of demonstrating!

Two tips he mentioned that I found really interesting in particular was how the CSS appearance:none works to make replaced-elements styleable (I never knew what it did), and to use outline-color:transparent on a focus outline for free support for forced-colors mode!

This was a thematic masterpiece, with an ocean-themed talk on Progressive Web Apps with sea graphics and Attenborough-style narration throughout! Diego gave a really interesting overview about PWAs, their history, how they work and what the future holds for them.

It was looking at some of the future directions and options that really caught my attention, including some of the really challenging issues with implementing them. We want users to be able to easily see a site is installable, but don’t want spam popups like we have with web push notifications. We want to offer lots of new capabilities but how should we restrict them?

Although some of those decisions, challenges and options are really tricky and I don’t have an answer for them, Diego’s talk brought them to my attention and made me think. It also reassured me that even if I don’t know what the answer is for PWAs, the web community is wary and mindful of getting it right.

'Cache rules everything' by Harry Roberts

Harry has done some fantastic web performance talks and this is no exception. He went in-depth and focused on the HTTP cache, how to set it up correctly and some of the pitfalls and mistakes people commonly make. We were asked to put our hands up if we knew caching headers in-depth — I raised my hand and oh boy I was proven wrong!

Once again check out the recording as it really goes into the exact details of how caching works, what headers to keep or remove, how to come up with caching strategies and how caching works on public and private resources. It really was a complete and fantastic explanation of something that seems simple but really isn’t!

'Speedy dev insights' by Chris Ferdinandi

Chris put together three short pre-recorded videos that were played between longer talks, giving a bit of a demo and some tips on a range of development stuff.

The first was building a custom Web Component, which are web-native ways to build custom components in JS. I’ve found Web Components can be a bit tricky to learn, but Chris made them look easy!

 two was on data binding using Proxies, which is super cool! In our websites we use Proxies through Alpine but it was really cool seeing how you can also work with them directly!

The final insight was a rapid-fire run through of 13 smaller tips, really delivering on the “Speedy” promise! There were some great tips in there that you could use in day-to-day development. Unfortunately, he then went and spoiled all the good favour he’d gathered from the audience by trolling us and mispronouncing GIF. What a shame!

'Exploring the potential of the Web Speech API in karaoke' by Ana Rodrigues

As the end of the day approaches at a conference, and the attendees start looking forward to the afterparty and dinner, it can be a bit tricky to keep everyone engaged. Ana had absolutely no problem with that however, with a brilliantly entertaining, fun, and interesting talk on karaoke in the web browser!

The Web Speech API is a new in-built browser feature that allows developers to receive audio input and easily turn it into text, without need for a third-party service. Ana decided to build a karaoke machine using web technologies and added the Web Speech API to score her singing!

It was great fun and a really good walkthrough of how she built it and how the Web Speech API works! It was also really impressive for her demonstrating the karaoke machine by singing, during her first conference talk!

That final talk got everyone excited and energised again, just in time to go to the pub for the afterparty!

What we learned at State of the Browser 2023

Last weekend, we all downed tools and gathered in Prague for our annual team retreat. Four days, 24 teamies, and more merch than you can shake a schnitzel at. Here’s the full round-up of what went down at this year’s S8 (+P9 👀) team retreat.

Our base for the week was Prague’s Mama Shelter: once a luxury communist hotel, now home to vintage cartoon reels, a restaurant DJ and foosball. The Cyprus crew (who arrived the night before) and the other early arrivals got stuck into some Georgian dining and castle-touring. But it wasn’t long before we were all united (some of us for the first time ever) over drinks in the bar that evening.

The next day was all about Czech culture. Coffee shops, beer halls, and chimney cakes – all while soaking up the last of the autumn sunshine. That evening, we learned about the history of the old town, the new old town, and the old new town during a city tour with a night watchman. Our favourite fact? Once upon a time, the city’s residents were told to drink three litres of beer a day to stay healthy. They even used beer to put out fires (but we have a feeling a few were started on purpose).

Day three kicked off with escape rooms, where we divided and conquered everything from zombies to dark magic. We only found out afterwards that those who escaped first got to watch the remaining teams struggle. But one thing we were all 100% certain of was that “our room was the hardest”. After testing our teamwork skills, our resident photographers Bruno, Biel and Nate got snap-happy at Studio 71: a quirky basement studio and backdrop for our all-new team photos.

On the final evening, we all headed to the Medieval tavern, 

, for a traditional five-course feast in a setting that was straight out of a movie set. Think sword fighting, fire shows, and more Czech food and beer than we could manage. And for the final nightcap? A visit to one of Prague’s best absinthe bars, of course.

It’s not often we all get together. So every time we do, it’s pretty special. Shout out to Ellie, this year’s t-shirt and sweatshirt designer, and Sam and Jack – the merch mules who got it there safely. Big up Biel, for his ability to make any BTS photo look incredible, and also the trip’s official after-party planner, Rachael. But a special mention to Fran and Mario – for letting us put our out-of-offices on for four fun-filled days so we could hang out IRL.

S8 (+P9) team trip 2023: Prague

How to give better design feedback from a web design perspective

. But this time, we’re talking branding. Because great feedback means fewer delays and a new visual identity that everyone’s stoked about. Let’s go.

Branding tells a story – of who you are, where you’ve been and where you’re headed. The best brand identities have depth, character and meaning. It will look the way it does for a reason. And if that rationale isn’t immediately clear, then just ask. Your designer should be able to talk you through any exploration work, previous iterations, and how they reached the endpoint. If you feel they’ve swayed off track, then gaining a better understanding of the bigger picture can help set them straight.

We can’t emphasise this enough. Your brand is a many-faceted thing, so think about every single detail. Colours, typography, spacing, illustration – even photography style. It all comes together to create something that’s uniquely you. Take the time to say what you like, don’t like and why. And that goes for every single element. This will help get rid of any guesswork and prevent delays further down the line.

A brand refresh should stand the test of time, and this will always be top of your designer’s mind throughout the rebranding process. But it’s also worth considering this at every feedback stage, too. Does it align with your overall company strategy? Have you thought about swag placement, app designs, or any other assets you have in the pipeline? Your brand will naturally evolve, so you can afford to make small refinements. But you still want it to work for the long term.

The great thing about design is that it’s subjective. And when you’re going through something as big as a brand refresh, the more opinions you can gather from stakeholders, the better. Just be sure to resolve any conflicting comments before you share them with your designer. Plus, keep everything to Figma. It’s more efficient that way.

Designers can do amazing things, but they can’t do the impossible. Be conscious of contradictory feedback. Plus, be aware of accessibility, too. Your designer designs with users in mind, so if it doesn’t meet the minimum accessibility requirements, it simply won’t work. And finally, you might love the look of a competitor, but you aren’t them. So instead of asking to imitate their brand, focus on celebrating yours. The results will be way more inspiring.

Client-agency 101: How to give great design feedback (branding edition)

Providing feedback is part and parcel of working with an agency. But knowing how to give great feedback as a client matters more than you think. Fewer delays and pushed deadlines, less back and forth, and most importantly – the finished result you were hoping for. Here’s how you do it.

Say what you do like, what you don’t like, and always expand if you can. For example, instead of saying ‘I don’t like this, can we try something else?’ try ‘I like this style of font, but can we see it in a different colour?’ Or ‘I don’t think this photography style works. It feels too old school for our brand’ rather than ‘This image isn’t for me’. It’s this kind of detail that will help your designer nail it the next time round.

Provide everything, everywhere, all at once

Take the time to review the entire design so you can submit all your feedback at once. And the same goes for any other stakeholders who plan on providing feedback. Receiving everything at the same time, rather than in multiple rounds, helps us action amends more efficiently and minimises any hold-ups.

If the reasoning behind some design decisions isn’t clear, then ask for clarity. Your designer will have done everything for a reason. So if it will make providing feedback easier, then ask about previous iterations, design exploration, or just how it aligns with your brand mission, values and purpose.

Figma is great for giving feedback. Comment on specific elements, tag team members, and store all your thoughts and ideas in one place. Thinking of it as your central source of feedback means comments don’t get lost in Slack channels, inboxes, or Trello boards. It also lets your designer respond to you directly in threads if they need clarification.

Give guidance, but let your designer design

Screenshots, animation examples – even photography styles. If there’s inspiration that you feel will help the design process, then it’s always going to be useful. But still be open-minded enough to let your designer take the lead. They’ll know what works and what doesn’t and will have a clear overall vision for the project. So it’s important that feedback doesn’t impact creative freedom.

Client-agency 101: How to give great web design feedback

Here at S8, annual leave is a biggie. Everyone gets 28 days to cash in whenever they like. Plus, local bank holidays, a long Christmas shutdown, and extra days for our team retreat. Here’s why we think more time OOO is the way to go.

As a fully remote agency, WFH is all we know. But when you work from home, it’s even more important to get that work-life balance down. Your workplace doubles as a place for downtime. And although we’re big on flexible working – and choosing when, where and how we work best – it’s still important to step away from the desk and fully disconnect. Because with regular breathers come fewer burnouts and big productivity boosts.

Different locations mean different bank holidays

The fact we’re based in different countries means we all benefit from different bank holiday dates. Although we all get roughly the same number (except for lucky Biel in Barca), having that extra annual leave means we can celebrate our home country’s traditions the way we want to. Tag extra days onto already long weekends, travel to meet family during big festivities like Easter, or (if you’re based in the UK) turn the month of May into one big holiday.

A bigger holiday allowance means more flexibility when it comes to taking time off. Instead of weighing up whether to take time off at Christmas or squeeze in a last-minute summer getaway (especially if you’re holding out for great British weather) – you can do both. Plus, more holiday to spend means more time to really disconnect (or just get over the jetlag) and come back to your desk fully refreshed on Monday.

We all know that weird period between Christmas and New Year. You have no idea what day it is – or what the heck you should be doing. But in our book, the last thing on our minds should be work. That’s why we give ourselves two wonderful weeks to switch off, hit reset, and simply celebrate the holidays however we want to. It’s the best way to reflect on the year and come back with a brand-new focus for the year ahead.

Because there’s a whole world out there

We love what we do – partly because of what it enables us to do. Visit new places, experience new things, tackle house renovations, or just go hard on our hobbies. Those extra days of annual leave mean we can take time out for what’s really important. Plus, it means more travel/foodie/DIY tips for the rest of us.

Why our holiday allowance is hefty

Shopify's Summer '23 Editions is here – and there’s some pretty major announcements on the development front. Our Lead Dev, Alistair, outlines the biggest and best of this latest feature drop.

Bundles have always been something that is annoying to do on Shopify. We could build the functionality ourselves, but it took a surprisingly large amount of work. The alternative? Pay for a third-party app which adds additional dependencies and complexity to the site.

Now Shopify has implemented its own 'official' bundle system. It's only 'fixed' bundles at the moment, which means store owners need to specify exactly which products are in the bundle. But we're hoping that 'flexible' bundles — where a customer can pick which products they'd like — are added soon!

This one is huge! We've been working with subscriptions apps for a long time and the addition of an official integration will really shake the scene. Subscriptions are a core part of loads of businesses and we're all really excited to see how this could streamline and simplify subscription management.

The official app looks pretty simple compared to the big apps – and for a really well-optimised or custom setup, they'll still be the best option for a long time at least. But, for simple setups, Shopify’s new app looks ideal and will definitely open up subscriptions to more stores.

'Duplicating' a store has previously been pretty hard. We actually built our own internal tools to make it easier to spin up a staging store or to create a new store for a multi-currency setup.

Now when you create a new store, you have the option to copy your product catalogue, files and themes to the new store. Super handy for development and if you need multiple stores that are similar!

This is a really interesting and easy way to sell products from other brands in your store  – or, become a supplier yourself. You can choose a product from another company, add it to your store, and when someone purchases it, they handle the order, shipping and process for you!

Most exciting for me though is that you can do both! I love the idea of a group of stores with similar products 'teaming up' as suppliers and retailers to give customers the best possible purchasing experience.

So this might sound like the most boring sounding feature to come out of this Editions, but it's actually got us developers jumping for joy.

The previous limit of 100 variants sounds high, but it’s actually easily reached. I once built a clothing store that sold a specific jumper in Loose and Slim fit, in 6 different sizes and 10 different colours. That’s 120 variants.

So, the upcoming increase to 250 variants will make it much easier to build products with lots of options.

Customising content across B2B and Markets

Only a few weeks ago, a couple of our developers were wishing for this exact feature! Clearly someone at Shopify somehow got the message!

Shopify has added a 'context switcher' to the theme customiser, allowing store owners to change the content of the site depending on the customer’s Market (based on their location) or if they're a B2B/Wholesaler. You had a bit of control previously using Localisation, but it was pretty difficult to use, particularly with sections and blocks. Now if you need to change the content, images, products on display or anything else in the customiser per country or currency, it's as simple as going to that dropdown.

It'll be interesting to dig into how this feels to use, as it looks like it might be pretty easy to get confused about which context you're editing. Hopefully it's really clear and Shopify adds features to sync changes to make it easier to manage.

During the Shopify Editions Winter '23, I voiced our concerns about the deprecation of checkout.liquid and how Checkout Extensions didn't have all the functionality we needed. This is a definite step in the right direction from Shopify, giving a clear route forward for upsells and recommendations on the checkout page which were uncertain until now.

Accessibility in design - UI states, spacing and sizing

Why are sizing, spacing and states important for accessibility?

What are UI states?

Button states

Input fields

Carousel controls

Filters and lists

Sizing and spacing your UI

Spacing 101

Sizing 101

Our top Slack hacks for productivity

How we make WFH work for us

Let us take you further than you’ve ever been

Accessibility in design - UI states, spacing and sizing

Why are sizing, spacing and states important for accessibility?

What are UI states?

Button states

Input fields

Carousel controls

Filters and lists

Sizing and spacing your UI

Spacing 101

Sizing 101

Our top Slack hacks for productivity

How we make WFH work for us

Let us take you further than you’ve ever been SCHEDULE A CALL

Let us take you further than you’ve ever been