With a few additions, WordPress websites can accommodate a responsive image use case known as art direction. Art direction gives us the ability to design with images whose crop or composition changes at certain breakpoints. In this article, Laurie Laforest will show you how to set up a WordPress theme to support art direction in a […]
Improving every tiny thing by 1% dramatically improves performance. This applies to what Marko Dugonjić did in the SGS project and its intricate navigation. By focusing on the finer details, improving each detail by a tiny bit, he significantly reduced the complexity of the navigation and improved loading times, while keeping the navigation appealing and
Through this case study on redesigning the Building Social website, Marko Dugonijć will share some simple yet often overlooked front-end techniques that defer the use of JavaScript as much as possible, while providing some neat JavaScript enhancements, too. By being creative and using the basic tools at your disposal, you can improve performance and accessibility,
Four years ago, Jason Grigsby asked a surprisingly difficult question: How do you pick responsive image breakpoints? A year later, he had an answer: Ideally, we’d set responsive image performance budgets to achieve “sensible jumps in file size.” Cloudinary built a tool that implements this idea, and the response from the community was universal: “Great!
“The Smashing Book #5 has completely changed the potential for books around the web. It dives deep into a topic and continues to dive deeper until you feel as though your brain might explode from the knowledge. The bar has been raised significantly.” For this article, we asked Paul Scrivens if he wanted to review our
Designers and developers have to take a lot of things into account when designing a website, from visual appearance to functional design. In this article, Nick Babich will focus on the main principles, heuristics and approaches that will help you to create a great user experience for your website. Treat your website as a continually
layouts for a long time now. So, it is recommended that you place your email elements in a grid-based layout, rather than arbitrarily placed. Moreover, any element that might overlap needs to be added to a different layer. The email shown above by Charity: Water looks like this when exported to a tabular layout: View
Some time ago, designers and developers built the same kinds of websites over and over again, so much so that they were mocked by people in our own industry. Today, the design landscape has changed completely. We’re equipped with new and powerful tools — CSS Grid, CSS custom properties, CSS shapes and CSS writing-mode, to
In terms of how to handle typography in mobile web design, it appears that simpler and safer works best. In this article, Suzanne Scacca will break down the elements you need to pay attention to in mobile typography and then visit what the research says about how to handle them. She will give you a
With the advent of responsive web design and the mobile-first approach, it’s been seven wonderful years since any new concepts have compelled us to adapt the way in which we write CSS at the base level. These techniques are at the bedrock of most web developers lives, and they’ve served us well, but alas, times
