As CEO of Cantilever (a NYC and Copenhagen-based web design and development consultancy), I've seen first-hand how images are always at the center of storytelling for our customers - whether they are in media, arts, or technology. Customers like Esquire Magazine and Droga5 needed their images to look sharp and dynamic to make the best impression.
The Droga5 news site, with images optimized and delivered by imgix
At Cantilever, we also care a lot about performance, and we love tools that make our sites faster and easier for our clients to administer. We don’t have a default “stack” we operate in, instead choosing to select tools based on the specific needs of each client. However, at any given time, our work tends to gravitate towards different techniques. These days the JAM (Javascript, API, and Markup) stack is our most common approach. If you want to build a fast-loading and engaging marketing or news site that’s easy to build and maintain, here’s our recommended set of tools:
React.js 🌟
React is the most popular JavaScript framework, and for a good reason. We have quibbles with its efficiency and its CSS-in-JS styling philosophy, but overall have found that it allows us to deliver excellent user experiences with much less effort. Clients like to know that React has a huge and thriving community.
Next.js or Gatsby.js 🤘
For building server-side rendered React apps, we use Next.js. For sites that are better with static site generation, we lean towards Gatsby. These frameworks are lightning-fast, SEO-friendly, and super easy to use. Plus, they allow us to build web apps that load quickly and perform well, which is essential for delivering the high-quality user experience we call “Digital Hospitality.”
imgix 🖼️
Of course, we have to shout out imgix, one of our favorite tools. We have used it since 2016 to deliver optimal image performance without having to think about how to resize images for different browsers or devices.
imgix is a service that combines content delivery, API-based image processing, and asset management in one package. It provides SDKs that are super easy to integrate with, like the imgix.js JavaScript library. It takes care of generating srcset and other optimization on our site. In combination, the imgix approach allows us to ensure images on our sites are as fast as the internet allows. As opposed to other responsive image techniques, imgix makes it so our clients don’t have to think about cropping or safe zones. They just upload their images to their CMS, and imgix does the rest.
Webpack 📦
Webpack is a lightning-fast build tool that has been built with the JAMstack in mind. It is bundled with Next.js and Gatsby and is a natural fit for projects using those frameworks. Webpack has a simple and intuitive API that most devs these days are familiar with, allowing us to avoid build process headaches. It has some annoying aspects and can feel limited, but it tends to get the job done, particularly for these types of sites.
Sanity CMS 🤓
Sanity is an open-source headless CMS that can easily be added to a typical Next.js or Gatsby website. Since it is an add-on, the CMS does not dictate the architecture of the website and could easily be swapped out for something else if needed in the future. Sanity allows us to create custom schemas and manage content in a user-friendly interface.
Lando ✨ & Docker 🐳
We’ve utilized many local development approaches over the years. The most important qualities in a local development environment are that it is easy and fast to set up, and that it rarely breaks. Lando has proven to be the most resilient and portable we have ever used. Lando is built on top of Docker, which is a rock-solid tool for running applications consistently in any environment.
Chakra UI 🎨
We are obsessive about efficient, user-friendly code at Cantilever, so we have always been resistant to UI frameworks because they traditionally create code bloat and slowdowns. Chakra has proven itself to be a framework without these downsides, allowing us to create our UIs much faster, at the same level of quality. With more and more of our sites in Chakra, we are able to reuse methodologies in each new project, saving more time so we can deliver more value to our clients.
Ghost Inspector 👻
Marketing sites tend not to benefit from overly tight unit or feature testing, but need some kind of automated testing to ensure they are stable. We searched for a good solution for years before finding Ghost Inspector. It is an intuitive “onion-skin” testing tool that operates entirely off of our site, with no specific integration to the codebase. It can do basic visual comparison testing to let you know when something changes, or more complex multi-step tests. Non-technical users are able to learn and configure it, saving time for dev teams. We highly recommend that all public-facing web platforms use Ghost Inspector.
Wrapping Up
This toolkit gives us everything we need to build amazing sites that provide an exceptional user experience for our clients. We never use software just because it is new and shiny – new tools have to earn our trust. These have stood the test of time and proven to be an efficient and effective stack for marketing, news, and blog sites of all sizes. imgix is a pivotal component in our strategy, allowing us to achieve top-notch performance even for media-heavy sites.
If you’re interested in learning more about our software stack, seeing how we build engaging sites, or having us consult on your projects, please don't hesitate to get in touch. We’d love to hear from you!
