Your websites start fast until you add too much to make them slow. I personally love the idea of shipping less code to ultimately ship more value to the browser. Understanding browser APIs and what comes "for free" could actually lead to less reinventing the wheel, and potentially more accessibility as you use the tools provided.
We asked web builders that we admire the same question...
Thanks to our major sponsors in 2021. They are a big part of making this site possible.
Makers of Jetpack, WooCommerce, WordPress.com, and many other great software products we use.
- Frontend Masters
The best front-end engineering courses out there to advance your skills.
It’s all too easy to get caught up in the excitement of whizzing things around, but remember that the web is primarily an information system. When people are trying to read, animating text or looping animations that play nearby can be hugely distracting.
One of the best things you can do for your website is add a service worker, if you don't have one in place already. Service workers give your website super powers. If you do nothing else, this will be a huge boost to your site in 2022.
It was then that I realized that the paint worklet wasn’t adapting to [user] preferences. This might normally be a huge pain, but with CSS custom properties, I realized I could adapt the paint worklet’s rendering logic to a user’s preferred color scheme with relative ease!
Thanks to some standardization (with more on the way), the API is simple: seven pseudo-elements and eleven pseudo-classes that target (almost) every imaginable component and state of the trusty (and often overlooked) scrollbar. Sounds like a lot, but you can go very far with just three of them.
One thing people can do to make their websites better is to remember that you are not representative of all your users. Our life experiences and how we interact with the web is not indicative of how everyone interacts with the web.
How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about just the words, or how your readers will engage with those words? With these few tips in mind, you can make your site’s content easier to digest and more visually interesting for your visitors.
Ensuring accessibility is a clear path to making your website better. When you make your site accessible, you grow your audience, improve the experience for all people using it (not just those with accessibility needs), and you get SEO benefits as well.
It's neither just about having a disability nor about having a disability. That's an outdated way to think about it. Think: who only accesses a website when they are at their desk in a well-lit area, while wearing noise-cancelling headphones, and staring at a beautiful retina display? A very small group of people, and, ironically, usually only the people who are making websites for everyone else.
Websites (mostly) look kind of the same. The proliferation of frameworks, vector design tools, data-driven design and an imperative to maximize business value has led to a status quo of design by default. What if we decided to create joy with our work? After all, in a profoundly dark time for many, making someone smile or laugh with your work is a special thing.
Ask yourself when deciding to add something new to your site: What happens if I don't do this right now?
So often, I see inconsistent spacing—especially vertically—that makes content hard to scan and creates this subtle, disjointed feeling. The same goes for type: huge headings on small viewports, or heading hierarchies that visually have no contrast in size, rendering them useless in a visual sense.
In a world where developer experience is often the priority, it’s too easy to forget we’re using these tools to build experiences for other people. And we have a responsibility to build experiences that don’t put our site’s visitors at risk.
If there’s only one thing you can do to make your website better, then you could do a heckuva lot worse than taking some time to read it. Seriously, do more than look at the words—read them and take in everything that’s being said from the top to the very bottom. And really get in there. I’m talking about opening up everything in the navigation, expanding accordions, opening modals, and taking it all in. Read it the way Wendy’s makes their burgers: no cut corners or nothing.
Start clean, build up, and don’t be afraid to test weird features. Play around with layouts, colors, and fonts, but also try to change the copy—like using different tones, adding humor, perhaps some sarcasm—whatever fits you. Try new things, listen to your gut feeling, and then take a deep breath and disregard criticism.
Take two minutes right now and visit your current project in a browser. Then, using only the Tab key, you should be able to navigate between interactive elements including buttons, links, and form elements.
If I were to point out one thing that people can do is to make their website better, it is to take a moment to think about the most crucial actions that we want our users to be able to do on a page and make them as easy and accessible as possible.
I realize that not everyone can migrate their site over to Remix and that’s ok. The tagline of Remix is: Build better websites (sometimes with Remix). The one thing I think I want to encourage you to do to make your website better is to learn about and from Remix and apply some of the ideas to your website.
There is a huge and ever-widening gap between the devices we use to make the web and the devices most people use to consume it. It’s also no secret that the average size of a website is huge, and it’s only going to get larger. What can you do about this? Get your hands on a craptop and try to use your website or web app.
Performance budgets in web development are not a new idea, and in many respects go hand-in-hand with carbon budgets. Optimizing for performance should generally have a positive impact on your website’s energy efficiency. But a quantifiable carbon budget as well helps us look at every aspect of our website through the lens of sustainability, and may help us consider aspects that a performance budget alone wouldn’t cover.
Just take a minute to consider the implications of that: any third-party script on your site is allowing someone else to execute code on your web pages. That’s astonishingly unsafe.
We don't test for the fun of testing. We test to improve things. So, the next step is to learn from those tests. What worked well? What can be improved? How might we improve? Of course, you might not have the time and budget to improve everything at once. My advice is to prioritize and iterate.
If you can justify the effort of writing your own code, you become more familiar with web specifications and learn just how robust they are on their own. You also end up with something that can be easier to maintain long-term because it is closest to the core evolutionary path of the web.
Life is imperfect, unpredictable, and beautiful. We can walk through the same forest every day and see different color leaves. We can look up at the clouds every minute and watch a whole new formation. The physical world is transient and ever-changing. What if our designs were a little more like this?
If you showcase your favorite type of work, you’ll get more requests for similar projects or jobs — feeding back into a virtuous cycle of doing more of what you love.