This tutorial will help you transform an app that doesn’t work offline into a PWA that works offline and shows an update available icon. In this article, Jad Joubran will show you a step-by-step tutorial for adding a service worker to an existing one-page website. You will learn how to precache assets with workbox, handle dynamic caching as well as handle updates to your PWA. Follow along and see how you can also apply these techniques on your website.
Read more…
Web developers know what they’re doing in terms of optimizing a website for page speed, but is it enough in Google’s eyes? When it comes to mobile loading speeds, your website can always be faster. And if you’ve implemented all of the caching, minification and other optimizations you possibly can, it’s time for the web designer to step in and get creative. As a writer, Suzanne Scacca takes care of the on-page optimizations while the developer she hands content over to does the technical SEO stuff. Web designers and developers can easily tackle the parts of speed optimization that are in each of their wheelhouses.
Read more…
When customers interact with your brand, they’re not aware of what’s going on backstage, and there is no reason they should. All they perceive is the play you’re presenting, the story you’re sharing, and the solution it represents for them. There is only one brand experience. At the end of the day, customers are not tasting individual ingredientz, they’re eating the entire meal. At once. In sit-downs that keep getting shorter. When the individual actors go off script, as great as they might sound solo, the brand experience breaks.
Read more…
We are still at the beginning stages of the new technological revolution — the exciting time when technologies like AR will be an expected part of our daily routines — and it’s our opportunity to create a solid foundation for the future generation of designers. Designers who work on AR projects have a role of explorers — they experiment and try various approaches in order to find the one that works best for their product and delivers the value for people who will use it. In this article, Gleb Kuznetsov shares his personal experience and advice on how to create and design AR apps.
Read more…
Email is a great tool for, first, acquiring leads from a website and, later, converting and retaining them. But just as you now approach web design with a mobile-first mentality, the same switch should occur as you design email marketing campaigns for your clients. If users are more likely to open email on mobile and we know that opened emails convert at a higher rate than those that go unopened, wouldn’t it make sense for designers to prioritize the mobile experience when designing emails? In this article, Suzanne Scacca brings you some facts and tips you need to know for designing mobile-first emails.
Read more…
The web is wonderfully diverse and unpredictable because of wonderfully diverse people shaping it. In this new series of short interviews, we talk to interesting people doing interesting work in our industry and sharing what they’ve learned. You probably have heard of JAMstack — the new web stack based on JavaScript, APIs, and Markup — but what does it mean for your workflow and when does it make sense in your projects? We’ve kindly asked Phil Hawksworth to run a webinar explaining what JAMStack actually means and when it makes sense, as well as how it affects tooling and front-end architecture.
Read more…
Like all good things, Google Fonts do come with a cost. Each font carries a weight that the web browser needs to download before they can be displayed. Google Fonts are easy to implement, but they can have a big impact on your page load times. With the correct setup, the additional load time isn’t noticeable. However, get it wrong and your users could be waiting up to a few seconds before any text is displayed. In this article, Danny Cooper will explore how we can load them in the most optimal way.
Read more…
There is a wide variety of choices when it comes to creating a PDF from a web application. In this article, Rachel Andrew takes a look at the tools that are available and shares her recommendations to help you find the tool that works best for you. She’ll explore ways in which we can generate a PDF directly from a web application on the fly. It isn’t a comprehensive list of tools, but instead Rachel is aiming to demonstrate the different approaches. If you have a favorite tool or any experiences of your own to share, please add them to the comments below.
Read more…
Creating complex SVG animations can be a challenging and tedious task — but not anymore. In this article, Mikołaj Dobrucki will show you how to create path animations for the web using SVGator, an online app created especially for the purpose of animating SVG files. It is a web-based app that allows you to import static SVG files, animate them using a user-friendly visual interface, and export them as animated SVG. Exported animations are CSS-based and ready to use on the web.
Read more…
Figma has become a very popular tool for web and product designers, mainly because of its focus on design teams and team libraries. In this article, Emiliano Cicero aims to help you avoid mistakes and assist you with the building of your own Figma component library. He’ll also cover in detail the components’ organization and will give you a possible solution if you have a large number of icons in the library.
Read more…
