I got myself confused about this the other day, went around searching for an answer and came up empty on finding something clear. The answer actually is quite clear and I feel a little silly for not knowing it.
With it in place, like this:
<video src="..." controls playsinline></video>
Mobile browsers, will play the video right where it is instead of the default, which is to open it up fullscreen while it plays.
Here’s what it looks like withoutplaysinline:
Here’s what it looks like withplaysinline:
(If you’re like me, you tried to play that video from the play button on the video in the video, only to realize it’s not a real play button. ?)
(While we’re getting meta, I’m making sure those videos above have playsinline on them right here in this blog post.)
Note that the user still has the ability to go fullscreen with the video even in the playsinline scenario, so I’d say it’s probably a smart default choice. It’s not literally the default — you have to add it, but you know what I mean.
One of the places this shows up regularly is in the attribute soup that is required to make video be a GIF-replacement:
If you have all four of those attributes, the video will actually autoplay (and loop) on mobile browsers, just like a GIF would, only with far better performance. You can skip loop if you don’t want that, but all the other three are required if you want the autoplay attribute to work.
I also learned that the (only?) way to get a thumbnail to show up on mobile (at least for iOS) is to use a poster attribute. Even if you preload, you don’t see anything but blank white unless you have a poster.
If you can’t be troubled to deal with a poster, you might wanna toss a border or something on video elements to sort of visually block off that area. Otherwise, the floating play button is a little awkward.
When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can.
In this post, we’ll make even more particle magic using the Web Animations API to create a firework effect when clicking on a button.
Browser support
At the time I’m writing this article, all major browsers — with the exception of Safari and Internet Explorer — at least partially support the Web Animations API. Safari support can be enabled in the “Experimental Features” developer menu.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome
Firefox
IE
Edge
Safari
83
76
No
80
TP
Mobile / Tablet
Android Chrome
Android Firefox
Android
iOS Safari
80
68
80
13.3
If you’re interested in reproducing the Twitter heart animation you could also have a look at this cool article by Ana Tudor which is another great example of exploding particles on a button.
HTML setup
We won’t need much HTML for this demo. We will use a element but it could be another type of tag element. We could even listen to any click on the page to make particles pop from anywhere if we really wanted to.
<button id="button">Click on me</button>
CSS setup
Since every particle has a few CSS properties in common, we can set them in the global CSS of the page. As you can create custom tag elements in HTML, I will use a tag name to avoid using semantic tags. But truth is, you could animate
The particles should not interact with the layout of our page, so we’re setting a fixed position with top and left at 0px each.
We’re also removing pointer events to avoid any user interaction on the HTML particles while they are on the screen.
Because styling the button and the page layout is not really the purpose of this article I will leave that on the side.
JavaScript setup
Here are the six steps we will follow in our JavaScript:
Listen to click event on the button
Create 30 elements and append them into the
Set a random width, height and background for every particle
Animate each particle from the mouse position to a random place as they fade out
Remove the from the DOM when the animation is complete
Step 1: The click event
// We first check if the browser supports the Web Animations API
if (document.body.animate) {
// If yes, we add a click listener on our button
document.querySelector('#button').addEventListener('click', pop);
}
Step 2: The particles
// The pop() function is called on every click
function pop(e) {
// Loop to generate 30 particles at once
for (let i = 0; i < 30; i++) {
// We pass the mouse coordinates to the createParticle() function
createParticle(e.clientX, e.clientY);
}
}
function createParticle(x, y) {
// Create a custom particle element
const particle = document.createElement('particle');
// Append the element into the body
document.body.appendChild(particle);
}
Step 3: Particle width, height and background
function createParticle (x, y) {
// [...]
// Calculate a random size from 5px to 25px
const size = Math.floor(Math.random() * 20 + 5);
// Apply the size on each particle
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// Generate a random color in a blue/purple palette
particle.style.background = `hsl(${Math.random() * 90 + 180}, 70%, 60%)`;
}
Step 4: Animate each particle
function createParticle (x, y) {
// [...]
// Generate a random x & y destination within a distance of 75px from the mouse
const destinationX = x + (Math.random() - 0.5) * 2 * 75;
const destinationY = y + (Math.random() - 0.5) * 2 * 75;
// Store the animation in a variable because we will need it later
const animation = particle.animate([
{
// Set the origin position of the particle
// We offset the particle with half its size to center it around the mouse
transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,
opacity: 1
},
{
// We define the final coordinates as the second keyframe
transform: `translate(${destinationX}px, ${destinationY}px)`,
opacity: 0
}
], {
// Set a random duration from 500 to 1500ms
duration: 500 + Math.random() * 1000,
easing: 'cubic-bezier(0, .9, .57, 1)',
// Delay every particle with a random value from 0ms to 200ms
delay: Math.random() * 200
});
}
Because we have a random delay, the particles waiting to start their animation are visible on the top-left of the screen. To prevent this, we can set a zero opacity on every particle in our global CSS.
particle {
/* Same as before */
opacity: 0;
}
Step 5: Remove particles after the animation completes
It is important to remove the particle elements from the DOM. Since we create 30 new elements on every click, the browser memory can fill up pretty quickly and cause things to get janky. Here’s how we can do that:
function createParticle (x, y) {
// Same as before
// When the animation is finished, remove the element from the DOM
animation.onfinish = () => {
particle.remove();
};
}
Final result
Putting everything together gives us what we’re looking for: a colorful explosion of particle goodness.
CodePen Embed Fallback
Not seeing the animation in the demo? Check if your browser supports the Web Animations API. in the support table at the top of the post.
Be creative!
Because all this is using CSS, it’s pretty simple to modify the particle styles. Here are five examples using various shapes… and even characters!
Chen Hui Jing notes that when you absolutely position a flex item, it’s no longer part of the flex layout. Except… it kinda is a little bit. If you make the child position: absolute; but don’t apply any top/right/bottom/left properties, then flexbox alignment will still apply to it.
It’s odd to see, but it makes a certain sort of sense as well. When you apply position: absolute; to things (and nothing else), they kinda just stay where they are until you apply other positioning. Check out how this SVG icon just sits in the middle of this paragraph, and even flows with it on resize, because it doesn’t have any specific positioning instructions other than to not affect anything else.
As a designer with many years of experience, I often encourage my colleagues and reports to pick up some coding skills. While many are open to the idea, others balk at the notion. I usually hear some variation of “I didn’t study design to become a developer.” Although this is a valid concern, I’d like to emphasize two points: a better understanding of the materials usually leads to better outcomes, and there is an important distinction between “coding” and “software engineering.”
This two-part series of articles should be useful for any designers out there who’d like to gain also some coding skills.
Understanding The Raw Materials
Contrary to what some may think, design isn’t about creating beautiful mockups, it’s about delivering an intuitive, functional experience to the end user. That simply can’t be done without an understanding of the building blocks of a solution. An architect isn’t going to be very good at her job if she doesn’t understand the materials her plans demand and a designer isn’t going to be very good if he doesn’t understand the materials that make his designs come to life — the code. Experience with coding helps designers understand what’s possible and what’s not and whether or not their designs will be able to effectively perform their desired functions.
I also reassure my colleagues that knowledge of coding doesn’t mean one has to become an engineer. The two refer to different, though related, skill sets. As Kyle Thayer, a PhD candidate at the University of Washington recently wrote, the field of computer science (or engineering) is about giving students “an overview of the scientific field of computing”:
“The purpose of a Computer Science degree is to give students an overview of the scientific field of computing. While this includes some programming, programming is done primarily for the purpose of learning about other areas (e.g., operating systems, algorithms, machine learning, human-computer interaction). A CS degree is a good first step into the academic field of computer science.”
By contrast, coding simply means becoming familiar enough with a given programming language to complete a task. Asking someone to learn basic HTML or JavaScript does not necessitate their becoming a full-stack software architect. Despite what some might think, forking a repo and copy/pasting Stack Overflow answers in does not make you a software engineer — but it can increase the value you bring as a designer to a product development team.
What About “Low Code”?
Some may say that we’re entering a low code future where designers (and developers) are able to build applications through drag-and-drop functionality and a GUI (graphical user interface). So taking the time to learn a programming language isn’t “worth it.” The emergence of tools like Webflow, Modulz, FramerX, UXPin, etc., seems to support this line of reasoning. And this can be very true for many applications — it’s easier than ever to create a site or app without a single line of code. However, if you don’t understand the underlying principles, you will be capping the value you can deliver with a low code application.
Modulz, Studio.Design, FramerX, and other apps — there’s still a lot of code in there… (Large preview)
We’re also not yet at the point where you can build enterprise-scale applications with low code platforms. As designers we have to work in the world we live in, not the one we imagine is coming.
That being said, everyone brings a unique blend of skills to the table. Knowledge of code is not an absolute necessity and it should just be encouraged, not required.
Where To Start?
There is an endless amount of tools, languages, schools, guides, and other resources available for anyone who has access to the internet — so where to begin? An important disclaimer — I am by no means an expert, or anything close to a software engineer — and the following are insights from my personal experience, not a guaranteed path to success.
Many of the designers/developers I know have usually started hacking HTML and CSS templates on sites like MySpace, Geocities, Tumblr, Neopets, or others. Now that I have sufficiently dated myself, for anyone starting out today, I would recommend beginning in your friendly command-line interface (CLI) shell.
The Terminal: An Essential Tool
The go-to application for Hollywood directors whenever there’s a computer hacker on the screen, the terminal is simply an interface that allows you to execute actions via a text input rather than the graphical user interface (GUI) that most people are accustomed to. I’ll let real developers explain the intricacies and technical how-to, but for our purposes it’s good enough to know that familiarizing yourself with the CLI is beneficial for a number of reasons.
The terminal gives you access to your computer’s file and folder structure — the same way that you click through Finder or Explorer, you navigate using your keyboard in the terminal. It definitely takes some time getting used to, but developing your mental model in this area is foundational to working in code.
Like a lot of designers, I am using the macOS environment (formerly known as OS X), but the following applies to other *nix operating systems (Linux, Unix), and also to Windows PowerShell. While there is a lot of overlap between different modern operating systems, there are some differences that I will do my best to highlight.
Note: For a more complete introduction to the terminal, I recommend reading Paul Tero’s article, “Introduction To Linux Commands”.
Regular Expressions
A key feature in a CLI is the ability to use regular expressions (regex) in your commands. Think of regex as boolean search operations (using quotation marks to search for exact phrases or the minus sign to exclude words) on steroids — they allow you to define a pattern in a string of text so that you can perform some action on the output. Here are some real-world examples:
If you have a long list of phone numbers in a variety of formats, you could define a script that would give you a consistent output based on a regular expression — e.g.: (###) ###-#### for the U.S. phone numbers format.
If you want to quickly rename a group of files to a specific case — from kebab-case to CamelCase or anything in between.
I highly recommend watching Wes Bos’ Command Line Power User series — or at the very least his intro video which will give you a good idea about a few essentials commands that you can use.
Here are some basic terminal commands* to help you getting started:
cd stands for “Change Directory”, type this and then a file or a folder path to go — note that you can type a folder name but it needs to be inside your current folder to go to it.
ls lists the files and folders in your current folder.
pwd stands for “Print Working Directory” — this will list out where you currently are in your computer.
mkdir and a folder name will create a folder in your working directory.
using cd with .. takes you one level up — if you’re in /users/username/documents/2019 and you enter cd ../.. you’ll end up in /users/username.
Bonus tip — hitting the Tab key will autocomplete as you type a folder/file path.
Note: The following will work on the Windows command line (cmd):
cd, cd .., mkdir, Tabkey for path autocomplete (lsandpwdwon’t work).
The more modern Windows command line (Windows PowerShell) supports all of them:
cd, cd .., ls, pwd, mkdir, andTabfor path autocomplete.
For a complete list of commands available in PowerShell, check this Microsoft’ Help page “Using Familiar Command Names”.
Mass-File Management
You can manipulate files and folders en masse via the terminal — here are a few ideas:
You can create three years of folders with subfolders for each month in a single command — using mkdir -p and {list-of-years}/{list-of-months} will create folders for each year with subfolders for each month. Use your imagination, I’m sure you can put this to good use!
You can quickly clean up your desktop by using mv Screen Shot* Screenshots — this will move all of your files that start with “Screen Shot” to a folder named “Screenshots”.
Create 36 folders on your computer with a single line of code! (Large preview)
Note: These two examples will most likely only work in *nix environments — but the theory still applies. And Windows PowerShell is also a very powerful command line tool, you just need to learn its features and specific commands.
Scripting And Maintenance
Now that we have a glimpse into the power of regular expressions and the options available in the terminal we can start combining those things into scripts. One very simple, yet powerful and commonly used script is Mike G’s file renamer:
criteria=$1
re_match=$2
replace=$3
for i in $( ls *$criteria* );
do
src=$i
tgt=$(echo $i | sed -e "s/$re_match/$replace/")
mv $src $tgt
done
What this script allows you to do, is define the scope (criteria), define what you’d like to change (re_match), and what you’d like to change it to (replace) — and then execute it.
There are countless other scripts that you can create beyond creating and renaming files — Vlad’s Batch Resizing script is an excellent example of the time-saving capabilities that you can create using bash scripts.
Advanced Tips And Tricks
Something I have found over the years is that regularly resetting my computer and reinstalling the operating system helps it stay relatively clutter-free and prevents the slowdowns everyone experiences after years of digital detritus that accumulates on harddrives. For many, the prospect of wiping a computer and re-setting everything back at best sounds like a few days of work, and at worst an impossible nightmare that you may never recover from.
But it doesn’t have to be — by using a few command-line tools, once you’ve backed up, wiped, and reinstalled your OS, you can install not only your list of favorite apps, but also fonts in a matter of minutes using Homebrew. (Homebrew is for Mac and Linux only. For Windows, try Chocolatey which is a solid alternative.)
If you’re interested — we’ve created an easy-to-follow setup guide to get your computer in good shape for most development. Our guide is for macOS, but Owen Williams has written a solid guide for Windows as well.
If you don’t have the time for Wes’ entire series of tutorials about the command line — at the very least I highly recommend the following stack:
There are many options when it comes to choosing a code editor — Sublime Text and VS Code (Visual Studio Code) are the two I have the most experience with and am currently using.
Sublime Text was one of the earlier text editors that became popular with front-end developers — it was the gold standard up until a few years ago. Features like multiple cursors, a powerful package manager, and highly customizable shortcuts that allowed you to quickly navigate in and between files and folders. Not to mention it was an incredibly lightweight and fast application which made it an easy choice.
VS Code (Visual Studio Code) came on the scene around 2015, it took a while for people to switch from Atom and Sublime, but VS Code has established itself as many developers’ favorite editor. In addition to pretty much all of Sublime’s features, VS Code differentiated itself with a built-in terminal and tight integration with Git. In addition, Visual Studio Code has a rich plugin ecosystem that allows you to extend and customize your environment to your heart’s delight.
All that is to say — you don’t need to be a developer to appreciate the features of a good code editor. I have found many uses for it in my daily work; two, in particular, are the ability to use multiple cursors, and using regex to find-and-replace text across folders of files. Let’s take a closer look at both.
Editing With Multiple Cursors
Picture your typical word processor — that blinking vertical line that shows where the text you’re entering will go? Now picture the ability to add more than one cursor to this window so that whatever you type will appear wherever there is a cursor!
This might not be blowing your mind just yet — so here’s an example that shows a few ways that an advanced text editor can help you create everyday efficiencies in your workflow.
Mass-editing in a text editor is much faster and more intuitive than in a spreadsheet. (Large preview)
Here we have a list of names that we need to convert into email addresses — we’d also like to make them all lowercase and then sort them alphabetically. This can be done with a few keystrokes.
Using a text editor to quickly manipulate lots of text in Sublime Text (short video).
Once you paste the list in, Cmd + Shift + P brings up the Command Palette (fancy term for a searchable menu that gives you all the available functionalities). You can basically type in this menu what you want to do, pretty much anything you can do to text is available here. If it’s not, there’s likely a plugin or an extension that you can find.
We’re able to change the case and sort the lines in a matter of seconds — then pressing Ctrl + Shift + arrow keys adds cursors, then whatever we type gets added to every line — in this case, we’re turning the names into email addresses, but your wild imagination could find myriad other ways to use this.
You might be saying — well I can do this in Excel or Google Sheets, which is true, but I have found that it is a lot quicker to handle these types of things in a text editor. You avoid having to write formulas and select things with a mouse.
Which Code Editor Should I Use?
I’m a designer — so of course, my answer is “it depends”.
If you’re new to these concepts, I would recommend getting a free trial of Sublime — it continues to be a very lightweight app and does not consume too many system resources. You can customize Sublime’s key bindings(fancy word for hotkeys) and extend its built-in functionality with plugins.
If you’ve been using Sublime, Atom, or another editor — I’d recommend checking out VS Code as well. The team at Microsoft has really done an excellent job making it a powerful, yet easy-to-use text editor.
Personally, I use both editors — Sublime is lightning quick and opens in a fraction of a second allowing me to easily paste and manipulate text. But when I want to get some more serious work done, I use VS Code. It’s difficult to top the all-in-one package that VS Code provides — a vibrant plugin and extension ecosystem, powerful command palette, and hyper-customizable interface means you can really make it your own. Not to mention the fact that Microsoft is very incentivized to ensure that it’s a first-class experience for developer productivity.
Conclusion, And What’s Next?
In this first article, you will have learned the basics of the terminal, a few productivity hacks to get you started, and should have a better idea of what code editor to choose. In the next part, we’ll continue with the topics of version control, HTML and CSS, and an introduction to engineering principles.
Anything Amiss?
There’s a good chance that something in this post was obscure, obtuse, and/or obsolete and I’d love the opportunity to make it better! Please leave a comment below, DM me, or @mention me on Twitter so I can improve.
Videos aren’t inherently accessible. Even if the content comes from an outside source — like a videographer or a YouTube channel — you’re still responsible for ensuring that every visitor on your website can fully access it.
Video can serve many purposes for a website:
Home page videos featuring company founders or illustrated walk-throughs of a solution can serve as a unique welcome to the site;
Product videos give customers a better look at your inventory which helps in the decision-making process;
Background videos can be a nice change of pace from otherwise static content;
Blog post videos can provide readers with an alternative approach to consuming content;
Video content gives websites better opportunities to rank in search (like showing up under Google Videos or on the first SERP for a relevant “how to” question).
The last thing you’d want is to spend all that time designing your website to be accessible only for the video (which is always a crucial part of the content) to be inaccessible.
Below, we’re going to look at what you can do to make video accessible on your website.
1. Follow Video Accessibility Best Practices
When we talk about how to make videos accessible, what we’re ultimately trying to do is solve two big problems:
To enable everyone to consume the content in full;
To make it so that everyone can control the playing of the content.
This doesn’t just apply to visitors who have visual or aural impairments either. Accessible videos are useful for people who may be limited situationally (like someone riding the bus home who can watch the video, but not listen to it because they have no headphones).
Here’s what you can do to help all your visitors consume your video content in full:
Disable Auto-Play and Loop
Nobody wants to step onto a website or new web page, only for the video on it to start playing. This is especially so for those who are visually impaired and have to rely on screen readers to navigate them to the controls that turn off auto-playing videos.
So, remember to disable auto-play as well as auto-loop features before publishing a video to your site.
Enable Captions
Captions are basically a script that appears inside your video. So, much like a script for a movie or a play, captions are synchronized annotations that spell out what is heard.
In addition to the speech itself, captions may include things like:
Titles and chapter names displayed but not spoken aloud;
Song names or lyrics playing in the background;
Notes about ambient noises.
There are two kinds of captions you can use. Open captions automatically display whenever anyone plays your video. Closed captions need to be turned on by the person watching the video.
While some video player software may offer to auto-generate captions for you, it’s best to do it on your own. (You’ll see why later.)
Enable Subtitles
For visitors that don’t speak the native language of the video, make sure that subtitles are enabled or that you’ve included them (if you’re preparing your own).
Add Audio Descriptions When Needed
Whereas captions and subtitles capture the audio of a video, they don’t generally describe what’s on the screen. This can compromise visually impaired users’ ability to comprehend what’s going on if there’s something relevant in the visuals (like on-screen text or some sort of action that’s not otherwise described aloud).
So, in addition to captions and subtitles, you might need additional audio descriptions or a separate audio track entirely to complement the video.
Provide a Transcript
Transcripts are a cross between captions and audio descriptions. Essentially, a transcript should capture everything from the video:
The speech;
Titles, subtitles, and other onscreen text;
Descriptions of onscreen activity;
Links referenced or shared onscreen.
Unlike captions, transcripts usually live outside of a video player — either written on the page in HTML or provided through a link or download. Interactive transcripts are a little different as they attach themselves directly to video players (I’ll show you an example below).
Properly Format Onscreen Text
Even if you don’t or can’t give your visitors the ability to style the onscreen captions, it’s important to carefully consider how your choices may affect their ability to read it, including:
Text color;
Background color;
Video color;
Text-to-background color contrast ratio;
Text-to-video color contrast ratio;
Text size;
Placement of text on the screen;
Text synchronization with speech;
Length of time each line of text is displayed.
Avoid Flickering Content
Visitors who are prone to seizures, dizziness, or nausea may not respond well to any flickering, flashing, or strobing content on your site. Also, be careful using optical illusions as they can equally disorient, disturb, or otherwise distract some visitors.
Clearly Label Interactive Elements
If you have any control over how the video player is designed or the interactive elements in it tagged, make sure every inch of it is clearly labeled. Buttons without labels or with funky naming conventions can throw your visitors off, so stick with the tried-and-true labels everyone else uses.
Enable Keyboard Support
Before publishing any videos to your site, make sure that screen readers and keyboards can fully access them. That doesn’t just mean being able to find the video player on the page. It means controlling features like volume, enabling closed captions, or fast-forwarding.
2. Use an Accessible Video Player
There are a number of video player options that come with accessibility features built in. Here are some of the more popular and OS-agnostic options:
YouTube
YouTube is a popular video-sharing solution, so you might be tempted to use this option. However, the only video accessibility features it comes with out of the box are:
Subtitles;
Closed captions.
Even then, it’s up to you to provide and refine the captions for your hearing-impaired visitors. When you upload a new video (or edit an existing one), you’re given the option to upload subtitles or captions:
Your .srt file can be prepared with or without timing (though timing is ideal).
If you don’t have captions prepared, you can always rely on YouTube’s auto-captioning system. They’re not going to be pretty, so you’ll still need to use YouTube Studio to go in and edit the transcript to line up with what’s being spoken:
But it’ll at least save you time writing them all from-scratch.
In the end, your website’s visitors will be able to enable closed captions through the small “CC” icon in the bottom-right of the YouTube video player. This is how they’ll appear when they play within your video:
Users have little to no control over how these captions are displayed aside from having YouTube translate them into another language of their choosing.
I’d say this option is fine to use if you already have YouTube content on your website and you want to quickly fix some of the inaccessibility issues. But keep in mind that there’s a lot more you need to do to 100% make videos accessible.
JW Player
JW Player might not be free or as well-known as YouTube, but this HTML5 video player will do a lot more in the way of accessibility.
For instance, you can use it to enable closed captioning:
Multilingual support is provided, so your users aren’t automatically relegated to the primary language of the video.
JW Player also allows viewers to style captions as they see fit:
They can change the following settings all from within the settings in the video player:
Font color;
Font opacity;
Font size;
Font family;
Character edge style;
Background color;
Background opacity;
Window color;
Window opacity.
Another accessibility feature included is the HLSV4 audio track:
While JW Player recommends using an audio track for something like laying director’s commentary over a movie, you can use this to provide important feedback on what’s happening on the screen (i.e. audio descriptions). For instance, if someone is visually impaired but able to listen to the video, the audio track would explain details on the screen as they occur.
Another useful accessibility feature that comes with JW Player is the interactive transcript:
Transcripts are useful for both visually impaired users who have screen readers as well as hearing impaired users who need audio assistance. And with this interactive transcript, users can search through the transcript for key phrases, making this an incredibly useful feature for all users.
How to Make Video Accessible
When you want to make videos accessible, you have to think about how the content may be perceived from all angles.
If someone couldn’t hear the audio, what more would they need in order to understand the on-screen content?
If someone couldn’t watch the video, what could you do to help them visualize what’s on the screen?
If someone couldn’t control the video with a mouse pad, how would they navigate through the video player’s settings?
In other words, really think about what you have to do to ensure that no one’s experience is compromised by the lack of video accessibility on your site. By using the above guidelines and accessible-friendly media players, you’ll be off to a good start.
Recent research indicates that sustainable and successful cultures of learning stem from well-strategized training functions. Discover advice from practicing training professionals on how to build a culture of learning in your organization.
Keep your team of web professionals upskilled and eager when it matters most.
The importance of learning within organizations across industries cannot be understated. No matter your employees’ level of expertise, there is always more to learn in order to keep your organization operating at its maximum capacity and your employees satisfied in their roles.
According to the 2019 L&D reports from the professional development search engines, findcourses.co.uk, learning and development (L&D) training has a demonstrable impact on employee satisfaction, retention rates, and the year-on-year financial growth of your business.
The report found that companies spending above average on training and developing their employees were twice as likely to have more satisfied employees. 42% of employees cited professional development as their most valuable perk. Whether you have an existing training function or are looking to build one from the bottom up, start your journey by building a culture of learning amongst employees and management to see your organization flourish.
Straightforward techniques like tying learning to internal promotion, emphasizing training for leaders to inspire change, and accountability across organizational hierarchies will encourage a culture of learning and increase your business’ success. Read on to discover how to make it happen!
Learn and Promote In-House
It’s not a necessarily intuitive connection, but by tying internal promotion to L&D companies are 22% more likely to report higher satisfied employees and higher retention rates. In a report from Training Journal, they found that by introducing opportunities for learning to employees from their first day on the job, they’ll be able to envision their own room for growth within your organization and be less likely turnover in their positions.
Creating a link between training and internal promotion (and making it explicit to all) will help employees understand that your organization values their development and that they can grow within the company by developing themselves personally and professionally.
Given that the cost of turnover has the potential to kill your business and lower employee morale, it comes as no surprise that companies with reported growth in the last year are three times more likely to report an increase in their L&D budgets.
A well-functioning L&D program that develops employees professionally and within their roles can reduce those turnover risks and keep morale high and productive.
Well-Trained Leaders Are Impactful Change Makers
While employees can and should take ownership of their own development, implementing a culture of learning needs to start from leaders in order to maximize its potential for change.
In the report, leadership and management training was the top priority for a whopping 41% of companies surveyed. The need for quality and well-trained leadership is clear. But what can well-trained leadership accomplish more specifically?
According to the 2019 L&D report from findcourses.com, companies with executives highly engaged in L&D were 3x more likely to say their company had a culture of innovation. Engaged leaders are more likely to inspire learning from the top down, and increase their organization’s capability to embrace new and innovative ideas.
No matter if you have multitudes of training options available to your employees if leadership isn’t involved in encouraging and promoting opportunities for learning, or participating in learning themselves – it will be harder for your employees to understand its value.
Develop knowledge and information sharing into a formal process.
With a few straightforward and simple steps, you can use your position as a leader to create impactful change for your employees, that will really stick.
Accountability Across Organizational Hierarchies
Following trainingindustry.com’s example, formalizing your organization’s learning process as a leader is an important step in ensuring that your burgeoning culture of learning will stick.
Tying learning to internal promotion is one way to formalize learning, but the list doesn’t have to end there! Making training a requirement is a strategy to ensure that all employees will benefit from learning within your organization. If you’re going down that route, ensure that you make your training bespoke to your employees’ specific needs – to drive home the value of learning at work.
Be specific about the impact of what you’re hoping your employees will get from training endeavors at the outset, allowing employees to take ownership of their learning experience, and ensure accountability on all sides.
With employees engaged from the getgo, leadership encouraging a culture of learning from the top down, and processes in place to deliver tailored and impactful training across the board, everyone within your organization will be accountable for their own experience, with the tools and support they need to maximize their success.
Recent research indicates that sustainable and successful cultures of learning stem from well-strategized training functions. Discover advice from practicing training professionals on how to build a culture of learning in your organization.
Keep your team of web professionals upskilled and eager when it matters most.
The importance of learning within organizations across industries cannot be understated. No matter your employees’ level of expertise, there is always more to learn in order to keep your organization operating at its maximum capacity and your employees satisfied in their roles.
According to the 2019 L&D reports from the professional development search engines, findcourses.co.uk, learning and development (L&D) training has a demonstrable impact on employee satisfaction, retention rates, and the year-on-year financial growth of your business.
The report found that companies spending above average on training and developing their employees were twice as likely to have more satisfied employees. 42% of employees cited professional development as their most valuable perk. Whether you have an existing training function or are looking to build one from the bottom up, start your journey by building a culture of learning amongst employees and management to see your organization flourish.
Straightforward techniques like tying learning to internal promotion, emphasizing training for leaders to inspire change, and accountability across organizational hierarchies will encourage a culture of learning and increase your business’ success. Read on to discover how to make it happen!
Learn and Promote In-House
It’s not a necessarily intuitive connection, but by tying internal promotion to L&D companies are 22% more likely to report higher satisfied employees and higher retention rates. In a report from Training Journal, they found that by introducing opportunities for learning to employees from their first day on the job, they’ll be able to envision their own room for growth within your organization and be less likely turnover in their positions.
Creating a link between training and internal promotion (and making it explicit to all) will help employees understand that your organization values their development and that they can grow within the company by developing themselves personally and professionally.
Given that the cost of turnover has the potential to kill your business and lower employee morale, it comes as no surprise that companies with reported growth in the last year are three times more likely to report an increase in their L&D budgets.
A well-functioning L&D program that develops employees professionally and within their roles can reduce those turnover risks and keep morale high and productive.
Well-Trained Leaders Are Impactful Change Makers
While employees can and should take ownership of their own development, implementing a culture of learning needs to start from leaders in order to maximize its potential for change.
In the report, leadership and management training was the top priority for a whopping 41% of companies surveyed. The need for quality and well-trained leadership is clear. But what can well-trained leadership accomplish more specifically?
According to the 2019 L&D report from findcourses.com, companies with executives highly engaged in L&D were 3x more likely to say their company had a culture of innovation. Engaged leaders are more likely to inspire learning from the top down, and increase their organization’s capability to embrace new and innovative ideas.
No matter if you have multitudes of training options available to your employees if leadership isn’t involved in encouraging and promoting opportunities for learning, or participating in learning themselves – it will be harder for your employees to understand its value.
Develop knowledge and information sharing into a formal process.
With a few straightforward and simple steps, you can use your position as a leader to create impactful change for your employees, that will really stick.
Accountability Across Organizational Hierarchies
Following trainingindustry.com’s example, formalizing your organization’s learning process as a leader is an important step in ensuring that your burgeoning culture of learning will stick.
Tying learning to internal promotion is one way to formalize learning, but the list doesn’t have to end there! Making training a requirement is a strategy to ensure that all employees will benefit from learning within your organization. If you’re going down that route, ensure that you make your training bespoke to your employees’ specific needs – to drive home the value of learning at work.
Be specific about the impact of what you’re hoping your employees will get from training endeavors at the outset, allowing employees to take ownership of their learning experience, and ensure accountability on all sides.
With employees engaged from the getgo, leadership encouraging a culture of learning from the top down, and processes in place to deliver tailored and impactful training across the board, everyone within your organization will be accountable for their own experience, with the tools and support they need to maximize their success.
The restaurant industry has a reputation for being volatile. Running a restaurant isn’t as simple as loving food and preparing it for people. It’s vital to have a deep understanding of how the restaurant business works and how to optimize operations to support your goals.
That isn’t the only segment with growth potential. People eat out often. They’re looking for more healthy, alternative dining options when they go to a restaurant and embracing takeout and similar styles of purchasing from restaurants.
New digital apps and services as well as widespread access to data are leading to the creation of new business models. In short, the restaurant industry is going through a digital transformation.
While the potential is real, achieving and sustaining growth isn’t simple. Managing a restaurant is complex and challenging. You need to consider
How to create a menu that fits your market
How to create a positive customer experience
What you need to do to stay on top of inventory management best practices and avoid unnecessary waste
How you can improve and optimize restaurant operations
What methods you should use to manage staff effectively
Digital solutions can make it easier to deal with these issues, empowering you to improve restaurant management and create more value from your establishment. Read on to learn the ins and outs of what goes into managing a restaurant in today’s digitally empowered world.
How to create a menu
What kind of restaurant do you want to be?
Creating a menu is impossible if you don’t know your goals and intent for the restaurant. Do you want to be a place where families can spend a fun night together? Are you looking to create a cozy, intimate place that’s perfect for date nights? Do you want your restaurant to be the center of the party for adults who are out on the town with friends?
These general vibe questions can give you a guidepost to start from. Even if, deep down, you really just want to be about great food, you’ll need something that distinguishes your restaurant from the competition. What’s the first impression you want people who drive by to get? What demographics are you trying to attract?
Answering these questions is critical to creating your menu. Ultimately, the menu sets the character and feel of your restaurant. If your marketing efforts, decor, and service strategies don’t align with your menu, patrons will feel that disconnect. If your menu isn’t thoughtful and well aligned with what you want your restaurant to be, you may find it difficult to gain traction.
Essentially, a customer should be able to tell what they can expect from your restaurant by reading your menu. If you’ve clearly defined the kind of establishment you want to be, then you’ll be better able to narrow down the options you have when setting up a menu.
What does your local market tell you about the menu?
You can’t escape your marketplace. While some restaurants may get by with business from tourists visiting from out of town, most depend on the locals who regularly patronize the establishment. Creating a menu without performing market research sets you up for problems down the line. Here’s some of the research you should perform:
Industry trends. The restaurant industry is always changing. Digital technologies and widespread access to apps and services impact today’s market. isn’t just by but also by the shockwaves created by. Customers can order via app, pay digitally, and get an alert when their meal is ready. They can use third-party apps and services to get meals delivered. Preprepared and to-go meals are gaining steam. However, traditional restaurants are also popular for a variety of reasons. Staying on top of industry trends can guide your strategies and help you better understand customer needs before you dive into the details of your market.
Local demographics. Opening a high-end gastropub in a low-income neighborhood won’t set you up for success. Reach out to your Chamber of Commerce and similar institutions to gain a stronger awareness of your market. This knowledge can help you identify the pricing and product range that makes sense when you’re creating a menu.
Competitive dynamics. If you want to open a Mexican restaurant in a neighborhood with two other Mexican restaurants, what’s going to make yours unique? You may learn that the type of restaurant you want to create is a good fit but that your expectations for the price points you plan to pursue would put you in a difficult competitive place. That knowledge can help you refine your ideas and get a clearer picture of what you need to do to stand out in the marketplace.
Food availability. While you can pretty much get any type of food from any location, certain markets provide easier access to certain items. This isn’t just about getting seafood more cheaply when you’re near the ocean. Research seasonal planting trends. Reach out to local farmers. Understand what’s grown in your area and when; look for opportunities to source local goods in an affordable, sustainable way that creates value for your restaurant.
You can’t simply research your way to a good restaurant. However, some strategic market research — much of which you can complete online or with some networking in your local communities — can elevate your business and make restaurant menu planning much easier.
What kind of culinary team are you building?
The skills of your chef, line cooks, and other culinary team members will, of course, have a huge influence on the kind of menu you can create. If you’re trying to function as a chef/owner, you probably know what type of food you’re passionate about. At that point, the question is finding line cooks you can rely on and figuring out the best way to fit your passions into your market situation.
If you’ve partnered with a chef, you’ll need to develop a close working relationship with them to ensure you can share ideas and respect one another. Feuds between an owner and chef are never good for the business. Make sure you have a vision of what you’re looking for in terms of culinary staff. Build a relationship with your staff that gives them freedom to use their expertise while giving you the ability to ensure the menu aligns with the business’s needs. In practice, this often means
Creating a degree of financial transparency so your culinary staff leaders can understand how their menu choices and methods influence profitability
Holding regular meetings to create open conversations about menu options and give team members input
Setting big-picture guidelines that serve as a point of reference for the type of menu you can support and give staff a larger context to work within
Getting your staff on board with your menu — and keeping them engaged through ongoing conversations — is key to not only creating a menu in the first place, but also to answering the question of how to create a restaurant menu that stays relevant over time. No menu is static, and a strong working relationship with your culinary staff puts you in a good position to keep your menu fresh and effective over time.
Day-to-day menu considerations
A menu is often a living document. Restaurant menu planning isn’t something you do once. The best restaurants regularly update their offerings based on culinary skills, seasonal food availability, and shifts in consumer demands. As you go through the process of creating your menu and managing it over time, a few issues stand out. Staying on top of these practices can help you get the most from your menu.
Revisit planning regularly
Your initial menu planning process is a matter of blending your restaurant’s identity with market demands and culinary team skills. You’ll hopefully come away with an effective blend of items to fill out your menu and position your restaurant for success.
That initial menu may be fantastic, but that doesn’t mean you should keep it the same for years at a time. Besides identifying opportunities for specials, you’ll also want to consider seasonal changes to the menu and revisit core menu items periodically.
Hold regular staff meetings to review what’s working and what isn’t. Perhaps an item is selling well but not really contributing to profits due to a pricing problem. Maybe an item is great on paper but is proving problematic in the kitchen and is more trouble than it’s worth.
Understanding these issues can help you not only create a good menu by anticipating problems but also help you to refine your menu over time. Regular menu planning meetings can help you take advantage of these opportunities.
Analyze customer feedback
In some ways, restaurant menu planning is easier in light of the digital technologies available today. Think back just a decade or so. How did restaurants get feedback from customers? Would you give them paper-based surveys on their way out of the restaurant and try to log those responses? Most likely, your customer analysis depended on observed trends — such as compliments at the table or feedback to waitstaff — and reviews on sites like Yelp, where the results are often skewed toward the negative.
Digital tools enable you to capture feedback more easily. Mobile apps let you create quick, easy surveys where users can rate your products and service in just a few seconds. The apps automatically log the data so you can create reports. You can also use technology to track sales and inventory more easily — something we’ll talk more about later on — so you can better understand what’s actually being purchased.
You may be able to engage with customers on social media and through similar channels to build relationships and get feedback.
This digital input from customers can be a game changer. Imagine you have a menu item that isn’t selling well. You don’t hear much from customers, but your kitchen team loves it. What do you do? In the past, you had to experiment. Maybe offer a special or promotion to sell more of that item and get customers excited. However, that would only be a short-term fix. It may increase sales but doesn’t help you identify the problem with the menu item. With digital technologies, you can engage users while giving them a promotional benefit. And you’ll get feedback on how to improve the item — maybe it seems too expensive or the portion size is too small.
Digital tools let you gather more empirical data about customer preferences, making it easier to adjust your menu based on more than observed feedback and raw sales data.
Experiment when you can
Don’t be afraid to use specials or short-term deals as a way to experiment with new items. It can be challenging to predict how customers will respond to a dish until it’s been on the market for a while. One alternative to wholesale menu changes every few years is periodic experimentation with new items. You can then keep the ones that work and replace under-performing dishes.
Restaurant menu planning requires almost constant tweaking to find the sweet spot. Of course, you don’t want to change your menu too often; frequent alterations to restaurant menu pricing or items can make it difficult for customers to get comfortable with your menu. However, strategic experimentation and occasional small changes are a great way to ease customers into new ideas and continually improve your restaurant menu.
Be careful about pricing
It goes without saying that price heavily influences consumer decision-making and expectations. If somebody splurges on an expensive menu item, they want to be blown away by some blend of quality, portion size, or excitement in the experience of eating it. At the same time, overly low prices don’t just hurt your bottom line; they can create a perception of low-quality food.
Finding the right balance is a matter of understanding the feel of your restaurant, knowing what your regular patrons can afford, and pricing in a way that allows for regular visits from customers.
Working closely with your culinary staff is critical here. Your chef will know how much different foods cost. Chefs also manage your supply chain and understand opportunities to create value through items that are affordable but of high enough quality to be profitable. When deciding on a price, it can help to understand how the kitchen prepares an item and how your waitstaff gets the food to customers. As you go through this process, you may learn that some menu items are too wasteful to justify or that others put too much strain on your servers.
Ultimately, choosing menu prices is a matter of blending food quality, cost, portion size, and serving experience along with what customers are willing to pay in order to find a sweet spot that creates profitability.
Design with care
Trends in menu design are highly variable, with different practices coming into and out of fashion all the time. While you certainly don’t need to constantly chase after each trend, you do need a menu that’s crafted to create a positive customer experience. Below are some best practices to follow, regardless of what trends are hot at the moment:
Use your menu to reinforce the theme and atmosphere of your establishment. It’s a great opportunity to create a positive impression that gets visitors into the experience.
Choose every part of your menu with intention. If you don’t have a strong reason for adding something, don’t include it.
Avoid clutter. Blank space gives the eyes a place to rest and makes it easier for those viewing a menu to follow the flow of important information. You want the design to put the visitor’s focus on the food, rather than overwhelming them.
Focus on quality. Printing at a high-quality print shop is expensive. The quality of photos and other design elements can vary depending on the printer you use, the lighting in the space, and the type of paper you use. You may not be able to create your dream menu because of the high costs of printing. However, that doesn’t mean you should just go cheap. This is where the advice about intentional design comes into play. Choose paper, fonts, design elements, etc., in a way that reinforces your brand and creates value, focusing more on the level of quality you can reasonably execute over being able to fit in as many ideas as possible.
Consider wear and tear. Your menus will be used frequently. They need to be able to withstand spills and other kinds of damage. Think about how you’ll handle that by designing menus that can either take punishment or are inexpensive to maintain and replace.
Creating a menu is about blending practicality, branding, and customer expectations. Avoid blindly following fads and be intentional about every menu choice you make, whether it’s the design or the food. Once you have a good menu in place, you’re ready to start thinking about backend issues like inventory management.
How to manage restaurant inventory
Big-picture best practices
Restaurant inventory management may happen in the background, but it’s also among the single most important elements of an establishment’s success. A great chef and ambiance won’t matter if you can’t source food efficiently and avoid waste. Problems in inventory management can gradually erode your profits, leaving you to miss out on cash you could use to grow your business and better position yourself for success.
There’s a great deal to think about when it comes to restaurant inventory management. But before getting into the details, we should take some time to talk about the high-level best practices that can serve as guideposts in optimizing your supply chain. Here’s a look at a few of the most important big-picture best practices and some guidance on how to live up to them.
1. Waste not, want not
It’s a bit cliche, but waste is your enemy in the restaurant business. Every bit of food that’s thrown away without being served to a customer is a missed revenue opportunity. Every food item that spoils while in storage creates a potential health code violation.
Finding ways to avoid waste is essential to positioning yourself for profitability. The following are a few ways you can do this.
Improve demand forecasting
Purchasing excess restaurant inventory sets you up for waste. Historically, restaurants were forced to make fairly loose estimates on inventory needs based on observational data about sales and the expiration dates of food items in stock. It doesn’t take too much fluctuation in demand on a given night to leave you with excess food.
The digital technologies available today make it easier for restaurant managers and chefs to log and track transaction data over time. They can get into granular details such as
The sales variance of different menu items depending on season and day of the week (perhaps affordable items sell better on weeknights, while guests splurge on the weekend)
The popularity of food items depending on how they’re prepared — perhaps sales of your grilled chicken dishes are thriving, while fried chicken doesn’t sell well. You can use that data to create specials that move food at risk of becoming waste.
Ultimately, digital systems let you not only understand what your customers buy but what they’re likely to purchase based on historic trends. This helps you move past observational data into empirical decision-making so that you can optimize demand forecasting and reduce the need to carry excess supply that eventually becomes waste.
Optimize food storage
There’s a great deal to consider when storing food, and it’s vital that your kitchen staff understands proper food storage and management. We’ve all heard the horror stories — restaurants putting hot food into fridges, causing bacteria growth; food prep teams storing chicken or seafood in unsealed containers, leading to the spread of harmful germs; staff leaving moldy bread to rot on the back of shelves — any of these nightmares are bad enough on their own.
Food storage problems aren’t just an issue because of the isolated damage to a specific item of food. Losing 20 pounds of chicken because it was mislabeled and went bad is frustrating, but it’s the kind of mistake that sometimes happens. However, leaving that same chicken in a place where it comes into contact with raw produce means the chicken renders the produce unsafe to serve.
Proper separation, labeling, and storage of food is vital to reducing waste and eliminating the human error that forces you to dispose of food. Create a formal, standardized food storage process and work to ensure consistent staff compliance.
Get creative
Great chefs can turn less ideal cuts of meat or unpopular vegetables into attractive parts of the menu. When your kitchen staff gets creative about how they use different food items, you can maximize the value of your purchases and minimize waste.
2. Work with a bunch of vendors
Simplifying your ordering and stocking processes can be nice for your team. That said, be careful not to oversimplify. If you’re purchasing all of your food from a couple of suppliers, chances are you’re missing out on opportunities. Food costs vary substantially depending on the season, and different suppliers will have access to more affordable items at different times of the year.
Restaurant suppliers can be a great source of food items, and having a few vendors in place to choose from for different goods at different times of year can help you keep costs under control. However, turning to alternative supply options can also be an attractive option. Restaurants can consider a few options beyond typical suppliers:
Direct partnerships with farms — through relationships with specialty farms or local farm shares — to get fresh, high-quality produce in a cost-efficient way
Planting a garden to grow seasonal items, herbs, or ingredients you frequently use to maintain a consistent, cost-effective supply (for example, an Italian restaurant can gain a great deal by growing tomatoes — a relatively simple crop to maintain — and using them for sauces, salads, and similar items)
Identifying and working with specialized vendors that focus on specific items to take advantage of unique opportunities, such as easier access to organic foods or rare products, such as game
Partnering with a wide range of suppliers and vendors can help you optimize your purchasing strategies and maintain your ability to supply key foods in the event of a shortage.
3. Be aggressive about maximizing efficiency
Maintaining a first-in, first-out program for your inventory is key in not just eliminating waste but also in maximizing the freshness of the items you serve. It can also be a first step in a strategy to minimize excess inventory.
If you’re minimizing waste, storing food efficiently, and leveraging modern analytics software to improve forecasting, you can then reduce the amount of inventory you need to carry in the first place.
For example, you may know through observation that you sell a lot of steak over the weekend, so you place a larger order set to arrive on Friday morning. But do you have historic data that tells you the average number of steak dishes you sell each weekend and how that figure fluctuates relative to seasonal trends? With that data, you could predict how much steak sells when a music festival is in town compared to a normal weekend in winter. On top of that, you could track sales in real time during the weekend to determine if your ordering volume is higher than normal and you need to make a rush order.
Reducing the excess inventory you carry doesn’t just help you eliminate waste. It also reduces the amount of space you use for storage and can keep energy costs down. Smaller freezers mean lower costs to keep items fresh.
These big-picture strategies, and the specific ways you execute on them, can give you a strong foundation for effective restaurant inventory management. There are also some specific tactics you can put in place to make it easier to manage your supply chain.
Streamline ordering with restaurant inventory sheets
What are inventory sheets?
A restaurant inventory sheet is a form that lists common goods a company uses as part of its everyday operations. For retail stores, this typically means items that are sold to customers. For restaurants, an inventory sheet can be used to track food items used for different parts of the menu. For example, the sheet may list a dish on the menu and the specific items and quantities needed for that dish. Alternatively, you could list the foods you use in your menu rather than itemizing goods in order to simplify ordering.
Quantifying your inventory in a custom form can make it easier to assess what you have when you do cycle counts of goods. Team members can easily record the items in stock and where they’re stored so that food doesn’t end up being forgotten and going bad.
Inventory sheets can also simplify ordering by allowing team members to easily track what you have and what you need. They can then submit the sheet to the person who has purchasing authority to complete orders.
Why should you digitize inventory sheets?
Digital inventory forms let users add data electronically and send the information to backend restaurant management systems where it can be put to use automatically. Digital inventory sheets that integrate with your other software systems make it easier to manage purchasing and accounting, creating more visibility and requiring less data entry.
Digital sheets are also easier to customize and change based on your needs. You can more readily adjust them as your menu or inventory requirements shift over the course of the year. You won’t have to worry about frequent print jobs so your staff can keep up with data entry demands.
Optimize delivery scheduling
Obtaining goods and moving them into storage lays the groundwork for successful inventory management. If your team gets bulk orders right before dinner service and has to scramble to unload, then they’re probably going to take shortcuts. But if orders arrive way too early, you may find it difficult to get staff to arrive at that time of day to manage storage.
Analyze your typical work day and try to align delivery scheduling with your kitchen staff’s workflow. Ideally, they’ll have time to not only store items effectively but also take care of labeling, organizing shelves so older items are easier to access, and performing cleaning procedures in a timely fashion.
Inventory management is a complex task that touches many facets of the business. Being strategic about your decision-making and the strategies you employ can help you get ahead.
How to improve restaurant operations
Staying on top of everyday operations can put a strain on restaurant managers. The cycle of managing inventory, handling food prep, keeping up with customer demands, and cleaning up to prepare for the next day can be staggering. It’s easy to get so caught up in this cycle of work that developing strategies and making changes to improve restaurant operations feels impossible.
But operational inefficiency will inevitably damage your bottom line. It could also frustrate staff and make it more difficult to create positive customer experiences. Focusing on operational gains can help you create value from everyday tasks. The following are five key issues to keep in mind in the process of improving your restaurant’s operations:
1. Understanding and controlling operational expenses
Restaurant operating costs can add up quickly and be difficult to manage. Common costs include
Staff salaries
Utilities
Cleaning supplies
Food and beverages
Equipment and facility maintenance
Marketing
Lease or mortgage costs
Licensing costs (for music or other copyrighted material used in the establishment)
Permits and/or taxes depending on local laws
This isn’t necessarily an exhaustive list of restaurant expenses, but it highlights just how varied and complex expense management can be. When it comes to managing restaurant costs effectively, it’s best to focus on a few key areas.
Gaining visibility
Tracking your costs efficiently makes it easier to stay on top of your spending. Doing so via digital channels allows you to create reports so you can visualize your costs based on different conditions. Working with key stakeholders, such as your chef or restaurant management, can help you get buy-in when you try to get costs under control.
Forecasting
Once you have visibility into your expenses, you can use that data to more accurately forecast your costs moving forward. You can use monthly data about salaries to project the costs for the hours each employee will work in the next month. This will help you assess whether you can actually afford the staff you’re keeping around.
Purchasing
Completing purchase orders is routine, but that doesn’t mean you can get casual about making purchases. Taking advantage of digital technologies to track purchase orders, taking note of vendor relationships, and optimizing each purchase relative to the costs and delivery timeline can go a long way in keeping expenses under control.
If you need one item that can be provided by two vendors, it’s important to assess which can meet your timing needs in the most cost-efficient way possible. Efficient restaurant purchasing is possible when you have visibility into purchasing history, software reporting on vendor performance, and a strong sense of what you can afford moving forward.
Performing calculations
All of the expense management strategies we’ve discussed aren’t really plausible unless you can accurately track your payments and calculate expenses. The good news is that you don’t have to do complex math to handle expense calculations. Instead, the challenge comes in the form of gathering accurate expense data so you can make precise calculations.
This is one of the reasons digital technologies are so valuable in today’s restaurant world. If you have a digital point-of-sale (POS) system, it can automatically log your transaction data. If you have a web-based inventory management and purchasing system, you can get complete visibility into supply chain costs. If you put your staff scheduling and payroll solutions into accounting software or a spreadsheet, you can calculate staffing costs fairly easily.
When you use these tools in conjunction with each other, you can fairly easily calculate your costs to inform your operating strategies. Once you have a clear idea of your restaurant’s operating expenses, you can identify pain points that are hurting your ability to generate profits and target them for improvements.
For example, imagine you’re at the end of your busy season and preparing for a few months of slow business. If you don’t have precise expense tracking in place, you’re left estimating what you can afford, something that can leave you with a cash flow problem as revenues dip. To avoid that, you could simply let go of most of your staff and reduce inventory. However, the time that you gain during the down season can be perfect for work on special projects, staff training, and menu development. If you let go of too much of your staff or cut down on spending for supplies, you limit your ability to capitalize on that opportunity.
If you have a clear sense of your historic expenses and revenue, you can use that information to better develop your operational strategies for the down season. With the right data, you can
Look at staffing expenses historically, compare them to sales and revenue data in past down seasons, and identify how many staff members you can afford moving forward
Explore how food storage and inventory management expenses shift during the down season so you can right-size your orders while still giving your culinary staff some freedom to experiment
Project the costs of deep cleaning parts of your establishment based on current costs for cleaning supplies and staff compared to historic expense records for similar projects in past years
While many of these projections depend on historic data, you don’t always need years of information to pull from. Even being able to look back at a month or two of information can be valuable in turning observations into hard and fast conclusions based on real-world data. Over time, that information becomes more valuable because you’ll have access to information gathered over years.
Effective expense reporting and calculations pay operational dividends as you work to refine your business processes over time.
2. Improving customer service
If you’re working in the restaurant business, you know your customers are essential to your revenue. Successful restaurants rely on return business from loyal customers to stay in the black and grow over time. If you aren’t creating memorable, consistently positive customer interactions, you’ll eventually run out of people to serve and come to rely almost entirely on travelers who happen upon your restaurant.
While this kind of model may have been feasible in the past — sell a lot to tourists during busy travel seasons and use that revenue to carry you through the down times — it’s no longer feasible. Now that Yelp reviews are built into navigation systems and social media, restaurants can’t hide from bad word of mouth. Too many bad reviews mean that travelers using their phones to search for a restaurant will see the negative feedback and stay away.
Working hard to drive positive customer experiences is absolutely critical. And it isn’t easy. Some customer evaluations will inevitably be subjective. The vast majority of customers may love a dish, but one or two will leave bad reviews. Your waitstaff could be widely popular among patrons, but a few customers could have a negative experience for reasons outside the servers’ control. Mistakes happen, and different customers look for different things from restaurants. While you can’t prevent any sort of negative experience, you can put your restaurant in the best possible position for success. Here are some steps you can take to do this.
Getting customer feedback
The best way to understand how to create stronger customer experiences is to ask your patrons what they want. Feedback is a great way to understand what you’re doing well, what you need to work on, and whether or not customers are leaving your establishment happy.
Of course, surveys have been historically difficult to perform. Asking customers to fill out a sheet of paper on their way out of the restaurant — or sending it to them in the mail — results in fairly few responses. A small sample makes it difficult to figure out whether the feedback represents your operations as a whole or simply reflects an isolated incident. On top of all this, you don’t just need to collect the data; you also need to manually organize and analyze it.
Digital survey solutions make life easier. Digital forms, such as the survey forms we provide at JotForm, can go a long way in making data collection easier. You can use prebuilt templates or create your own options to get feedback from customers. Embed the form on your site, send it to patrons in your loyalty program, or email it along with receipts sent to patrons digitally. You can even use a tablet as part of the payment process and include the survey there.
Because digital surveys are so user friendly, customers are more likely to complete them. And the standardized responses you get from these surveys makes it easier to track the data via web apps and to view the results and analyze trends.
All told, digital surveys make it easier to collect and use customer feedback so you can make informed operational changes to fuel stronger experiences.
Training staff to escalate incidents
Negative incidents with customers can leave waitstaff scrambling to handle the conflict while keeping up with their other demands. Training staff in common methods to diffuse conflict and satisfy frustrated customers is a great first step in creating consistent positive interactions. Sometimes, though, nothing a server can do will change the customer’s behavior. In these cases, it’s important that your staff can identify early signs of a growing conflict and quickly escalate it so managers can step in.
Turning negative situations into positive or even neutral experiences can be valuable in retaining customers.
Handling online reviews with care
Negative feedback online can be tough to swallow, especially if it feels like a reviewer may have an agenda. However, responding aggressively or adversarially to reviews or social media posts will ultimately make you and your restaurant look bad. Work hard to avoid getting defensive. Instead, try to turn a negative review into an opportunity to recoup business by apologizing, trying to understand the customer’s complaint, and offering them an incentive to give your establishment a second chance.
Ensuring clear communication and expectation-setting
Few things fuel a negative experience more than customers expecting one thing and getting another. Make sure you use standard language to describe your dishes and ensure your staff knows what each item contains so they can answer customer questions accurately. It’s also important to make sure your servers understand how to communicate allergy concerns to kitchen teams and how to advise visitors on food safety issues.
Creating positive customer experiences is never easy, but it’s too important to push to the back burner.
3. Dealing with cleaning needs
Cleanliness isn’t just a matter of presentation. Yes, it’s essential that your seating areas and dining room are clean enough to make a good first impression and ensure customer comfort. But it’s also a major part of food safety.
Though it’s critical, cleaning is thankfully fairly straightforward. Here are a few quick tips to keep in mind:
Create a nightly routine clean-up process for your kitchen staff.
Deep clean the kitchen weekly.
Develop a quarterly or annual super deep clean for your kitchen that ensures you go above and beyond basic food safety requirements.
Don’t neglect unseen places in your dining room — the undersides of chairs and tables, the tops of molding on walls, etc. — as these areas can collect dust, dirt, and bacteria that can cause problems or make your restaurant less comfortable.
Wipe down the walls and ceilings, especially near tables, to clean up splatter and prevent dust from collecting on those surfaces.
Ensure the exterior of your restaurant is clean as well. Pick up litter, perform basic landscaping if you don’t hire someone to do this for you, wipe down signs, and clean windows.
Create a regular cleaning schedule for these dining room, entry, and outdoor tasks so that they aren’t forgotten.
Make a custom restaurant cleaning checklist that your teams can use to make sure they don’t forget any cleaning tasks.
First impressions are powerful. A dirty, dingy restaurant can push customers away and create health risks. Even if you aren’t going for a high-end vibe in your establishment, don’t sacrifice cleanliness. There’s a difference between casual and dirty.
4. Deploying a modern POS system
We already mentioned that you can use modern POS systems to build surveys into customer checkout processes. But if you’re asking, “What is a POS system in a restaurant?” improved checkout capabilities are only the tip of the iceberg. A digital POS solution can transform how you operate, and it does so in a variety of ways, including
Creating e-commerce-like checkout processes to give customers more payment options and make it easier for them to engage in loyalty programs
Allowing for free flow of information between front-of-house and kitchen teams: Digital POS solutions can create alerts when a kitchen is out of menu items and automatically send orders to the kitchen, prioritizing them for your team
Freeing your serving staff from manually writing orders, reducing human error and letting them focus more on customer interactions instead of clerical work
Digitizing all orders and transactions to more easily track data over time for inventory, customer behavior, and financial reporting
In practice, a modern POS platform can transform your restaurant operations by solving many problems between the front-of-house and kitchen teams, creating visibility and easy communication. This pays dividends over time by fostering stronger customer experiences and creating greater visibility into everyday operations.
5. Handling online operations
Consumers have done more than just embrace online interactions with brands. They now want blended experiences where they can seamlessly move between physical and digital channels. Restaurants have an opportunity to engage customers through digital channels to better meet their needs. But to do this, you must get online operations right in these three key areas:
1. Reservations
Create a digital reservation form and add it to your website or mobile app. You can integrate this form with a digital POS solution to simplify booking management and make it easier for customers to reserve a table. Alternately, use the form for staff members so they can file a reservation easily.
JotForm’s restaurant reservation form can serve as a template that helps you schedule reservations in a convenient way while logging special requests. Our templates are customizable so you can adjust the form for your specific needs.
2. Take-out and delivery orders
Takeout is becoming a new normal for restaurants of all types — so much so that many traditional restaurants are getting into the prepared food business so customers can pop in and buy a dish to go. Accepting orders online, sending instructions to the kitchen, and giving customers a clear idea of when to expect the order to be ready is critical.
And takeout is only a starting point. Many restaurants are also partnering with delivery services to use outsourced drivers for deliveries.
This is an area where JotForm’s digital restaurant order forms can pay off, giving restaurants access to easy to customizable digital forms they can use to track customer orders and ensure positive take-out or delivery experiences.
3. Catering orders
Many restaurants maintain catering operations as a side gig, and the catering services often become profit centers that operate in parallel to the restaurant. Catering can be great for publicity and brand awareness, but it’s also complicated.
Digital technologies overcome longstanding barriers to efficient catering operations. Letting customers book your services online and empowering teams to manage catering schedules digitally makes everybody’s life easier.
Whether you’re planning for a big event or preparing a few platters for pickup, an online form that handles orders and simplifies scheduling is invaluable. JotForm’s custom catering order forms let you set up fields for the catering products you offer, making it easier for customers to schedule services and simplifying backend management for your team.
Whether customers interact with you online or are regular visitors to your establishment, improving operations to better meet their needs is critical to the long-term success of your restaurant. Great food may get you off the ground, but positive experiences bring customers back over and over again. Using digital technologies and focusing on operational best practices can position you to not only put your restaurant on a path to success but also sustain growth over time. To get there, however, you also need to get your staff on board.
Training and staff management
Staff can be one of a restaurant owner’s biggest assets. A great chef can help you stand out in the marketplace. Efficient line cooks can keep the kitchen humming efficiently. Front-of-house workers can forge strong customer interactions and smooth over any rough customer experiences. Managers can help you stay on top of finances and keep your establishment running smoothly.
If your restaurant staff is happy and productive, then you’re probably going to end up in a good place. If they’re unhappy and quitting on you, then you’re going to struggle to maintain consistency in your products and services.
When thinking about how to manage restaurant staff, it’s important to look beyond the basics and consider the role your staff can play in creating value for your business. Ultimately, an engaged, skilled staff can help you advance your business.
What kind of staff do most restaurants need?
Restaurant staffing demands will vary substantially depending on the size of your establishment and customer base. However, there are a few roles that just about every restaurant needs to fill:
Head chef: manages kitchen staff, takes the lead on menu choices, and is responsible for quality and consistency during food prep
Line cooks/sous chefs: provide support to the head chef, possibly taking ownership of specialty roles in the kitchen
Pastry chef: prepares desserts and consults with chef on dessert-related menu items; is rarely a dedicated staff member in smaller restaurants
Expediter: manages orders coming into the kitchen, organizes food prep, and serves as an interface between the front and back of the house; often part of head chef responsibilities in small establishments
Bartender: provides bar service and, in some cases, is responsible for purchasing and inventory management behind the bar
Dishwasher: washes dishes and handles odd jobs in the kitchen
Bussers: clear tables and provide basic cleaning in the front of the house
Waitstaff: take orders, serve food, and function as the primary customer-facing contact for patrons
Host/hostess: welcomes guests, shows them to their tables, and manages reservations
Floor manager/maitre D’: manages the front-of-house staff and oversees customer-facing interactions
This is a (by no means exhaustive) peek at a typical restaurant’s staff, but it only scratches the surface of what’s possible. These are the essential roles in a restaurant. Many establishments will also have bookkeepers, accountants, decorators, purchasing specialists, or professionals in similar roles.
The key here isn’t so much that you need all of these roles but that a restaurant relies on a lot of people working together and working really hard to stay on top of everyday tasks. If you don’t invest in your staff, things can fall apart quickly. It’s important to be strategic about hiring and retaining workers so your human resources processes align with your operational needs.
How should restaurants handle typical HR tasks?
Hiring, staff retention, training, engagement, and termination are critical HR tasks that can sometimes slip under the radar in restaurants. Here are some tips to help you handle these complex processes.
Hiring
Expand your candidate pool
Restaurant staff hiring is harder than it may seem. Working in a restaurant requires social and relational skills that are difficult to measure. Waitstaff need to be willing to serve with a smile, even when faced with unfriendly guests. Managers need to deal with complex scheduling and oversee roles that often face high turnover. When it comes to kitchen staff, the phrase, “If you can’t stand the heat, get out of the kitchen,” is a cliche for a reason. Not everybody can handle the stress of working in a restaurant kitchen.
Posting a job ad on your website and in the local newspaper isn’t enough. By expanding your reach to more candidates, you can interview a wider range of prospects, and you’ll be more likely to find individuals with high potential. Here are a few strategies to consider:
Use online job boards to help prospects find you.
Network, network, and network some more. Go to job fairs, get involved in community groups, and develop relationships with caterers or food-service businesses in your area. They may be able to suggest candidates looking for more work than they can offer.
Connect with local or regional culinary institutes — many community colleges have culinary arts programs — to identify promising chefs looking to get started as sous chefs or line cooks.
Leverage social media to get the word out about job opportunities.
Widening your hiring net will expose you to more promising candidates for a variety of roles in your restaurant.
Don’t neglect job descriptions
A good job description will help a candidate understand your job while showcasing why your establishment is a great place to work. Take the time to refine your job description. If you put a positive spin on your opportunity, this can go a long way in attracting candidates. Formulating the job post isn’t just a throw-away task; it’s a key marketing tactic.
Standardize your restaurant staff hiring processes
Staff-related issues open restaurants up to accusations of discrimination. There’s no way to sugar coat this. If a candidate thinks you didn’t provide a fair chance for a job due to discrimination, you can face accusations of wrongdoing and potential investigations.
One of the best ways to avoid these kinds of problems is to standardize your processes so that, as much as possible, every job candidate for a certain role has the same experience. Things to standardize include
What the interview process looks like. A phone screening followed by an in-person interview involving direct supervisors is a common tactic. For roles with specialty skills, some sort of skills assessment is often appropriate.
Who is involved in interviews. If your floor manager takes the vast majority of your waitstaff interviews, but the restaurant owner steps in occasionally without clearly justifiable reasons, it could make candidates who hear about other applicants’ experiences uncomfortable.
The information you require. Getting a resume, cover letter, references, and similar materials from candidates is normal. But asking for different things from prospects for the same role can look bad. Standardize what information you’ll need and make those requirements clear from the start.
Applications. Create digital applications for different job roles to make life easier for your team and applicants alike. JotForm provides a variety of job application templates to help you get started.
This may sound overly rigid, but sites like Glassdoor don’t just review what it’s like to work with companies; they also give individuals the opportunity to share their experience applying for jobs with businesses. If candidates feel mistreated, they may share that with others. If you ask something unusual from them, other candidates may find out about that when reading about others’ experiences.
Standardization protects you while making restaurant staff hiring a bit easier because processes are defined and you’ll get roughly the same information from all applicants.
Retention, engagement, and training
These three issues are deeply linked.
Retaining skilled workers helps you create a stable, productive, and efficient operational climate for your restaurant. It’s easier to provide consistent service and grow your business when you aren’t fighting against constant turnover.
You can’t retain workers if they aren’t engaged. Employees who are engaged in their work tend to feel that what they do has a purpose and are therefore more motivated to strive for excellence each day.
Restaurant staff training is the glue holding retainment and engagement strategies together. By investing in your staff, you can help them grow their skills, move into more fulfilling job roles, envision a long-term place in your business, and feel valued in their work.
Retainment, engagement, and training are highly complex issues, and best practices often vary based on your specific restaurant and business model. That said, here are some tips to help you start thinking about your staffing opportunities:
Today’s employees, particularly millennials, value work that they consider meaningful. Help them feel connected to the success of your business, and they’ll be more likely to see purpose in their work.
A worker leaving your company isn’t necessarily a bad thing. Many individuals stay at roles for just a few years as they constantly look for new lifestyle and career opportunities. Take time to understand why employees leave so you can adjust your retainment strategies accordingly.
Relationships are integral to happiness in the workplace. Take time to listen to your staff, give them a voice in the decision-making process, and value them as people, not just workers. This can build trust and reinforce the idea that you value your staff. This doesn’t mean sacrificing authority; it means creating a culture of transparency and respect across your establishment.
Create clear pathways for career growth. Even if it means sometimes losing a skilled worker to a good job elsewhere, focusing on skills growth toward higher-level restaurant positions can help employees envision a long-term career in the industry.
Use slow times of year to focus on training and development. Restaurants often experience seasonal peaks and valleys. Take advantage of slow times to help your staff grow.
Helping develop employees can go a long way in keeping them happy and productive. But sometimes, a worker simply isn’t a fit for your restaurant. Termination is never easy, but it’s sometimes necessary.
Termination
Our advice here is similar to what we highlighted in hiring: Standardize your processes, and clearly communicate expectations to protect yourself against legal problems. Set clear and firm policies for
Probationary processes. When employees are underperforming, many businesses put them in a probationary phase where managers create improvement plans, communicate them to the employee in question, and make clear that failing to improve could lead to termination. This helps staff understand that termination could be on the horizon and gives them clear reasons why their jobs are at risk.
Severance. Clear guidelines about severance benefits help employees understand what to expect when they are fired.
Fireable offenses. Some behavior can be considered justification for immediate termination. Some of these behaviors, like theft, are obvious and easy to create policies around. Others, such as willfully neglecting work tasks, leave room for interpretation. Clearly define behaviors that will lead to immediate termination, making sure employees understand them and providing practical examples to avoid confusion.
Termination is always a difficult process, but standardization and clear communication make it more manageable.
How do you build scheduling?
Restaurant staff scheduling is often complex, as employees often need to spread work over varied shifts based on their availability. Digitizing your restaurant scheduling process can make life much easier. You can use digital tools to
Keep employee details in one place for easy analysis
Document worker skills to avoid competency gaps on certain shifts
Record employee availability so you can more easily optimize schedules
Flag potential conflicts and track hours automatically based on data in the system
Dedicated scheduling apps make all of this easier, saving you from excessive manual data entry as you work to craft schedules that align with your needs.
Conclusion
Achieving management excellence in a digital world
Restaurants must provide excellent food and service to stand out in a crowded market. Your ability to manage your establishment and keep staff happy is a key part of this process. As digital technologies become mainstream in the sector, you have new opportunities to leverage data and get ahead of your competitors.
Whether you’re seeking custom forms or advice on how digital documentation and records can help you run your restaurant better, JotForm would be happy to help. We pride ourselves on making digital documentation easy through customizable form templates that help you get the information you need to run your restaurant and keep it organized. Contact us today to learn more.
Notice all the examples above are essentially numbers-based. We’ll get to some of the caveats of how the numbers can be used (because sometimes you don’t need a unit), but this is for number math, not strings or anything like that.
This is perhaps the most valuable feature of calc()! Almost every example above has already done this, but just to put a point on it, here it is mixing different units:
/* Percentage units being mixed with pixel units */
width: calc(100% - 20px);
That’s saying: As wide as the element is, minus 20 pixels.
There is literally no way to pre-calculate that value in pixels alone in a fluid width situation. In other words, you can’t preprocess calc() with something like Sass as an attempted complete a polyfill. Not that you need to, as the browser support is fine. But the point is that it has to be done in the browser (at “runtime”) when you mix units in this way, which is most of the value of calc().
Those probably could be preprocessed as they mix units that aren’t relative to anything that is determined at runtime.
Comparison to preprocessor math
We just covered that you can’t preprocess the most useful things that calc() can do. But there is a smidge of overlap. For example, Sass has math built into it, so you can do things like:
Even math with units is working there, adding same-unit values together or multiplying by unitless numbers. But you can’t mix units and it has similar limitations to calc() (e.g. like multiplying and dividing must be with unit-less numbers).
Show the math
Even you aren’t using a feature that is uniquely possible only with calc(), it can be used to “show your work” inside CSS. For example, say you need to calculate exactly 1?7th the width of an element…
.el {
/* This is easier to understand */
width: calc(100% / 7);
/* Than this is */
width: 14.2857142857%;
}
That might pan out in some kind of self-created CSS API like:
I imagine it has to do with negative numbers somehow, as using negative numbers (e.g. calc(5vw - -5px)) is OK. I suppose that makes something like calc(5vw--5px) weird, especially in how custom properties use double-dashes (e.g. var(--padding)).
Multiplication and division do not need the whitespace around the operators. But I’d think good general advice is to include the space for readability and muscle memory for the other operators.
Whitespace around the outsides doesn’t matter. You can even do line breaks if you’d like:
.el {
width: calc(
100% / 3
);
}
Careful about this, though: no spaces between calc() and the opening paren.
.el {
/* Invalid 👎 */
width: calc (100% / 3);
}
Nesting calc(calc());
You can but it’s never necessary. It’s the same as using an extra set of parentheses without the calc() part. For example:
You don’t need those inside calc() because the parens work alone:
.el {
width: calc(
(100% / 3)
-
(1rem * 2)
);
}
And in this case, the “order of operations” helps us even without the parentheses. That is, division and multiplication happen first (before addition and subtraction), so the parentheses aren’t needed at all. It could be written like this:
.el {
width: calc(100% / 3 - 1rem * 2);
}
But feel free to use the parens if you feel like it adds clarity. If the order of operations doesn’t work in your favor (e.g. you really need to do the addition or subtraction first), you’ll need parens.
.el {
/* This */
width: calc(100% + 2rem / 2);
/* Is very different from this */
width: calc((100% + 2rem) / 2);
}
CSS custom properties and calc() ?
Other than the amazing ability of calc() to mix units, the next most awesome thing about calc() is using it with custom properties. Custom properties can have values that you then use in a calculation:
I’m sure you can imagine a CSS setup where a ton of configuration happens at the top by setting a bunch of CSS custom properties and then letting the rest of the CSS use them as needed.
Custom properties can also reference each other. Here’s an example where some math is used (note the lack of a calc() function at first) and then later applied. (It ultimately has to be inside of a calc().)
Custom properties can come from the HTML, which is a pretty darn cool and useful thing sometimes. (See how Splitting.js adds indexes to words/characters as an example.)
div {
/* Index value comes from the HTML (with a fallback) */
animation-delay: calc(var(--index, 1) * 0.2s);
}
Adding units later
In case you’re in a situation where it’s easier to store numbers without units, or do math with unit-less numbers ahead of time, you can always wait until you apply the number to add the unit by multiplying by 1 and the unit.
html {
--importantNumber: 2;
}
.el {
/* Number stays 2, but it has a unit now */
padding: calc(var(--importantNumber) * 1rem);
}
Messing with colors
Color format like RGB and HSL have numbers you can mess with using calc(). For example, setting some base HSL values and then altering them forming a system of your own creation (example):
The attr() function in CSS looks appealing, like you can yank attribute values out of HTML and use them. But…
<div data-color="red">...</div>
div {
/* Nope */
color: attr(data-color);
}
Unfortunately, there are no “types” in play here, so the only thing attr() is for are strings in conjunction with the content property. That means this works:
div::before {
content: attr(data-color);
}
I mention this, because it might be tempting to try to pull a number in that way to use in a calculation, like:
Browser DevTools will tend you show you the calc() as you authored it in the stylesheet.
Firefox DevTools – Rules
If you need to figure out the computed value, there is a Computed tab (in all browser DevTools, at least that I know about) that will show it to you.
Chrome DevTools – Computed
Browser support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome
Firefox
IE
Edge
Safari
19*
4*
11
12
6*
Mobile / Tablet
Android Chrome
Android Firefox
Android
iOS Safari
80
68
80
6.0-6.1*
If you really needed to support super far back (e.g. IE 8 or Firefox 3.6), the usual trick is to add another property or value before the one that uses calc():
There are quite a few known issues for calc() as well, but they are all for old browsers. Can I use… lists 13 of them, here’s a handful:
Firefox <59 does not support calc() on color functions. Example: color: hsl(calc(60 * 2), 100%, 50%).
IE 9 – 11 will not render the box-shadow property when calc() is used for any of the values.
Neither IE 9 – 11 nor Edge support width: calc() on table cells.
Use-case party
I asked some CSS developers when they last used calc() so we could have a nice taste here for for how others use it in their day-to-day work.
I used it to create a full-bleed utility class: .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } I’d say calc() is in my top 3 CSS things.
I used it to make space for a sticky footer.
I used it to set some fluid type / dynamic typography… a calculated font-size based on minimums, maxiums, and a rate of change from viewport units. Not just the font-size, but line-height too.
If you’re using calc() as part of a fluid type situation that involves viewport units and such, make sure that you include a unit that uses rem or em so that the user still has some control over bumping that font up or down by zooming in or out as they need to.
One I really like is having a “content width” custom property and then using that to create the spacing that I need, like margins: .margin { width: calc( (100vw - var(--content-width)) / 2); }
I used it to create a cross-browser drop-cap component. Here’s a part of it:
I used it to make some images overflow their container on an article page.
I used it to place a visualization correctly on the page by combining it with padding and vw/vh units.
I use it to overcome limitations in background-position, but expecially limitations in positioning color stops in gradients. Like “stop 0.75em short of the bottom”.
It’s not entirely clear if Cloudinary actually optimizes SVG, and their API is uploading-focused, but they do support “transformations” on SVG, and their fetch URL format is API-like.
Optimizing Directly Out of Design Tools
Typically, when you export SVG out of a design tool it is in dire need of optimization. Hence, all the tools in this article. The design tool itself can help though, at least somewhat.
Sketch’s svgo-compressor (there is also a Sketch-specific web app for this called SVGito)
